Three js 2d matrix visualization

Question

I am trying to visualize 2d matrices using Three js. These matrices are the states of the neurons in a neural network. The matrices are not huge (64 x 32) The values in these matrices will change and I want those new values to be displayed in the visualization.

For the 2d matrix I want a plane of neurons.

I have tried creating a particle system using a plane geometry with as many vertices as neurons in the data matrix.

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

In the fragment shader each particle is given a base texture (a white circle)

gl_FragColor = texture2D(baseTexture, gl_PointCoord);

And then I use a second texture containing the data matrix values (greyscale pixel values) to modify each base texture.

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

To calculate vertexPosition in the vertex share I do the following (irrelevant lines ommitted):

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

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

This is where I'm getting caught up. The vertexPosition does not seem to be mapping properly to the dataTexture pixels. I want a one to one correspondence between particles and pixels.

How do I properly map from the location of particles/vertexes on a plane to equivalent pixel locations in a texture?

I am new to three js, so please feel free to tell me my approach is totally off.

xavier.seignard · Accepted Answer · 2014-02-23 12:57:19Z

2

To get texture coordinates, there are ready to use projection matrix in glsl, here is what I would use as a vertex shader

varying vec2 vertexPosition;

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

Then you have the xy position to use in the fragment in the varying vertexPosition.

answered Feb 23, 2014 at 12:57

xavier.seignard

11.2k14 gold badges55 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ian Danforth Over a year ago

For future debugging how can I see the value of uv for each vertex?

xavier.seignard Over a year ago

Have a look here: stackoverflow.com/questions/15764785/debug-glsl-code-in-webgl

Collectives™ on Stack Overflow

Three js 2d matrix visualization

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related