🛠️ Refactor pipeline initialization and state handling

index.js

@@ -6,7 +6,7 @@ import { config } from './wgpu-config.js';
 import { createState } from './wgpu-state.js';
 import { initializeDevice } from './wgpu-device.js';
 import { CreateBuffers } from './wgpu-buffer.js';
-import { createPipeline } from './wgpu-pipeline.js';
+import { InitializePipeline } from './wgpu-pipeline.js';
 
 import { generateGlyphTextureAtlas, createTextureFromSource } from './wgpu-utility.js';
 import { InitializeShaders } from './wgpu-shader.js';
@@ -17,23 +17,28 @@ import { generateGlyphVerticesForText } from './wgpu-text.js';
     const state = createState(config);
 
     async function Main() {
+        await InitializeAdapter(state);
         await InitializeCanvas(state);
         await initializeDevice(state);
         await InitializeShaders(state);
+        await InitializePipeline(state);
+
+        state.timing.lastTime = performance.now();
+
         await InitializeResources(state);
         GameLoop(state);
     }
 
+    async function InitializeAdapter(state) {
+        state.webgpu.adapter = await navigator.gpu.requestAdapter();
+    }
+
     async function InitializeCanvas(state) {
         state.canvas.width = config.canvas.width;
         state.canvas.height = config.canvas.height;
-
-        state.webgpu.adapter = await navigator.gpu.requestAdapter();
     }
 
     async function InitializeResources(state) {
-        state.webgpu.pipeline = await createPipeline(state.webgpu.device, state.webgpu.presentationFormat, state.webgpu.vertexSize, state.webgpu.shaderCode);
-
         state.webgpu.glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
         document.body.appendChild(state.webgpu.glyphCanvas);
         state.webgpu.glyphCanvas.style.backgroundColor = '#222';

wgpu-config.js

@@ -1,3 +1,5 @@
+// wgpu-config.js
+
 export const config = {
     glyphsAcrossTexture: 16,
     glyphWidth: 32,

wgpu-pipeline.js

@@ -1,20 +1,16 @@
-// wgpu-pipeline.js
-
-export async function createPipeline(device, presentationFormat, vertexSize, shaderCode) {
-    const module = device.createShaderModule({
-        label: 'textured quad shaders',
-        code: shaderCode,
-    });
-
-    const pipeline = device.createRenderPipeline({
+export async function InitializePipeline(state) {
+    state.webgpu.pipeline = state.webgpu.device.createRenderPipeline({
         label: 'textured quad pipeline',
         layout: 'auto',
         vertex: {
-            module,
+            module: state.webgpu.device.createShaderModule({
+                label: 'textured quad shaders',
+                code: state.webgpu.shaderCode,
+            }),
             entryPoint: 'vs',
             buffers: [
                 {
-                    arrayStride: vertexSize,
+                    arrayStride: state.webgpu.vertexSize,
                     attributes: [
                         { shaderLocation: 0, offset: 0, format: 'float32x2' },  // pos
                         { shaderLocation: 1, offset: 8, format: 'float32x2' },  // tex
@@ -24,10 +20,13 @@ export async function createPipeline(device, presentationFormat, vertexSize, sha
             ],
         },
         fragment: {
-            module,
+            module: state.webgpu.device.createShaderModule({
+                label: 'textured quad shaders',
+                code: state.webgpu.shaderCode,
+            }),
             entryPoint: 'fs',
             targets: [{
-                format: presentationFormat,
+                format: state.webgpu.presentationFormat,
                 blend: {
                     color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
                     alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' }
@@ -35,6 +34,4 @@ export async function createPipeline(device, presentationFormat, vertexSize, sha
             }],
         },
     });
-
-    return pipeline;
 }

wgpu-state.js

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