A triangle in raw WebGL 2
No three.js: the viewport shows WebGL 2 · raw. The colour is one constant, so the pixels match on every GPU.
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
attribute 'position' is at location 0
middle: 255, 107, 44, 255
corner: 11, 17, 24, 255
errors: none