global timing source

html/lib/app.js

@@ -4,6 +4,7 @@ export class App {
       fov: 45,
     }
   ) {
+    this._now = 0;
     this.registry = {
       onStart: [],
       onUpdate: [],
@@ -77,16 +78,22 @@ export class App {
   }
 
   start() {
-    this.registry.onStart.forEach((fn) => fn(this.gl, this));
+    this.registry.onStart.forEach((fn) => fn(this));
   }
 
   update() {
-    this.registry.onBeforeUpdate.forEach((fn) => fn(this.gl, this));
+    this.registry.onBeforeUpdate.forEach((fn) => fn(this));
-    this.registry.onUpdate.forEach((fn) => fn(this.gl, this));
+    this.registry.onUpdate.forEach((fn) => fn(this));
   }
 
-  loop() {
+  loop(now) {
+    this._now = now;
     this.update();
-    requestAnimationFrame(() => this.loop());
+
+    requestAnimationFrame((newNow) => this.loop(newNow));
+  }
+
+  now() {
+    return this._now;
   }
 }

html/lib/shader.js

@@ -3,7 +3,6 @@ export class Shader {
     this.gl = app.gl;
     this.app = app;
     this.program = this.gl.createProgram();
-    this.startTime = Date.now();
   }
 
   attach(type, source) {
@@ -49,8 +48,7 @@ export class Shader {
   }
 
   updateTime() {
-    const now = Date.now();
+    const time = this.app.now();
-    const time = now - this.startTime;
     const sinTime = Math.sin(time);
     const cosTime = Math.cos(time);
     this.gl.uniform1f(this.location("uTime"), time);