Two triangles and one forgotten line
Both passes run in one go; the first forgets vertexAttribPointer for the second buffer.
WebGL calls don't take "what to draw with" as arguments. They change global settings (the bound buffer, the current program, attribute pointers), and every later call uses whatever is set. Forget one setting and the next draw silently uses the last one. VAOs bundle the per-object settings.
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.
Rewrite the first example's draw() with one VAO per triangle.
Write logState(gl), printing the bound array buffer, the current program and attribute 0's buffer.
Explain it without notes
What does it mean that WebGL is a state machine, and what kind of bug does it cause?
What does a VAO store, and why does it make drawing faster and safer?
Console
Nothing logged yet.Expected console output
forgot vertexAttribPointer: left blue | right empty
with it: left orange | right blue
bound ARRAY_BUFFER is 'right': true
attribute 0 reads 'right': true