Designing Beyond 60fps: WebGL Performance Hacks

Sixty frames per second is not a performance target, it is a deadline. You get 16.6 milliseconds, the browser takes a slice for compositing, and whatever is left belongs to your scene. Most WebGL work that feels slow is not doing too much maths — it is talking to the GPU too often.

1. Set a Draw-Call Budget First

Decide the number before you model anything. On mid-range mobile hardware we hold to roughly 150 draw calls per frame; anything past that and the CPU becomes the bottleneck long before the fragment shader does. A budget turns an open-ended optimisation problem into a checklist.

You cannot optimise what you never measured. Open the profiler before you open the shader.

2. Instance Everything Repeated

Any geometry that appears more than a handful of times belongs in an instanced mesh. Twelve thousand particles as individual meshes will stall the main thread; the same twelve thousand as one instanced draw call costs about as much as a single cube. The per-instance data lives in an attribute buffer you update in place.

3. Make Idle Scenes Free

The cheapest frame is the one you never render. Pause the loop when the canvas leaves the viewport, when the tab is hidden, and when nothing in the scene has changed. Users judge a site by its battery drain far more than they admit.