extrapolate index.render

index.js

@@ -53,7 +53,7 @@ async function main() {
     });
     state.device.queue.writeBuffer(state.indexBuffer, 0, new Uint32Array(indices));
 
-    const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, glyphCanvas);
+    const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, config, glyphCanvas);
     state.device.queue.writeBuffer(state.vertexBuffer, 0, vertexData);
 
     state.texture = createTextureFromSource(state.device, glyphCanvas, { mips: true });
@@ -83,10 +83,10 @@ async function main() {
     state.width = width;
     state.height = height;
 
-    requestAnimationFrame((time) => render(time, context, state, RENDER_PASS_DESCRIPTOR));
+    requestAnimationFrame((time) => render(time, mat4, context, state, RENDER_PASS_DESCRIPTOR));
 }
 
-function render(time, context, state, RENDER_PASS_DESCRIPTOR) {
+function render(time, mat4, context, state, RENDER_PASS_DESCRIPTOR) {
     time *= config.time.phase;
     const fov = 60 * Math.PI / 180;
     const aspect = canvas.clientWidth / canvas.clientHeight;
@@ -106,10 +106,10 @@ function render(time, context, state, RENDER_PASS_DESCRIPTOR) {
     pass.drawIndexed(state.numGlyphs * 6);
     pass.end();
     state.device.queue.submit([encoder.finish()]);
-    requestAnimationFrame((t) => render(t, context, state, RENDER_PASS_DESCRIPTOR));
+    requestAnimationFrame((t) => render(t, mat4, context, state, RENDER_PASS_DESCRIPTOR));
 }
 
-function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
+function generateGlyphVerticesForText(text, colors, config, glyphCanvas) {
     const vertexData = new Float32Array(config.maxGlyphs * config.floatsPerVertex * config.vertsPerGlyph);
     const glyphUVWidth = config.glyphWidth / glyphCanvas.width;
     const glyphUVHeight = config.glyphHeight / glyphCanvas.height;
@@ -121,8 +121,8 @@ function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
         offset += 8;
     };
 
-    for (let i = 0; i < s.length; ++i) {
-        const c = s.charCodeAt(i);
+    for (let i = 0; i < text.length; ++i) {
+        const c = text.charCodeAt(i);
         if (c >= 33) {
             const cIndex = c - 33;
             const glyphX = cIndex % config.glyphsAcrossTexture;
@@ -132,12 +132,12 @@ function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {
             const u1 = u0 + glyphUVWidth;
             const v0 = v1 + glyphUVHeight;
             width = Math.max(x1, width);
-            addVertex(x0, y0, u0, v0, COLORS[colorNdx]);
-            addVertex(x1, y0, u1, v0, COLORS[colorNdx]);
-            addVertex(x0, y1, u0, v1, COLORS[colorNdx]);
-            addVertex(x1, y1, u1, v1, COLORS[colorNdx]);
+            addVertex(x0, y0, u0, v0, colors[colorNdx]);
+            addVertex(x1, y0, u1, v0, colors[colorNdx]);
+            addVertex(x0, y1, u0, v1, colors[colorNdx]);
+            addVertex(x1, y1, u1, v1, colors[colorNdx]);
         } else {
-            colorNdx = (colorNdx + 1) % COLORS.length;
+            colorNdx = (colorNdx + 1) % colors.length;
             if (c === 10) { // Newline
                 x0 = 0; x1 = 1; y0--; y1 = y0 + 1;
                 continue;