Question

我正在尝试使用三个j来显示二维矩阵。这些矩阵是神经网络中神经元的状态。矩阵不是很大（64 x 32）这些矩阵中的值会发生变化，我希望这些新值能够显示在可视化中。

对于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 );

要计算顶点共享中的vertexPosition，我会执行以下操作（省略不相关的行）：

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

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

这是我陷入困境的地方。 vertexPosition似乎没有正确映射到dataTexture像素。我希望粒子和像素之间有一对一的对应关系。

如何从平面上的粒子/顶点的位置正确映射到纹理中的等效像素位置？

我是三个j的新手，所以请随时告诉我我的方法是完全关闭的。

Answer 1

要获得纹理坐标，可以在glsl中使用投影矩阵，这里我将用作顶点着色器

varying vec2 vertexPosition;

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

然后你可以在变化的vertexPosition中的片段中使用xy位置。

三个js 2d矩阵可视化

1 个答案: