From 5f8f0656360506c8acd1222431539c9462bbee55 Mon Sep 17 00:00:00 2001
From: mekanoe <1581674+mekanoe@users.noreply.github.com>
Date: Sun, 1 Oct 2023 12:36:52 -0400
Subject: [PATCH] add telemetry

---
 generators/work.html.txt          |  3 ++-
 html/001-platform-provenance.html |  3 ++-
 html/001-platform-provenance.js   |  2 ++
 html/lib/app.js                   | 27 +++++++++++++++++---
 html/lib/object.js                |  4 +++
 html/lib/telemetry.js             | 42 +++++++++++++++++++++++++++++++
 html/work.css                     | 14 +++++++++++
 package.json                      |  4 +--
 8 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 html/lib/telemetry.js
 create mode 100644 html/work.css

diff --git a/generators/work.html.txt b/generators/work.html.txt
index 1ee26a8..f0d72e3 100644
--- a/generators/work.html.txt
+++ b/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"
diff --git a/html/001-platform-provenance.html b/html/001-platform-provenance.html
index dc4b33a..e2f81e5 100644
--- a/html/001-platform-provenance.html
+++ b/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"
diff --git a/html/001-platform-provenance.js b/html/001-platform-provenance.js
index 8b1623a..7fb25dd 100644
--- a/html/001-platform-provenance.js
+++ b/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)
diff --git a/html/lib/app.js b/html/lib/app.js
index 0677564..bf5a37b 100644
--- a/html/lib/app.js
+++ b/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() {
diff --git a/html/lib/object.js b/html/lib/object.js
index 1bb25ce..4186b80 100644
--- a/html/lib/object.js
+++ b/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) {
diff --git a/html/lib/telemetry.js b/html/lib/telemetry.js
new file mode 100644
index 0000000..726080a
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/html/work.css b/html/work.css
new file mode 100644
index 0000000..0690436
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 23f688b..80d6bc1 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "type": "module",
   "main": "./generators/generate.js",
   "scripts": {
-    "build": "bun ./generators/generate.ts",
-    "build:watch": "bun run build --watch",
+    "build": "bun $BUNFLAGS ./generators/generate.ts",
+    "build:watch": "BUNFLAGS=--watch bun run build",
     "serve": "serve ./html",
     "dev": "run-p serve build:watch"
   },