Three.js & WebGL — When It Pays

Immersive 3D on the web can make a product unforgettable—or it can tank mobile performance for a decorative flourish nobody asked for. The difference is not “how advanced the shader is.” It is whether the 3D surface earns attention, conversion, or understanding that flat UI cannot.

This guide is an honesty pass for buyers: what Three.js and WebGL actually are, when immersive 3D is worth the cost, what Core Web Vitals and mid-tier phones will punish, and a decision checklist you can use before briefing a studio.

Three.js vs WebGL in plain English

WebGL is the browser API that talks to the GPU for real-time 2D/3D graphics. It is powerful and low-level. Most product teams should not write raw WebGL day to day.

Three.js is the widely used JavaScript library that sits on top of WebGL (and related APIs). It gives you scenes, cameras, lights, materials, loaders, and a sane scene graph—so product engineers can ship interactive 3D without reinventing the graphics stack.

In React codebases, React Three Fiber (R3F) is a common way to express Three.js scenes as components, which helps when the immersive surface lives inside the same app as the rest of the product UI.

You do not need to memorize the stack to buy well. You need a partner who can explain tradeoffs in product language: load budget, interaction goals, fallbacks, and how the 3D scene connects to real data (SKU, configuration, camera state)—not just a pretty loop.

When immersive 3D is worth it

3D pays when it changes a decision or deepens understanding.

Strong fit

• Product configurators — colorways, materials, modules, or kits where seeing the combination reduces returns and support load.
• Spatial / physical products — furniture, hardware, vehicles, venues, packaging where scale and form matter.
• Complex systems explanation — architecture, industrial flow, data-center layout, medical device overview—where a controllable model beats a PDF.
• Brand moments with a job — a hero that communicates craft or capability and leads into a clear next step (configure, request quote, explore collection)—not ornament for its own sake.
• Campaign experiences with a defined share/explore loop—and a performance budget agreed up front.

Weak fit (usually decorative)

• A homepage orb that spins while the real content is text the user came for.
• “Make it feel premium” with no product interaction and no measurable outcome.
• Full-scene 3D behind every route when a well-art-directed still + micro-interaction would convert the same.
• Forced WebGL on pages where SEO landing intent is informational and bounce cost is high.

Decorative 3D is not immoral. It is expensive. Treat it like a paid media buy: if you cannot name the job, cut it.

The mobile and Core Web Vitals tax

Real users are often on mid-tier Android phones, spotty LTE, and battery saver. WebGL work hits:

• JavaScript parse/compile for the 3D runtime and loaders.
• Texture and mesh weight (the silent killer).
• Main-thread contention with your React app, analytics, and chat widgets.
• GPU thermal throttling after a few seconds of fancy effects.
• Accessibility and input — hover-dependent scenes fail on touch; motion-sensitive users need reduced-motion paths.

Core Web Vitals (practical, not dogmatic)

You do not need to worship a single lab score. You do need to respect that:

• LCP suffers when the hero is a heavy canvas that delays meaningful paint—or when the “real” LCP element is blocked behind WebGL init.
• INP suffers when the main thread is busy with rendering setup, physics, or naive React re-renders into the scene.
• CLS appears when canvas sizing, font swaps, or late-loading UI around the stage shove content.

Honest studio practice:

1. Budget the experience — max initial payload for the 3D path, max draw calls, texture size caps, and a kill switch.
2. Don’t make WebGL the only way to understand the page — content and CTA should exist without the scene.
3. Lazy-enter — load the heavy path on intent (scroll into view, “Launch 3D,” configure click), not on every cold landing.
4. Provide fallbacks — static image, short video, or simplified scene on low-power / reduced-motion / failed WebGL.
5. Measure on real devices — a M1 MacBook preview is not a product test.

If a pitch deck never mentions mobile cost, assume they will discover it on your domain after launch.

Decision criteria (use this in the brief)

Before you greenlight immersive work, answer:

1. What decision does 3D change?

Pick one primary: configure purchase, understand spatial fit, explore collection, book a demo, reduce return risk. If the answer is “brand lift” only, set a small budget and a hard timebox.

2. Who is the primary device?

If most traffic is mobile social, design mobile-first scenes—or don’t do real-time 3D on the landing URL. Sometimes a rendered turntable video outperforms live WebGL on paid traffic.

3. What is the performance budget?

Agree numbers: initial 3D assets weight, target LCP on a reference mid-tier phone, whether the canvas loads auto or on gesture. Write it into scope.

4. Is the 3D connected to real product data?

Configurators that don’t read live SKU/inventory/pricing become expensive toys. If commerce is in play, plan the handoff to your storefront or product API early.

5. What is the non-3D fallback?

Accessibility, SEO landings, and failed GPUs still need a coherent page. Fallback is part of the product, not an afterthought.

6. Who maintains assets after launch?

GLBs, textures, and material updates need an owner. Orphaned 3D is how sites rot.

How a product engineering studio approaches it

Westama’s Immersive & 3D Web practice sits beside Web & Product Engineering—not as a disconnected “motion boutique.” That matters because immersive surfaces usually need the same React/TypeScript discipline, routing, CMS/content hooks, and analytics as the rest of the site.

Typical engagement notes (same studio shape as other product work): scoped after a real conversation, often in an 8–16 week window depending on asset pipeline and integration depth, small pod with a named lead. We will tell you when a static or video approach is the smarter commercial call. That is not upselling down—it is protecting conversion and CWV.

What we will not do: invent fake benchmarks, promise “perfect Lighthouse on all devices with cinema-quality scenes,” or treat Three.js as décor for every homepage.

Patterns that tend to work

• Configure → quote/cart with progressive enhancement (2D UI first, 3D when ready).
• Exploded / annotated product for complex hardware with deep links into docs or SKUs.
• Venue / space walkthrough with hotspots into booking or floor plans.
• Controlled brand hero with strict asset budget and a clear CTA—not infinite scroll theater.

Patterns that tend to fail:

• Autoplaying heavy scenes on every blog post.
• Particle systems as a substitute for message.
• Shipping unoptimized CAD dumps straight to the browser.
• Ignoring reduced-motion and keyboard/touch paths.

Brief template (steal this)

When you contact a studio, send:

1. Goal metric (e.g., configurator completion, time-to-understanding, qualified demo).
2. Primary devices and geo mix.
3. Must-have interactions vs nice-to-have.
4. Asset sources (CAD, photography, existing GLB) and who updates them.
5. Integration targets (CMS, commerce, CRM).
6. Hard constraints (max load, no-WebGL fallback required, brand motion limits).
7. Timeline and decision date.

Clear briefs get honest scopes. Vague “make it immersive” briefs get expensive discovery—or worse, decorative delivery.

Bottom line

Three.js and WebGL pay when they help someone see, configure, or understand something flat UI cannot—and when you budget for mobile reality. They do not pay as default website garnish.

If immersive 3D is on your roadmap, evaluate partners on performance discipline and product integration as much as on visual polish.

---

Next step

Explore how Westama engineers immersive experiences for production performance—not decorative demos.

• Immersive & 3D Web: /services/immersive-3d-web
• Related reading: How Much Does It Cost to Build an MVP or Web App in 2026?