feat(webgpu-rendering-context): import webgpu renderer (#99)

* feat(webgpu-rendering-context): import webgpu renderer from three.js and creates a renderer * fix(WebGPU): bump build target to resolve error this commits fix that vite is complaining about top-level await used in threejs. it is ok to bump the version since our support target is 2 most recent Chromium/Firefox/Safari version Signed-off-by: Bill ZHANG <[email protected]> * fix(webgpu-rendering-context): fix type declaration * style(three-webgpu): run prettier formatting on the code Signed-off-by: Bill ZHANG <[email protected]> --------- Signed-off-by: Bill ZHANG <[email protected]> Co-authored-by: Chenzhu <[email protected]> Co-authored-by: Bill ZHANG <[email protected]>
techlauncher-mlai-edge-physics · Sep 14, 2023 · 089feed · 089feed
1 parent 774b781
commit 089feed
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/src/components/Simulation.tsx b/src/components/Simulation.tsx
@@ -10,6 +10,10 @@ import vertexShader from '../shaders/vert.glsl';
 import fragmentShader from '../shaders/frag.glsl';
 import { OutgoingMessage } from '../workers/modelWorkerMessage';
 
+// WebGPU imports
+import { default as WebGPU } from 'three/addons/capabilities/WebGPU.js';
+import { default as WebGPURenderer } from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+
 class SimulationParams {
   // render options
   densityLowColour: t.Color = new t.Color('blue');
@@ -60,6 +64,15 @@ function DiffusionPlane(
 ): React.ReactElement {
   // INITIALISATION
 
+  // WebGPU capability test
+  if (WebGPU.isAvailable() === true) {
+    const webgpuRenderer = new WebGPURenderer({ antialias: true });
+    console.log('browser supports webgpu rendering');
+    console.log('webgpu renderer context', webgpuRenderer);
+  } else {
+    console.log('browser does not support webgpu rendering');
+  }
+
   // reference to the parent mesh
   const ref = useRef<t.Mesh>(null!);
 

diff --git a/src/declaration.d.ts b/src/declaration.d.ts
@@ -6,3 +6,15 @@ declare module '*.md' {
   const html: string;
   export default html;
 }
+
+declare module 'three/addons/capabilities/WebGPU.js' {
+  export default class WebGPU {
+    static isAvailable(): boolean;
+    static getErrorMessage(): HTMLDivElement;
+  }
+}
+declare module 'three/addons/renderers/webgpu/WebGPURenderer.js' {
+  export default class WebGPURenderer {
+    constructor(parameters: object);
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "types": [

diff --git a/vite.config.ts b/vite.config.ts
@@ -13,4 +13,12 @@ export default defineConfig({
       rehypePlugins: [rehypeSanitize],
     }),
   ],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'esnext',
+    },
+  },
+  build: {
+    target: 'esnext',
+  },
 });