🔧 Refactor vertex size calculation in config

wgpu-config.js

@@ -8,6 +8,7 @@ export const config = {
     uniformBufferSize: 64,
     floatsInUniformBuffer: 16,
     matrixSize: 16,
+    vertexMultiplier: 4,
     canvas: {
         width: 512,
         height: 256

wgpu-device.js

@@ -1,10 +1,10 @@
 // wgpu-device.js
 
 export async function initializeDevice(state) {
-    const context = state.canvas.getContext('webgpu');
-    const device = await state.webgpu.adapter?.requestDevice();
+    state.webgpu.context = state.canvas.getContext('webgpu');
+    state.webgpu.device = await state.webgpu.adapter?.requestDevice();
     
-    if (!device) {
+    if (!state.webgpu.device) {
         alert('need a browser that supports WebGPU');
         state.webgpu.device = null;
         state.webgpu.context = null;
@@ -12,13 +12,9 @@ export async function initializeDevice(state) {
         return;
     }
 
-    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    context.configure({
-        device,
-        format: presentationFormat,
+    state.webgpu.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    state.webgpu.context.configure({
+        device: state.webgpu.device,
+        format: state.webgpu.presentationFormat,
     });
-
-    state.webgpu.device = device;
-    state.webgpu.context = context;
-    state.webgpu.presentationFormat = presentationFormat;
 }

wgpu-state.js

@@ -15,7 +15,7 @@ export function createState(config) {
             sampler: null,
             bindGroup: null,
             shaderCode: null,
-            vertexSize: config.floatsPerVertex * 4,
+            vertexSize: config.floatsPerVertex * config.vertexMultiplier,
         },
         matrices: {
             uniformValues: new Float32Array(config.floatsInUniformBuffer),