feat(core): add option to use WebGPURenderer

package.json

@@ -78,9 +78,9 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
     "@stackblitz/sdk": "^1.11.0",
-    "@tresjs/cientos": "3.9.0",
+    "@tresjs/cientos": "4.0.0",
     "@tresjs/eslint-config": "^1.1.0",
-    "@types/three": "^0.166.0",
+    "@types/three": "^0.167.2",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-vue": "^5.0.5",
@@ -102,7 +102,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sponsorkit": "^0.14.6",
-    "three": "^0.166.1",
+    "three": "^0.167.1",
     "unocss": "^0.61.3",
     "unplugin": "^1.11.0",
     "unplugin-vue-components": "^0.27.2",
@@ -111,6 +111,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/index.vue

@@ -8,6 +8,7 @@ import {
   loaderRoutes,
   miscRoutes,
   modelsRoutes,
+  webgpuRoutes,
 } from '../router/routes'
 
 const sections = [
@@ -19,6 +20,7 @@ const sections = [
   { icon: '🐇', title: 'Models', routes: modelsRoutes },
   { icon: '🤪', title: 'Misc', routes: miscRoutes },
   { icon: '🔬', title: 'Issues', routes: issuesRoutes },
+  { icon: '🔮', title: 'WebGPU', routes: webgpuRoutes },
 ]
 </script>
 
@@ -72,11 +74,10 @@ const sections = [
               </router-link>
             </div>
           </div>
-          <div v-else>
-            (empty)
-          </div>
+          <div v-else>(empty)</div>
         </div>
       </div>
     </div>
   </div>
 </template>
+import { webgpuRoutes } from '../router/routes/webgpu';

playground/src/pages/webgpu/WebGPURenderer.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { nextTick, onMounted, reactive } from 'vue'
+
+const state = reactive({
+  clearColor: '#201919',
+  shadows: false,
+  alpha: false,
+  webGPU: true,
+
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+})
+
+const { onLoop } = useRenderLoop()
+
+onMounted(async () => {
+  await nextTick()
+
+  onLoop(({ elapsed }) => {})
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera :position="[0, 1, -3]" :look-at="[0, 0, 0]" />
+
+    <OrbitControls />
+
+    <TresAmbientLight :intensity="80" />
+
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="red" />
+    </TresMesh>
+  </TresCanvas>
+</template>

playground/src/router/routes/index.ts

@@ -6,6 +6,7 @@ import { advancedRoutes } from './advanced'
 import { miscRoutes } from './misc'
 import { issuesRoutes } from './issues'
 import { loaderRoutes } from './loaders'
+import { webgpuRoutes } from './webgpu'
 
 const allRoutes = [
   ...basicRoutes,
@@ -16,6 +17,7 @@ const allRoutes = [
   ...miscRoutes,
   ...issuesRoutes,
   ...loaderRoutes,
+  ...webgpuRoutes,
 ]
 
 export {
@@ -28,4 +30,5 @@ export {
   issuesRoutes,
   allRoutes,
   loaderRoutes,
+  webgpuRoutes,
 }

playground/src/router/routes/webgpu.ts

@@ -0,0 +1,7 @@
+export const webgpuRoutes = [
+  {
+    path: '/webgpu/renderer',
+    name: 'WebGPU Renderer',
+    component: () => import('../../pages/webgpu/WebGPURenderer.vue'),
+  },
+]