tiny iteration

src/002-webgpu-instead/main.ts

@@ -2,6 +2,7 @@ import { WebGPUApp } from "../renderer/webgpu";
 
 const app = new WebGPUApp({ fov: 20 });
 
+app.start();
 // TODO:
 // - plane
 // - white shader

src/renderer/telemetry.ts

@@ -1,16 +1,19 @@
+import { WebGPUApp } from "./webgpu";
+
 export class Telemetry {
   public el: HTMLElement;
   public frameTimes: number[] = [];
   public maxFrameTimes: number = 100;
   public lastFrameTime: number = 0;
   constructor(
-    public app: any,
+    public app: WebGPUApp,
     selector = "#telemetry"
   ) {
     this.el = document.querySelector(selector) as HTMLElement;
     if (this.el && location.search.includes("telemetry")) {
       this.el.style.display = "block";
-      this.app.onAfterUpdate(() => this.onAfterUpdate());
+      this.app.onAfterUpdate((time) => this.onAfterUpdate(time));
+      this.app.onStart(() => this.onStart());
     }
   }
 
@@ -22,8 +25,13 @@ export class Telemetry {
     }
   }
 
-  onAfterUpdate() {
-    const frameTime = this.app.now() - this.lastFrameTime;
+  onStart() {
+    this.lastFrameTime = 0;
+    this.frameTimes = [];
+  }
+
+  onAfterUpdate(time: number) {
+    const frameTime = time - this.lastFrameTime;
     this.insertTime(frameTime);
 
     const averageFrameTime =
@@ -40,6 +48,6 @@ export class Telemetry {
       } | aU: ${this.app.registry.onAfterUpdate.length}
     `;
 
-    this.lastFrameTime = this.app.now();
+    this.lastFrameTime = time;
   }
 }

src/renderer/webgpu.ts

@@ -5,6 +5,8 @@ export type WebGPUAppConfig = {
   context?: GPUCanvasConfiguration;
 };
 
+export type RenderHandle = (time: number, app: WebGPUApp) => void;
+
 export class WebGPUApp {
   public canvas: HTMLCanvasElement;
   private _adapter?: GPUAdapter;
@@ -12,6 +14,18 @@ export class WebGPUApp {
   private _context?: GPUCanvasContext;
   public telemetry: Telemetry;
 
+  public registry: {
+    onBeforeUpdate: RenderHandle[];
+    onAfterUpdate: RenderHandle[];
+    onUpdate: RenderHandle[];
+    onStart: RenderHandle[];
+  } = {
+    onBeforeUpdate: [],
+    onAfterUpdate: [],
+    onUpdate: [],
+    onStart: [],
+  };
+
   constructor(public config: WebGPUAppConfig = {}) {
     this.config = {
       fov: 45,
@@ -83,4 +97,45 @@ export class WebGPUApp {
 
     return this._device;
   }
+
+  onBeforeUpdate(handle: RenderHandle) {
+    this.registry.onBeforeUpdate.push(handle);
+  }
+
+  onAfterUpdate(handle: RenderHandle) {
+    this.registry.onAfterUpdate.push(handle);
+  }
+
+  onUpdate(handle: RenderHandle) {
+    this.registry.onUpdate.push(handle);
+  }
+
+  onStart(handle: RenderHandle) {
+    this.registry.onStart.push(handle);
+  }
+
+  doUpdate(time: number) {
+    this.registry.onBeforeUpdate.forEach((handle) => handle(time, this));
+    this.registry.onUpdate.forEach((handle) => handle(time, this));
+    this.registry.onAfterUpdate.forEach((handle) => handle(time, this));
+  }
+
+  doStart(time: number = 0) {
+    this.registry.onStart.forEach((handle) => handle(this, time));
+  }
+
+  async oneShot(time: number = 0) {
+    this.doStart(time);
+    this.doUpdate(time);
+  }
+
+  start() {
+    this.doStart();
+
+    const run = (time: number) => {
+      this.doUpdate(time);
+      requestAnimationFrame(run);
+    };
+    requestAnimationFrame(run);
+  }
 }