✨ Updated state initialization for canvas

index.js

@@ -16,28 +16,23 @@ import { InitializeShaders } from './wgpu-shader.js';
 import { GenerateVertexDataAndTexture } from './wgpu-texture.js';
 import { generateGlyphVerticesForText } from './wgpu-text.js';
 
-// Initialize Canvas function
 async function InitializeCanvas(state) {
-    const canvas = document.createElement('canvas');
-    canvas.width = config.canvas.width;
-    canvas.height = config.canvas.height;
-    document.body.appendChild(canvas);
+    state.canvas.width = config.canvas.width;
+    state.canvas.height = config.canvas.height;
 
-    const adapter = await navigator.gpu.requestAdapter();
-    const { device, context, presentationFormat } = await initializeDevice(navigator, adapter, canvas);
+    state.webgpu.adapter = await navigator.gpu.requestAdapter();
+    const { device, context, presentationFormat } = await initializeDevice(navigator, state.webgpu.adapter, state.canvas);
 
     if (!device) {
         alert('Failed to initialize WebGPU');
         return;
     }
 
-    state.canvas = canvas;
     state.webgpu.device = device;
     state.webgpu.context = context;
     state.webgpu.presentationFormat = presentationFormat;
 }
 
-// Initialize Resources function
 async function InitializeResources(state) {
     const vertexSize = config.floatsPerVertex * 4;
 
@@ -51,12 +46,10 @@ async function InitializeResources(state) {
     GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
 }
 
-// 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;
@@ -83,7 +76,6 @@ function Render(state) {
     state.webgpu.device.queue.submit([encoder.finish()]);
 }
 
-// Game Loop function
 function GameLoop(state) {
     function Tick() {
         state.timing.currentTime = performance.now();
@@ -104,7 +96,6 @@ function GameLoop(state) {
     Tick();
 }
 
-// Main function
 const state = createState(config);
 
 async function Main() {
@@ -115,5 +106,5 @@ async function Main() {
     GameLoop(state);
 }
 
-// Start the main function
 Main();
+

wgpu-state.js

@@ -1,3 +1,5 @@
+// wgpu-state.js
+
 export function createState(config) {
     return {
         webgpu: {
@@ -12,6 +14,7 @@ export function createState(config) {
             context: null,
             presentationFormat: null,
             shaderCode: null,
+            adapter: null
         },
         matrices: {
             uniformValues: new Float32Array(config.floatsInUniformBuffer),
@@ -37,3 +40,4 @@ export function createState(config) {
         }
     };
 }
+