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

Add simple performance overlay

Browse source
This commit is contained in:
Tristan Daniël Maat 2022-08-11 13:09:02 +01:00
parent 615217b237
commit 8d23932267
Signed by: tlater
GPG key ID: 49670FD774E43268
4 changed files with 68 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,11 +11,14 @@ class RendererError extends Error {}
class Renderer {
private canvas: HTMLCanvasElement;
private overlay: HTMLSpanElement;
private analyser: AnalyserNode;
private analyserData: Uint8Array;
private time: number;
private lastFrameTime: number;
private dTime: number;
private buffers: {
indices?: WebGLBuffer;
positions?: WebGLBuffer;
@ -26,7 +29,8 @@ class Renderer {
constructor(
context: AudioContext,
node: AudioNode,
canvas: HTMLCanvasElement
canvas: HTMLCanvasElement,
overlay: HTMLSpanElement
) {
const analyser = context.createAnalyser();
analyser.fftSize = 2048;
@ -34,10 +38,12 @@ class Renderer {
node.connect(analyser);
this.canvas = canvas;
this.overlay = overlay;
this.analyser = analyser;
this.analyserData = new Uint8Array(analyser.frequencyBinCount);
this.time = 0;
this.lastFrameTime = 0;
this.dTime = 0;
this.buffers = {};
}
@ -150,7 +156,7 @@ class Renderer {
mat4.rotateY(
modelViewMatrix,
modelViewMatrix,
this.time * ROTATION_SPEED
this.lastFrameTime * ROTATION_SPEED
);
mat4.translate(modelViewMatrix, modelViewMatrix, [-1.0, 0.0, 0.0]);
gl.uniformMatrix4fv(
@ -222,6 +228,8 @@ class Renderer {
gl.vertexAttribDivisor(shader.getAttribute("aHeight"), 1);
gl.enableVertexAttribArray(shader.getAttribute("aHeight"));
const cpuTime = Math.round(performance.now() - this.lastFrameTime);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElementsInstanced(
gl.TRIANGLES,
@ -231,8 +239,16 @@ class Renderer {
this.analyser.frequencyBinCount
);
const gpuTime = Math.round(performance.now() - this.lastFrameTime);
this.overlay.innerText = `${Math.round(
this.dTime
)}ms (${cpuTime}ms / ${gpuTime}ms)`;
requestAnimationFrame((time) => {
this.time = time;
this.dTime = time - this.lastFrameTime;
this.lastFrameTime = time;
this.drawScene(gl, shader);
});
}