WebGL
Real-time 3D or a video? The honest comparison
You want the homepage to feel like something. Two ways to get there: film it and play the file, or compute it live in the browser.
Agencies mostly pick video, because it is familiar and it looks the same in a pitch deck. That is often the right answer. It is also, often, an expensive way to build the worse thing — and nobody explains the trade honestly, so here it is.
The comparison
| Pre-rendered video | Real-time WebGL | |
|---|---|---|
| Responds to the user | No | Yes — cursor, scroll, click, device tilt |
| Weight | 5–50MB for a few seconds | Under 300KB for a whole scene |
| Mobile data cost | High | Low |
| Changing a colour later | Re-render, re-export, re-upload | Change a number |
| Changing the content | New shoot or new render | Change the data |
| Autoplay reliability | Blocked or muted in many contexts | N/A |
| Core Web Vitals risk | Large LCP element, big transfer | Low if the canvas never blocks first paint |
| Build cost | Lower | Higher |
| Who can maintain it | A motion designer | An engineer |
The weight difference is the one people underestimate. A single second of 4K video outweighs an entire particle system. The site you are reading runs 110,000 particles and ships less than one second of equivalent footage would.
The question that decides it
Does the user need to change what they see?
If yes, you need real-time. A product configurator, a floor plan you can slice, a view from the 26th floor, anything where the answer depends on the person asking — a video cannot do it, and faking it with twelve pre-rendered variants is worse than building it properly.
If no — if this is a mood, an establishing shot, a piece of brand film — use video. It is cheaper, faster, and a well-shot film beats a mediocre WebGL scene every time.
Everything else in the comparison is secondary to that question.
When video is genuinely the right call
- Real people, real places, real product. Nothing beats a camera.
- The content changes seasonally and a studio already produces the footage.
- The team maintaining it are designers, not engineers.
- The budget is small. A good film on a small budget beats bad 3D on a small budget, always.
Anyone who tells you 3D is always the answer is selling 3D.
When real-time earns its cost
- The user configures, filters, or explores something
- The state comes from live data — availability, inventory, pricing
- You need it on mobile without a 40MB download
- It has to be updated often, by changing values rather than re-rendering
- The differentiation is the point, in a category where everyone else has stock footage
That last one is a real market position rather than vanity. Industry estimates put the share of web development agencies with WebGL, GLSL, and GPU-optimisation capability at under 3%, while the 3D web design services market sits around $4.07B in 2026, projected to reach $16.29B by 2035. Demand is growing considerably faster than supply.
The part that actually decides quality
Not the shader. The performance budget.
Anyone can put a spinning model on a page. Holding 60fps on a three-year-old Android while passing Core Web Vitals — LCP under 2.5s, INP under 200ms, CLS under 0.1 — is the actual engineering, and it is where most 3D sites fail. Roughly 70% of your visitors are on a phone.
What it takes in practice: geometry uploaded once rather than streamed per frame, animation computed on the GPU so the CPU only updates a handful of numbers, device-tier detection that scales the scene down on weak hardware instead of dropping frames, and a hard rule that the 3D layer never blocks first paint or input.
And two things that are not optional: honour prefers-reduced-motion, and give people a visible
motion toggle. An experience that makes someone motion-sick is a failed experience, however
impressive the shader.
Common questions
Is 3D bad for SEO? Not if the text is real HTML in the document. Crawlers and answer engines should never need to execute JavaScript to read your content. The canvas sits alongside the content, not instead of it.
Can I add 3D to my existing site? Usually. A self-contained WebGL section drops into an existing page. Check the host page's performance budget first — adding 3D to a site that is already slow just makes it slower.
What does it cost? Real-time work typically runs $12,000–$35,000 depending on bespoke shader work and asset production. A single hero moment sits at the low end; a full configurator at the high end.
Do we need 3D models made? Procedural and generated geometry can be produced in-house. Photoreal product models come from your existing CAD or a modeller, quoted separately.
We build both, and we say which one you need. 3D and WebGL → · Esta entrada en español →