Factor out the buffer updates from the draw call

src/music/features/visualizer/Renderer.ts

@@ -24,6 +24,8 @@ class Renderer {
         positions?: WebGLBuffer;
         normals?: WebGLBuffer;
         fft?: WebGLBuffer;
+        velocitiesRead?: WebGLBuffer;
+        velocitiesWrite?: WebGLBuffer;
     };
 
     constructor(
@@ -72,10 +74,27 @@ class Renderer {
             .build();
 
         this.initGL(gl, shader);
+        this.initMatrices(gl, shader);
         this.initBuffers(gl);
         this.drawScene(gl, shader);
     }
 
+    initMatrices(gl: WebGLRenderingContext, shader: Shader) {
+        const projectionMatrix = mat4.create();
+        mat4.perspective(
+            projectionMatrix,
+            (45 * Math.PI) / 180,
+            gl.canvas.clientWidth / gl.canvas.clientHeight,
+            0.1,
+            100.0
+        );
+        gl.uniformMatrix4fv(
+            shader.getUniform("uProjectionMatrix"),
+            false,
+            projectionMatrix
+        );
+    }
+
     initBuffers(gl: WebGLRenderingContext) {
         // Scale down the unit cube before we use it
         Cube.vertices = Cube.vertices.map(
@@ -136,20 +155,6 @@ class Renderer {
     }
 
     updateMatrices(gl: WebGLRenderingContext, shader: Shader) {
-        const projectionMatrix = mat4.create();
-        mat4.perspective(
-            projectionMatrix,
-            (45 * Math.PI) / 180,
-            gl.canvas.clientWidth / gl.canvas.clientHeight,
-            0.1,
-            100.0
-        );
-        gl.uniformMatrix4fv(
-            shader.getUniform("uProjectionMatrix"),
-            false,
-            projectionMatrix
-        );
-
         const modelViewMatrix = mat4.create();
         mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -1.5]);
         mat4.rotateX(modelViewMatrix, modelViewMatrix, Math.PI / 6);
@@ -175,18 +180,18 @@ class Renderer {
         );
     }
 
-    drawScene(gl: WebGL2RenderingContext, shader: Shader) {
+    updateBuffers(gl: WebGL2RenderingContext, shader: Shader) {
         if (
             this.buffers.indices === undefined ||
             this.buffers.positions === undefined ||
             this.buffers.normals === undefined ||
             this.buffers.fft === undefined
+            // this.buffers.velocitiesRead === undefined ||
+            // this.buffers.velocitiesWrite === undefined
         ) {
             throw new Error("failed to create buffers before rendering");
         }
 
-        this.updateMatrices(gl, shader);
-
         // Update cube buffers
         gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.positions);
         gl.vertexAttribPointer(
@@ -214,6 +219,7 @@ class Renderer {
 
         // Update fft
         this.analyser.getByteFrequencyData(this.analyserData);
+        // this.analyserData.fill(255);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.fft);
         gl.bufferData(gl.ARRAY_BUFFER, this.analyserData, gl.STREAM_DRAW);
@@ -227,8 +233,16 @@ class Renderer {
         );
         gl.vertexAttribDivisor(shader.getAttribute("aHeight"), 1);
         gl.enableVertexAttribArray(shader.getAttribute("aHeight"));
+    }
 
-        const cpuTime = Math.round(performance.now() - this.lastFrameTime);
+    drawScene(gl: WebGL2RenderingContext, shader: Shader) {
+        this.updateMatrices(gl, shader);
+        this.updateBuffers(gl, shader);
+
+        let cpuTime = 0;
+        if (process.env.NODE_ENV === "development") {
+            cpuTime = Math.round(performance.now() - this.lastFrameTime);
+        }
 
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         gl.drawElementsInstanced(
@@ -239,11 +253,12 @@ class Renderer {
             this.analyser.frequencyBinCount
         );
 
-        const gpuTime = Math.round(performance.now() - this.lastFrameTime);
+        if (process.env.NODE_ENV === "development") {
+            const gpuTime = Math.round(performance.now() - this.lastFrameTime);
+            const dTime = Math.round(this.dTime);
 
-        this.overlay.innerText = `${Math.round(
+            this.overlay.innerText = `${dTime}ms (${cpuTime}ms / ${gpuTime}ms)`;
-            this.dTime
+        }
-        )}ms (${cpuTime}ms / ${gpuTime}ms)`;
 
         requestAnimationFrame((time) => {
             this.dTime = time - this.lastFrameTime;