glyphs

config.js

@@ -1,7 +1,9 @@
 // config.js
 
 const config = {
-    glyphsAcrossTexture: 16
+    glyphsAcrossTexture: 16,
+    glyphWidth: 32,
+    glyphHeight: 40
 };
 
 export { config }

index.html

@@ -13,8 +13,6 @@
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
         import { fetchShaderCode } from './utility.js';
         import { config } from './config.js';
-        const glyphWidth = 32;
-        const glyphHeight = 40;
         function generateGlyphTextureAtlas() {
             const canvas = document.createElement('canvas');
             canvas.width = 512;
@@ -25,9 +23,9 @@
             ctx.textAlign = 'center';
             ctx.fillStyle = 'white';
             for (let c = 33, x = 0, y = 0; c < 128; ++c) {
-                ctx.fillText(String.fromCodePoint(c), x + glyphWidth / 2, y + glyphHeight / 2);
-                x = (x + glyphWidth) % canvas.width;
-                if (x === 0) y += glyphHeight;
+                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;
         }
@@ -81,8 +79,8 @@
 
             function generateGlyphVerticesForText(s, colors = [[1, 1, 1, 1]]) {
                 const vertexData = new Float32Array(maxGlyphs * floatsPerVertex * vertsPerGlyph);
-                const glyphUVWidth = glyphWidth / glyphCanvas.width;
-                const glyphUVHeight = glyphHeight / glyphCanvas.height;
+                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;
 
@@ -97,8 +95,8 @@
                         const cIndex = c - 33;
                         const glyphX = cIndex % config.glyphsAcrossTexture;
                         const glyphY = Math.floor(cIndex / config.glyphsAcrossTexture);
-                        const u0 = glyphX * glyphWidth / glyphCanvas.width;
-                        const v1 = glyphY * glyphHeight / glyphCanvas.height;
+                        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);