🚀Organize and streamline imports

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 NaXzyu
+Copyright (c) 2024 p3nGu1nZz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

index.js

@@ -1,28 +1,29 @@
+// index.js
+
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
-import { initializeDevice } from './wgpu-device.js';
+
+import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
+import { config } from './wgpu-config.js';
+
 import { createState } from './wgpu-state.js';
+import { initializeDevice } from './wgpu-device.js';
+import { CreateBuffers } from './wgpu-buffer.js';
 import { initializeTiming } from './wgpu-timing.js';
 import { createPipeline } from './wgpu-pipeline.js';
+
 import { generateGlyphTextureAtlas, createTextureFromSource } from './wgpu-utility.js';
 import { InitializeShaders } from './wgpu-shader.js';
 import { GenerateVertexDataAndTexture } from './wgpu-texture.js';
 import { generateGlyphVerticesForText } from './wgpu-text.js';
-import { config } from './wgpu-config.js';
-import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './wgpu-constants.js';
-import { CreateBuffers } from './wgpu-buffer.js';
 
 // Initialize Canvas function
-async function InitializeCanvas(config) {
-    // Create and configure the canvas element
+async function InitializeCanvas(state) {
     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) {
@@ -30,26 +31,10 @@ async function InitializeCanvas(config) {
         return;
     }
 
-    // Return essential components for further setup
-    return { canvas, device, context, presentationFormat };
-}
-
-// Main function
-const state = createState(config);
-
-async function Main() {
-    const { canvas, device, context, presentationFormat } = await InitializeCanvas(config);
     state.canvas = canvas;
     state.webgpu.device = device;
     state.webgpu.context = context;
     state.webgpu.presentationFormat = presentationFormat;
-
-    initializeTiming(state);
-
-    await InitializeShaders(state);
-    await InitializeResources(state);
-
-    GameLoop(state);
 }
 
 // Initialize Resources function
@@ -63,32 +48,9 @@ async function InitializeResources(state) {
     glyphCanvas.style.backgroundColor = '#222';
 
     CreateBuffers(state, config);
-
     GenerateVertexDataAndTexture(state, glyphCanvas, generateGlyphVerticesForText, COLORS, config, createTextureFromSource);
 }
 
-// Game Loop function
-function GameLoop(state) {
-    function Tick(state) {
-        state.timing.currentTime = performance.now();
-        state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;
-        state.timing.lastTime = state.timing.currentTime;
-        state.timing.deltaTime = Math.min(state.timing.frameTime, state.timing.maxFrameTime);
-        state.timing.accumulator += state.timing.deltaTime;
-
-        while (state.timing.accumulator >= state.timing.fixedDeltaTime) {
-            FixedUpdate(state);
-            state.timing.accumulator -= state.timing.fixedDeltaTime;
-        }
-        
-        Render(state);
-
-        setTimeout(() => Tick(state), state.timing.frameDuration);
-    }
-
-    Tick(state);
-}
-
 // Fixed Update function
 function FixedUpdate(state) {
     state.timing.time += state.timing.fixedDeltaTime;
@@ -101,20 +63,57 @@ function Render(state) {
     const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
     const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
     const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
+
     RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = state.webgpu.context.getCurrentTexture().createView();
     const encoder = state.webgpu.device.createCommandEncoder();
     const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
+
     pass.setPipeline(state.webgpu.pipeline);
     mat4.rotateY(viewProjectionMatrix, state.timing.time, state.matrices.matrix);
     mat4.translate(state.matrices.matrix, [-state.glyphs.width / 2, -state.glyphs.height / 2, 0], state.matrices.matrix);
+
     state.webgpu.device.queue.writeBuffer(state.webgpu.uniformBuffer, 0, state.matrices.uniformValues);
+
     pass.setBindGroup(0, state.webgpu.bindGroup);
     pass.setVertexBuffer(0, state.webgpu.vertexBuffer);
     pass.setIndexBuffer(state.webgpu.indexBuffer, 'uint32');
     pass.drawIndexed(state.glyphs.numGlyphs * 6);
     pass.end();
+
     state.webgpu.device.queue.submit([encoder.finish()]);
 }
 
+// Game Loop function
+function GameLoop(state) {
+    function Tick() {
+        state.timing.currentTime = performance.now();
+        state.timing.frameTime = (state.timing.currentTime - state.timing.lastTime) / 1000;
+        state.timing.lastTime = state.timing.currentTime;
+        state.timing.deltaTime = Math.min(state.timing.frameTime, state.timing.maxFrameTime);
+        state.timing.accumulator += state.timing.deltaTime;
+
+        while (state.timing.accumulator >= state.timing.fixedDeltaTime) {
+            FixedUpdate(state);
+            state.timing.accumulator -= state.timing.fixedDeltaTime;
+        }
+
+        Render(state);
+        setTimeout(Tick, state.timing.frameDuration);
+    }
+
+    Tick();
+}
+
+// Main function
+const state = createState(config);
+
+async function Main() {
+    await InitializeCanvas(state);
+    initializeTiming(state);
+    await InitializeShaders(state);
+    await InitializeResources(state);
+    GameLoop(state);
+}
+
 // Start the main function
 Main();