The showroom after Phase 17
Every project file of this phase joined into one (local imports cannot run in the preview). The first lines of output are the checks added for this topic.
The showroom now watches itself: a budget module reads renderer.info once a second and warns when draw calls, triangles, textures or geometries pass their limits. A colour picker repaints without leaking, and the mudguards join the bike.
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.
Add a memory line to the budget: a limit of 12 textures for a low-end phone profile, and a function profile(name) returning the right budget.
Why is the draw-call limit 70 rather than the 54 we measured with effects on?
Explain it without notes
Why does budget.js reset renderer.info itself?
Why does changing the frame colour not need dispose()?
Console
Nothing logged yet.Expected console output
backend: WebGL 2
parts: down-tube, top-tube, seat-tube, chain-stays, seat-stays, fork, front-wheel, rear-wheel, handlebar, crankset, chain, pedals, brakes, mudguards, rear-light, headlight
plain frame: draw calls 40 | triangles 9568 | geometries 42 | textures 20
frame with the effect chain: draw calls 54 | triangles 9582
over budget: [] | the budget: {"calls":70,"triangles":30000,"textures":24,"geometries":50}
after 20 colour changes: textures 20 -> 20 | programs 22 -> 22
a tight budget warns: [{"name":"calls","value":40,"limit":10}]