move init for shaders

index.js

@@ -4,7 +4,7 @@ import { createState } from './wgpu-state.js';
 import { initializeTiming } from './wgpu-timing.js';
 import { createPipeline } from './wgpu-pipeline.js';
 import { generateGlyphTextureAtlas, createTextureFromSource } from './wgpu-utility.js';
-import { fetchShaderCode } from './wgpu-shader.js';
+import { fetchShaderCode, InitializeShaders } from './wgpu-shader.js';
 import { GenerateVertexDataAndTexture } from './wgpu-texture.js'; 
 import { generateGlyphVerticesForText } from './wgpu-text.js'; 
 import { config } from './wgpu-config.js';
@@ -26,7 +26,8 @@ async function Main() {
     // Initialize timing properties
     initializeTiming(state);
 
-    // Initialize Resources
+    // Initialize Shaders and Resources
+    await InitializeShaders(state);
     await InitializeResources(state);
 
     // Start the game loop
@@ -34,10 +35,9 @@ async function Main() {
 }
 
 async function InitializeResources(state) {
-    const shaderCode = await fetchShaderCode('shaders.wgsl');
     const vertexSize = config.floatsPerVertex * 4;
 
-    state.webgpu.pipeline = await createPipeline(state.webgpu.device, state.webgpu.presentationFormat, vertexSize, shaderCode);
+    state.webgpu.pipeline = await createPipeline(state.webgpu.device, state.webgpu.presentationFormat, vertexSize, state.webgpu.shaderCode);
     
     const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
     document.body.appendChild(glyphCanvas);
@@ -64,10 +64,10 @@ function GameLoop(state) {
 
         Render(state);
 
-        setTimeout(Tick, state.timing.frameDuration);
+        setTimeout(() => Tick(state), state.timing.frameDuration);
     }
 
-    Tick();
+    Tick(state);
 }
 
 function FixedUpdate(deltaTime, state) {

wgpu-shader.js

@@ -3,4 +3,8 @@
 export async function fetchShaderCode(url) {
     const response = await fetch(url);
     return await response.text();
-}
+}
+
+export async function InitializeShaders(state) {
+    state.webgpu.shaderCode = await fetchShaderCode('shaders.wgsl');
+}

wgpu-state.js

@@ -11,6 +11,7 @@ export function createState(config) {
             bindGroup: null,
             context: null,
             presentationFormat: null,
+            shaderCode: null,
         },
         matrices: {
             uniformValues: new Float32Array(config.uniformBufferSize / 4),
@@ -21,7 +22,7 @@ export function createState(config) {
             width: 0,
             height: 0,
         },
-        canvas: null,
+        canvas: document.querySelector('canvas'),
         timing: {
             time: 0,
             fixedDeltaTime: 0,