From 444ceac9f538f5f0841408fc24b5d7e546f02f09 Mon Sep 17 00:00:00 2001
From: Francesco Michelini <hello@francescomichelini.com>
Date: Sat, 20 Jul 2024 09:45:51 +0200
Subject: [PATCH] [broken] Import WebGPU renderer

---
 package.json                                  |   1 +
 .../src/pages/webgpu/WebGPURenderer.vue       |  11 +-
 pnpm-lock.yaml                                | 157 ++++++++++++++++++
 src/components/TresCanvas.vue                 |  24 ++-
 src/composables/useRenderer/index.ts          |  18 +-
 vite.config.ts                                |   7 +
 6 files changed, 203 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index f6ac9b4d4..84906b25d 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "vite-plugin-dts": "3.9.1",
     "vite-plugin-inspect": "^0.8.4",
     "vite-plugin-require-transform": "^1.0.21",
+    "vite-plugin-top-level-await": "^1.4.2",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "1.3.0",
     "vitest": "^2.0.2",
diff --git a/playground/src/pages/webgpu/WebGPURenderer.vue b/playground/src/pages/webgpu/WebGPURenderer.vue
index 792acfe76..b2b0de3e2 100644
--- a/playground/src/pages/webgpu/WebGPURenderer.vue
+++ b/playground/src/pages/webgpu/WebGPURenderer.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import {
-  BasicShadowMap,
-  NoToneMapping,
-  SRGBColorSpace,
-} from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { nextTick, onMounted } from 'vue'
+import { nextTick, onMounted, reactive } from 'vue'
 
 const state = reactive({
   clearColor: '#201919',
   shadows: false,
   alpha: false,
+  webGPU: true,
 
   shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
@@ -33,7 +30,7 @@ onMounted(async () => {
 
     <OrbitControls />
 
-    <TresAmbientLight :intensity="0.5" />
+    <TresAmbientLight :intensity="80" />
 
     <TresMesh>
       <TresBoxGeometry />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd5060422..18298b8eb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ importers:
       vite-plugin-require-transform:
         specifier: ^1.0.21
         version: 1.0.21
+      vite-plugin-top-level-await:
+        specifier: ^1.4.2
+        version: 1.4.2(vite@5.3.4)
       vite-svg-loader:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.4.33)
@@ -1958,6 +1961,16 @@ packages:
       semver: 7.6.3
     dev: true
 
+  /@rollup/plugin-virtual@3.0.2:
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dev: true
+
   /@rollup/pluginutils@5.1.0:
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -2247,6 +2260,131 @@ packages:
       - typescript
     dev: true
 
+  /@swc/core-darwin-arm64@1.7.0:
+    resolution: {integrity: sha512-2ylhM7f0HwUwLrFYZAe/dse8PCbPsYcJS3Dt7Q8NT3PUn7vy6QOMxNcOPPuDrnmaXqQQO3oxdmRapguTxaat9g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-darwin-x64@1.7.0:
+    resolution: {integrity: sha512-SgVnN4gT1Rb9YfTkp4FCUITqSs7Yj0uB2SUciu5CV3HuGvS5YXCUzh+KrwpLFtx8NIgivISKcNnb41mJi98X8Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm-gnueabihf@1.7.0:
+    resolution: {integrity: sha512-+Z9Dayart1iKJQEJJ9N/KS4z5EdXJE3WPFikY0jonKTo4Dd8RuyVz5yLvqcIMeVdz/SwximATaL6iJXw7hZS9A==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-gnu@1.7.0:
+    resolution: {integrity: sha512-UnLrCiZ1EI4shznJn0xP6DLgsXUSwtfsdgHhGYCrvbgVBBve3S9iFgVFEB3SPl7Q/TdowNbrN4zHU0oChfiNfw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-musl@1.7.0:
+    resolution: {integrity: sha512-H724UANA+ptsfwKRr9mnaDa9cb5fw0oFysiGKTgb3DMYcgk3Od0jMTnXVPFSVpo7FlmyxeC9K8ueUPBOoOK6XA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-gnu@1.7.0:
+    resolution: {integrity: sha512-SY3HA0K0Dpqt1HIfMLGpwL4hd4UaL2xHP5oZXPlRQPhUDZrbb4PbI3ZJnh66c63eL4ZR8EJ+HRFI0Alx5p69Zw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-musl@1.7.0:
+    resolution: {integrity: sha512-cEJ2ebtV1v/5Ilb55E05J6F5SrHKQWzUttIhR5Mkayyo+yvPslcpByuFC3D+J7X1ebziTOBpWuMpUdjLfh3SMQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-arm64-msvc@1.7.0:
+    resolution: {integrity: sha512-ecQOOmzEssz+m0pR4xDYCGuvn3E/l0nQ3tk5jp1NA1lsAy4bMV0YbYCHjptYvWL/UjhIerIp3IlCJ8x5DodSog==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-ia32-msvc@1.7.0:
+    resolution: {integrity: sha512-gz81seZkRn3zMnVOc7L5k6F4vQC82gIxmHiL+GedK+A37XI/X26AASU3zxvORnqQbwQYXQ+AEVckxBmFlz3v2g==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-x64-msvc@1.7.0:
+    resolution: {integrity: sha512-b5Fd1xEOw9uqBpj2lqsaR4Iq9UhiL84hNDcEsi6DQA7Y1l85waQAslTbS0E4/pJ1PISAs0jW0zIGLco1eaWBOg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core@1.7.0:
+    resolution: {integrity: sha512-d4vMzH6ICllDwlPuhset2h8gu/USHdbyfJim+2hQEdxC0UONtfpmu38XBgNqRjStrji1Q5M10jfeUZL3cu1i8g==}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    peerDependencies:
+      '@swc/helpers': '*'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.9
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.7.0
+      '@swc/core-darwin-x64': 1.7.0
+      '@swc/core-linux-arm-gnueabihf': 1.7.0
+      '@swc/core-linux-arm64-gnu': 1.7.0
+      '@swc/core-linux-arm64-musl': 1.7.0
+      '@swc/core-linux-x64-gnu': 1.7.0
+      '@swc/core-linux-x64-musl': 1.7.0
+      '@swc/core-win32-arm64-msvc': 1.7.0
+      '@swc/core-win32-ia32-msvc': 1.7.0
+      '@swc/core-win32-x64-msvc': 1.7.0
+    dev: true
+
+  /@swc/counter@0.1.3:
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+    dev: true
+
+  /@swc/types@0.1.9:
+    resolution: {integrity: sha512-qKnCno++jzcJ4lM4NTfYifm1EFSCeIfKiAHAfkENZAV5Kl9PjJIyd2yeeVv6c/2CckuLyv2NmRC5pv6pm2WQBg==}
+    dependencies:
+      '@swc/counter': 0.1.3
+    dev: true
+
   /@szmarczak/http-timer@5.0.1:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
@@ -8537,6 +8675,11 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+    dev: true
+
   /v8-to-istanbul@9.3.0:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
@@ -8682,6 +8825,20 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-top-level-await@1.4.2(vite@5.3.4):
+    resolution: {integrity: sha512-Lz9ZGlDEqLpIJ/NU3toXSUrjmovlJf9qV/LNNa5RB2NYbN3SptfnZEz91//uqahhZtFzL5lKREPwv3YJmlnybg==}
+    peerDependencies:
+      vite: '>=2.8'
+    dependencies:
+      '@rollup/plugin-virtual': 3.0.2
+      '@swc/core': 1.7.0
+      uuid: 10.0.0
+      vite: 5.3.4
+    transitivePeerDependencies:
+      - '@swc/helpers'
+      - rollup
+    dev: true
+
   /vite-plugin-vue-devtools@7.3.5(vite@5.3.4)(vue@3.4.33):
     resolution: {integrity: sha512-6omLXTfYu0bmSmncPSbj4mdMPB3t5dAZkUyriJikahGEnvv5gynHlydDsJShHT6l/5dCkvmSesSji/2a6FfutQ==}
     engines: {node: '>=v14.21.3'}
diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 207601720..580655a44 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -41,6 +41,7 @@ import type { TresCamera, TresObject, TresScene } from '../types/'
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {
   // required by for useRenderer
+  webGPU?: boolean
   shadows?: boolean
   clearColor?: string
   toneMapping?: ToneMapping
@@ -59,6 +60,7 @@ export interface TresCanvasProps
 }
 
 const props = withDefaults(defineProps<TresCanvasProps>(), {
+  webGPU: false,
   alpha: undefined,
   depth: undefined,
   shadows: undefined,
@@ -114,7 +116,9 @@ const createInternalComponent = (context: TresContext) =>
   defineComponent({
     setup() {
       const ctx = getCurrentInstance()?.appContext
-      if (ctx) { ctx.app = instance as App }
+      if (ctx) {
+        ctx.app = instance as App
+      }
       provide('useTres', context)
       provide('extend', extend)
 
@@ -138,7 +142,7 @@ const dispose = (context: TresContext, force = false) => {
     context.renderer.value.renderLists.dispose()
     context.renderer.value.forceContextLoss()
   }
-  (scene.value as TresScene).__tres = {
+  ;(scene.value as TresScene).__tres = {
     root: context,
   }
   mountCustomRenderer(context)
@@ -148,7 +152,10 @@ const disableRender = computed(() => props.disableRender)
 
 const context = shallowRef<TresContext | null>(null)
 
-defineExpose({ context, dispose: () => dispose(context.value as TresContext, true) })
+defineExpose({
+  context,
+  dispose: () => dispose(context.value as TresContext, true),
+})
 
 onMounted(() => {
   const existingCanvas = canvas as Ref<HTMLCanvasElement>
@@ -189,7 +196,9 @@ onMounted(() => {
   watch(
     () => props.camera,
     (newCamera, oldCamera) => {
-      if (newCamera) { registerCamera(newCamera) }
+      if (newCamera) {
+        registerCamera(newCamera)
+      }
       if (oldCamera) {
         oldCamera.removeFromParent()
         deregisterCamera(oldCamera)
@@ -209,7 +218,10 @@ onMounted(() => {
   }
 
   // HMR support
-  if (import.meta.hot && context.value) { import.meta.hot.on('vite:afterUpdate', () => dispose(context.value as TresContext)) }
+  if (import.meta.hot && context.value) {
+    import.meta.hot.on('vite:afterUpdate', () =>
+      dispose(context.value as TresContext))
+  }
 })
 
 onUnmounted(() => {
@@ -232,7 +244,7 @@ onUnmounted(() => {
       left: 0,
       pointerEvents: 'auto',
       touchAction: 'none',
-      ...$attrs.style as Object,
+      ...($attrs.style as Object),
     }"
   ></canvas>
 </template>
diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
index f80c468c0..c155f00dd 100644
--- a/src/composables/useRenderer/index.ts
+++ b/src/composables/useRenderer/index.ts
@@ -1,4 +1,6 @@
 import { ACESFilmicToneMapping, Color, WebGLRenderer } from 'three'
+// import WebGPURenderer from 'three/examples/jsm/renderers/webgpu/WebGPURenderer'
+
 import { type MaybeRef, computed, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
 
 import {
@@ -16,7 +18,7 @@ import { normalizeColor } from '../../utils/normalize'
 import type { TresContext } from '../useTresContextProvider'
 import { get, merge, set, setPixelRatio } from '../../utils'
 
-// Solution taken from Thretle that actually support different versions https://github.com/threlte/threlte/blob/5fa541179460f0dadc7dc17ae5e6854d1689379e/packages/core/src/lib/lib/useRenderer.ts
+// Solution taken from Threlte that actually support different versions https://github.com/threlte/threlte/blob/5fa541179460f0dadc7dc17ae5e6854d1689379e/packages/core/src/lib/lib/useRenderer.ts
 import { revision } from '../../core/revision'
 import { rendererPresets } from './const'
 import type { RendererPresetsType } from './const'
@@ -26,10 +28,18 @@ type TransformToMaybeRefOrGetter<T> = {
 }
 
 export interface UseRendererOptions extends TransformToMaybeRefOrGetter<WebGLRendererParameters> {
+  /**
+   * Enable the WebGPU renderer
+   *
+   * @default false
+   */
+  webGPU?: MaybeRefOrGetter<boolean>
+
   /**
    * Enable shadows in the Renderer
    *
    * @default false
+   * @memberof UseRendererOptions
    */
   shadows?: MaybeRefOrGetter<boolean>
 
@@ -129,7 +139,11 @@ export function useRenderer(
     failIfMajorPerformanceCaveat: toValue(options.failIfMajorPerformanceCaveat),
   }))
 
-  const renderer = shallowRef<WebGLRenderer>(new WebGLRenderer(webGLRendererConstructorParameters.value))
+  const renderer = options.webGPU
+    ? shallowRef<WebGLRenderer>(new WebGLRenderer(webGLRendererConstructorParameters.value))
+    : shallowRef<WebGLRenderer>(new WebGLRenderer(webGLRendererConstructorParameters.value))
+
+  console.log(renderer.value, typeof WebGPURenderer)
 
   function invalidateOnDemand() {
     if (options.renderMode === 'on-demand') {
diff --git a/vite.config.ts b/vite.config.ts
index 30215b2e8..b4db8e030 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
 import banner from 'vite-plugin-banner'
 import Inspect from 'vite-plugin-inspect'
 import dts from 'vite-plugin-dts'
+import topLevelAwait from 'vite-plugin-top-level-await'
 
 import copy from 'rollup-plugin-copy'
 
@@ -25,6 +26,12 @@ export default defineConfig({
     port: 5174,
   },
   plugins: [
+    topLevelAwait({
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: i => `__tla_${i}`,
+    }),
     vue({
       isProduction: false,
       template: {