From a1cf0d753bc498718091306800a7f83eb5b87056 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Fri, 12 Aug 2022 19:14:34 +0100
Subject: [PATCH] Factor out the buffer updates from the draw call
---
src/music/features/visualizer/Renderer.ts | 59 ++++++++++++++---------
1 file changed, 37 insertions(+), 22 deletions(-)
diff --git a/src/music/features/visualizer/Renderer.ts b/src/music/features/visualizer/Renderer.ts
index 0baea06..889a7b0 100644
--- a/src/music/features/visualizer/Renderer.ts
+++ b/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.dTime
- )}ms (${cpuTime}ms / ${gpuTime}ms)`;
+ this.overlay.innerText = `${dTime}ms (${cpuTime}ms / ${gpuTime}ms)`;
+ }
requestAnimationFrame((time) => {
this.dTime = time - this.lastFrameTime;