Your code and three.js in one context
Measured on the GPU: three.js's second draw runs with our program and our VAO, which has no index buffer, so drawElements fails.
three.js turns a scene into WebGL calls: 156 on the first frame of a small scene (compiling, uploading), 10 on later ones, skipping everything that didn't change. Raw GPU code is worth it for small special jobs, custom renderers and compute; when it shares three.js's context, call renderer.resetState().
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.
Print how many useProgram calls each frame makes in the first example, and explain the numbers.
Would a second three.js program in the second example's scene remove the need for resetState()?
Explain it without notes
What does three.js send to WebGL on the first frame and on later frames, and why?
You must draw a custom effect into three.js's canvas with raw WebGL. What can go wrong, and how do you prevent it?
Console
Nothing logged yet.Expected console output
without resetState(): square empty | triangle orange | GL error INVALID_OPERATION
with resetState(): square blue | triangle orange | GL error none