shaders should be in their own files

index.html

@@ -34,9 +34,10 @@
             const adapter = await navigator.gpu?.requestAdapter();
             const device = await adapter?.requestDevice();
             if (!device) {
-                fail('need a browser that supports WebGPU');
+                alert('need a browser that supports WebGPU');
                 return;
             }
+
             const canvas = document.querySelector('canvas');
             const context = canvas.getContext('webgpu');
             const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
@@ -44,46 +45,23 @@
                 device,
                 format: presentationFormat,
             });
-            const module = device.createShaderModule({
-                label: 'our hardcoded textured quad shaders',
-                code: `
-      struct VSInput {
-        @location(0) position: vec4f,
-        @location(1) texcoord: vec2f,
-        @location(2) color: vec4f,
-      };
-
-      struct VSOutput {
-        @builtin(position) position: vec4f,
-        @location(0) texcoord: vec2f,
-        @location(1) color: vec4f,
-      };
-
-      struct Uniforms {
-        matrix: mat4x4f,
-      };
 
-      @group(0) @binding(2) var<uniform> uni: Uniforms;
-
-      @vertex fn vs(vin: VSInput) -> VSOutput {
-        var vsOutput: VSOutput;
-        vsOutput.position = uni.matrix * vin.position;
-        vsOutput.texcoord = vin.texcoord;
-        vsOutput.color = vin.color;
-        return vsOutput;
-      }
-
-      @group(0) @binding(0) var ourSampler: sampler;
-      @group(0) @binding(1) var ourTexture: texture_2d<f32>;
+            // Fetch shader code from external file
+            async function fetchShaderCode(url) {
+                const response = await fetch(url);
+                return await response.text();
+            }
 
-      @fragment fn fs(fsInput: VSOutput) -> @location(0) vec4f {
-        return textureSample(ourTexture, ourSampler, fsInput.texcoord) * fsInput.color;
-      }
-    `,
+            const shaderCode = await fetchShaderCode('shaders.wgsl');
+            const module = device.createShaderModule({
+                label: 'textured quad shaders',
+                code: shaderCode,
             });
+
             const glyphCanvas = genreateGlyphTextureAtlas();
             document.body.appendChild(glyphCanvas);
             glyphCanvas.style.backgroundColor = '#222';
+
             const maxGlyphs = 100;
             const floatsPerVertex = 2 + 2 + 4;
             const vertexSize = floatsPerVertex * 4;
@@ -99,24 +77,25 @@
                 size: maxGlyphs * vertsPerGlyph * 4,
                 usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
             });
-            {
-                const indices = [];
-                for (let i = 0; i < maxGlyphs; ++i) {
-                    const ndx = i * 4;
-                    indices.push(ndx, ndx + 1, ndx + 2, ndx + 2, ndx + 1, ndx + 3);
-                }
-                device.queue.writeBuffer(indexBuffer, 0, new Uint32Array(indices));
-            }
+
+            const indices = Array.from({ length: maxGlyphs * 6 }, (_, i) => {
+                const ndx = Math.floor(i / 6) * 4;
+                return (i % 6 < 3 ? [ndx, ndx + 1, ndx + 2] : [ndx + 2, ndx + 1, ndx + 3])[i % 3];
+            });
+            device.queue.writeBuffer(indexBuffer, 0, new Uint32Array(indices));
+
             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, x0 = 0, y0 = 0, x1 = 1, y1 = 1, width = 0;
                 let colorNdx = 0;
+
                 const addVertex = (x, y, u, v, color) => {
                     vertexData.set([x, y, u, v, ...color], offset);
                     offset += 8;
                 };
+
                 for (let i = 0; i < s.length; ++i) {
                     const c = s.charCodeAt(i);
                     if (c >= 33) {
@@ -144,6 +123,7 @@
                 }
                 return { vertexData, numGlyphs: offset / floatsPerVertex, width, height: y1 };
             }
+
             const colors = [
                 [1, 1, 0, 1],
                 [0, 1, 1, 1],
@@ -153,6 +133,7 @@
             ];
             const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', colors);
             device.queue.writeBuffer(vertexBuffer, 0, vertexData);
+
             const pipeline = device.createRenderPipeline({
                 label: 'textured quad pipeline',
                 layout: 'auto',
@@ -182,6 +163,7 @@
                     }],
                 },
             });
+
             function copySourceToTexture(device, texture, source, { flipY } = {}) {
                 device.queue.copyExternalImageToTexture(
                     { source, flipY },
@@ -189,6 +171,7 @@
                     { width: source.width, height: source.height }
                 );
             }
+
             function createTextureFromSource(device, source, options = {}) {
                 const texture = device.createTexture({
                     format: 'rgba8unorm',
@@ -198,11 +181,13 @@
                 copySourceToTexture(device, texture, source, options);
                 return texture;
             }
+
             const texture = createTextureFromSource(device, glyphCanvas, { mips: true });
             const sampler = device.createSampler({
                 minFilter: 'linear',
                 magFilter: 'linear'
             });
+
             const uniformBufferSize = 16 * 4; //f32
             const uniformBuffer = device.createBuffer({
                 label: 'uniforms for quad',
@@ -211,6 +196,7 @@
             });
             const uniformValues = new Float32Array(uniformBufferSize / 4);
             const matrix = uniformValues.subarray(0, 16);
+
             const bindGroup = device.createBindGroup({
                 layout: pipeline.getBindGroupLayout(0),
                 entries: [
@@ -219,6 +205,7 @@
                     { binding: 2, resource: { buffer: uniformBuffer } },
                 ],
             });
+
             const renderPassDescriptor = {
                 label: 'canvas render pass',
                 colorAttachments: [{
@@ -227,6 +214,7 @@
                     storeOp: 'store',
                 }],
             };
+
             function render(time) {
                 time *= 0.001;
                 const fov = 60 * Math.PI / 180;
@@ -235,6 +223,7 @@
                 const projectionMatrix = mat4.perspective(fov, aspect, zNear, zFar);
                 const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
                 const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
+
                 renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView();
                 const encoder = device.createCommandEncoder();
                 const pass = encoder.beginRenderPass(renderPassDescriptor);
@@ -250,6 +239,7 @@
                 device.queue.submit([encoder.finish()]);
                 requestAnimationFrame(render);
             }
+
             requestAnimationFrame(render);
         }
         function fail(msg) {

shaders.wgsl

@@ -0,0 +1,32 @@
+struct VSInput {
+    @location(0) position: vec4f,
+    @location(1) texcoord: vec2f,
+    @location(2) color: vec4f,
+};
+
+struct VSOutput {
+    @builtin(position) position: vec4f,
+    @location(0) texcoord: vec2f,
+    @location(1) color: vec4f,
+};
+
+struct Uniforms {
+    matrix: mat4x4f,
+};
+
+@group(0) @binding(2) var<uniform> uni: Uniforms;
+
+@vertex fn vs(vin: VSInput) -> VSOutput {
+    var vsOutput: VSOutput;
+    vsOutput.position = uni.matrix * vin.position;
+    vsOutput.texcoord = vin.texcoord;
+    vsOutput.color = vin.color;
+    return vsOutput;
+}
+
+@group(0) @binding(0) var ourSampler: sampler;
+@group(0) @binding(1) var ourTexture: texture_2d<f32>;
+
+@fragment fn fs(fsInput: VSOutput) -> @location(0) vec4f {
+    return textureSample(ourTexture, ourSampler, fsInput.texcoord) * fsInput.color;
+}