A wave with stale and with recomputed normals
Left: the old normal. Right: the new one. The brightness numbers are read from a small off-screen picture at time 0.
A vertex shader can move vertices: waves, wind, a swelling balloon. Lighting then needs a new normal, and three.js needs to know the mesh is no longer where its bounding sphere says.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a second wave that travels along z and update the normal.
Make the wave amplitude a uniform uAmplitude that you can change from JavaScript.
Explain it without notes
Why does a wave look flat if you only move the vertices?
Why can a displaced mesh disappear when it is still on screen?
Console
Nothing logged yet.Expected console output
stale normals: red channel 188 to 188
recomputed normals: red channel 50 to 250