Read the receipt: calls, triangles, geometries, programs
The same scene grows in steps and prints renderer.info after each. The last two lines are the "value that does nothing" and the autoReset trap.
Sliders, axes, grids and counters let you see a scene instead of guessing. You use lil-gui to tweak values live, axes and grid helpers to read directions, renderer.info to count the GPU's work, and meet the three.js editor, DevTools and Spector.js.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a Box3Helper or BoxHelper around the cube in the first example. How does it change the child count?
Write a loop line that shows the draw call count in the page title every frame.
Explain it without notes
Your slider moves but the object does not. Give two possible causes.
What do info.render.calls and info.memory.geometries tell you, and why can the first be larger than the second?
Console
Nothing logged yet.Expected console output
empty scene | calls 0 | triangles 0 | geometries 0 | programs 0
5 meshes sharing a shape | calls 5 | triangles 60 | geometries 1 | programs 1
+5 meshes with their own shape | calls 10 | triangles 120 | geometries 6 | programs 1
+1 sphere with another material | calls 11 | triangles 1080 | geometries 7 | programs 2
parameters.width = 3, real width: 0.5
calls after two renders: 11 (it resets on every render())