Count the work: meshes become draw calls
The counts are exact on every machine. Watch the draw calls figure in the status bar too.
A screen that refreshes 60 times a second gives your code 16.67 ms per picture, split between the CPU (your JavaScript and three.js's bookkeeping) and the GPU (the pixels). Performance work starts with measuring which side is late.
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.
Write a function budgetFor(hz) that returns the frame budget in milliseconds and the draw-call count you could afford if each draw call cost 0.02 ms of CPU time and everything else took 6 ms.
Your page runs at 25 fps on a phone. Name the first experiment you run, and what each outcome means.
Explain it without notes
Why can timing renderer.render() with performance.now() mislead you?
How do you tell a CPU-bound page from a GPU-bound one with no special tools?
Console
Nothing logged yet.Expected console output
0 meshes -> 0 draw calls, 0 triangles | geometries in memory: 0
1 meshes -> 1 draw calls, 80 triangles | geometries in memory: 1
10 meshes -> 10 draw calls, 800 triangles | geometries in memory: 1
100 meshes -> 100 draw calls, 8000 triangles | geometries in memory: 1
1000 meshes -> 1000 draw calls, 80000 triangles | geometries in memory: 1
frame budget at 60 Hz: 16.67 ms | at 120 Hz: 8.33 ms