Command Palette

Search for a command to run...

Hectal

Phase 13 · part: Headlight

WebGPU, TSL and Node Materials

WebGPURenderer with its WebGL 2 fallback, node materials and TSL, what does not carry over from WebGL, compute shaders for particles, and the headlight in TSL.

WebGPU is the newer browser API for the graphics chip. three.js reaches it through WebGPURenderer, which also runs on WebGL 2 when WebGPU is missing. This phase teaches that renderer, the node materials it uses, and TSL, the JavaScript way to write shaders once for both backends.

You also learn what does not come along: hand-written GLSL, onBeforeCompile and EffectComposer stop working. You port the metal-flake paint from Phase 12 to TSL and see what is gained and lost. Then you meet compute shaders, which run on the GPU without drawing anything, and use one to move twenty thousand particles.

In the build, the showroom switches to WebGPURenderer with automatic fallback, the paint moves to src/materials/paint.tsl.js, and the bike gets its headlight: a lamp with a glowing lens.

Phase 13 · the brief from Lumen

Kofi, frontend engineer at Lumen Bikes

“Tomás wants the showroom to feel as fast as a game on his new laptop. Lena needs it to still work on her cheap phone.”

Tomás, the founder, tried the showroom on his new laptop and asked why it felt like a web page and not like a game. Kofi had read that browsers now have WebGPU, a newer and more direct way to use the graphics chip. He also knew Lena's cheap Android phone still ran everything through WebGL 2.

The three.js answer is one renderer that tries WebGPU and quietly uses WebGL 2 when it cannot. The cost is that some of Phase 12's work does not carry over: the paint was written as GLSL text with onBeforeCompile, and WebGPURenderer ignores that. Kofi has to learn TSL, three.js's shader language made of JavaScript, and port the paint.

By the end of this phase the showroom starts on WebGPU where it exists, falls back on Lena's phone, has its paint in TSL and has a headlight that glows. Kofi also learns what the new renderer asks in return: a longer start-up and a bigger download.

At this station

You will learn

  • Start WebGPURenderer, tell which backend runs, and handle a browser without WebGPU
  • Build materials from nodes and write shader logic in TSL
  • Know exactly what WebGPURenderer does not support, and port the Phase 12 paint
  • Run a compute shader that moves 20,000 particles, and know what it does on the WebGL 2 fallback

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page

Files you touch

  • src/world/renderer.js
  • src/world/scene.js
  • src/materials/paint.tsl.js
  • src/objects/bike.js
  • src/ui/panel.js
  • src/main.js
Start with 13.1

Work order · 6 steps

  1. 13.1WebGPURenderer and Its FallbackWebGPURenderer from three/webgpu uses WebGPU when the browser has it and WebGL 2 when it does not, with the same code. It starts asynchronously, so you await renderer.init() before the first frame and read renderer.backend to see what you got. 21 min 3 live scenes
  2. 13.2Node MaterialsA node material describes its look as a graph of small operations: colorNode, positionNode, normalNode and more. three.js turns the graph into a shader for whichever backend runs, and a uniform() node changes without recompiling. 21 min 2 live scenes
  3. 13.3TSL BasicsTSL, the Three.js Shading Language, builds shader logic from JavaScript functions: Fn, uniform, time, uv, mix, sin. One program becomes WGSL on WebGPU and GLSL on WebGL 2. Its documentation is thin, so you learn to read the source. 22 min 3 live scenes
  4. 13.4What Does Not Carry OverWebGPURenderer does not run ShaderMaterial, ignores onBeforeCompile and cannot use EffectComposer. You see what each one really does, how to translate it to nodes, and port the Phase 12 metal-flake paint to TSL. 24 min 2 live scenes
  5. 13.5Compute Shaders for ParticlesA compute shader is a GPU program that draws nothing: it reads and writes buffers. With instancedArray and compute() the GPU moves 20,000 particles each frame while JavaScript only presses start. On the WebGL 2 fallback it still runs, with limits. 21 min 2 live scenes
  6. 13.6Build: The Headlight in TSLbuildThe showroom gains a WebGPU path: with ?webgpu in the address it runs on WebGPURenderer (with its own WebGL 2 fallback) and paints the frame with the TSL twin of Phase 12's paint, src/materials/paint.tsl.js. WebGL 2 stays the default. Both paths get this phase's part, the headlight. 68 min 1 live scene

Quality control · 3 tests

Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.

QC-01Which backend am I on?Write backendName(renderer) as in this phase's build: "WebGL 2" for a WebGLRenderer, otherwise "WebGPU" or "WebGL 2 (fallback)" depending on the backend WebGPURenderer chose.AdvancedQC-02Stripes in one line of TSLGive the plane 8 vertical stripes, Lumen blue and Lumen orange, by building its colorNode from uv, fract, step, mix and color.AdvancedQC-03Dim the lamp with a uniformThe lens glows with a fixed strength. Make the strength a TSL uniform, keep it in lens.userData.glow, and make the Off button set it to 0.Advanced