Phase 17 · part: Mudguards
Performance
Measure first: frame budget, draw calls and instancing, LOD and culling, disposal and leaks, pixels and fill rate, workers, and a budget the showroom checks itself.
A 3D page that feels smooth on your laptop can stutter, heat up and crash on a cheap phone. This phase turns "it is slow" into numbers: the frame budget, what renderer.info counts, and which side (CPU or GPU) is late.
Then the fixes, each with a before and after: instancing and merging for draw calls, LOD and culling for triangles, dispose() against leaks, pixel-ratio caps and render on demand for the GPU, and workers for the page's own thread.
The build gives the showroom a budget it checks once a second, a colour picker that repaints without leaking, and the mudguards.
Phase 17 · the brief from Lumen
Lena, QA, who tests on a cheap Android phone
“After ten minutes of changing colours the showroom gets slow and then the tab reloads by itself.”
Lena's phone is two years old and she has been clicking colours for ten minutes, as a customer might. The bike turns more slowly, then the page flashes and reloads. On Kofi's laptop nothing happens, however long he clicks.
Kofi opens the numbers: every click makes a new paint texture and none is ever freed. Ama's new effects, added in Phase 15, also cost a few extra draw calls per frame, and nobody had counted. The team agrees to stop guessing.
They fix the leak, write down the limits for the weakest phone they support, and teach the showroom to warn when it passes them. By the end of the phase Lena's ten minutes of clicking leave the memory flat, and the bike has its mudguards.
At this station
You will learn
- Measure frame cost with
renderer.infoand tell CPU-bound from GPU-bound - Cut draw calls with instancing, merging and
BatchedMesh, and cut triangles with LOD and culling - Find and fix a GPU memory leak with
dispose() - Cap pixels, draw on demand, and write a budget the page checks itself
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- src/systems/budget.js
- src/objects/bike.js
- src/systems/picking.js
- src/ui/panel.js
- src/main.js
- index.html
Work order · 7 steps
- 17.1The Frame BudgetA 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. 19 min 2 live scenes
- 17.2Draw Calls and InstancingEach mesh costs one draw call. When many objects share a shape and a material,
InstancedMesh,BatchedMeshor merged geometry send them in one call. The counts prove it. 22 min 3 live scenes - 17.3Level of Detail and CullingThe cheapest triangle is the one you never send. Frustum culling skips what the camera cannot see;
LODswaps in simpler meshes as objects get far away. Both depend on numbers you must keep true. 21 min 2 live scenes - 17.4Memory, Disposal and Leaksthree.js uploads geometries, textures and shaders to the GPU and never frees them by itself.
dispose()frees them, but only the one object you call it on. A configurator that makes a texture per click leaks until the tab dies. 22 min 3 live scenes - 17.5Pixels and Fill RateThe GPU's work grows with the number of pixels it shades, and every transparent layer shades them again. Cap the pixel ratio, avoid stacked transparency, and draw only when the picture changed. 22 min 3 live scenes
- 17.6Workers and OffscreenCanvasAn
OffscreenCanvaslets a Web Worker own the canvas and run three.js there, so heavy JavaScript no longer blocks the page's buttons. What moves into the worker, and what must stay, is the whole design. 18 min 1 live scene - 17.7Build: The Performance BudgetbuildThe showroom now watches itself: a budget module reads
renderer.infoonce 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. 99 min 1 live scene
Quality control · 4 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
InstancedMesh of 200 instances, in the same places.AdvancedQC-02Fix the vanishing wallA shader stretches a 1 m wall to 20 m. With the wall moved to x = 7 it disappears, although most of it is on screen.AdvancedQC-03Stop the colour leakEach click on a colour button makes a new texture and forgets the old one. Make 10 clicks leave at most 1 extra texture in GPU memory.AdvancedQC-04Draw only when neededThe loop draws 60 pictures a second although nothing moves. Draw a picture only when the camera has moved (use controls.addEventListener("change", ...)), plus once at the start.Advanced