state 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 the function
-import { generateGlyphVerticesForText } from './wgpu-text.js'; // Corrected import statement
+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';
 
@@ -14,140 +14,126 @@ const canvas = document.querySelector('canvas');
 
 // State initialization
 const state = createState(config);
-state.canvas = canvas; // Move canvas to state
+state.canvas = canvas;
 
-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
+const FIXED_DELTA_TIME = 1 / 60;  
+const MAX_FRAME_TIME = 0.25;      
+const TARGET_FPS = 60;            
+const FRAME_DURATION = 1000 / TARGET_FPS;
 
-state.fixedDeltaTime = FIXED_DELTA_TIME;
-state.maxFrameTime = MAX_FRAME_TIME;
-state.targetFps = TARGET_FPS;
-state.frameDuration = FRAME_DURATION;
+// Ensure timing object exists within state
+state.timing = state.timing || {};
+state.timing.fixedDeltaTime = FIXED_DELTA_TIME;
+state.timing.maxFrameTime = MAX_FRAME_TIME;
+state.timing.targetFps = TARGET_FPS;
+state.timing.frameDuration = FRAME_DURATION;
 
 async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();
-    const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, state.canvas); // Use state.canvas
+    const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, state.canvas);
     if (!device) return;
 
-    state.device = device;
+    state.webgpu.device = device;
+    state.webgpu.context = context;
+    state.webgpu.presentationFormat = presentationFormat;
 
     // Initialize Resources
-    await InitializeResources(presentationFormat);
+    await InitializeResources();
 
     // Start the game loop
-    GameLoop(context);
+    GameLoop();
 }
 
-// Initialize shaders, pipeline, textures, and buffers
-async function InitializeResources(presentationFormat) {
-    // Load shader code
+async function InitializeResources() {
     const shaderCode = await fetchShaderCode('shaders.wgsl');
     const vertexSize = config.floatsPerVertex * 4;
 
-    // Create rendering pipeline
-    state.pipeline = await createPipeline(state.device, presentationFormat, vertexSize, shaderCode);
-
-    // Generate glyph texture atlas
+    state.webgpu.pipeline = await createPipeline(state.webgpu.device, state.webgpu.presentationFormat, vertexSize, shaderCode);
+    
     const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
     document.body.appendChild(glyphCanvas);
     glyphCanvas.style.backgroundColor = '#222';
 
-    // Create vertex and index buffers
     CreateBuffers();
 
-    // Generate vertex buffer data and texture
     GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
 }
 
-// Function to create vertex and index buffers
 function CreateBuffers() {
     const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
-    state.vertexBuffer = state.device.createBuffer({
+    state.webgpu.vertexBuffer = state.webgpu.device.createBuffer({
         label: 'vertices',
         size: vertexBufferSize,
         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     });
 
-    state.indexBuffer = state.device.createBuffer({
+    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.device.queue.writeBuffer(state.indexBuffer, 0, new Uint32Array(indices));
+    state.webgpu.device.queue.writeBuffer(state.webgpu.indexBuffer, 0, new Uint32Array(indices));
 }
 
-// Function to generate indices for glyphs
 function GenerateIndices(maxGlyphs) {
-    // Generate index array for glyphs
     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];
     });
 }
 
-// Game loop function
-function GameLoop(context) {
+function GameLoop() {
     let lastTime = performance.now();
-    state.accumulator = 0;
+    state.timing.accumulator = 0;
 
     function Tick() {
         const currentTime = performance.now();
         const frameTime = (currentTime - lastTime) / 1000;
         lastTime = currentTime;
 
-        const deltaTime = Math.min(frameTime, state.maxFrameTime);
-        state.accumulator += deltaTime;
+        const deltaTime = Math.min(frameTime, state.timing.maxFrameTime);
+        state.timing.accumulator += deltaTime;
 
-        // Fixed time step updates for game logic
-        while (state.accumulator >= state.fixedDeltaTime) {
-            FixedUpdate(state.fixedDeltaTime);
-            state.accumulator -= state.fixedDeltaTime;
+        while (state.timing.accumulator >= state.timing.fixedDeltaTime) {
+            FixedUpdate(state.timing.fixedDeltaTime);
+            state.timing.accumulator -= state.timing.fixedDeltaTime;
         }
 
-        // Variable time step update for rendering
-        const alpha = state.accumulator / state.fixedDeltaTime;
-        Render(alpha, context);
+        const alpha = state.timing.accumulator / state.timing.fixedDeltaTime;
+        Render(alpha);
 
-        // Schedule the next frame update
-        setTimeout(Tick, state.frameDuration);
+        setTimeout(Tick, state.timing.frameDuration);
     }
 
     Tick();
 }
 
-// Fixed update function for game logic
 function FixedUpdate(deltaTime) {
-    state.time += deltaTime;
-    // Perform game logic updates here, such as physics and AI
+    state.timing.time += deltaTime;
 }
 
-// Render function
-function Render(alpha, context) {
-    // Set up projection and view matrices
+function Render(alpha) {
     const fov = 60 * Math.PI / 180;
-    const aspect = state.canvas.clientWidth / state.canvas.clientHeight; // Use state.canvas
+    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 = context.getCurrentTexture().createView();
+    RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = state.webgpu.context.getCurrentTexture().createView();
 
-    const encoder = state.device.createCommandEncoder();
+    const encoder = state.webgpu.device.createCommandEncoder();
     const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
-    pass.setPipeline(state.pipeline);
-    mat4.rotateY(viewProjectionMatrix, state.time, state.matrix);
-    mat4.translate(state.matrix, [-state.width / 2, -state.height / 2, 0], state.matrix);
-    state.device.queue.writeBuffer(state.uniformBuffer, 0, state.uniformValues);
-    pass.setBindGroup(0, state.bindGroup);
-    pass.setVertexBuffer(0, state.vertexBuffer);
-    pass.setIndexBuffer(state.indexBuffer, 'uint32');
-    pass.drawIndexed(state.numGlyphs * 6);
+    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.device.queue.submit([encoder.finish()]);
+    state.webgpu.device.queue.submit([encoder.finish()]);
 }
 
-// Initialize application
 Main();

wgpu-state.js

@@ -1,33 +1,34 @@
 export function createState(config) {
     return {
-        // WebGPU resources
-        device: null,
-        pipeline: null,
-        vertexBuffer: null,
-        indexBuffer: null,
-        uniformBuffer: null,
-        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
+        webgpu: {
+            device: null,
+            pipeline: null,
+            vertexBuffer: null,
+            indexBuffer: null,
+            uniformBuffer: null,
+            texture: null,
+            sampler: null,
+            bindGroup: null,
+            context: null,
+            presentationFormat: null,
+        },
+        matrices: {
+            uniformValues: new Float32Array(config.uniformBufferSize / 4),
+            matrix: null,
+        },
+        glyphs: {
+            numGlyphs: 0,
+            width: 0,
+            height: 0,
+        },
         canvas: null,
-
-        // Timing and animation
-        time: 0,
-        fixedDeltaTime: 1 / 60,
-        maxFrameTime: 0.25,
-        targetFps: 60,
-        frameDuration: 1000 / 60,
-        accumulator: 0,
+        timing: {
+            time: 0,
+            fixedDeltaTime: 1 / 60,
+            maxFrameTime: 0.25,
+            targetFps: 60,
+            frameDuration: 1000 / 60,
+            accumulator: 0,
+        }
     };
 }

wgpu-texture.js

@@ -1,34 +1,32 @@
-// wgpu-texture.js
-
 export function GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource) {
     const glyphData = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, config, glyphCanvas);
-    state.device.queue.writeBuffer(state.vertexBuffer, 0, glyphData.vertexData);
+    state.webgpu.device.queue.writeBuffer(state.webgpu.vertexBuffer, 0, glyphData.vertexData);
 
-    state.texture = createTextureFromSource(state.device, glyphCanvas, { mips: true });
-    state.sampler = state.device.createSampler({
+    state.webgpu.texture = createTextureFromSource(state.webgpu.device, glyphCanvas, { mips: true });
+    state.webgpu.sampler = state.webgpu.device.createSampler({
         minFilter: 'linear',
         magFilter: 'linear',
     });
 
-    state.uniformBuffer = state.device.createBuffer({
+    state.webgpu.uniformBuffer = state.webgpu.device.createBuffer({
         label: 'uniforms for quad',
         size: config.uniformBufferSize,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
 
-    state.matrix = state.uniformValues.subarray(0, 16);
+    state.matrices.matrix = state.matrices.uniformValues.subarray(0, 16);
 
-    state.bindGroup = state.device.createBindGroup({
-        layout: state.pipeline.getBindGroupLayout(0),
+    state.webgpu.bindGroup = state.webgpu.device.createBindGroup({
+        layout: state.webgpu.pipeline.getBindGroupLayout(0),
         entries: [
-            { binding: 0, resource: state.sampler },
-            { binding: 1, resource: state.texture.createView() },
-            { binding: 2, resource: { buffer: state.uniformBuffer } },
+            { binding: 0, resource: state.webgpu.sampler },
+            { binding: 1, resource: state.webgpu.texture.createView() },
+            { binding: 2, resource: { buffer: state.webgpu.uniformBuffer } },
         ],
     });
 
     // Update state with glyph details
-    state.numGlyphs = glyphData.numGlyphs;
-    state.width = glyphData.width;
-    state.height = glyphData.height;
+    state.glyphs.numGlyphs = glyphData.numGlyphs;
+    state.glyphs.width = glyphData.width;
+    state.glyphs.height = glyphData.height;
 }