cleanup

index.js

@@ -8,11 +8,16 @@ import { generateGlyphVerticesForText } from './wgpu-text.js';
 import { config } from './wgpu-config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
 
+// Canvas element for rendering
 const canvas = document.querySelector('canvas');
+
+// State initialization
 const state = createState(config);
 
 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
 
 async function Main() {
     const adapter = await navigator.gpu?.requestAdapter();
@@ -25,10 +30,10 @@ async function Main() {
     const shaderCode = await fetchShaderCode('shaders.wgsl');
     const vertexSize = config.floatsPerVertex * 4;
 
-    // Create pipeline
+    // Create rendering pipeline
     state.pipeline = await createPipeline(state.device, presentationFormat, vertexSize, shaderCode);
 
-    // Generate and display glyph texture atlas
+    // Generate glyph texture atlas
     const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
     document.body.appendChild(glyphCanvas);
     glyphCanvas.style.backgroundColor = '#222';
@@ -62,6 +67,7 @@ function CreateBuffers() {
 }
 
 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];
@@ -122,7 +128,8 @@ function GameLoop(context) {
         const alpha = accumulator / FIXED_DELTA_TIME;
         Render(alpha, context);
 
-        requestAnimationFrame(Tick);
+        // Schedule the next frame update
+        setTimeout(Tick, FRAME_DURATION);
     }
 
     Tick();