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;