三個js 2d矩陣可視化

我想用三個js可視化2d矩陣。這些矩陣是神經網絡中神經元的狀態。矩陣不是很大（64 x 32）這些矩陣中的值將會改變，我希望這些新值在可視化中顯示。三個js 2d矩陣可視化

對於2d矩陣我想要一個神經元平面。

我曾嘗試創建一個粒子系統，使用一個平面幾何與數據矩陣中的神經元一樣多的頂點。

var width = 32; 
var height = 64; 
var planeGeometry = new THREE.PlaneGeometry(width, height, width - 1 , height - 1); 
var particlePlane = new THREE.ParticleSystem(planeGeometry, shaderMaterial);

在片段着色器每個粒子被賦予一個基礎紋理（白色圓圈）

gl_FragColor = texture2D(baseTexture, gl_PointCoord);

然後我使用包含數據矩陣值（灰度像素值）的第二紋理修改每個基本紋理。

// Sets particle texture to desired color 
// vertexPosition is a vec2 in coordinates local to the plane 
gl_FragColor = gl_FragColor * texture2D(dataTexture, vertexPosition);

在點共享我做了以下（不相關的線ommitted）計算vertexPosition：

uniform float width; 
uniform float height; 
varying vec2 vertexPosition; 

void main() 
{ 
    vertexPosition = vec2(position.x/width, position.y/height); 
}

這是我被逮住。 vertexPosition似乎沒有正確映射到dataTexture像素。我想要一個一對一的顆粒和像素之間的對應關係。

如何正確地將平面上的粒子/頂點位置映射到紋理中的等效像素位置？

我是三個js的新手，所以請隨時告訴我，我的方法是完全關閉。

來源

2014-02-23 Ian Danforth

爲了得到紋理座標，有準備使用投影矩陣在GLSL，這裏是什麼，我會作爲一個頂點着色器，你有XY位置在片段中變使用使用

varying vec2 vertexPosition; 

void main() { 
    vertexPosition = uv; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
}

然後vertexPosition。

來源

2014-02-23 12:57:19

對於未來的調試，我如何看到每個頂點的uv值？ –

看看這裏：http://stackoverflow.com/questions/15764785/debug-glsl-code-in-webgl –

三個js 2d矩陣可視化

回答

相關問題