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's familiar and it looks the same in a pitch deck. That's often the right answer. It's also, often, an expensive way to build the worse thing, and since nobody explains the trade honestly, 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. Our homepage runs 110,000 particles on desktop 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 can't do any of it, and faking it with twelve pre-rendered variants is worse than building it properly.
If no (say it's a mood, an establishing shot, a piece of brand film), use video. It's cheaper and 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
- You need to show real people, places, or products. Nothing beats a camera.
- The content changes seasonally and a studio already produces the footage.
- Designers will maintain it, and there's no engineer on the team.
- 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 instead of re-rendering
- The differentiation is the point, in a category where everyone else has stock footage
Don't write that last one off as vanity. It's a real market position. The estimates we've seen put the share of web development agencies with WebGL, GLSL, and GPU-optimisation capability under 3%, and the market for 3D web design services at 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
The performance budget matters more than the shader.
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's where most 3D sites fail. Roughly 70% of your visitors are on a phone.
In practice, that means uploading geometry once and never streaming it per frame. Animation runs on the GPU, so the CPU only updates a handful of numbers. On weak hardware, device-tier detection scales the scene down instead of dropping frames, and a hard rule keeps the 3D layer from ever blocking first paint or input.
And two things that aren't 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 and never replaces 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's 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 →