initialization of resources

index.js

@@ -26,6 +26,15 @@ async function Main() {
 
     state.device = device;
 
+    // Initialize Resources
+    await InitializeResources(presentationFormat);
+
+    // Start the game loop
+    GameLoop(context);
+}
+
+// Initialize shaders, pipeline, textures, and buffers
+async function InitializeResources(presentationFormat) {
     // Load shader code
     const shaderCode = await fetchShaderCode('shaders.wgsl');
     const vertexSize = config.floatsPerVertex * 4;
@@ -43,11 +52,9 @@ async function Main() {
 
     // Generate vertex buffer data and texture
     GenerateVertexDataAndTexture(glyphCanvas);
-
-    // Start the game loop
-    GameLoop(context);
 }
 
+// Function to create vertex and index buffers
 function CreateBuffers() {
     const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * config.floatsPerVertex * 4;
     state.vertexBuffer = state.device.createBuffer({
@@ -66,6 +73,7 @@ function CreateBuffers() {
     state.device.queue.writeBuffer(state.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) => {
@@ -74,6 +82,7 @@ function GenerateIndices(maxGlyphs) {
     });
 }
 
+// Function to generate vertex data and texture
 function GenerateVertexDataAndTexture(glyphCanvas) {
     const glyphData = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, config, glyphCanvas);
     state.device.queue.writeBuffer(state.vertexBuffer, 0, glyphData.vertexData);
@@ -107,6 +116,7 @@ function GenerateVertexDataAndTexture(glyphCanvas) {
     state.height = glyphData.height;
 }
 
+// Game loop function
 function GameLoop(context) {
     let lastTime = performance.now();
     let accumulator = 0;
@@ -136,11 +146,13 @@ function GameLoop(context) {
     Tick();
 }
 
+// Fixed update function for game logic
 function FixedUpdate(deltaTime) {
     state.time += deltaTime;
     // Perform game logic updates here, such as physics and AI
 }
 
+// Render function
 function Render(alpha, context) {
     // Set up projection and view matrices
     const fov = 60 * Math.PI / 180;
@@ -164,4 +176,6 @@ function Render(alpha, context) {
     state.device.queue.submit([encoder.finish()]);
 }
 
+// Initialize application
 Main();
+