WebGL on a performance budget

A 3D hero is a promise that the page will still feel fast. Most of the work is keeping that promise on a five-year-old laptop.

Render on demand

If nothing moves, nothing should render. Switch the canvas to frameloop="demand" and invalidate only when the camera or scroll changes.

Pause what nobody sees

Once the 3D scene scrolls out of view, stop the loop entirely. An opaque section on top of the canvas is a free performance win.

Budget the frame

You have roughly 16.6ms per frame, shared with layout, scroll and React. I keep the scene to:

• one directional light and baked ambient,
• shared materials wherever possible,
• post-processing only when it changes the mood.

Measure on real hardware

DevTools throttling lies about GPUs. Borrow the slowest laptop in the office and test there before calling it done.