3D web experiences: virtual stores, configurators, browser games and digital twins

Worried 3D is a slow gimmick that does not sell?

• “Will it sell, or just look nice?” Sarah Sheldon, senior director of global ecommerce and digital at Rebecca Minkoff, on 3D and AR on product pages: “When people have the intent to shop without physically being able to touch and see a product, the more options you can give them to create that confidence is helpful.” In Shopify’s case study, shoppers who turned a product in 3D were 44% more likely to add it to the cart and 27% more likely to order than those who did not. Those are a vendor’s numbers, and people who choose to open a 3D view may already be keener buyers. So I measure your own: the one number before launch and after, on your store, with the basket one tap away on your ecommerce site.
• “Will it be slow on a phone?” I set a download budget for the weakest phone your customers use before I build, and you see the real size: NetNet Runner is about 1 MB, GVNR Survivors about 4 MB. When a build is too big for a first visit on a phone, phones get a short video first and load the 3D only when asked.
• “Will we be stuck with whoever built it?” The code, the 3D models, the repo, the accounts and the domain are yours from day one, and you get a written handover, so you are not dependent on me.

What you get: a fixed price in writing after the first call, before any work starts. The build on a live link you can click every week. You talk to me, the person who builds it, not a salesperson.

What can you build in 3D for the web?

Virtual stores and showrooms

My Hermès virtual store let a customer step inside as an avatar, turn a bag in 3D and move in close on the leather. At Napster I built a TAG Heuer virtual showroom, with a racing garage, a golf course by the sea and a virtual try-on that puts the sunglasses on your own face, with the product page beside them. With Napster, DMCC launched its Crypto Centre metaverse in Dubai, which runs on WebGL in a desktop browser with nothing to install. The full story is in virtual stores, live shows and 3D worlds people actually use.

3D product configurators

A configurator earns its place only when a choice changes the product: strap, dial, colour. I spend the polygons on the product, bake the room, and keep the basket on your ecommerce site, one tap away. I judge it by one number: taps through to a product page per visitor.

Browser games

Two you can play now. NetNet Runner is a tiny-planet multiplayer game in three.js: grab coins and bank them before someone bumps you. The whole game is about 1 MB to load. GVNR Survivors puts you against a swarm of rogue AI agents coming for production, for five minutes. It is three.js too, about 4 MB with its 3D models.

Digital twins

I turned SEVEN’s construction models for Al Hamra, its entertainment destination in Riyadh, into a building you can walk through in your browser: a 74 MB download that draws about 700,000 triangles at once at 60 fps on a laptop graphics chip. It took just under 12 weeks from first access to sign-off, by hand. Read the SEVEN Al Hamra case study. At Expo 2020 Dubai my team of 12 worked on Virtual Expo Dubai, the whole site in real-time 3D, still live after the Expo closed.

Live shows

I ran the technical production and workflow of PRISM, the virtual club world High Scream designed inside Sensorium Galaxy, where Carl Cox’s show premiered. How a virtual concert is built is in the same note.

three.js, Unity or streamed: which should you use?

• three.js (WebGL, WebGPU where available). Opens from a link with the smallest download. Most reach, tightest budget. My default for stores, configurators and games.
• Unity for the web. More headroom for heavy models, and one project ships to the browser, Android and Windows. The trade-off is a bigger first download. Unity 6 supports Chrome 58 and newer on Android and Safari 15 and newer on iOS (Unity docs).
• Streamed Unreal Engine. The engine runs on a cloud GPU and sends video, so any phone can show it. Every viewer who controls their own view needs their own GPU, at about $0.53 an hour on AWS, so 1,000 people at once is roughly $526 an hour in GPUs alone.

How long does a 3D website take to load?

As long as its first download. My NetNet Runner game is about 1 MB, GVNR Survivors about 4 MB, and the SEVEN Al Hamra building 74 MB. A 74 MB building is fine on a laptop and too much for a first visit on a phone, so on phones it plays a short video first and loads the 3D when you ask. Three rules keep the wait down:

1. Spend the polygons on the product. CAD or photogrammetry, rebuilt to a polygon budget, with fine detail baked into normal maps.
2. Bake the light. Lighting worked out once ahead of time, so the device does not have to.
3. Load the first room first. Compressed meshes and textures stream from a CDN while people look around.

Branded browser games: what does an advergame do for a campaign?

A branded browser game, or advergame, is a short HTML5 game people play from a link, where your product is the world or the rules. It does three jobs: reach, when players share their score; a leaderboard, which gives them a reason to come back; and data capture, an opt-in sign-up at the moment people care most, right after a good run.

Build it for the phone first. In September 2026, about 59% of web page views worldwide came from mobile devices (Statcounter Global Stats).

Proof you can play: GVNR Survivors

GVNR Survivors is the game I built for GVNR, a guard that decides, before an AI agent acts, whether to allow it, block it or ask a person. You hold production against a swarm of rogue AI agents for five minutes. Every enemy is something real AI does, like deleting a chapter or opening the salary sheet, and every power-up is a real GVNR rule, so players learn the product by playing it. The run ends on a score card made to share.

What makes a browser game work on a phone?

• A small first download. GVNR Survivors is about 4 MB with its 3D models, and opens from a link with nothing to install.
• One thumb. Put your thumb down anywhere and drag: the stick appears under it. Let go and the hero keeps defending on his own, so a one-handed player is not punished.
• A capped resolution. The game draws at most 1.75 pixels per screen point, so a sharp phone screen does not spend its battery on detail nobody sees.
• Instructions that do not stop play. The how-to card slows the game while it is up, instead of a wall of text before the first tap.
• Sharing through the phone. The score card opens the phone’s own share sheet, with a post on X as the fallback.
• No account to play. Your best score is kept on the device, so nobody signs up before the first run.

Set your campaign below and see what I would build.

What does a 3D web project cost?

Four things set the cost and the timeline: how many products are rebuilt in 3D, how real they must look, how many people join at once, and whether it runs live once or stays open. Running cost is the other half. A three.js or Unity build costs one download per visitor. A streamed build rents a GPU per viewer for as long as they stay. I write the brief back to you on one page before any price: the one number, the devices, the budget for the weakest device, what we build, what we buy and what we cut.

What should you bring to the first call?

• The goal and its one number: sales, appointments, minutes inside or people still there at the end.
• Who it is for, and on which devices.
• The assets you have: CAD and 3D files, packshots, brand guidelines, floor plans.
• The moment it has to work live: a launch, an opening, a drop.
• Who signs off.

If the bigger question is what to build at all, or you need product leadership alongside the build, see fractional CPO and forward deployed engineer.

How these builds work, in detail

• Three.js website: what it is, examples and cost
• Unity WebGL on mobile: 650 MB to a 74 MB build
• Gaussian splatting on a website and the SuperSplat tutorial
• What is a digital twin? and what one costs
• How much a 3D virtual tour costs
• What it costs to live stream an event and low latency streaming

Questions people ask

How much does a 3D website cost?

It depends on four things: how many products are rebuilt in 3D, how real they must look, how many people join at once, and whether it runs live once or stays open. The same four set how long it takes.

Should I use three.js or Unity for a 3D website?

three.js when it has to open fast from a link, especially on phones. Unity when the model is heavy, or when the same project also has to ship to Android or Windows. Streamed Unreal Engine when the visuals matter more than the cost per viewer.

Can a 3D product configurator connect to my online store?

Yes. The 3D world sits in front of your store and the basket stays on your ecommerce site, one tap away.

Do visitors need to install anything?

No. A three.js or Unity web build opens in the browser from a link. A streamed build plays as video in the browser.

Can you turn CAD or BIM models into a 3D website?

Yes. I turned SEVEN’s Revit, IFC and Navisworks construction models into a building you can walk through in a browser.

Can you build multiplayer browser games?

Yes. NetNet Runner is a tiny-planet multiplayer game in three.js: players grab coins and bank them before someone bumps them.

What is an advergame?

A short game built for a brand campaign that people play from a link, where the product is the world or the rules. It ends on something worth sharing: a score card, a leaderboard place or a sign-up. In GVNR Survivors every enemy is something real AI does and every power-up is a real GVNR rule.

Do HTML5 branded games work on phones?

Yes, when they are built for the phone first: a small download, one-thumb controls, a capped render resolution and sharing through the phone’s own share sheet. GVNR Survivors loads about 4 MB with its 3D models and plays with one thumb.

1. 30-minute call. Your goal, your users, what is stuck.
2. A written plan in 48 hours. What to build first, how long it takes, the risks.
3. Start, or not. Use the plan with your team or with me. I reply to every email within one working day.

If you want a virtual store, a configurator, a game or a digital twin built, write to m@tawfik.tv with what you have and who it is for.