feat: webgpu

app/components/webgpu/HologramCube.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { isMesh } from '@tresjs/core'
+import { add, cameraProjectionMatrix, cameraViewMatrix, color, Fn, hash, mix, normalView, positionWorld, sin, timerGlobal, uniform, varying, vec3, vec4 } from 'three/tsl'
+import { AdditiveBlending, DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu'
+
+const { nodes } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+
+const model = computed(() => nodes.value.BlenderCube)
+/**
+ * Material
+ */
+const material = new MeshBasicNodeMaterial({
+  transparent: true,
+  side: DoubleSide,
+  depthWrite: false,
+  blending: AdditiveBlending,
+})
+// Position
+const glitchStrength = varying(0)
+material.vertexNode = Fn(() => {
+  const glitchTime = timerGlobal().sub(positionWorld.y.mul(0.5))
+  glitchStrength.assign(add(
+    sin(glitchTime),
+    sin(glitchTime.mul(3.45)),
+    sin(glitchTime.mul(8.76)),
+  ).div(3).smoothstep(0.3, 1))
+  const glitch = vec3(
+    hash(positionWorld.xz.abs().mul(9999)).sub(0.5),
+    0,
+    hash(positionWorld.yx.abs().mul(9999)).sub(0.5),
+  )
+  positionWorld.xyz.addAssign(glitch.mul(glitchStrength.mul(0.5)))
+  return cameraProjectionMatrix.mul(cameraViewMatrix).mul(positionWorld)
+})()
+// Color
+const colorInside = uniform(color('#ff6088'))
+const colorOutside = uniform(color('#4d55ff'))
+material.colorNode = Fn(() => {
+  const stripes = positionWorld.y.sub(timerGlobal(0.02)).mul(20).mod(1).pow(3)
+  const fresnel = normalView.dot(vec3(0, 0, 1)).abs().oneMinus()
+  const falloff = fresnel.smoothstep(0.8, 0.2)
+  const alpha = stripes.mul(fresnel).add(fresnel.mul(1.25)).mul(falloff)
+  const finalColor = mix(colorInside, colorOutside, fresnel.add(glitchStrength.mul(0.6)))
+  return vec4(finalColor, alpha)
+})()
+
+watch(model, (newModel) => {
+  newModel.traverse((child) => {
+    if (isMesh(child)) {
+      child.material = material
+    }
+  })
+})
+</script>
+
+<template>
+  <primitive v-if="model" :object="model" :position="[0, 1, 0]" />
+</template>

app/components/webgpu/index.global.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { WebGPURenderer } from 'three/webgpu'
+import type { TresRendererSetupContext } from '@tresjs/core'
+import { DoubleSide } from 'three'
+
+const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
+  const renderer = new WebGPURenderer({
+    canvas: toValue(ctx.canvas),
+    // WebGPU specific configuration
+    alpha: true,
+    antialias: true,
+  })
+  return renderer
+}
+</script>
+
+<template>
+  <TresCanvas :renderer="createWebGPURenderer">
+    <TresPerspectiveCamera
+      :position="[5, 2.2, 15]"
+      :look-at="[0, 2, 0]"
+      :fov="25"
+    />
+
+    <WebgpuHologramCube />
+    <OrbitControls :target="[0, 1, 0]" />
+
+    <TresMesh :scale="[100, 100, 1]" :position="[0, -0.1, 0]" :rotation-x="-Math.PI / 2" receive-shadow>
+       <TresPlaneGeometry  />
+      <TresMeshPhysicalMaterial color="#A590FF" :side="DoubleSide" />
+    </TresMesh>
+    <TresFog color="#000" :near="2" :far="50" />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight color="#FF3F00" :intensity="0.6" :position="[3, 3, 3]" :shadow-mapSize-width="1024"
+      :shadow-mapSize-height="1024" :shadow-camera-far="50" :shadow-camera-left="-10" :shadow-camera-right="10"
+      :shadow-camera-top="10" :shadow-camera-bottom="-10" :shadow-bias="-0.000001" cast-shadow />
+    <TresDirectionalLight color="white" :intensity="0.4" :position="[2, 1, 3]" :shadow-mapSize-width="1024"
+      :shadow-mapSize-height="1024" :shadow-camera-far="50" :shadow-camera-left="-10" :shadow-camera-right="10"
+      :shadow-camera-top="10" :shadow-camera-bottom="-10" :shadow-bias="-0.000001" />
+  </TresCanvas>
+</template>

content/experiments/webgpu.md

@@ -0,0 +1,14 @@
+---
+title: WebGPU
+description: WebGPU experiment showcasing modern GPU compute capabilities with TresJS
+author: alvarosabu
+tags:
+  - webgpu
+  - compute
+  - graphics
+  - gpu
+---
+
+# WebGPU
+
+A modern WebGPU experiment showcasing GPU compute capabilities with TresJS.

package.json

@@ -12,11 +12,13 @@
     "@nuxt/eslint": "^1.7.1",
     "@nuxt/ui-pro": "^3.3.0",
     "@tresjs/post-processing": "3.0.0-next.0",
+    "@vueuse/nuxt": "^13.8.0",
     "better-sqlite3": "^11.7.0",
     "mdast-util-to-string": "^4.0.0",
     "three": "^0.178.0",
     "three-custom-shader-material": "^6.3.7",
-    "unist-util-stringify-position": "^4.0.0"
+    "unist-util-stringify-position": "^4.0.0",
+    "vue": "^3.5.20"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.11",
@@ -30,8 +32,8 @@
     "@nuxt/kit": "^4.0.1",
     "@nuxt/ui": "^3.1.3",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tresjs/cientos": "5.0.0-next.4",
-    "@tresjs/core": "5.0.0-next.6",
+    "@tresjs/cientos": "5.0.0-alpha.0",
+    "@tresjs/core": "5.0.0-alpha.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
     "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@f356fed",
     "@tresjs/nuxt": "4.1.0-next.1",