[broken] Import WebGPU renderer

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",

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 />

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>

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') {

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: {