Add simple performance overlay

This commit is contained in:
Tristan Daniël Maat 2022-08-11 13:09:02 +01:00
parent ff39947b97
commit 323189f469
Signed by: tlater
GPG key ID: 49670FD774E43268
4 changed files with 68 additions and 19 deletions

View file

@ -7,12 +7,10 @@ import { musicPlayer } from "./musicPlayerSlice";
function MusicPlayer() {
return (
<div className="is-flex-grow-1 is-flex is-flex-direction-column">
<div className="is-flex-grow-1 is-overflow-hidden">
<Visualizer
audioContext={musicPlayer.audioContext}
audioNode={musicPlayer.audioNode}
/>
</div>
<Visualizer
audioContext={musicPlayer.audioContext}
audioNode={musicPlayer.audioNode}
/>
<div className="is-flex-grow-0">
<Controls />
</div>

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

View file

@ -11,19 +11,37 @@ function Visualizer({
}) {
const [renderError, setRenderError] = useState<JSX.Element | null>(null);
const canvas = useCallback(
(canvas: HTMLCanvasElement | null) => {
const visualizer = useCallback(
(visualizer: HTMLDivElement | null) => {
// If we're rendering an error message, we won't be
// setting a canvas.
// setting up the visualizer.
//
// Also, nonintuitively, renderError will be null here on
// subsequent iterations, so we can't rely on it to
// identify errors.
if (canvas === null) {
if (visualizer === null) {
return;
}
const renderer = new Renderer(audioContext, audioNode, canvas);
const canvas = visualizer.children[0];
const overlay = visualizer.children[1];
if (
!(canvas instanceof HTMLCanvasElement) ||
!(overlay instanceof HTMLSpanElement)
) {
throw new Error(
"react did not create our visualizer div correctly"
);
}
const renderer = new Renderer(
audioContext,
audioNode,
canvas,
overlay
);
try {
renderer.initializeScene();
} catch (error) {
@ -78,7 +96,18 @@ function Visualizer({
);
if (renderError === null) {
return <canvas ref={canvas} style={{ display: "block" }}></canvas>;
return (
<div
ref={visualizer}
className="is-flex-grow-1 is-clipped is-relative"
>
<canvas style={{ display: "block" }}></canvas>
<span
className="is-bottom-left"
style={{ display: "relative" }}
></span>
</div>
);
} else {
return renderError;
}

View file

@ -3,6 +3,12 @@ $fa-font-path: "npm:@fortawesome/fontawesome-free/webfonts";
@import "~/node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "~/node_modules/@fortawesome/fontawesome-free/scss/solid";
.is-overflow-hidden {
overflow: hidden !important;
.is-relative {
position: relative !important;
}
.is-bottom-left {
bottom: 0;
left: 0;
position: absolute !important;
}