implement game ticks

index.js

@@ -17,16 +17,31 @@ async function main() {
     if (!device) return;
 
     state.device = device;
+
+    // Load shader code
     const shaderCode = await fetchShaderCode('shaders.wgsl');
     const vertexSize = config.floatsPerVertex * 4;
 
+    // Create pipeline
     state.pipeline = await createPipeline(state.device, presentationFormat, vertexSize, shaderCode);
 
+    // Generate and display glyph texture atlas
     const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
     document.body.appendChild(glyphCanvas);
     glyphCanvas.style.backgroundColor = '#222';
 
-    const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * vertexSize;
+    // Create vertex and index buffers
+    createBuffers();
+
+    // Generate vertex buffer data and texture
+    generateVertexDataAndTexture(glyphCanvas);
+
+    // Start the game loop
+    gameLoop(context);
+}
+
+function createBuffers() {
+    const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
     state.vertexBuffer = state.device.createBuffer({
         label: 'vertices',
         size: vertexBufferSize,
@@ -39,25 +54,31 @@ async function main() {
         usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
     });
 
-    const indices = Array.from({ length: config.maxGlyphs * 6 }, (_, i) => {
+    const indices = generateIndices(config.maxGlyphs);
+    state.device.queue.writeBuffer(state.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];
     });
-    state.device.queue.writeBuffer(state.indexBuffer, 0, new Uint32Array(indices));
+}
 
+function generateVertexDataAndTexture(glyphCanvas) {
     const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, config, glyphCanvas);
     state.device.queue.writeBuffer(state.vertexBuffer, 0, vertexData);
 
     state.texture = createTextureFromSource(state.device, glyphCanvas, { mips: true });
     state.sampler = state.device.createSampler({
         minFilter: 'linear',
-        magFilter: 'linear'
+        magFilter: 'linear',
     });
 
     state.uniformBuffer = state.device.createBuffer({
         label: 'uniforms for quad',
         size: config.uniformBufferSize,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
 
     state.matrix = state.uniformValues.subarray(0, 16);
@@ -74,42 +95,50 @@ async function main() {
     state.numGlyphs = numGlyphs;
     state.width = width;
     state.height = height;
-
-    gameLoop(context);
 }
 
 function gameLoop(context) {
     let lastTime = performance.now();
+    const frameInterval = 1000 / config.maxFPS;
 
-    function update() {
+    function tick() {
         const currentTime = performance.now();
-        const deltaTime = (currentTime - lastTime) / 1000; // Convert to seconds
-        state.time += deltaTime;
-
-        const fov = 60 * Math.PI / 180;
-        const aspect = canvas.clientWidth / 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();
-        const encoder = state.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.end();
-        state.device.queue.submit([encoder.finish()]);
-
-        lastTime = currentTime;
-        setTimeout(update, 16); // Approximate 60 FPS
+        const deltaTime = (currentTime - lastTime) / 1000;
+
+        if (currentTime - lastTime >= frameInterval) {
+            update(deltaTime, context);
+            lastTime = currentTime;
+        }
+
+        setTimeout(tick, 0);
     }
 
-    update();
+    tick();
+}
+
+function update(deltaTime, context) {
+    state.time += deltaTime;
+
+    // Set up projection and view matrices
+    const fov = 60 * Math.PI / 180;
+    const aspect = canvas.clientWidth / 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();
+
+    const encoder = state.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.end();
+    state.device.queue.submit([encoder.finish()]);
 }
 
 main();

wgpu-config.js

@@ -21,5 +21,6 @@ export const config = {
     render: {
         zNear: 0.001,
         zFar: 50
-    }
+    },
+    maxFPS: 60
 };