Modularize State and Timing Initialization

index.js

@@ -8,6 +8,8 @@ import { GenerateVertexDataAndTexture } from './wgpu-texture.js';
 import { generateGlyphVerticesForText } from './wgpu-text.js'; 
 import { config } from './wgpu-config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
+import { CreateBuffers } from './wgpu-buffer.js';
+import { initializeTiming } from './wgpu-timing.js';
 
 // Canvas element for rendering
 const canvas = document.querySelector('canvas');
@@ -26,10 +28,7 @@ async function Main() {
     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;
+    initializeTiming(state);
 
     // Initialize Resources
     await InitializeResources();
@@ -48,40 +47,12 @@ async function InitializeResources() {
     document.body.appendChild(glyphCanvas);
     glyphCanvas.style.backgroundColor = '#222';
 
-    CreateBuffers();
+    CreateBuffers(state, config);
 
     GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
 }
 
-function CreateBuffers() {
-    const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
-    state.webgpu.vertexBuffer = state.webgpu.device.createBuffer({
-        label: 'vertices',
-        size: vertexBufferSize,
-        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-    });
-
-    state.webgpu.indexBuffer = state.webgpu.device.createBuffer({
-        label: 'indices',
-        size: config.maxGlyphs * config.vertsPerGlyph * 4,
-        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-    });
-
-    const indices = GenerateIndices(config.maxGlyphs);
-    state.webgpu.device.queue.writeBuffer(state.webgpu.indexBuffer, 0, new Uint32Array(indices));
-}
-
-function GenerateIndices(maxGlyphs) {
-    return Array.from({ length: maxGlyphs * 6 }, (_, i) => {
-        const ndx = Math.floor(i / 6) * 4;
-        return (i % 6 < 3 ? [ndx, ndx + 1, ndx + 2] : [ndx + 2, ndx + 1, ndx + 3])[i % 3];
-    });
-}
-
 function GameLoop() {
-    state.timing.lastTime = performance.now();
-    state.timing.accumulator = 0;
-
     function Tick() {
         state.timing.currentTime = performance.now();
         state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;

wgpu-buffer.js

@@ -0,0 +1,26 @@
+// wgpu-buffer.js
+
+export function CreateBuffers(state, config) {
+    const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
+    state.webgpu.vertexBuffer = state.webgpu.device.createBuffer({
+        label: 'vertices',
+        size: vertexBufferSize,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    });
+
+    state.webgpu.indexBuffer = state.webgpu.device.createBuffer({
+        label: 'indices',
+        size: config.maxGlyphs * config.vertsPerGlyph * 4,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+    });
+
+    const indices = GenerateIndices(config.maxGlyphs);
+    state.webgpu.device.queue.writeBuffer(state.webgpu.indexBuffer, 0, new Uint32Array(indices));
+}
+
+export function GenerateIndices(maxGlyphs) {
+    return Array.from({ length: maxGlyphs * 6 }, (_, i) => {
+        const ndx = Math.floor(i / 6) * 4;
+        return (i % 6 < 3 ? [ndx, ndx + 1, ndx + 2] : [ndx + 2, ndx + 1, ndx + 3])[i % 3];
+    });
+}

wgpu-timing.js

@@ -0,0 +1,14 @@
+// wgpu-timing.js
+
+export function initializeTiming(state) {
+    state.timing.fixedDeltaTime = 1 / 60;
+    state.timing.maxFrameTime = 0.25;
+    state.timing.targetFps = 60;
+    state.timing.frameDuration = 1000 / 60;
+    state.timing.lastTime = performance.now();
+    state.timing.accumulator = 0;
+    state.timing.currentTime = 0;
+    state.timing.frameTime = 0;
+    state.timing.deltaTime = 0;
+    state.timing.time = 0;
+}