The Lumen paint in TSL
The code of src/materials/paint.tsl.js is joined onto the top of this example. Left: clear coat and no flakes (flakeStrength: 0). Right: the same paint with flakes. Changing flake.density.value needs no new shader. No output because of the fallback warning.
WebGPURenderer 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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A material uses onBeforeCompile to turn the surface red where vWorldPos.y > 1.0. Write the node-material version.
Write the one line that gives a WebGPURenderer scene an HDR environment from a HDRLoader result called hdr.
Explain it without notes
Name the three WebGL features that do not carry over to WebGPURenderer, and what each one does when you try it.
How would you find every place a project needs porting before switching to WebGPURenderer?
Console
Nothing logged yet.