A real compile error
The error is on line 58 because three.js adds 56 lines of its own before your main. The plane is not drawn; three.js still counts the draw call and keeps going.
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
THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Material Name:
Material Type: ShaderMaterial
Program Info Log: Fragment shader is not compiled.
FRAGMENT
ERROR: 0:58: '=' : cannot convert from 'const int' to 'highp float'
53: const vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );
54: return dot( weights, rgb );
55: }
56:
57: void main() {
> 58: float brightness = 1;
59: gl_FragColor = vec4(vec3(brightness), 1.0);
60: }
programs after render: 1 | draw calls: 1