add to config

config.js

@@ -5,5 +5,6 @@ export const config = {
     glyphWidth: 32,
     glyphHeight: 40,
     maxGlyphs: 100,
-    vertsPerGlyph: 6
+    vertsPerGlyph: 6,
+    floatsPerVertex: 8
 };

index.html

@@ -54,8 +54,7 @@
             const glyphCanvas = generateGlyphTextureAtlas();
             document.body.appendChild(glyphCanvas);
             glyphCanvas.style.backgroundColor = '#222';
-            const floatsPerVertex = 2 + 2 + 4;
-            const vertexSize = floatsPerVertex * 4;
+            const vertexSize = config.floatsPerVertex * 4;
             const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * vertexSize;
             const vertexBuffer = device.createBuffer({
                 label: 'vertices',
@@ -75,7 +74,7 @@
             device.queue.writeBuffer(indexBuffer, 0, new Uint32Array(indices));
 
             function generateGlyphVerticesForText(s, colors = [[1, 1, 1, 1]]) {
-                const vertexData = new Float32Array(config.maxGlyphs * floatsPerVertex * config.vertsPerGlyph);
+                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;
@@ -111,7 +110,7 @@
                     }
                     x0 += 0.55; x1 = x0 + 1;
                 }
-                return { vertexData, numGlyphs: offset / floatsPerVertex, width, height: y1 };
+                return { vertexData, numGlyphs: offset / config.floatsPerVertex, width, height: y1 };
             }
 
             const colors = [