A peek at WebGPU

three.js is in the middle of moving from WebGL to WebGPU. The new renderer uses the same scene graph, materials, and APIs you've been using — but it also opens up Three Shading Language (TSL), a node-based shader language you write in TypeScript instead of GLSL.

This chapter is a short peek at both.

Swapping the renderer

<Canvas> accepts a gl callback that lets you build any renderer you want. To use WebGPU, return a WebGPURenderer from three/webgpu. solid-three awaits its init() for you before the first frame.

Same <Canvas>, same <T.Mesh>, same useFrame — only the gl line changed. Everything you've learned still applies.

TSL: shaders in TypeScript

The bigger reason to reach for WebGPU is Three Shading Language. Instead of writing GLSL strings and wiring uniforms by hand, you compose shader nodes — math, samplers, time — directly in TypeScript. The result runs on the GPU.

That stripey, washy material is one function:

function buildColorNode() {
  const stripes = sin(uv().x.mul(20).add(time.mul(2)))
  const wash = sin(uv().y.mul(8).sub(time))
  return mix(vec3(0.95, 0.3, 0.6), vec3(0.2, 0.7, 1.0), stripes.mul(0.5).add(wash.mul(0.5)))
}

uv(), time, sin, mix, vec3 — they look like math, but they're nodes describing a tiny program that the GPU compiles and runs once per fragment (where uv is the texture coordinate). No GLSL strings to write, no uniforms to wire up by hand.

Then it's wired in as the colorNode of a MeshBasicNodeMaterial:

<T.MeshBasicNodeMaterial colorNode={buildColorNode()} />

Props on <T.*> work the same way as in chapter 2 — colorNode is just a prop. MeshBasicNodeMaterial isn't in the global THREE namespace, so we extended createT with it: createT({ ...THREE, MeshBasicNodeMaterial }).

Driving a uniform from a signal

The static TSL above runs entirely on the GPU. To make it react to the outside world, build a uniform() and push values into it from a Solid effect.

Drag the slider. The frequency signal updates → the createEffect writes to frequencyUniform.value → the next frame's shader sees the new value and the stripe density changes. No scene-tree rebuild, no material remount. The same one-property-per-frame discipline you saw with useFrame, but the property happens to live on the GPU.

Where this is going

three.js's WebGPU + TSL story is still landing, but the through-line is worth holding onto: a move from string-based shaders and hand-wired uniforms to a typed graph that lives on the GPU. solid-three treats WebGPU like any other renderer — the same signal-to-prop wiring that drives meshes also drives node materials and uniforms.

That's the whole tutorial. Build something — and if you make something interesting, send it.