refactored game loop timing

index.js

@@ -11,7 +11,10 @@ import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js
 const canvas = document.querySelector('canvas');
 const state = createState(config);
 
-async function main() {
+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
+
+async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();
     const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, canvas);
     if (!device) return;
@@ -31,16 +34,16 @@ async function main() {
     glyphCanvas.style.backgroundColor = '#222';
 
     // Create vertex and index buffers
-    createBuffers();
+    CreateBuffers();
 
     // Generate vertex buffer data and texture
-    generateVertexDataAndTexture(glyphCanvas);
+    GenerateVertexDataAndTexture(glyphCanvas);
 
     // Start the game loop
-    gameLoop(context);
+    GameLoop(context);
 }
 
-function createBuffers() {
+function CreateBuffers() {
     const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
     state.vertexBuffer = state.device.createBuffer({
         label: 'vertices',
@@ -54,18 +57,18 @@ function createBuffers() {
         usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
     });
 
-    const indices = generateIndices(config.maxGlyphs);
+    const indices = GenerateIndices(config.maxGlyphs);
     state.device.queue.writeBuffer(state.indexBuffer, 0, new Uint32Array(indices));
 }
 
-function generateIndices(maxGlyphs) {
+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];
     });
 }
 
-function generateVertexDataAndTexture(glyphCanvas) {
+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);
 
@@ -97,28 +100,40 @@ function generateVertexDataAndTexture(glyphCanvas) {
     state.height = height;
 }
 
-function gameLoop(context) {
+function GameLoop(context) {
     let lastTime = performance.now();
-    const frameInterval = 1000 / config.maxFPS;
+    let accumulator = 0;
 
-    function tick() {
+    function Tick() {
         const currentTime = performance.now();
-        const deltaTime = (currentTime - lastTime) / 1000;
+        const frameTime = (currentTime - lastTime) / 1000;
+        lastTime = currentTime;
+
+        const deltaTime = Math.min(frameTime, MAX_FRAME_TIME);
+        accumulator += deltaTime;
 
-        if (currentTime - lastTime >= frameInterval) {
-            update(deltaTime, context);
-            lastTime = currentTime;
+        // Fixed time step updates for game logic
+        while (accumulator >= FIXED_DELTA_TIME) {
+            FixedUpdate(FIXED_DELTA_TIME);
+            accumulator -= FIXED_DELTA_TIME;
         }
 
-        setTimeout(tick, 0);
+        // Variable time step update for rendering
+        const alpha = accumulator / FIXED_DELTA_TIME;
+        Render(alpha, context);
+
+        requestAnimationFrame(Tick);
     }
 
-    tick();
+    Tick();
 }
 
-function update(deltaTime, context) {
+function FixedUpdate(deltaTime) {
     state.time += deltaTime;
+    // Perform game logic updates here, such as physics and AI
+}
 
+function Render(alpha, context) {
     // Set up projection and view matrices
     const fov = 60 * Math.PI / 180;
     const aspect = canvas.clientWidth / canvas.clientHeight;
@@ -141,4 +156,4 @@ function update(deltaTime, context) {
     state.device.queue.submit([encoder.finish()]);
 }
 
-main();
+Main();