cury

index.html

@@ -18,51 +18,25 @@
         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;
+        let device, pipeline, vertexBuffer, indexBuffer, uniformBuffer, texture, sampler, bindGroup;
 
         async function main() {
             const adapter = await navigator.gpu?.requestAdapter();
             device = await adapter?.requestDevice();
-            if (!device) {
-                alert('need a browser that supports WebGPU');
-                return;
-            }
+            if (!device) return alert('WebGPU support required');
 
-            context.configure({
-                device,
-                format: presentationFormat,
-            });
+            context.configure({ device, format: presentationFormat });
 
             const shaderCode = await fetchShaderCode('shaders.wgsl');
-            const module = device.createShaderModule({
-                label: 'textured quad shaders',
-                code: shaderCode,
-            });
+            const module = device.createShaderModule({ label: 'textured quad shaders', code: shaderCode });
 
             const glyphCanvas = generateGlyphTextureAtlas(CANVAS, CTX, CONFIG);
-            document.body.appendChild(glyphCanvas);
-            glyphCanvas.style.backgroundColor = '#222';
+            document.body.appendChild(glyphCanvas).style.backgroundColor = '#222';
 
             const vertexSize = CONFIG.floatsPerVertex * 4;
             const vertexBufferSize = CONFIG.maxGlyphs * CONFIG.vertsPerGlyph * vertexSize;
-            vertexBuffer = device.createBuffer({
-                label: 'vertices',
-                size: vertexBufferSize,
-                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-            });
-
-            indexBuffer = device.createBuffer({
-                label: 'indices',
-                size: CONFIG.maxGlyphs * CONFIG.vertsPerGlyph * 4,
-                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-            });
+            vertexBuffer = device.createBuffer({ label: 'vertices', size: vertexBufferSize, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+            indexBuffer = device.createBuffer({ label: 'indices', size: CONFIG.maxGlyphs * CONFIG.vertsPerGlyph * 4, usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST });
 
             const indices = Array.from({ length: CONFIG.maxGlyphs * 6 }, (_, i) => {
                 const ndx = Math.floor(i / 6) * 4;
@@ -72,7 +46,7 @@
 
             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',
@@ -103,17 +77,9 @@
                 },
             });
 
-            texture = createTextureFromSource(device, glyphCanvas, { mips: true });
-            sampler = device.createSampler({
-                minFilter: 'linear',
-                magFilter: 'linear'
-            });
-
-            uniformBuffer = device.createBuffer({
-                label: 'uniforms for quad',
-                size: CONFIG.uniformBufferSize,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-            });
+            texture = createTextureFromSource(device, glyphCanvas);
+            sampler = device.createSampler({ minFilter: 'linear', magFilter: 'linear' });
+            uniformBuffer = 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);
@@ -192,7 +158,7 @@
             return { vertexData, numGlyphs: offset / CONFIG.floatsPerVertex, width, height: y1 };
         }
 
-        function createTextureFromSource(device, source, options = {}) {
+        function createTextureFromSource(device, source) {
             const texture = device.createTexture({
                 format: 'rgba8unorm',
                 size: [source.width, source.height],
@@ -200,7 +166,7 @@
             });
 
             device.queue.copyExternalImageToTexture(
-                { source, flipY: options.flipY },
+                { source, flipY: true },
                 { texture, premultipliedAlpha: true },
                 { width: source.width, height: source.height }
             );