三个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矩阵可视化

回答

相关问题