🐈

index.html

@@ -126,38 +126,24 @@
             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;
-                let offset = 0;
-                let x0 = 0;
-                let x1 = 1;
-                let y0 = 0;
-                let y1 = 1;
-                let width = 0;
+                const glyphUVHeight = glyphHeight / glyphCanvas.height;
+                let offset = 0, x0 = 0, y0 = 0, x1 = 1, y1 = 1, width = 0;
+                let colorNdx = 0;
 
                 const addVertex = (x, y, u, v, r, g, b, a) => {
-                    vertexData[offset++] = x;
-                    vertexData[offset++] = y;
-                    vertexData[offset++] = u;
-                    vertexData[offset++] = v;
-                    vertexData[offset++] = r;
-                    vertexData[offset++] = g;
-                    vertexData[offset++] = b;
-                    vertexData[offset++] = a;
+                    vertexData.set([x, y, u, v, r, g, b, a], offset);
+                    offset += 8;
                 };
 
-                const spacing = 0.55;
-                let colorNdx = 0;
                 for (let i = 0; i < s.length; ++i) {
-                    // convert char code to texcoords for glyph texture
                     const c = s.charCodeAt(i);
                     if (c >= 33) {
-                        const cNdx = c - 33;
-                        const glyphX = cNdx % glyphsAcrossTexture;
-                        const glyphY = Math.floor(cNdx / glyphsAcrossTexture);
+                        const glyphX = (c - 33) % glyphsAcrossTexture;
+                        const glyphY = Math.floor((c - 33) / glyphsAcrossTexture);
                         const u0 = (glyphX * glyphWidth) / glyphCanvas.width;
-                        const v1 = (glyphY * glyphHeight) / glyphCanvas.height;
+                        const v0 = ((glyphY + 1) * glyphHeight) / glyphCanvas.height;
                         const u1 = u0 + glyphUVWidth;
-                        const v0 = v1 + glyphUVheight;
+                        const v1 = v0 - glyphUVHeight;
                         width = Math.max(x1, width);
 
                         addVertex(x0, y0, u0, v0, ...colors[colorNdx]);
@@ -167,37 +153,24 @@
                     } else {
                         colorNdx = (colorNdx + 1) % colors.length;
                         if (c === 10) {
-                            x0 = 0;
-                            x1 = 1;
-                            y0 = y0 - 1;
-                            y1 = y0 + 1;
+                            x0 = 0; x1 = 1; y0--; y1 = y0 + 1;
                             continue;
                         }
                     }
-                    x0 = x0 + spacing;
-                    x1 = x0 + 1;
+                    x0 += 0.55; x1 = x0 + 1;
                 }
 
-                return {
-                    vertexData,
-                    numGlyphs: offset / floatsPerVertex,
-                    width,
-                    height: y1,
-                };
+                return { vertexData, numGlyphs: offset / floatsPerVertex, width, height: y1 };
             }
 
             const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText(
                 'Hello\nworld!\nText in\nWebGPU!', [
-                [1, 1, 0, 1],
-                [0, 1, 1, 1],
-                [1, 0, 1, 1],
-                [1, 0, 0, 1],
-                [0, .5, 1, 1],
+                [1, 1, 0, 1], [0, 1, 1, 1], [1, 0, 1, 1], [1, 0, 0, 1], [0, .5, 1, 1],
             ]);
             device.queue.writeBuffer(vertexBuffer, 0, vertexData);
 
             const pipeline = device.createRenderPipeline({
-                label: 'hardcoded textured quad pipeline',
+                label: 'textured quad pipeline',
                 layout: 'auto',
                 vertex: {
                     module,
@@ -206,9 +179,9 @@
                         {
                             arrayStride: vertexSize,
                             attributes: [
-                                { shaderLocation: 0, offset: 0, format: 'float32x2' },  // position
-                                { shaderLocation: 1, offset: 8, format: 'float32x2' },  // texcoord
-                                { shaderLocation: 2, offset: 16, format: 'float32x4' },  // color
+                                { shaderLocation: 0, offset: 0, format: 'float32x2' }, // position
+                                { shaderLocation: 1, offset: 8, format: 'float32x2' }, // texcoord
+                                { shaderLocation: 2, offset: 16, format: 'float32x4' } // color
                             ],
                         },
                     ],
@@ -216,23 +189,7 @@
                 fragment: {
                     module,
                     entryPoint: 'fs',
-                    targets: [
-                        {
-                            format: presentationFormat,
-                            blend: {
-                                color: {
-                                    srcFactor: 'one',
-                                    dstFactor: 'one-minus-src-alpha',
-                                    operation: 'add',
-                                },
-                                alpha: {
-                                    srcFactor: 'one',
-                                    dstFactor: 'one-minus-src-alpha',
-                                    operation: 'add',
-                                },
-                            },
-                        },
-                    ],
+                    targets: [{ format: presentationFormat }],
                 },
             });