add telemetry

generators/work.html.txt

@@ -17,9 +17,10 @@
     height: 100vh;
   }
 </style>
-<link rel="stylesheet" href="index.css" />
+<link rel="stylesheet" href="work.css" />
 <main>
   <canvas id="canvas" width="1280" height="720"></canvas>
+  <div id="telemetry">XX.X FPS (XX.X ms)</div>
 </main>
 <script
   src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"

html/001-platform-provenance.html

@@ -17,9 +17,10 @@
     height: 100vh;
   }
 </style>
-<link rel="stylesheet" href="index.css" />
+<link rel="stylesheet" href="work.css" />
 <main>
   <canvas id="canvas" width="1280" height="720"></canvas>
+  <div id="telemetry">XX.X FPS (XX.X ms)</div>
 </main>
 <script
   src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"

html/001-platform-provenance.js

@@ -1,8 +1,10 @@
 import { Shader } from "./lib/shader.js";
 import { BasicPlane } from "./lib/basic-plane.js";
 import { App } from "./lib/app.js";
+import { Telemetry } from "./lib/telemetry.js";
 
 const app = new App({ fov: 20 });
+new Telemetry(app);
 const gl = app.gl;
 
 const shader = new Shader(app)

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) {
+  oneShot() {
+    requestAnimationFrame((now) => {
+      this._now = now;
+      this.start();
+      this.update();
+    });
+  }
+
+  loop() {
+    const run = (now) => {
       this._now = now;
       this.update();
+      requestAnimationFrame(run);
+    };
 
-    requestAnimationFrame((newNow) => this.loop(newNow));
+    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();
+  }
+}

html/work.css

@@ -0,0 +1,14 @@
+#telemetry {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    font: monospace;
+    z-index: 100;
+    padding: 10px;
+    font-size: 12px;
+    display: none;
+}

package.json

@@ -3,8 +3,8 @@
   "type": "module",
   "main": "./generators/generate.js",
   "scripts": {
-    "build": "bun ./generators/generate.ts",
+    "build": "bun $BUNFLAGS ./generators/generate.ts",
-    "build:watch": "bun run build --watch",
+    "build:watch": "BUNFLAGS=--watch bun run build",
     "serve": "serve ./html",
     "dev": "run-p serve build:watch"
   },