Add timing

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

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 = [];
+    }
+  };
+};