move dynamic properties to state

index.js

@@ -4,8 +4,8 @@ import { createState } from './wgpu-state.js';
 import { generateGlyphTextureAtlas, createTextureFromSource } from './wgpu-utility.js';
 import { createPipeline } from './wgpu-pipeline.js';
 import { fetchShaderCode } from './wgpu-shader.js';
-import { GenerateVertexDataAndTexture } from './wgpu-texture.js';
-import { generateGlyphVerticesForText } from './wgpu-text.js';
+import { GenerateVertexDataAndTexture } from './wgpu-texture.js'; // Import the function
+import { generateGlyphVerticesForText } from './wgpu-text.js'; // Corrected import statement
 import { config } from './wgpu-config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
 
@@ -14,15 +14,21 @@ const canvas = document.querySelector('canvas');
 
 // State initialization
 const state = createState(config);
+state.canvas = canvas; // Move canvas to state
 
 const FIXED_DELTA_TIME = 1 / 60;  // Fixed time step of 60 FPS for physics and game logic
 const MAX_FRAME_TIME = 0.25;      // Maximum time to simulate per frame to prevent spiral of death
 const TARGET_FPS = 60;            // Target frames per second
 const FRAME_DURATION = 1000 / TARGET_FPS; // Duration of a single frame in milliseconds
 
+state.fixedDeltaTime = FIXED_DELTA_TIME;
+state.maxFrameTime = MAX_FRAME_TIME;
+state.targetFps = TARGET_FPS;
+state.frameDuration = FRAME_DURATION;
+
 async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();
-    const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, canvas);
+    const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, state.canvas); // Use state.canvas
     if (!device) return;
 
     state.device = device;
@@ -86,28 +92,28 @@ function GenerateIndices(maxGlyphs) {
 // Game loop function
 function GameLoop(context) {
     let lastTime = performance.now();
-    let accumulator = 0;
+    state.accumulator = 0;
 
     function Tick() {
         const currentTime = performance.now();
         const frameTime = (currentTime - lastTime) / 1000;
         lastTime = currentTime;
 
-        const deltaTime = Math.min(frameTime, MAX_FRAME_TIME);
-        accumulator += deltaTime;
+        const deltaTime = Math.min(frameTime, state.maxFrameTime);
+        state.accumulator += deltaTime;
 
         // Fixed time step updates for game logic
-        while (accumulator >= FIXED_DELTA_TIME) {
-            FixedUpdate(FIXED_DELTA_TIME);
-            accumulator -= FIXED_DELTA_TIME;
+        while (state.accumulator >= state.fixedDeltaTime) {
+            FixedUpdate(state.fixedDeltaTime);
+            state.accumulator -= state.fixedDeltaTime;
         }
 
         // Variable time step update for rendering
-        const alpha = accumulator / FIXED_DELTA_TIME;
+        const alpha = state.accumulator / state.fixedDeltaTime;
         Render(alpha, context);
 
         // Schedule the next frame update
-        setTimeout(Tick, FRAME_DURATION);
+        setTimeout(Tick, state.frameDuration);
     }
 
     Tick();
@@ -123,7 +129,7 @@ function FixedUpdate(deltaTime) {
 function Render(alpha, context) {
     // Set up projection and view matrices
     const fov = 60 * Math.PI / 180;
-    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const aspect = state.canvas.clientWidth / state.canvas.clientHeight; // Use state.canvas
     const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
     const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
     const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);

wgpu-state.js

@@ -1,7 +1,6 @@
-// wgpu-state.js
-
 export function createState(config) {
     return {
+        // WebGPU resources
         device: null,
         pipeline: null,
         vertexBuffer: null,
@@ -10,11 +9,25 @@ export function createState(config) {
         texture: null,
         sampler: null,
         bindGroup: null,
+
+        // Uniform values and matrices
         uniformValues: new Float32Array(config.uniformBufferSize / 4),
         matrix: null,
+
+        // Glyph details
         numGlyphs: 0,
         width: 0,
         height: 0,
+
+        // Canvas and context
+        canvas: null,
+
+        // Timing and animation
         time: 0,
+        fixedDeltaTime: 1 / 60,
+        maxFrameTime: 0.25,
+        targetFps: 60,
+        frameDuration: 1000 / 60,
+        accumulator: 0,
     };
 }