refactor config

config.js

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

index.js

@@ -1,6 +1,6 @@
 import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
 import { fetchShaderCode, generateGlyphTextureAtlas } from './utility.js';
-import { CONFIG } from './config.js';
+import { config } from './config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
 
 const canvas = document.querySelector('canvas');
@@ -34,12 +34,12 @@ async function main() {
         code: shaderCode,
     });
 
-    const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, CONFIG);
+    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;
     vertexBuffer = device.createBuffer({
         label: 'vertices',
         size: vertexBufferSize,
@@ -48,11 +48,11 @@ async function main() {
 
     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];
     });
@@ -99,11 +99,11 @@ async function main() {
 
     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);
 
     bindGroup = device.createBindGroup({
@@ -116,10 +116,10 @@ async function main() {
     });
 
     function render(time, context, pipeline, uniformBuffer, uniformValues, bindGroup, vertexBuffer, indexBuffer, RENDER_PASS_DESCRIPTOR) {
-        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();
@@ -142,9 +142,9 @@ async function main() {
 }
 
 function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
-    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;
 
@@ -157,10 +157,10 @@ function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
         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);
@@ -177,7 +177,7 @@ function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
         }
         x0 += 0.55; x1 = x0 + 1;
     }
-    return { vertexData, numGlyphs: offset / CONFIG.floatsPerVertex, width, height: y1 };
+    return { vertexData, numGlyphs: offset / config.floatsPerVertex, width, height: y1 };
 }
 
 function createTextureFromSource(device, source, options = {}) {