init frame timing in main

index.js

@@ -16,18 +16,6 @@ const canvas = document.querySelector('canvas');
 const state = createState(config);
 state.canvas = canvas;
 
-const FIXED_DELTA_TIME = 1 / 60;  
-const MAX_FRAME_TIME = 0.25;      
-const TARGET_FPS = 60;            
-const FRAME_DURATION = 1000 / TARGET_FPS;
-
-// Ensure timing object exists within state
-state.timing = state.timing || {};
-state.timing.fixedDeltaTime = FIXED_DELTA_TIME;
-state.timing.maxFrameTime = MAX_FRAME_TIME;
-state.timing.targetFps = TARGET_FPS;
-state.timing.frameDuration = FRAME_DURATION;
-
 async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();
     const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, state.canvas);
@@ -37,6 +25,12 @@ async function Main() {
     state.webgpu.context = context;
     state.webgpu.presentationFormat = presentationFormat;
 
+    // Initialize timing properties
+    state.timing.fixedDeltaTime = 1 / 60;
+    state.timing.maxFrameTime = 0.25;
+    state.timing.targetFps = 60;
+    state.timing.frameDuration = 1000 / 60;
+
     // Initialize Resources
     await InitializeResources();
 
@@ -89,20 +83,19 @@ function GameLoop() {
     state.timing.accumulator = 0;
 
     function Tick() {
-        const currentTime = performance.now();
-        const frameTime = (currentTime - lastTime) / 1000;
-        lastTime = currentTime;
+        state.timing.currentTime = performance.now();
+        state.timing.frameTime = (state.timing.currentTime - lastTime) / 1000;
+        lastTime = state.timing.currentTime;
 
-        const deltaTime = Math.min(frameTime, state.timing.maxFrameTime);
-        state.timing.accumulator += deltaTime;
+        state.timing.deltaTime = Math.min(state.timing.frameTime, state.timing.maxFrameTime);
+        state.timing.accumulator += state.timing.deltaTime;
 
         while (state.timing.accumulator >= state.timing.fixedDeltaTime) {
             FixedUpdate(state.timing.fixedDeltaTime);
             state.timing.accumulator -= state.timing.fixedDeltaTime;
         }
 
-        const alpha = state.timing.accumulator / state.timing.fixedDeltaTime;
-        Render(alpha);
+        Render();
 
         setTimeout(Tick, state.timing.frameDuration);
     }
@@ -114,7 +107,7 @@ function FixedUpdate(deltaTime) {
     state.timing.time += deltaTime;
 }
 
-function Render(alpha) {
+function Render() {
     const fov = 60 * Math.PI / 180;
     const aspect = state.canvas.clientWidth / state.canvas.clientHeight;
     const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);

wgpu-state.js

@@ -14,7 +14,7 @@ export function createState(config) {
         },
         matrices: {
             uniformValues: new Float32Array(config.uniformBufferSize / 4),
-            matrix: null,
+            matrix: new Float32Array(16),
         },
         glyphs: {
             numGlyphs: 0,
@@ -24,11 +24,14 @@ export function createState(config) {
         canvas: null,
         timing: {
             time: 0,
-            fixedDeltaTime: 1 / 60,
-            maxFrameTime: 0.25,
-            targetFps: 60,
-            frameDuration: 1000 / 60,
+            fixedDeltaTime: 0,
+            maxFrameTime: 0,
+            targetFps: 0,
+            frameDuration: 0,
             accumulator: 0,
+            deltaTime: 0,
+            currentTime: 0,
+            frameTime: 0,
         }
     };
 }