Getting Vertex data in THREE.js

Question

I am creating a grid with a custom shader. In the vertex shader, I change the initial position of the geometric vertices. Then I need to access this new vertex position from outside the shader, how can I do this?

Answer 1

Instead of the conversion feedback (which WebGL 1.0 does not support), you will have to use the forwarder shader and floating point texture (this requires downloading the OES_texture_float extension). This is the only way to generate vertex buffer on GPU in WebGL. WebGL also does not support pixel buffer objects, so reading the output will be very inefficient.

However, here is how you can do it:

This will be an overview of OpenGL, not something specific.

First encode the vertex array this way (add the 4th component for the index):

 Vec4 pos_idx : xyz = Vertex Position, w = Vertex Index (0.0 through NumVerts-1.0) 

Saving the vertex index as a component of w necessary because OpenGL ES 2.0 (WebGL 1.0) does not support gl_VertexID .

Then you need a 2D floating point texture:

 MaxTexSize = Query GL_MAX_TEXTURE_SIZE Width = MaxTexSize; Height = min (NumVerts / MaxTexSize, 1); 

Create an RGBA floating-point texture with these sizes and use it as an FBO embedding of color 0.

Vertex Shader:

 #version 100 attribute vec4 pos_idx; uniform int width; // Width of floating-point texture uniform int height; // Height of floating-point texture varying vec4 vtx_out; void main (void) { float idx = pos_idx.w; // Position this vertex so that it occupies a unique pixel vec2 xy_idx = vec2 (float ((int (idx) % width)) / float (width), floor (idx / float (width)) / float (height)) * vec2 (2.0) - vec2 (1.0); gl_Position = vec4 (xy_idx, 0.0f, 1.0f); // // Do all of your per-vertex calculations here, and output to vtx_out.xyz // // Store the index in the W component vtx_out.w = idx; } 

Passthrough Fragment Shader:

 #version 100 varying vec4 vtx_out; void main (void) { gl_FragData [0] = vtx_out; } 

Drawing and reading:

 // Draw your entire vertex array for processing (as `GL_POINTS`) glDrawArrays (GL_POINTS, 0, NumVerts); // Bind the FBO color attachment 0 to `GL_TEXTURE_2D` // Read the texture back and store its results in an array `verts` glGetTexImage (GL_TEXTURE_2D, 0, GL_RGBA, GL_FLOAT, verts);