Factor out the buffer updates from the draw call
This commit is contained in:
parent
323189f469
commit
a1cf0d753b
|
@ -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;
|
||||
|
|
Reference in a new issue