chore: add webgpu renderer example

xiaoiver · Jan 16, 2025 · ddcabf1 · ddcabf1
1 parent 3125290
commit ddcabf1
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 64 deletions.
diff --git a/packages/site/docs/.vitepress/config/en.js b/packages/site/docs/.vitepress/config/en.js
@@ -56,16 +56,28 @@ export const en = defineConfig({
                 text: 'Lesson 009 - Draw ellipse and rectangle',
                 link: 'lesson-009',
               },
-              { 
+              {
                 text: 'Lesson 010 - Import and export images',
-                link: 'lesson-010'
+                link: 'lesson-010',
+              },
+              {
+                text: 'Lesson 011 - Test and server-side rendering',
+                link: 'lesson-011',
               },
-              { text: 'Lesson 011 - Test and server-side rendering', link: 'lesson-011' },
               { text: 'Lesson 012 - Draw polyline', link: 'lesson-012' },
-              { text: 'Lesson 013 - Draw path and sketchy style', link: 'lesson-013' },
-              { text: 'Lesson 014 - Canvas mode and auxiliary UI', link: 'lesson-014' },
+              {
+                text: 'Lesson 013 - Draw path and sketchy style',
+                link: 'lesson-013',
+              },
+              {
+                text: 'Lesson 014 - Canvas mode and auxiliary UI',
+                link: 'lesson-014',
+              },
               { text: 'Lesson 015 - Text rendering', link: 'lesson-015' },
-              { text: 'Lesson 016 - Text advanced features', link: 'lesson-016' },
+              {
+                text: 'Lesson 016 - Text advanced features',
+                link: 'lesson-016',
+              },
             ],
           },
         ],
@@ -100,6 +112,7 @@ export const en = defineConfig({
           {
             text: 'Example',
             items: [
+              { text: 'WebGPU', link: 'webgpu' },
               { text: 'A polar system', link: 'solar-system' },
               {
                 text: 'Reduce draw calls with culling',

diff --git a/packages/site/docs/.vitepress/config/index.js b/packages/site/docs/.vitepress/config/index.js
@@ -43,7 +43,11 @@ export default defineConfig({
       chunkSizeWarningLimit: 800,
     },
     ssr: {
-      noExternal: ['@antv/g-device-api', 'ant-design-vue'],
+      noExternal: [
+        '@antv/g-device-api',
+        'ant-design-vue',
+        '@ant-design/icons-vue',
+      ],
     },
     plugins: [
       VueMacros({

diff --git a/packages/site/docs/.vitepress/config/zh.js b/packages/site/docs/.vitepress/config/zh.js
@@ -85,6 +85,7 @@ export const zh = defineConfig({
           {
             text: '案例',
             items: [
+              { text: '使用 WebGPU', link: 'webgpu' },
               { text: '一个太阳系模型', link: 'solar-system' },
               { text: '通过剔除减少 draw call', link: 'culling' },
               {

diff --git a/packages/site/docs/components/Opentype.vue b/packages/site/docs/components/Opentype.vue
@@ -2,27 +2,17 @@
 import { Path, TesselationMethod } from '@infinite-canvas-tutorial/core';
 import '@infinite-canvas-tutorial/ui';
 import { ref, onMounted } from 'vue';
-import Stats from 'stats.js';
 import opentype from 'opentype.js';
 
 let canvas;
 
-const stats = new Stats();
-stats.showPanel(0);
-const $stats = stats.dom;
-$stats.style.position = 'absolute';
-$stats.style.left = '0px';
-$stats.style.top = '0px';
-
 const wrapper = ref(null);
 
 onMounted(() => {
     const $canvas = wrapper.value;
 
     if (!$canvas) return;
 
-    $canvas.parentElement.appendChild($stats);
-
     $canvas.addEventListener('ic-ready', async(e) => {
         canvas = e.detail;
 
@@ -50,10 +40,6 @@ onMounted(() => {
         });
         canvas.appendChild(path);
     });
-
-    $canvas.addEventListener('ic-frame', (e) => {
-        stats.update();
-    });
 });
 </script>
 

diff --git a/packages/site/docs/components/WebFontLoader.vue b/packages/site/docs/components/WebFontLoader.vue
@@ -2,64 +2,52 @@
 import { Text, Rect } from '@infinite-canvas-tutorial/core';
 import '@infinite-canvas-tutorial/ui';
 import { ref, onMounted } from 'vue';
-import Stats from 'stats.js';
-import WebFont from 'webfontloader';
 
 let canvas;
 
-const stats = new Stats();
-stats.showPanel(0);
-const $stats = stats.dom;
-$stats.style.position = 'absolute';
-$stats.style.left = '0px';
-$stats.style.top = '0px';
-
 const wrapper = ref(null);
 
 onMounted(() => {
   const $canvas = wrapper.value;
 
   if (!$canvas) return;
 
-  $canvas.parentElement.appendChild($stats);
-
   $canvas.addEventListener('ic-ready', async (e) => {
     canvas = e.detail;
 
-    WebFont.load({
-      google: {
-        families: ['Gaegu'],
-      },
-      active: () => {
-        const text = new Text({
-          x: 150,
-          y: 150,
-          content: 'Hello, world',
-          fontFamily: 'Gaegu',
-          fontSize: 55,
-          fill: '#F67676',
-        });
-        canvas.appendChild(text);
-
-        const bounds = text.getBounds();
-
-        const rect = new Rect({
-          x: bounds.minX,
-          y: bounds.minY,
-          width: bounds.maxX - bounds.minX,
-          height: bounds.maxY - bounds.minY,
-          fill: 'none',
-          stroke: 'blue',
-          strokeWidth: 1,
-        });
-        canvas.appendChild(rect);
-      }
+    import('webfontloader').then((module) => {
+      const WebFont = module.default;
+      WebFont.load({
+        google: {
+          families: ['Gaegu'],
+        },
+        active: () => {
+          const text = new Text({
+            x: 150,
+            y: 150,
+            content: 'Hello, world',
+            fontFamily: 'Gaegu',
+            fontSize: 55,
+            fill: '#F67676',
+          });
+          canvas.appendChild(text);
+
+          const bounds = text.getBounds();
+
+          const rect = new Rect({
+            x: bounds.minX,
+            y: bounds.minY,
+            width: bounds.maxX - bounds.minX,
+            height: bounds.maxY - bounds.minY,
+            fill: 'none',
+            stroke: 'blue',
+            strokeWidth: 1,
+          });
+          canvas.appendChild(rect);
+        }
+      });
     });
   });
-
-  $canvas.addEventListener('ic-frame', (e) => {
-    stats.update();
-  });
 });
 </script>
 

diff --git a/packages/site/docs/components/WebGPU.vue b/packages/site/docs/components/WebGPU.vue
@@ -0,0 +1,66 @@
+<script setup lang="tsx">
+import { App } from 'ant-design-vue';
+import { ref, onMounted } from 'vue';
+import { Group, deserializeNode, fromSVGElement, TesselationMethod } from '@infinite-canvas-tutorial/core';
+
+defineOptions({ name: 'WebGPU' });
+
+const wrapper = ref(null);
+let canvas = null;
+
+const renderSVG = async (svg: string, x: number, y: number) => {
+  const $container = document.createElement('div');
+  $container.innerHTML = svg;
+  const $svg = $container.children[0];
+  
+  const root = new Group();
+  for (const child of $svg.children) {
+    const group = await deserializeNode(fromSVGElement(child));
+    group.children.forEach((path) => {
+        path.tessellationMethod = TesselationMethod.LIBTESS;
+        path.cullable = false;
+    });
+   
+    root.appendChild(group);
+  }
+
+  canvas.appendChild(root);
+
+  root.position.x = x;
+  root.position.y = y;
+};
+
+onMounted(() => {
+  const $canvas = wrapper.value;
+  if (!$canvas) {
+    return;
+  }
+
+  $canvas.addEventListener('ic-ready', (e) => {
+    canvas = e.detail;
+
+    window.fetch(
+        '/Ghostscript_Tiger.svg',
+    ).then(async (res) => {
+        const svg = await res.text();
+        renderSVG(svg, 80, 80);
+    });
+  });
+});
+
+const Demo = () => {
+  return (<div>
+    <div style="position: relative">
+      <ic-canvas renderer="webgpu" ref={wrapper} style="height: 400px"></ic-canvas>
+    </div>
+  </div>);
+};
+
+defineRender(() => {
+  return (
+    <App>
+      <Demo />
+    </App>
+  );
+});
+</script>
diff --git a/packages/site/docs/example/webgpu.md b/packages/site/docs/example/webgpu.md
@@ -0,0 +1,24 @@
+---
+publish: false
+---
+
+<script setup>
+import WebGPU from '../components/WebGPU.vue'
+</script>
+
+<WebGPU />
+
+Just use `renderer="webgpu"` to enable WebGPU.
+
+```html
+<ic-canvas renderer="webgpu"></ic-canvas>
+```
+
+If you don't set `shaderCompilerPath`, it will use the default shader compiler `'https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm'`.
+
+```html
+<ic-canvas
+    renderer="webgpu"
+    shaderCompilerPath="/your/path/to/glsl_wgsl_compiler_bg.wasm"
+></ic-canvas>
+```
diff --git a/packages/site/docs/zh/example/webgpu.md b/packages/site/docs/zh/example/webgpu.md
@@ -0,0 +1,28 @@
+---
+publish: false
+---
+
+<script setup>
+import WebGPU from '../../components/WebGPU.vue'
+</script>
+
+<WebGPU />
+
+```html
+<ic-canvas renderer="webgpu" shaderCompilerPath="/xxx/xx"></ic-canvas>
+```
+
+通过 `renderer="webgpu"` 启用 WebGPU。
+
+```html
+<ic-canvas renderer="webgpu"></ic-canvas>
+```
+
+如果未设置 `shaderCompilerPath`，则使用默认的着色器编译器路径 `'https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm'`。
+
+```html
+<ic-canvas
+    renderer="webgpu"
+    shaderCompilerPath="/your/path/to/glsl_wgsl_compiler_bg.wasm"
+></ic-canvas>
+```