Revert "cury"

This reverts commit d48f6076bf3429984247d4c9c711751d6172186a.

index.html

@@ -18,25 +18,51 @@
         const canvas = document.querySelector('canvas');
         const context = canvas.getContext('webgpu');
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        let device, pipeline, vertexBuffer, indexBuffer, uniformBuffer, texture, sampler, bindGroup;
+        let device;
+        let pipeline;
+        let vertexBuffer;
+        let indexBuffer;
+        let uniformBuffer;
+        let texture;
+        let sampler;
+        let bindGroup;
 
         async function main() {
             const adapter = await navigator.gpu?.requestAdapter();
             device = await adapter?.requestDevice();
-            if (!device) return alert('WebGPU support required');
+            if (!device) {
+                alert('need a browser that supports WebGPU');
+                return;
+            }
 
-            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).style.backgroundColor = '#222';
+            document.body.appendChild(glyphCanvas);
+            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;
@@ -46,7 +72,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',
@@ -77,9 +103,17 @@
                 },
             });
 
-            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 });
+            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
+            });
 
             const uniformValues = new Float32Array(CONFIG.uniformBufferSize / 4);
             const matrix = uniformValues.subarray(0, 16);
@@ -158,7 +192,7 @@
             return { vertexData, numGlyphs: offset / CONFIG.floatsPerVertex, width, height: y1 };
         }
 
-        function createTextureFromSource(device, source) {
+        function createTextureFromSource(device, source, options = {}) {
             const texture = device.createTexture({
                 format: 'rgba8unorm',
                 size: [source.width, source.height],
@@ -166,7 +200,7 @@
             });
 
             device.queue.copyExternalImageToTexture(
-                { source, flipY: true },
+                { source, flipY: options.flipY },
                 { texture, premultipliedAlpha: true },
                 { width: source.width, height: source.height }
             );