tlaternet/tlaternet-templates
Archived
1
0
Fork 0
Code Issues 4 Pull requests Releases Wiki Activity

Factor out the buffer updates from the draw call

Browse source
This commit is contained in:
Tristan Daniël Maat 2022-08-12 19:14:34 +01:00
parent 323189f469
commit a1cf0d753b
Signed by: tlater
GPG key ID: 49670FD774E43268
1 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/music/features/visualizer/Renderer.ts
View file

@ -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
);
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;