🗑️ Deprecate timing file and update state creation

index.js

@@ -1,5 +1,3 @@
-// index.js
-
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
 
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
@@ -8,7 +6,6 @@ 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 { initializeTiming } from './wgpu-timing.js';
 import { createPipeline } from './wgpu-pipeline.js';
 
 import { generateGlyphTextureAtlas, createTextureFromSource } from './wgpu-utility.js';
@@ -16,88 +13,84 @@ import { InitializeShaders } from './wgpu-shader.js';
 import { GenerateVertexDataAndTexture } from './wgpu-texture.js';
 import { generateGlyphVerticesForText } from './wgpu-text.js';
 
-async function InitializeCanvas(state) {
-    state.canvas.width = config.canvas.width;
-    state.canvas.height = config.canvas.height;
+(async () => {
+    const state = createState(config);
+
+    async function Main() {
+        await InitializeCanvas(state);
+        await initializeDevice(state);
+        await InitializeShaders(state);
+        await InitializeResources(state);
+        GameLoop(state);
+    }
 
-    state.webgpu.adapter = await navigator.gpu.requestAdapter();
-    await initializeDevice(state);
+    async function InitializeCanvas(state) {
+        state.canvas.width = config.canvas.width;
+        state.canvas.height = config.canvas.height;
 
-    if (!state.webgpu.device) {
-        alert('Failed to initialize WebGPU');
-        return;
+        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';
+
+        CreateBuffers(state, config);
+        GenerateVertexDataAndTexture(state, state.webgpu.glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
     }
-}
-
-async function InitializeResources(state) {
-    state.webgpu.pipeline = await createPipeline(state.webgpu.device, state.webgpu.presentationFormat, state.webgpu.vertexSize, state.webgpu.shaderCode);
-
-    const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
-    document.body.appendChild(glyphCanvas);
-    glyphCanvas.style.backgroundColor = '#222';
-
-    CreateBuffers(state, config);
-    GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
-}
-
-function FixedUpdate(state) {
-    state.timing.time += state.timing.fixedDeltaTime;
-}
-
-function Render(state) {
-    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);
-    const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
-    const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
-
-    RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = state.webgpu.context.getCurrentTexture().createView();
-    const encoder = state.webgpu.device.createCommandEncoder();
-    const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
-
-    pass.setPipeline(state.webgpu.pipeline);
-    mat4.rotateY(viewProjectionMatrix, state.timing.time, state.matrices.matrix);
-    mat4.translate(state.matrices.matrix, [-state.glyphs.width / 2, -state.glyphs.height / 2, 0], state.matrices.matrix);
-
-    state.webgpu.device.queue.writeBuffer(state.webgpu.uniformBuffer, 0, state.matrices.uniformValues);
-
-    pass.setBindGroup(0, state.webgpu.bindGroup);
-    pass.setVertexBuffer(0, state.webgpu.vertexBuffer);
-    pass.setIndexBuffer(state.webgpu.indexBuffer, 'uint32');
-    pass.drawIndexed(state.glyphs.numGlyphs * 6);
-    pass.end();
-
-    state.webgpu.device.queue.submit([encoder.finish()]);
-}
-
-function GameLoop(state) {
-    function Tick() {
-        state.timing.currentTime = performance.now();
-        state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;
-        state.timing.lastTime = state.timing.currentTime;
-        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);
-            state.timing.accumulator -= state.timing.fixedDeltaTime;
-        }
 
-        Render(state);
-        setTimeout(Tick, state.timing.frameDuration);
+    function FixedUpdate(state) {
+        state.timing.time += state.timing.fixedDeltaTime;
     }
 
-    Tick();
-}
+    function Render(state) {
+        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);
+        const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
+        const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
 
-const state = createState(config);
+        RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = state.webgpu.context.getCurrentTexture().createView();
+        const encoder = state.webgpu.device.createCommandEncoder();
+        const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
 
-async function Main() {
-    await InitializeCanvas(state);
-    initializeTiming(state);
-    await InitializeShaders(state);
-    await InitializeResources(state);
-    GameLoop(state);
-}
+        pass.setPipeline(state.webgpu.pipeline);
+        mat4.rotateY(viewProjectionMatrix, state.timing.time, state.matrices.matrix);
+        mat4.translate(state.matrices.matrix, [-state.glyphs.width / 2, -state.glyphs.height / 2, 0], state.matrices.matrix);
+
+        state.webgpu.device.queue.writeBuffer(state.webgpu.uniformBuffer, 0, state.matrices.uniformValues);
+
+        pass.setBindGroup(0, state.webgpu.bindGroup);
+        pass.setVertexBuffer(0, state.webgpu.vertexBuffer);
+        pass.setIndexBuffer(state.webgpu.indexBuffer, 'uint32');
+        pass.drawIndexed(state.glyphs.numGlyphs * 6);
+        pass.end();
+
+        state.webgpu.device.queue.submit([encoder.finish()]);
+    }
+
+    function GameLoop(state) {
+        function Tick() {
+            state.timing.currentTime = performance.now();
+            state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;
+            state.timing.lastTime = state.timing.currentTime;
+            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);
+                state.timing.accumulator -= state.timing.fixedDeltaTime;
+            }
+
+            Render(state);
+            setTimeout(Tick, state.timing.frameDuration);
+        }
+
+        Tick();
+    }
 
-Main();
+    await Main();
+})();

wgpu-config.js

@@ -23,5 +23,11 @@ export const config = {
         zNear: 0.001,
         zFar: 50
     },
+    timing: {
+        fixedDeltaTime: 1 / 60,
+        maxFrameTime: 0.25,
+        targetFps: 60,
+        frameDuration: 1000 / 60
+    },
     maxFPS: 60
 };

wgpu-state.js

@@ -1,5 +1,3 @@
-// wgpu-state.js
-
 export function createState(config) {
     return {
         webgpu: {
@@ -16,6 +14,7 @@ export function createState(config) {
             bindGroup: null,
             shaderCode: null,
             vertexSize: config.floatsPerVertex * config.vertexMultiplier,
+            glyphCanvas: null
         },
         matrices: {
             uniformValues: new Float32Array(config.floatsInUniformBuffer),
@@ -29,15 +28,15 @@ export function createState(config) {
         canvas: document.querySelector('canvas') || document.body.appendChild(document.createElement('canvas')),
         timing: {
             time: 0,
-            fixedDeltaTime: 0,
-            maxFrameTime: 0,
-            targetFps: 0,
-            frameDuration: 0,
+            fixedDeltaTime: config.timing.fixedDeltaTime,
+            maxFrameTime: config.timing.maxFrameTime,
+            targetFps: config.timing.targetFps,
+            frameDuration: config.timing.frameDuration,
             accumulator: 0,
             deltaTime: 0,
             currentTime: 0,
             frameTime: 0,
-            lastTime: 0,
+            lastTime: performance.now()
         }
     };
 }

wgpu-timing.js

@@ -1,14 +0,0 @@
-// 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;
-}