clean up

config.js

@@ -1,6 +1,6 @@
 // config.js
 
-export const config = {
+export const CONFIG = {
     glyphsAcrossTexture: 16,
     glyphWidth: 32,
     glyphHeight: 40,

index.html

@@ -12,23 +12,22 @@
     <script type="module">
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
         import { fetchShaderCode } from './utility.js';
-        import { config } from './config.js';
+        import { CONFIG } from './config.js';
         import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
 
-        function generateGlyphTextureAtlas() {
-            CANVAS.width = config.canvas.width;
-            CANVAS.height = config.canvas.height;
-
-            CTX.font = config.context.font
-            CTX.textBaseline = config.context.textBaseline;
-            CTX.textAlign = config.context.textAlign;
-            CTX.fillStyle = config.context.fillStyle;
+        function generateGlyphTextureAtlas(canvas, ctx, config) {
+            canvas.width = config.canvas.width;
+            canvas.height = config.canvas.height;
+            ctx.font = config.context.font
+            ctx.textBaseline = config.context.textBaseline;
+            ctx.textAlign = config.context.textAlign;
+            ctx.fillStyle = config.context.fillStyle;
             for (let c = 33, x = 0, y = 0; c < 128; ++c) {
-                CTX.fillText(String.fromCodePoint(c), x + config.glyphWidth / 2, y + config.glyphHeight / 2);
-                x = (x + config.glyphWidth) % CANVAS.width;
+                ctx.fillText(String.fromCodePoint(c), x + config.glyphWidth / 2, y + config.glyphHeight / 2);
+                x = (x + config.glyphWidth) % canvas.width;
                 if (x === 0) y += config.glyphHeight;
             }
-            return CANVAS;
+            return canvas;
         }
         async function main() {
             const adapter = await navigator.gpu?.requestAdapter();
@@ -52,11 +51,11 @@
                 code: shaderCode,
             });
 
-            const glyphCanvas = generateGlyphTextureAtlas();
+            const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, CONFIG);
             document.body.appendChild(glyphCanvas);
             glyphCanvas.style.backgroundColor = '#222';
-            const vertexSize = config.floatsPerVertex * 4;
-            const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * vertexSize;
+            const vertexSize = CONFIG.floatsPerVertex * 4;
+            const vertexBufferSize = CONFIG.maxGlyphs * CONFIG.vertsPerGlyph * vertexSize;
             const vertexBuffer = device.createBuffer({
                 label: 'vertices',
                 size: vertexBufferSize,
@@ -64,20 +63,20 @@
             });
             const indexBuffer = device.createBuffer({
                 label: 'indices',
-                size: config.maxGlyphs * config.vertsPerGlyph * 4,
+                size: CONFIG.maxGlyphs * CONFIG.vertsPerGlyph * 4,
                 usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
             });
 
-            const indices = Array.from({ length: config.maxGlyphs * 6 }, (_, i) => {
+            const indices = Array.from({ length: CONFIG.maxGlyphs * 6 }, (_, i) => {
                 const ndx = Math.floor(i / 6) * 4;
                 return (i % 6 < 3 ? [ndx, ndx + 1, ndx + 2] : [ndx + 2, ndx + 1, ndx + 3])[i % 3];
             });
             device.queue.writeBuffer(indexBuffer, 0, new Uint32Array(indices));
 
             function generateGlyphVerticesForText(s, COLORS = [[1, 1, 1, 1]]) {
-                const vertexData = new Float32Array(config.maxGlyphs * config.floatsPerVertex * config.vertsPerGlyph);
-                const glyphUVWidth = config.glyphWidth / glyphCanvas.width;
-                const glyphUVHeight = config.glyphHeight / glyphCanvas.height;
+                const vertexData = new Float32Array(CONFIG.maxGlyphs * CONFIG.floatsPerVertex * CONFIG.vertsPerGlyph);
+                const glyphUVWidth = CONFIG.glyphWidth / glyphCanvas.width;
+                const glyphUVHeight = CONFIG.glyphHeight / glyphCanvas.height;
                 let offset = 0, x0 = 0, y0 = 0, x1 = 1, y1 = 1, width = 0;
                 let colorNdx = 0;
 
@@ -90,10 +89,10 @@
                     const c = s.charCodeAt(i);
                     if (c >= 33) {
                         const cIndex = c - 33;
-                        const glyphX = cIndex % config.glyphsAcrossTexture;
-                        const glyphY = Math.floor(cIndex / config.glyphsAcrossTexture);
-                        const u0 = glyphX * config.glyphWidth / glyphCanvas.width;
-                        const v1 = glyphY * config.glyphHeight / glyphCanvas.height;
+                        const glyphX = cIndex % CONFIG.glyphsAcrossTexture;
+                        const glyphY = Math.floor(cIndex / CONFIG.glyphsAcrossTexture);
+                        const u0 = glyphX * CONFIG.glyphWidth / glyphCanvas.width;
+                        const v1 = glyphY * CONFIG.glyphHeight / glyphCanvas.height;
                         const u1 = u0 + glyphUVWidth;
                         const v0 = v1 + glyphUVHeight;
                         width = Math.max(x1, width);
@@ -111,7 +110,7 @@
                     }
                     x0 += 0.55; x1 = x0 + 1;
                 }
-                return { vertexData, numGlyphs: offset / config.floatsPerVertex, width, height: y1 };
+                return { vertexData, numGlyphs: offset / CONFIG.floatsPerVertex, width, height: y1 };
             }
 
             const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS);
@@ -171,10 +170,10 @@
 
             const uniformBuffer = device.createBuffer({
                 label: 'uniforms for quad',
-                size: config.uniformBufferSize,
+                size: CONFIG.uniformBufferSize,
                 usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
             });
-            const uniformValues = new Float32Array(config.uniformBufferSize / 4);
+            const uniformValues = new Float32Array(CONFIG.uniformBufferSize / 4);
             const matrix = uniformValues.subarray(0, 16);
 
             const bindGroup = device.createBindGroup({
@@ -187,10 +186,10 @@
             });
 
             function render(time) {
-                time *= config.time.phase;
+                time *= CONFIG.time.phase;
                 const fov = 60 * Math.PI / 180;
                 const aspect = canvas.clientWidth / canvas.clientHeight;
-                const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
+                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 = context.getCurrentTexture().createView();