Real-time 3D on the web should earn its place

Real-time 3D in the browser has become remarkably capable. You can render detailed models, interactive scenes and whole environments without a plugin. That capability creates a temptation: to reach for 3D because it is impressive, rather than because it helps.

I work across 3D, games and web products, and I have come to hold a simple rule: 3D should earn its place.

When 3D earns it

3D is worth its cost when the third dimension carries information the user genuinely needs.

• Inspecting a physical object. A buyer evaluating a 3D asset needs to rotate it, see its topology, check it from angles a thumbnail cannot show. Here 3D is the product.
• Understanding space. Heritage sites, buildings and environments are spatial by nature. A 3D experience can convey scale and relationship in a way photographs cannot.
• Configuration. When a user is changing something physical — a product, a layout, a variant — seeing the result in 3D removes guesswork.
• Play. In a game, the interaction is the point.

When it does not

• As a background. A slowly rotating shape behind a hero headline costs megabytes, battery and main-thread time, and usually says nothing. A CSS gradient or a well-chosen image often achieves the same mood for a fraction of the cost.
• As decoration on content pages. If users came to read, 3D competes with the reading.
• When a 2D view is clearer. Many "3D dashboards" are harder to read than the flat chart they replaced.

The costs are real

3D in the browser is not free, and the costs fall hardest on the users you can least afford to lose.

• Download size. Libraries, models and textures add up fast on mobile networks.
• Main-thread and GPU time. Mid-range phones throttle, heat up and drain.
• Accessibility. A 3D scene is opaque to screen readers unless you build an alternative, and motion can be a problem for people with vestibular disorders.
• Maintenance. Rendering code is specialised and ages faster than ordinary UI.

If you use it, use it carefully

• Load it lazily. Never put a 3D library on the critical path of a page whose main job is something else.
• Provide a fallback. A static render or image for low-power devices, reduced-motion preferences and no-JavaScript cases.
• Respect reduced motion. Auto-rotating or animated scenes should stop when the user has asked for less motion.
• Budget it. Decide in advance how much the 3D experience may add to load time and memory, and hold it to that.

The takeaway

Ask what the third dimension tells the user that two dimensions cannot. If there is a clear answer, 3D can be the most memorable part of a product. If the honest answer is "it looks cool", a lighter technique will usually make a better experience — and leave the performance budget for where it matters.