onBeforeCompile and the program cache
Left is meant to be red and middle blue, but with the default key both come out red (one program). With their own keys they differ. The third ball (right, meant to be green) has a typo in the chunk name: it prints a warning and stays untinted grey (108,112,116). Before it exists, right reads the background (1,1,2).
You cannot print from a shader. You read three.js's compile log with its line numbers, show values as colours, know what precision a phone really has, and treat onBeforeCompile as a powerful but fragile tool.
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.
Show the UV of a mesh as colour in a MeshStandardMaterial.
Make insertAfter log the chunk name and the line where it inserted.
Explain it without notes
Why is the error on line 58 when your fragment shader has only 4 lines?
Why do two onBeforeCompile materials with different tints share one shader?
Console
Nothing logged yet.Expected console output
default cache key: left 108,22,23 | middle 108,22,23 | right 1,1,2 | programs: 1
own cache keys: left 108,22,23 | middle 22,45,115 | right 1,1,2 | programs: 3
onBeforeCompile: "#include <dithering_fragmen>" was not found, so nothing changed
with a typo: left 108,22,23 | middle 22,45,115 | right 108,112,116 | programs: 4
onBeforeCompile: "#include <dithering_fragmen>" was not found, so nothing changed