diff --git a/frontend/src/scripting/drawing/renderer.ts b/frontend/src/scripting/drawing/renderer.ts index c6aa28d..d9e2c2c 100644 --- a/frontend/src/scripting/drawing/renderer.ts +++ b/frontend/src/scripting/drawing/renderer.ts @@ -1,4 +1,5 @@ import * as twgl from 'twgl.js'; +import { TimeIt } from '../helper/timing'; export class Renderer { private gl: WebGL2RenderingContext; @@ -35,9 +36,11 @@ export class Renderer { } start() { - requestAnimationFrame(this.render.bind(this)); + requestAnimationFrame(this.timedRender); } + private timedRender = TimeIt(this.render.bind(this), 240); + private render(time: number) { const gl = this.gl; @@ -58,6 +61,6 @@ export class Renderer { twgl.setUniforms(this.programInfo, uniforms); twgl.drawBufferInfo(this.gl, this.bufferInfo); - requestAnimationFrame(this.render.bind(this)); + requestAnimationFrame(this.timedRender); } } diff --git a/frontend/src/scripting/helper/timing.ts b/frontend/src/scripting/helper/timing.ts new file mode 100644 index 0000000..70e9eab --- /dev/null +++ b/frontend/src/scripting/helper/timing.ts @@ -0,0 +1,22 @@ +export const TimeIt = (func, interval = 60) => { + let i = 0; + let values = []; + + return () => { + const start = performance.now(); + func(); + const end = performance.now(); + + values.push(end - start); + if (++i % interval == 0) { + values.sort(); + console.log( + `${func.name}\n\tMax ${values[values.length - 1].toFixed( + 2 + )} ms\n\tMedian ${values[Math.floor(values.length / 2)].toFixed(2)} ms` + ); + + values = []; + } + }; +};