undo

index.html

@@ -165,12 +165,16 @@
 
             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: 'textured quad pipeline',
+                label: 'hardcoded textured quad pipeline',
                 layout: 'auto',
                 vertex: {
                     module,
@@ -179,9 +183,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
                             ],
                         },
                     ],
@@ -189,7 +193,23 @@
                 fragment: {
                     module,
                     entryPoint: 'fs',
-                    targets: [{ format: presentationFormat }],
+                    targets: [
+                        {
+                            format: presentationFormat,
+                            blend: {
+                                color: {
+                                    srcFactor: 'one',
+                                    dstFactor: 'one-minus-src-alpha',
+                                    operation: 'add',
+                                },
+                                alpha: {
+                                    srcFactor: 'one',
+                                    dstFactor: 'one-minus-src-alpha',
+                                    operation: 'add',
+                                },
+                            },
+                        },
+                    ],
                 },
             });