utility.js

index.html

@@ -11,25 +11,10 @@
     <canvas></canvas>
     <script type="module">
         import { mat4 } from 'https://webgpufundamentals.org/3rdparty/wgpu-matrix.module.js';
+        import * as utils from './utility.js';
         const glyphWidth = 32;
         const glyphHeight = 40;
         const glyphsAcrossTexture = 16;
-        function genreateGlyphTextureAtlas() {
-            const canvas = document.createElement('canvas');
-            canvas.width = 512;
-            canvas.height = 256;
-            const ctx = canvas.getContext('2d');
-            ctx.font = '32px monospace';
-            ctx.textBaseline = 'middle';
-            ctx.textAlign = 'center';
-            ctx.fillStyle = 'white';
-            for (let c = 33, x = 0, y = 0; c < 128; ++c) {
-                ctx.fillText(String.fromCodePoint(c), x + glyphWidth / 2, y + glyphHeight / 2);
-                x = (x + glyphWidth) % canvas.width;
-                if (x === 0) y += glyphHeight;
-            }
-            return canvas;
-        }
         async function main() {
             const adapter = await navigator.gpu?.requestAdapter();
             const device = await adapter?.requestDevice();
@@ -58,7 +43,7 @@
                 code: shaderCode,
             });
 
-            const glyphCanvas = genreateGlyphTextureAtlas();
+            const glyphCanvas = generateGlyphTextureAtlas();
             document.body.appendChild(glyphCanvas);
             glyphCanvas.style.backgroundColor = '#222';
 
@@ -164,21 +149,19 @@
                 },
             });
 
-            function copySourceToTexture(device, texture, source, { flipY } = {}) {
-                device.queue.copyExternalImageToTexture(
-                    { source, flipY },
-                    { texture, premultipliedAlpha: true },
-                    { width: source.width, height: source.height }
-                );
-            }
-
             function createTextureFromSource(device, source, options = {}) {
                 const texture = device.createTexture({
                     format: 'rgba8unorm',
                     size: [source.width, source.height],
                     usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
                 });
-                copySourceToTexture(device, texture, source, options);
+
+                device.queue.copyExternalImageToTexture(
+                    { source, flipY: options.flipY },
+                    { texture, premultipliedAlpha: true },
+                    { width: source.width, height: source.height }
+                );
+
                 return texture;
             }
 
@@ -242,6 +225,22 @@
 
             requestAnimationFrame(render);
         }
+        function generateGlyphTextureAtlas() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 512;
+            canvas.height = 256;
+            const ctx = canvas.getContext('2d');
+            ctx.font = '32px monospace';
+            ctx.textBaseline = 'middle';
+            ctx.textAlign = 'center';
+            ctx.fillStyle = 'white';
+            for (let c = 33, x = 0, y = 0; c < 128; ++c) {
+                ctx.fillText(String.fromCodePoint(c), x + glyphWidth / 2, y + glyphHeight / 2);
+                x = (x + glyphWidth) % canvas.width;
+                if (x === 0) y += glyphHeight;
+            }
+            return canvas;
+        }
         function fail(msg) {
             alert(msg);
         }

utility.js

@@ -0,0 +1 @@
+// utility.js