add telemetry

html/lib/app.js

@@ -9,6 +9,7 @@ export class App {
       onStart: [],
       onUpdate: [],
       onBeforeUpdate: [],
+      onAfterUpdate: [],
     };
 
     this.config = config;
@@ -77,6 +78,10 @@ export class App {
     this.registry.onBeforeUpdate.push(fn);
   }
 
+  onAfterUpdate(fn) {
+    this.registry.onAfterUpdate.push(fn);
+  }
+
   start() {
     this.registry.onStart.forEach((fn) => fn(this));
   }
@@ -84,13 +89,27 @@ export class App {
   update() {
     this.registry.onBeforeUpdate.forEach((fn) => fn(this));
     this.registry.onUpdate.forEach((fn) => fn(this));
+    this.registry.onAfterUpdate.forEach((fn) => fn(this));
   }
 
-  loop(now) {
-    this._now = now;
-    this.update();
+  oneShot() {
+    requestAnimationFrame((now) => {
+      this._now = now;
+      this.start();
+      this.update();
+    });
+  }
 
-    requestAnimationFrame((newNow) => this.loop(newNow));
+  loop() {
+    const run = (now) => {
+      this._now = now;
+      this.update();
+      requestAnimationFrame(run);
+    };
+
+    requestAnimationFrame((now) => {
+      run(now);
+    });
   }
 
   now() {

html/lib/object.js

@@ -2,6 +2,10 @@ export class Object {
   constructor(app) {
     this.gl = app.gl;
     this.app = app;
+
+    this.vertexPositions = new Float32Array([]);
+    this.positionBuffer = null;
+    this.textureBuffer = null;
   }
 
   initBuffer(data, draw = this.gl.STATIC_DRAW) {

html/lib/telemetry.js

@@ -0,0 +1,42 @@
+export class Telemetry {
+  constructor(app, selector = "#telemetry") {
+    this.app = app;
+    this.el = document.querySelector(selector);
+    if (!this.el) {
+      throw new Error(`no element found matching ${selector}`);
+    }
+
+    if (location.search.includes("telemetry")) {
+      this.el.style.display = "block";
+      this.app.onAfterUpdate(() => this.onAfterUpdate());
+    }
+
+    this.frameTimes = [];
+    this.maxFrameTimes = 100;
+    this.lastFrameTime = 0;
+  }
+
+  insertTime(time) {
+    this.frameTimes.push(time);
+
+    if (this.frameTimes.length > this.maxFrameTimes) {
+      this.frameTimes.shift();
+    }
+  }
+
+  onAfterUpdate() {
+    const frameTime = this.app.now() - this.lastFrameTime;
+    this.insertTime(frameTime);
+
+    const averageFrameTime =
+      this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;
+
+    const framesPerSecond = 1000 / averageFrameTime;
+
+    this.el.innerHTML = `
+      ${framesPerSecond.toFixed(1)} FPS (${averageFrameTime.toFixed(3)} ms)
+    `;
+
+    this.lastFrameTime = this.app.now();
+  }
+}