Engineering · Jun 2025 · 7 min read
Shipping WebGL to Real Users: What We've Learned
Real-time 3D on the web is spectacular in demos and unforgiving in production. Here is the playbook we use to make it survive contact with actual visitors.
Every WebGL demo looks incredible in a portfolio: a flagship laptop, a wired mouse, a person who chose to be impressed. Production is different. Your scene will run on a three-year-old mid-range phone, on a train, on 4G, for someone who never asked to be impressed — they asked to buy something. Planning for that gap is the entire discipline.
Treat 3D as an enhancement, never a dependency
The first rule is architectural: the page must be complete without the canvas. If WebGL fails to initialise — and on some fraction of devices, it will — the user should get a beautiful CSS atmosphere instead, the same composition rendered in gradients and light. Same hierarchy, same message, zero broken states. We build the fallback first and treat the 3D as progressive polish on top.
The second rule is about budgets. Device pixel ratio gets capped, because rendering four million pixels for no perceptible gain is the fastest way to melt a phone battery. Particle counts scale with viewport and device class. Post-processing stays off on mobile entirely. And every scene runs under an IntersectionObserver — when the canvas scrolls out of view, the render loop stops. Not “slows down.” Stops.
The unglamorous details that save you
Dispose everything. Every geometry, material and texture you create must be destroyed on unmount, or your single-page app will slowly become a memory leak with a UI. Pause on tab switch. Degrade DPR before dropping frames. Watch for context-loss events and recover quietly. None of this appears in a showreel; all of it appears in a retention graph.
In production, the most impressive WebGL feature is the one that never makes the fans spin.
Interaction design matters as much as rendering. Mouse parallax should be lerped, never raw — instant response feels twitchy, interpolated response feels expensive. Touch gets its own choreography, not a mouse emulation. Reduced-motion users get a considered static composition, not a frozen first frame of something they were never meant to see frozen.
The result of all this discipline is a paradox worth embracing: the best WebGL on the web is the kind users never think about as technology. It is simply a page that happens to have depth, light and life. That is the standard we ship to — and honestly, it is the only demo that counts.