🌟 feat: Modularize WebGPU initialization

index.js

@@ -1,5 +1,5 @@
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
-import { initializeWebGPU } from './wgpu-device.js';
+import { initializeDevice } from './wgpu-device.js';
 import { createState } from './wgpu-state.js';
 import { initializeTiming } from './wgpu-timing.js';
 import { createPipeline } from './wgpu-pipeline.js';
@@ -11,19 +11,35 @@ import { config } from './wgpu-config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
 import { CreateBuffers } from './wgpu-buffer.js';
 
-const canvas = document.createElement('canvas');
-canvas.width = config.canvas.width;
-canvas.height = config.canvas.height;
-document.body.appendChild(canvas);
+// Initialize Canvas function
+async function InitializeCanvas(config) {
+    // Create and configure the canvas element
+    const canvas = document.createElement('canvas');
+    canvas.width = config.canvas.width;
+    canvas.height = config.canvas.height;
+    document.body.appendChild(canvas);
 
+    // Request WebGPU adapter and device
+    const adapter = await navigator.gpu.requestAdapter();
+
+    // Use the existing initializeDevice function
+    const { device, context, presentationFormat } = await initializeDevice(navigator, adapter, canvas);
+
+    if (!device) {
+        alert('Failed to initialize WebGPU');
+        return;
+    }
+
+    // Return essential components for further setup
+    return { canvas, device, context, presentationFormat };
+}
+
+// Main function
 const state = createState(config);
-state.canvas = canvas;
 
 async function Main() {
-    const adapter = await navigator.gpu?.requestAdapter();
-    const { device, context, presentationFormat } = await initializeWebGPU(navigator, adapter, state.canvas);
-    if (!device) return;
-
+    const { canvas, device, context, presentationFormat } = await InitializeCanvas(config);
+    state.canvas = canvas;
     state.webgpu.device = device;
     state.webgpu.context = context;
     state.webgpu.presentationFormat = presentationFormat;
@@ -36,6 +52,7 @@ async function Main() {
     GameLoop(state);
 }
 
+// Initialize Resources function
 async function InitializeResources(state) {
     const vertexSize = config.floatsPerVertex * 4;
 
@@ -50,6 +67,7 @@ async function InitializeResources(state) {
     GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
 }
 
+// Game Loop function
 function GameLoop(state) {
     function Tick(state) {
         state.timing.currentTime = performance.now();
@@ -71,10 +89,12 @@ function GameLoop(state) {
     Tick(state);
 }
 
+// Fixed Update function
 function FixedUpdate(state) {
     state.timing.time += state.timing.fixedDeltaTime;
 }
 
+// Render function
 function Render(state) {
     const fov = 60 * Math.PI / 180;
     const aspect = state.canvas.clientWidth / state.canvas.clientHeight;
@@ -96,4 +116,5 @@ function Render(state) {
     state.webgpu.device.queue.submit([encoder.finish()]);
 }
 
+// Start the main function
 Main();

wgpu-device.js

@@ -1,6 +1,6 @@
-// wgpu-devices.js
+// wgpu-device.js
 
-export async function initializeWebGPU(navigator, adapter, canvas) {
+export async function initializeDevice(navigator, adapter, canvas) {
     const context = canvas.getContext('webgpu');
     const device = await adapter?.requestDevice();
     if (!device) {
@@ -15,4 +15,4 @@ export async function initializeWebGPU(navigator, adapter, canvas) {
     });
 
     return { device, context, presentationFormat };
-}
+}