Every WebGL call three.js makes for a frame
Counts, the same on every GPU. The wrapper only counts; three.js doesn't notice it.
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
frame 1: 156 WebGL calls (43 kinds) | bindBuffer 21, getActiveUniform 14, getUniformLocation 14, createBuffer 12, bufferData 12, enableVertexAttribArray 6
frame 2: 10 WebGL calls (4 kinds) | uniformMatrix4fv 3, bindVertexArray 3, drawElements 3, clear 1
frame 3: 12 WebGL calls (5 kinds) | uniformMatrix4fv 3, bindVertexArray 3, drawElements 3, uniformMatrix3fv 2, clear 1
draw calls: 3 | programs: 1