WebGPU

Usage

Import cientos from @tresjs/cientos/webgpu when your scene uses TresCanvas from @tresjs/core/webgpu. The names and props are the same as in the root entry, so you only change the import path.

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core/webgpu'
import { OrbitControls, RoundedBox } from '@tresjs/cientos/webgpu'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
    <OrbitControls />
    <RoundedBox>
      <TresMeshStandardNodeMaterial color="hotpink" />
    </RoundedBox>
    <TresDirectionalLight :position="[3, 5, 2]" />
  </TresCanvas>
</template>

The root entry @tresjs/cientos keeps its exports and still targets WebGLRenderer.

What the entry exports

The entry exports every component that works under WebGPURenderer: controls, loaders, most shapes and abstractions, staging components that use only built-in materials, and render-target objects and composables such as Environment, CubeCamera and useFBO.

It also exports TSL ports of components that use GLSL in the root entry. A port has the same name and props, and it uses a node material that WebGPURenderer compiles to WGSL or to GLSL for its WebGL2 fallback. The ported components are:

• Grid
• HolographicMaterial
• Html
• Image
• MeshDiscardMaterial
• MeshGlassMaterial
• MeshWobbleMaterial
• Outline
• PointMaterial
• Precipitation
• Sparkles
• Stars

Precipitation, Sparkles and Stars render points with a set size. WebGPU draws Points at 1 pixel only, so their /webgpu versions render one instanced Sprite with PointsNodeMaterial. Their exposed instance is a Sprite, not Points. Raycasting finds the Precipitation and Stars sprite as one quad at its origin, not each point. Sparkles turns raycasting off.

PointMaterial is a material, so it cannot change the object you put it on. Under WebGPU, put it on a TresSprite with count and a positionNode, not on TresPoints. See Point Material.

Components that write GLSL shaders or call WebGL-only renderer APIs are not exported yet. If you import one of them from @tresjs/cientos/webgpu, your build and your type check fail and name the component. TSL versions with the same names and props will be added to the entry one by one.

If you import one of them from the root entry @tresjs/cientos and use it on a WebGPURenderer canvas, cientos logs one warning per component. The warning names the component and says what does not work.

Stage works from the root entry if you set shadows to false. Its shadows use ContactShadows or AccumulativeShadows.

Render targets under WebGPU

useFBO, Fbo, CubeCamera and Environment create WebGLRenderTarget or WebGLCubeRenderTarget. Despite the name, these classes hold no WebGL code, and WebGPURenderer renders into them. Two things behave differently from WebGL:

• Do not use samples: 1 in the useFBO settings. With three r186, WebGPURenderer slows to about 1 frame per second and logs no error. Use 0 for no multisampling or 4 for multisampling.
• Do not show the target on a mesh that the target renders. WebGL tolerates this feedback loop. WebGPU rejects the render pass. Hide the mesh while the target renders: set autoRender: false and render the target yourself in onBeforeRender.

<script setup lang="ts">
import { useLoop, useTres } from '@tresjs/core/webgpu'
import { useFBO } from '@tresjs/cientos/webgpu'
import { shallowRef } from 'vue'

const target = useFBO({ autoRender: false })
const { renderer, scene, camera } = useTres()
const screen = shallowRef()

useLoop().onBeforeRender(() => {
  if (!target.value || !camera.value || !screen.value) { return }
  screen.value.visible = false
  renderer.setRenderTarget(target.value)
  renderer.render(scene.value, camera.value)
  renderer.setRenderTarget(null)
  screen.value.visible = true
})
</script>

<template>
  <TresMesh ref="screen">
    <TresBoxGeometry />
    <TresMeshBasicMaterial :map="target?.texture ?? null" />
  </TresMesh>
</template>

Without the WebGPU entry

On @tresjs/cientos versions before v5.10, import from the root entry. Components that do not write shaders usually work under WebGPURenderer, but the components in the table above do not.