Compile errors and link errors, as WebGL reports them
ANGLE checks shaders before the driver sees them. Safari, and Firefox on Linux and macOS, word these differently.
Raw WebGL 2 draws in five steps: get a context, compile two shaders and link them into a program, put vertices in a buffer, describe that buffer to the shader, then draw. Every step can fail, and nothing throws: you must ask.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the triangle Lumen blue #2a9df4 and print the middle pixel.
Compile a fragment shader with no out at all. What does the compiler say?
Explain it without notes
Walk through the five steps of drawing a triangle in raw WebGL 2, naming one call in each.
Why does a broken shader not throw, and how do you find what is wrong?
Console
Nothing logged yet.Expected console output
typo -> FAILED
ERROR: 0:5: 'colr' : undeclared identifier
ERROR: 0:5: 'assign' : l-value required (can't modify a const)
ERROR: 0:5: '=' : dimension mismatch
ERROR: 0:5: 'assign' : cannot convert from 'highp 4-component vector of float' to 'const highp float'
int to float -> FAILED
ERROR: 0:5: '=' : cannot convert from 'const int' to 'highp float'
no #version -> FAILED
ERROR: 0:2: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:3: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
no precision -> FAILED
ERROR: 0:2: '' : No precision specified for (float)
ERROR: 0:3: '' : No precision specified for (float)
vertex -> compiled
fragment -> compiled
type mismatch link -> FAILED
Types of varying 'tint' differ between VERTEX and FRAGMENT shaders.
FRAGMENT varying tint does not match any VERTEX varying
vertex -> compiled
fragment -> compiled
missing output link -> FAILED
FRAGMENT varying tint does not match any VERTEX varying