Adding episode 24 Transform Feedback code

Author: Andrew Adamson

24.transformfeedback.example.js

@@ -0,0 +1,246 @@
+/*
+    This is an example of a very basic particle system
+    using transform feedback. 
+
+    It's important to remember that not all particle
+    systems *need* transform feedback. It's just a tool
+    you can use when the number of particles grow very
+    large. This animation could have been done entirely
+    in JavaScript, but you would run out of CPU capcity
+    and saturate your bandwidth on most hardware.
+*/
+
+const vertexShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage: vert
+
+uniform float uRandom;
+
+layout(location=0) in float aAge;
+layout(location=1) in float aLifespan;
+layout(location=2) in vec2 aPosition;
+layout(location=3) in vec2 aVelocity;
+
+out float vAge;
+out float vLifespan;
+out vec2 vPosition;
+out vec2 vVelocity;
+out float vHealth;
+
+/* From TheBookOfShaders, chapter 10. This is a slightly upscaled implementation
+ of the algorithm:
+    r = Math.cos(aReallyHugeNumber);
+ except it attempts to avoid the concentration of values around 1 and 0 by 
+ multiplying by a very large irrational number and then discarding the result's
+ integer component. Acceptable results. Other deterministic pseudo-random number 
+ algorithms are available (including random textures).
+*/
+float rand2(vec2 source)
+{
+    return fract(sin(dot(source.xy, vec2(1.9898,1.2313))) * 42758.5453123);
+} 
+
+void main()
+{
+    if (aAge == aLifespan)
+    {
+        float s  = float(gl_VertexID);
+        float r1 = rand2(vec2(s, uRandom));
+        float r2 = rand2(vec2(r1, uRandom));
+        float r3 = rand2(vec2(uRandom, r1 * uRandom));
+
+        vec2 direction = vec2(cos(r1 * 2.0 + .57), sin(r1 * 2.0 + .57)); // Unit vector, mostly pointing upward
+        float energy = .2 + r2; // particles with very little energy will never be visible, so always give them something.
+        vec2 scale = vec2(.05, .3); // direction*energy gives too strong a value, so we scale this to fit the screen better.
+
+        // use values above to calculate velocity
+        vVelocity = direction * energy * scale;
+
+        // Particles will be emitted from below the frame
+        vPosition = vec2(.5 - r1, -1.1);
+
+        vAge = -r3 * .01;
+        vLifespan = aLifespan;
+    }
+    else
+    {
+        // Note that even values you **arn't** updating
+        // must be assigned to the varying or else the 
+        // value will be 0 in the next draw call.
+        vec2 gravity = vec2(0.0, -0.02);
+
+        vVelocity = aVelocity + gravity;
+        vPosition = aPosition + vVelocity;
+        vAge = min(aLifespan, aAge + .05);
+        vLifespan = aLifespan;
+    }
+
+    vHealth = 1.0 - (vAge / vLifespan);
+    
+    gl_Position = vec4(vPosition, 0.0, 1.0);
+    gl_PointSize = 5.0 * (1.0 - vAge);
+}`;
+
+const fragmentShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage: frag
+
+precision mediump float;
+
+in float vHealth;
+
+out vec4 fragColor;
+
+void main()
+{
+    // Point primitives are considered to have a width and
+    // height of 1 and the center is at (.5, .5). So if we
+    // discard fragments beyond this distance, we get a
+    // point primitive shaped like a disc.
+
+    float distanceFromPointCenter = distance(gl_PointCoord.xy, vec2(0.5));
+    if (distanceFromPointCenter > .5) discard;
+
+    fragColor = vec4(.3, 0.4, 0.8, vHealth);
+}`;
+
+const canvas = document.querySelector('canvas');
+const gl = canvas.getContext('webgl2');
+const program = gl.createProgram();
+
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vertexShaderSource);
+gl.compileShader(vertexShader);
+gl.attachShader(program, vertexShader);
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fragmentShaderSource);
+gl.compileShader(fragmentShader);
+gl.attachShader(program, fragmentShader);
+
+// This line tells WebGL that these four output varyings should
+// be recorded by transform feedback and that we're using a single
+// buffer to record them.
+gl.transformFeedbackVaryings(program, ['vAge', 'vLifespan', 'vPosition', 'vVelocity'], gl.INTERLEAVED_ATTRIBS);
+
+gl.linkProgram(program);
+
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.log(gl.getShaderInfoLog(vertexShader));
+    console.log(gl.getShaderInfoLog(fragmentShader));
+    console.log(gl.getProgramInfoLog(program));
+}
+
+gl.useProgram(program);
+
+// This is the number of primitives we will draw
+const COUNT = 1000000;
+
+// Initial state of the input data. This "seeds" the
+// particle system for its first draw.
+let initialData = new Float32Array(COUNT * 6);
+for (let i = 0; i < COUNT * 6; i += 6) {
+    const px = Math.random() * 2 - 1;
+    const age = Math.random() * -3 + .75;
+    const lifespan = Math.random() * 3 + 1;
+
+    initialData.set([
+        age,                    // vAge
+        lifespan,               // vLifespan
+        px, -1.1,               // vPosition
+        0,0,                    // vVelocity
+    ], i);
+
+}
+
+
+// Describe our first buffer for when it is used a vertex buffer
+const buffer1 = gl.createBuffer();
+const vao1 = gl.createVertexArray();
+gl.bindVertexArray(vao1);
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer1);
+gl.bufferData(gl.ARRAY_BUFFER, 6 * COUNT * 4, gl.DYNAMIC_COPY);
+gl.bufferSubData(gl.ARRAY_BUFFER, 0, initialData);
+gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 24, 0);
+gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 24, 4);
+gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 24, 8);
+gl.vertexAttribPointer(3, 2, gl.FLOAT, false, 24, 16);
+gl.enableVertexAttribArray(0);
+gl.enableVertexAttribArray(1);
+gl.enableVertexAttribArray(2);
+gl.enableVertexAttribArray(3);
+
+// Initial data is no longer needed, so we can clear it now.
+initialData = null;
+
+// Buffer2 is identical but does not need initial data
+const buffer2 = gl.createBuffer();
+const vao2 = gl.createVertexArray();
+gl.bindVertexArray(vao2);
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer2);
+gl.bufferData(gl.ARRAY_BUFFER, 6 * COUNT * 4, gl.DYNAMIC_COPY);
+gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 24, 0);
+gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 24, 4);
+gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 24, 8);
+gl.vertexAttribPointer(3, 2, gl.FLOAT, false, 24, 16);
+gl.enableVertexAttribArray(0);
+gl.enableVertexAttribArray(1);
+gl.enableVertexAttribArray(2);
+gl.enableVertexAttribArray(3);
+
+// Clean up after yourself
+gl.bindVertexArray(null);
+gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+// This code should NOT be used, since we are using a single
+// draw call to both UPDATE our particle system and DRAW it.
+// gl.enable(gl.RASTERIZER_DISCARD);
+
+
+// We have two VAOs and two buffers, but one of each is
+// ever active at a time. These variables will make sure
+// of that.
+let vao = vao1;
+let buffer = buffer1;
+let time = 0;
+
+const uRandomLocation = gl.getUniformLocation(program, 'uRandom');
+
+// When we call `gl.clear(gl.COLOR_BUFFER_BIT)` WebGL will
+// use this color (100% black) as the background color.
+gl.clearColor(0,0,0,1);
+
+const draw = () => {
+    // schedule the next draw call
+    requestAnimationFrame(draw);
+
+    // It often helps to send a single (or multiple) random
+    // numbers into the vertex shader as a uniform.
+    gl.uniform1f(uRandomLocation, Math.random());
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Bind one buffer to ARRAY_BUFFER and the other to TFB
+    gl.bindVertexArray(vao);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, buffer);
+
+    // Perform transform feedback and the draw call
+    gl.beginTransformFeedback(gl.POINTS);
+    gl.drawArrays(gl.POINTS, 0, COUNT);
+    gl.endTransformFeedback();
+
+    // Clean up after ourselves to avoid errors.
+    gl.bindVertexArray(null);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
+
+    // If we HAD skipped the rasterizer, we would have turned it
+    // back on here too.
+    // gl.disable(gl.RASTERIZER_DISCARD);
+
+    // Swap the VAOs and buffers
+    if (vao === vao1) {
+        vao = vao2;
+        buffer = buffer1;
+    } else {
+        vao = vao1;
+        buffer = buffer2;
+    }
+};
+draw();