Our own website uses more than a dozen WebGL scenes — morphing blobs, a particle galaxy, a fly-through tunnel, a draggable globe. Getting them to feel smooth on a mid-range phone took deliberate engineering. These are the rules we now follow on every 3D project.

1. Respect the WebGL context limit

Browsers cap how many WebGL contexts a page may hold — roughly 16 in Chromium — and each one costs GPU memory. A page with a canvas in every section hits that quickly. Keep the number of live canvases small, or share one canvas across views.

2. Don't render what nobody can see

A scene scrolled off screen still burns GPU time if its render loop keeps running. In React Three Fiber, switch the canvas to frameloop="never" when it leaves the viewport and back to "always" when it returns. Visually nothing changes; the battery notices immediately.

3. Compile before you show

The first frame of a scene compiles its shaders, which can freeze the page for a moment. Mount scenes behind a loading screen, call gl.compile(scene, camera), wait for the first real frame, and only then reveal the page.

4. Post-processing is a full-screen tax

Bloom, chromatic aberration and depth of field each add full-screen passes. They look great on desktop and can halve your frame rate on phones. Use them on hero scenes only, and fake glow with emissive materials elsewhere.

5. Budget your shaders

  • Noise is expensive: each extra octave of fractal noise adds work per vertex or per pixel.
  • Particle counts and point sizes multiply overdraw with additive blending.
  • Cap the device pixel ratio around 1.5–1.75; a 3× DPR screen renders nine times the pixels of 1×.

6. Instance repeated geometry

Hundreds of identical rings or cubes should be one instancedMesh, not hundreds of meshes. One draw call instead of hundreds is often the single biggest win.

7. Watch the non-3D costs too

Some of our worst lag had nothing to do with WebGL: a full-screen 2D canvas cursor redrawn every frame, CSS filter: blur() animated on scroll, and a CSS variable written to the root element on every animation frame, forcing the whole page to restyle.

Measure on a real mid-range phone. If it's smooth there, it's smooth everywhere.

The result

With these rules our home page scrolls at around 60 fps in testing with every scene mounted. 3D should make a site memorable, not make visitors wait — and with a performance budget from day one, you don't have to choose.