From 4dc8ebe985183ed6654fe2b7da6c27902c622a47 Mon Sep 17 00:00:00 2001 From: Chenzhu Date: Mon, 11 Sep 2023 22:33:32 +1000 Subject: [PATCH 1/4] feat(webgpu-rendering-context): import webgpu renderer from three.js and creates a renderer --- src/components/Simulation.tsx | 13 +++++++++++++ src/declaration.d.ts | 12 ++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/components/Simulation.tsx b/src/components/Simulation.tsx index b24bf81..cb7a64c 100644 --- 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'); @@ -59,6 +63,15 @@ function DiffusionPlane( props: ThreeElements['mesh'] & Renderable, ): 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(null!); diff --git a/src/declaration.d.ts b/src/declaration.d.ts index 2b885ea..acf0897 100644 --- 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 class WebGPU { + static isAvailable(): boolean; + static getErrorMessage(): HTMLDivElement; + } +} +declare module 'three/addons/renderers/webgpu/WebGPURenderer.js' { + export class WebGPURenderer { + constructor( parameters: map ); + } +} From e5f346950ea9777a307220035c0ac070b8798e68 Mon Sep 17 00:00:00 2001 From: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> Date: Tue, 12 Sep 2023 15:14:01 +1000 Subject: [PATCH 2/4] 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 <36790218+Lutra-Fs@users.noreply.github.com> --- tsconfig.json | 4 ++-- vite.config.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 4e6fea0..96143ed 100644 --- 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 index 9194679..00b4960 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -13,4 +13,12 @@ export default defineConfig({ rehypePlugins: [rehypeSanitize], }), ], + optimizeDeps: { + esbuildOptions: { + target: 'esnext', + }, + }, + build: { + target: 'esnext', + }, }); From 31a1fb86ee259bd3d478f7428d6fb83938e83641 Mon Sep 17 00:00:00 2001 From: Chenzhu Date: Tue, 12 Sep 2023 15:54:06 +1000 Subject: [PATCH 3/4] fix(webgpu-rendering-context): fix type declaration --- src/declaration.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/declaration.d.ts b/src/declaration.d.ts index acf0897..88ce916 100644 --- a/src/declaration.d.ts +++ b/src/declaration.d.ts @@ -8,13 +8,13 @@ declare module '*.md' { } declare module 'three/addons/capabilities/WebGPU.js' { - export class WebGPU { + export default class WebGPU { static isAvailable(): boolean; static getErrorMessage(): HTMLDivElement; } } declare module 'three/addons/renderers/webgpu/WebGPURenderer.js' { - export class WebGPURenderer { - constructor( parameters: map ); + export default class WebGPURenderer { + constructor( parameters: object ); } } From a0d901ed823823d104687a3a3a6708ff52a83100 Mon Sep 17 00:00:00 2001 From: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> Date: Tue, 12 Sep 2023 16:52:20 +1000 Subject: [PATCH 4/4] style(three-webgpu): run prettier formatting on the code Signed-off-by: Bill ZHANG <36790218+Lutra-Fs@users.noreply.github.com> --- src/components/Simulation.tsx | 8 ++++---- src/declaration.d.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Simulation.tsx b/src/components/Simulation.tsx index cb7a64c..ec67052 100644 --- a/src/components/Simulation.tsx +++ b/src/components/Simulation.tsx @@ -63,11 +63,11 @@ function DiffusionPlane( props: ThreeElements['mesh'] & Renderable, ): React.ReactElement { // INITIALISATION - + // WebGPU capability test - if ( WebGPU.isAvailable() === true ) { - const webgpuRenderer = new WebGPURenderer( { antialias: true } ); - console.log('browser supports webgpu rendering') + 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'); diff --git a/src/declaration.d.ts b/src/declaration.d.ts index 88ce916..ec9487d 100644 --- a/src/declaration.d.ts +++ b/src/declaration.d.ts @@ -15,6 +15,6 @@ declare module 'three/addons/capabilities/WebGPU.js' { } declare module 'three/addons/renderers/webgpu/WebGPURenderer.js' { export default class WebGPURenderer { - constructor( parameters: object ); + constructor(parameters: object); } }