🚀 Moved timing to GameLoop, passed state.

index.js

@@ -1,3 +1,5 @@
+// index.js
+
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
 
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
@@ -22,10 +24,8 @@ import { generateGlyphVerticesForText } from './wgpu-text.js';
         await initializeDevice(state);
         await InitializeShaders(state);
         await InitializePipeline(state);
-
-        state.timing.lastTime = performance.now();
-
         await InitializeResources(state);
+
         GameLoop(state);
     }
 
@@ -78,7 +78,7 @@ import { generateGlyphVerticesForText } from './wgpu-text.js';
     }
 
     function GameLoop(state) {
-        function Tick() {
+        function Tick(state) {
             state.timing.currentTime = performance.now();
             state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;
             state.timing.lastTime = state.timing.currentTime;
@@ -91,10 +91,10 @@ import { generateGlyphVerticesForText } from './wgpu-text.js';
             }
 
             Render(state);
-            setTimeout(Tick, state.timing.frameDuration);
+            setTimeout(() => Tick(state), state.timing.frameDuration);
         }
 
-        Tick();
+        Tick(state);
     }
 
     await Main();

wgpu-state.js

@@ -36,7 +36,7 @@ export function createState(config) {
             deltaTime: 0,
             currentTime: 0,
             frameTime: 0,
-            lastTime: 0,
+            lastTime: performance.now(),
         }
     };
 }