Simple Transform Feedback WebGL 2 demo


Vertex shader below just changes aPos.x value
<script id="shader-feed-vs" type="x-shader/x-vertex">#version 300 es
  in vec4 aPos;
void main(void) {
   gl_PointSize = 20.;
   gl_Position = vec4(-aPos.x, aPos.yzw);
}
</script> 
transformFeedbackVaryings links gl_Position to transformFeedback output
...
   var prog  = gl.createProgram()
   gl.attachShader(prog, getShader( gl, "shader-feed-vs" ))
   gl.attachShader(prog, getShader( gl, "shader-fs" ))
   gl.transformFeedbackVaryings( prog, ["gl_Position"], gl.SEPARATE_ATTRIBS )
   gl.linkProgram(prog)
We prepare 2 buffers, create TransformFeedback object and call draw() function
...
   bufA = gl.createBuffer()
   gl.bindBuffer(gl.ARRAY_BUFFER, bufA)
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([.8,0,0,1]), gl.DYNAMIC_COPY)

   bufB = gl.createBuffer()
   gl.bindBuffer(gl.ARRAY_BUFFER, bufB)
   gl.bufferData(gl.ARRAY_BUFFER, 4*4, gl.DYNAMIC_COPY)

   var transformFeedback = gl.createTransformFeedback()
   gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback)

   draw()
}
In draw() we bind 2 buffers, begin TransformFeedback and draw points
function draw(){
   gl.clear(gl.COLOR_BUFFER_BIT)

   gl.bindBuffer(gl.ARRAY_BUFFER, bufA)
   gl.vertexAttribPointer(aPosLoc, 4, gl.FLOAT, gl.FALSE, 0, 0)
   gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, bufB)

   gl.beginTransformFeedback(gl.POINTS)
   gl.drawArrays(gl.POINTS, 0, 1)
   gl.endTransformFeedback()

   gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null)

   var t = bufA;  bufA = bufB;  bufB = t
}
Points from vertex shader output are transfered into bufB. Then we unbind it and swap buffers for the next draw.

[1] D.Ginsburg, B.Purnomo OpenGL ES 3.0 Programming Guide. Second Edition
[2] D.Shreiner, G.Sellers, J.Kessenich, B.Licea-Kane OpenGL Programming Guide. Eighth Edition
The Official Guide to Learning OpenGL, Version 4.3


Simulations on GPU
updated   27 Jan 2016