@threlte/extras

WebGPU

@threlte/extras ships a webgpu export that pairs with @threlte/core/webgpu. Import from it instead of the package root whenever your <Canvas> comes from @threlte/core/webgpu.

Scene.svelte

<script>
  import { T } from '@threlte/core/webgpu'
  import { Grid, OrbitControls } from '@threlte/extras/webgpu'
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 10, 10]}
>
  <OrbitControls />
</T.PerspectiveCamera>

<Grid />

Mixing the two entrypoints is what to avoid. A component imported from @threlte/extras builds WebGL materials and holds classes from three, which are distinct from the ones in three/webgpu even when they share a name.

What is available

Most of the package never touches the renderer and is re-exported unchanged — every hook, all transitions, suspense, portals, audio, interactivity, layers, and abstractions such as <Float>, <Align>, <GLTF>, <InstancedMesh>, <SVG> and <View>. These behave identically to their @threlte/extras counterparts, and you can read their regular reference pages.

Components written against WebGL fall into three groups.

Supported

These match the behavior of their WebGL counterparts:

Native on WebGPU

These exist to work around a WebGL limitation that WebGPU doesn’t have. Their reference pages carry a WebGPU section showing the node material property that replaces them, so there is nothing to import:

Awaiting a WebGPU implementation


`<AnimatedSpriteMaterial>`	`<AsciiRenderer>`	`<ContactShadows>`
`<FakeGlowMaterial>`	`<ImageMaterial>`	`<InstancedSprite>`
`<MeshRefractionMaterial>`	`<Outlines>`	`<PerfMonitor>`
`<PointsMaterial>`	`<Sky>`	`<SoftShadows>`
`<Sparkles>`	`<Stars>`	`<Text>`
`<VirtualEnvironment>`	`<Wireframe>`	`<Wobble>`

Migration to TSL is ongoing and each component is ported in place, so a future release can move one of these into the list above without any change on your side. If one is blocking you, open an issue so it can be prioritized.

Previous Page Getting Started

Next Page <Audio>