Deploying to gh-pages from @ ad7d067 🚀

webgpu · Mar 8, 2024 · 7ecd235 · 7ecd235
1 parent f316b00
commit 7ecd235
Show file tree

Hide file tree

Showing 12 changed files with 4,189 additions and 1 deletion.
diff --git a/assets/font/ya-hei-ascii-msdf.json b/assets/font/ya-hei-ascii-msdf.json
diff --git a/assets/font/ya-hei-ascii.png b/assets/font/ya-hei-ascii.png
diff --git a/main.js b/main.js
@@ -423,6 +423,25 @@ Source at https://github.com/toji/spookyball
     sources: [],
 };
 
+var textRenderingMsdf = {
+    name: 'Text Rendering - MSDF',
+    description: `This example uses multichannel signed distance fields (MSDF) to render text. MSDF
+fonts are more complex to implement than using Canvas 2D to generate text, but the resulting
+text looks smoother while using less memory than the Canvas 2D approach, especially at high
+zoom levels. They can be used to render larger amounts of text efficiently.
+
+The font texture is generated using [Don McCurdy's MSDF font generation tool](https://msdf-bmfont.donmccurdy.com/)`,
+    filename: "sample/textRenderingMsdf",
+    sources: [
+        { path: 'main.ts' },
+        { path: 'msdfText.ts' },
+        { path: 'msdfText.wgsl' },
+        { path: '../../shaders/basic.vert.wgsl' },
+        { path: '../../shaders/vertexPositionColor.frag.wgsl' },
+        { path: '../../meshes/cube.ts' },
+    ],
+};
+
 var texturedCube = {
     name: 'Textured Cube',
     description: 'This example shows how to bind and sample textures.',
@@ -536,6 +555,7 @@ const pageCategories = [
             cornell,
             'a-buffer': aBuffer,
             skinnedMesh,
+            textRenderingMsdf,
         },
     },
     // Samples that demonstrate how to integrate WebGPU and/or WebGPU render operations with other

diff --git a/main.js.map b/main.js.map
diff --git a/sample/textRenderingMsdf/index.html b/sample/textRenderingMsdf/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>webgpu-samples: textRenderingMsdf</title>
+    <style>
+      html, body {
+        margin: 0;      /* remove default margin */
+        height: 100%;   /* make body fill the browser window */
+        display: flex;
+        place-content: center center;
+      }
+      canvas {
+        width: 600px;
+        height: 600px;
+        max-width: 100%;
+        display: block;
+      }
+    </style>
+    <script defer src="main.js" type="module"></script>
+    <script defer type="module" src="../../js/iframe-helper.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+  </body>
+</html>