Building 3D websites that don't melt laptops

· 3D, Performance, WebGL

A 3D website has about three seconds to impress someone. If those three seconds are spent staring at a spinner, or the fan on their laptop starts screaming, the magic is gone. Over many experiments I have settled on a set of rules that keep immersive sites fast on real devices — not just on a gaming PC.

1. Load the words first, the world second

Text is what search engines read and what visitors scan first. I split the WebGL scene into its own JavaScript chunk and load it lazily, so headlines and buttons appear instantly while the 3D layer fades in behind them.

const Scene = lazy(() => import('./Scene'))

<Suspense fallback={null}>
  <Scene />
</Suspense>

The page is usable before the GPU does any work at all.

2. Budget your pixels

The single biggest cost in WebGL is usually the number of pixels you shade. A modern phone has a device pixel ratio of 3 — rendering at full resolution means nine times the work of a standard screen. Capping the ratio at around 1.5–2 is almost invisible to the eye and can double your frame rate.

3. Shaders over geometry

The particle sculpture on this site is 16,000 points drawn in a single call. Morphing between shapes, the swirl, the cursor force field and the click shockwave all happen in a vertex shader. One draw call, endless shapes. Whenever I can move work from JavaScript to the GPU, I do.

4. Compress everything

  • Models go through Draco or Meshopt compression, often shrinking them by 80–90%.
  • Textures are converted to KTX2 so they stay compressed in GPU memory.
  • Anything not visible on first load is loaded later.

5. Respect the user

Some people get motion sickness from heavy animation. I always check prefers-reduced-motion and slow everything down when it is set. It takes ten lines of code and it is the right thing to do.

6. Test on a cheap phone

My final test is never on my development machine. It is on a mid-range Android phone with the battery saver on. If it is smooth there, it is smooth everywhere.

Immersive does not have to mean heavy. The best 3D sites feel effortless because someone sweated every millisecond.

For a 3D build in the wild, see the Dubai Residences Explorer — map, 3D building model and 360° tours.

If you want a 3D experience for your product or brand that actually performs, let's talk.

← All posts