added pipeline and state classes

index.js

@@ -2,51 +2,44 @@ import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module
 import { fetchShaderCode, generateGlyphTextureAtlas } from './utility.js';
 import { config } from './config.js';
 import { CANVAS, CTX, COLORS, RENDER_PASS_DESCRIPTOR } from './constants.js';
+import { createPipeline } from './wgpu-pipeline.js';
+import { createState } from './wgpu-state.js';
 
 const canvas = document.querySelector('canvas');
 const context = canvas.getContext('webgpu');
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-let device;
-let pipeline;
-let vertexBuffer;
-let indexBuffer;
-let uniformBuffer;
-let texture;
-let sampler;
-let bindGroup;
+const state = createState(config);
 
 async function main() {
     const adapter = await navigator.gpu?.requestAdapter();
-    device = await adapter?.requestDevice();
-    if (!device) {
+    state.device = await adapter?.requestDevice();
+    if (!state.device) {
         alert('need a browser that supports WebGPU');
         return;
     }
 
     context.configure({
-        device,
+        device: state.device,
         format: presentationFormat,
     });
 
     const shaderCode = await fetchShaderCode('shaders.wgsl');
-    const module = device.createShaderModule({
-        label: 'textured quad shaders',
-        code: shaderCode,
-    });
+    const vertexSize = config.floatsPerVertex * 4;
+
+    state.pipeline = await createPipeline(state.device, presentationFormat, vertexSize, shaderCode);
 
     const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, config);
     document.body.appendChild(glyphCanvas);
     glyphCanvas.style.backgroundColor = '#222';
 
-    const vertexSize = config.floatsPerVertex * 4;
     const vertexBufferSize = config.maxGlyphs * config.vertsPerGlyph * vertexSize;
-    vertexBuffer = device.createBuffer({
+    state.vertexBuffer = state.device.createBuffer({
         label: 'vertices',
         size: vertexBufferSize,
         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     });
 
-    indexBuffer = device.createBuffer({
+    state.indexBuffer = state.device.createBuffer({
         label: 'indices',
         size: config.maxGlyphs * config.vertsPerGlyph * 4,
         usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
@@ -56,89 +49,62 @@ async function main() {
         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));
+    state.device.queue.writeBuffer(state.indexBuffer, 0, new Uint32Array(indices));
 
     const { vertexData, numGlyphs, width, height } = generateGlyphVerticesForText('Hello\nworld!\nText in\nWebGPU!', COLORS, glyphCanvas);
-    device.queue.writeBuffer(vertexBuffer, 0, vertexData);
-
-    pipeline = device.createRenderPipeline({
-        label: 'textured quad pipeline',
-        layout: 'auto',
-        vertex: {
-            module,
-            entryPoint: 'vs',
-            buffers: [
-                {
-                    arrayStride: vertexSize,
-                    attributes: [
-                        { shaderLocation: 0, offset: 0, format: 'float32x2' },  // pos
-                        { shaderLocation: 1, offset: 8, format: 'float32x2' },  // tex
-                        { shaderLocation: 2, offset: 16, format: 'float32x4' }  // col
-                    ],
-                },
-            ],
-        },
-        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' }
-                },
-            }],
-        },
-    });
+    state.device.queue.writeBuffer(state.vertexBuffer, 0, vertexData);
 
-    texture = createTextureFromSource(device, glyphCanvas, { mips: true });
-    sampler = device.createSampler({
+    state.texture = createTextureFromSource(state.device, glyphCanvas, { mips: true });
+    state.sampler = state.device.createSampler({
         minFilter: 'linear',
         magFilter: 'linear'
     });
 
-    uniformBuffer = device.createBuffer({
+    state.uniformBuffer = state.device.createBuffer({
         label: 'uniforms for quad',
         size: config.uniformBufferSize,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
 
-    const uniformValues = new Float32Array(config.uniformBufferSize / 4);
-    const matrix = uniformValues.subarray(0, 16);
+    state.matrix = state.uniformValues.subarray(0, 16);
 
-    bindGroup = device.createBindGroup({
-        layout: pipeline.getBindGroupLayout(0),
+    state.bindGroup = state.device.createBindGroup({
+        layout: state.pipeline.getBindGroupLayout(0),
         entries: [
-            { binding: 0, resource: sampler },
-            { binding: 1, resource: texture.createView() },
-            { binding: 2, resource: { buffer: uniformBuffer } },
+            { binding: 0, resource: state.sampler },
+            { binding: 1, resource: state.texture.createView() },
+            { binding: 2, resource: { buffer: state.uniformBuffer } },
         ],
     });
 
-    function render(time, context, pipeline, uniformBuffer, uniformValues, bindGroup, vertexBuffer, indexBuffer, RENDER_PASS_DESCRIPTOR) {
-        time *= config.time.phase;
-        const fov = 60 * Math.PI / 180;
-        const aspect = canvas.clientWidth / canvas.clientHeight;
-        const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
-        const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
-        const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
-        RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = context.getCurrentTexture().createView();
-        const encoder = device.createCommandEncoder();
-        const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
-        pass.setPipeline(pipeline);
-        mat4.rotateY(viewProjectionMatrix, time, matrix);
-        mat4.translate(matrix, [-width / 2, -height / 2, 0], matrix);
-        device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
-        pass.setBindGroup(0, bindGroup);
-        pass.setVertexBuffer(0, vertexBuffer);
-        pass.setIndexBuffer(indexBuffer, 'uint32');
-        pass.drawIndexed(numGlyphs * 6);
-        pass.end();
-        device.queue.submit([encoder.finish()]);
-        requestAnimationFrame((time) => render(time, context, pipeline, uniformBuffer, uniformValues, bindGroup, vertexBuffer, indexBuffer, RENDER_PASS_DESCRIPTOR));
-    }
-    
-    requestAnimationFrame((time) => render(time, context, pipeline, uniformBuffer, uniformValues, bindGroup, vertexBuffer, indexBuffer, RENDER_PASS_DESCRIPTOR));
+    state.numGlyphs = numGlyphs;
+    state.width = width;
+    state.height = height;
+
+    requestAnimationFrame((time) => render(time, context, state, RENDER_PASS_DESCRIPTOR));
+}
+
+function render(time, context, state, RENDER_PASS_DESCRIPTOR) {
+    time *= config.time.phase;
+    const fov = 60 * Math.PI / 180;
+    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
+    const viewMatrix = mat4.lookAt([0, 0, 5], [0, 0, 0], [0, 1, 0]);
+    const viewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix);
+    RENDER_PASS_DESCRIPTOR.colorAttachments[0].view = context.getCurrentTexture().createView();
+    const encoder = state.device.createCommandEncoder();
+    const pass = encoder.beginRenderPass(RENDER_PASS_DESCRIPTOR);
+    pass.setPipeline(state.pipeline);
+    mat4.rotateY(viewProjectionMatrix, time, state.matrix);
+    mat4.translate(state.matrix, [-state.width / 2, -state.height / 2, 0], state.matrix);
+    state.device.queue.writeBuffer(state.uniformBuffer, 0, state.uniformValues);
+    pass.setBindGroup(0, state.bindGroup);
+    pass.setVertexBuffer(0, state.vertexBuffer);
+    pass.setIndexBuffer(state.indexBuffer, 'uint32');
+    pass.drawIndexed(state.numGlyphs * 6);
+    pass.end();
+    state.device.queue.submit([encoder.finish()]);
+    requestAnimationFrame((t) => render(t, context, state, RENDER_PASS_DESCRIPTOR));
 }
 
 function generateGlyphVerticesForText(s, COLORS, glyphCanvas) {

wgpu-pipeline.js

@@ -0,0 +1,40 @@
+// wgpu-pipeline.js
+
+export async function createPipeline(device, presentationFormat, vertexSize, shaderCode) {
+    const module = device.createShaderModule({
+        label: 'textured quad shaders',
+        code: shaderCode,
+    });
+
+    const pipeline = device.createRenderPipeline({
+        label: 'textured quad pipeline',
+        layout: 'auto',
+        vertex: {
+            module,
+            entryPoint: 'vs',
+            buffers: [
+                {
+                    arrayStride: vertexSize,
+                    attributes: [
+                        { shaderLocation: 0, offset: 0, format: 'float32x2' },  // pos
+                        { shaderLocation: 1, offset: 8, format: 'float32x2' },  // tex
+                        { shaderLocation: 2, offset: 16, format: 'float32x4' }  // col
+                    ],
+                },
+            ],
+        },
+        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' }
+                },
+            }],
+        },
+    });
+
+    return pipeline;
+}

wgpu-state.js

@@ -0,0 +1,19 @@
+// wgpu-state.js
+
+export function createState(config) {
+    return {
+        device: null,
+        pipeline: null,
+        vertexBuffer: null,
+        indexBuffer: null,
+        uniformBuffer: null,
+        texture: null,
+        sampler: null,
+        bindGroup: null,
+        uniformValues: new Float32Array(config.uniformBufferSize / 4),
+        matrix: null,
+        numGlyphs: 0,
+        width: 0,
+        height: 0
+    };
+}