For two decades the web has been flat. Boxes and columns stacked on a white page. Our view is that the brands worth remembering over the next ten years will break that plane, and WebGL is the chisel.

A 3D scene that responds to the cursor and the scroll turns a skimmer into a participant. People can inspect a product from every angle and get answers a flat photo can't give them. There is evidence it sells, too. Shopify reports that Rebecca Minkoff shoppers who viewed a product as a 3D model were 44% more likely to add it to cart. That is one brand's result, so treat it as a signal and not a promise. Build the scene properly and the page stays fast. Get it wrong and you've bought an expensive way to lose customers.

This is the guide to building it properly.

Attention comes first

You get very little time. A 2006 study led by Gitte Lindgaard at Carleton University found people form a view of a web page's visual appeal in as little as 50 milliseconds. After that first glance, a static hero image has nothing left to offer. A reactive scene does. The visitor moves, the world moves with them, and now they are playing with your product.

Playing looks a lot like what buyers do in a shop right before they commit. They turn the thing over and check the back. On a flat page the visitor has to imagine all of that. In 3D they just do it.

Attention is where every sale starts. A page nobody explores is a page nobody buys from.

What WebGL is, in plain English

WebGL is a browser technology for drawing interactive 3D graphics without plug-ins, using the device's own graphics hardware. No app download. Mozilla's documentation lists support in all modern browsers, as long as the device's hardware is up to it. Libraries like three.js sit on top of WebGL and make it practical to build with.

So you can put a live 3D object on a web page. A video only plays back what somebody else filmed. A live model is redrawn every frame, so it can react to a drag or swap from oak to walnut on command.

For a business, that opens up three things a flat site does poorly:

  • Inspection. The buyer rotates and zooms the product as if it were in their hands.
  • Configuration. The buyer changes the finish or the options and sees the result instantly.
  • Atmosphere. The brand gets a living first impression where a stock hero image used to be.

Where 3D earns its keep, and where it doesn't

3D is wrong for a lot of pages, and an agency selling it should tell you so. Bolt it onto the wrong page and all you add is weight.

Where it pays:

  • Physical products with detail worth seeing. Think watches or handmade furniture, where craftsmanship is the selling point.
  • Configurable products. Anything with finishes or modules the buyer has to choose between.
  • Spaces and architecture. Property and venues, where the buyer needs to understand the layout.
  • Launches and brand flagships, where the goal is to be remembered and talked about.

Where it doesn't:

  • Service pages that need to explain and persuade. Copy and proof do the heavy lifting there.
  • Checkout and forms. Anything between a buyer and the pay button should be light and boring.
  • Pages built mainly to rank for search. Google's guidance is blunt: if content isn't visible in the rendered HTML, it can't be indexed. Pixels painted on a canvas are not HTML text.

The rule we use: 3D should answer a buyer's question or create a feeling the brand needs. If it does neither, cut it.

Performance is the catch, and the moat

The lazy route is to bolt on a heavy 3D library, tank the load time and call it "immersive." We do the opposite. The trick is shipping high-fidelity visuals that stay under budget:

  • Draco-compressed geometry. Draco is Google's open-source library for compressing 3D meshes, so the model is a smaller download.
  • Lazy-initialised canvases that only spin up the GPU when the element scrolls into view.
  • Reduced-motion fallbacks, so visitors who have asked their device for less animation get a calmer version.

Those three are the foundation. On top of them we'd add:

  • Compressed textures. Texture images can outweigh the geometry. Khronos says its KTX 2.0 format achieves significantly smaller transmission and GPU memory sizes than JPEG and PNG textures.
  • A static poster first. The page paints a lightweight image of the scene immediately, then swaps in the live 3D once it's ready. The visitor never stares at a blank box.
  • A performance budget. A hard ceiling on file size and frame cost, agreed before a single model is built.
  • Adaptive quality. Weaker devices get lower-resolution rendering and simpler effects, so a mid-range phone runs smooth.

It's a moat because it's hard. Anyone can drop a 3D library onto a page. Making it load fast, run smoothly on a three-year-old phone and still pass Google's speed tests takes real engineering. To see what's at stake, read why a slow website is a silent business killer and what the Core Web Vitals rules measure. A 3D site that fails those is a liability, however pretty it is.

How to build a 3D site that sells, step by step

  1. Start with the buyer's question. What does the visitor need to see or feel to say yes? If the answer is "the stitching on the strap," that's your 3D moment. Write it down before anyone opens a design tool.
  2. Set the performance budget. Decide the maximum weight and the target devices up front.
  3. Get or build the models. If your manufacturer has CAD files, ask for them. They'll need simplifying for the web, because an engineering file is far too heavy to ship.
  4. Design the interaction. Drag to rotate. Scroll to reveal. Keep it obvious, because if people need instructions it's too clever.
  5. Wrap it in real content. Put a headline, the price and a clear call to action around the scene. The 3D earns attention. The copy converts it.
  6. Build the fallbacks. Older devices get the poster image. Visitors who ask for less motion get a still version.
  7. Test on real phones. The latest flagship tells you nothing. Use a mid-range Android on a patchy mobile connection.
  8. Measure and iterate. Compare the 3D page against the flat version on add-to-cart or enquiry rate, then refine.
Build me a site people want to explore →

From spectacle to sales

A product that rotates in real time or a configurator that previews materials live is doing a sales job. It shortens the distance between curiosity and checkout.

Our read is that a lot of hesitation online comes down to uncertainty. Will the colour look right in my room? What does the back look like? Is the finish glossy or matte? Each unanswered question is a reason to leave the tab open and never come back. A live model answers them on the spot.

Configurators go further. Once someone has chosen their colour and their size, they have built something. They've stopped browsing a product and started looking at theirs. That's a good frame of mind for a buyer to be in when the "Add to cart" button appears.

A worked example: the furniture configurator

Here's a hypothetical. Say you run an Australian furniture maker selling a solid-timber dining table in three timbers, two leg styles and four lengths. Your current product page has a grid of photos, but you can't photograph every combination, so buyers see the oak version and have to imagine the walnut with the tapered legs at 2.4 metres.

They email to ask. Some wait for a reply. Plenty don't.

A WebGL configurator changes the page. The buyer picks walnut, taps tapered legs, slides the length to 2.4 metres, and watches the table update in front of them. They drag it around to see the grain on the end and zoom into the joinery. The price updates as they choose. When they're done, the "Add to cart" button carries the exact table they've just built.

After launch you'd watch four numbers: pre-sale emails asking what a combination looks like, time on the product page, the share of visitors reaching the cart, and returns from buyers who got something different to what they pictured. None of them is guaranteed to move. All of them can be measured.

How to measure whether 3D is paying for itself

"It looks incredible" is not a business result. Track these instead:

  • Interaction rate. What share of visitors touch the 3D element? A low number usually means people can't find it or it loads too slowly.
  • Time on page and scroll depth. Useful, but only alongside conversion. Attention that never converts is just a nicer bounce.
  • Add-to-cart and enquiry rate. This is the real test. Compare against the flat version of the page if you can run both.
  • Load and responsiveness metrics. Watch real-user speed data, especially on mobile. If these slip, you're paying for the 3D in lost visitors.
  • Return and support rates. If buyers understand the product better before they pay, you should see fewer "not what I expected" emails after.

Keep the fundamentals in view as well, because the scene is only one part of the page. Everything around it still has to follow the rules in the anatomy of a landing page that prints money, starting with one clear promise and an obvious next step.

The mistakes that turn immersive into invisible

  • 3D with no purpose. A floating abstract shape that has nothing to do with the offer. Pretty for three seconds, then ignored.
  • Loading the whole scene before the page appears. The visitor sees nothing, assumes the site is broken and leaves.
  • Hijacking the scroll. Scroll-driven scenes that trap people short of the content feel clever to designers and infuriating to buyers.
  • Ignoring accessibility. No reduced-motion option and no keyboard path shuts people out. MDN warns that scaling or panning large objects can trigger discomfort for people with vestibular motion disorders.
  • Burying the copy. Search engines and answer engines read words. If the only thing on the page is a canvas, you've built something nobody can find.
  • Desktop-only testing. About half of Australian web traffic is on a phone. Build for it first.

Build the experience, keep the speed

The 2D web was built for documents. Your brand is an experience, so build it like one.

Build it with discipline, though. Every 3D element should answer a buyer's question or create a feeling your brand needs. Then it has to load fast on an ordinary phone, inside a page that still sells with words and proof. Our web development team builds sites that way: immersive where it counts, fast everywhere, and measured on sales rather than applause. If your product deserves to be explored and not skimmed, let's break the plane.

Frequently asked questions

Does a 3D website slow down page speed?

It can, and it doesn't have to. Compressed geometry and textures, canvases that only start when scrolled into view, a lightweight poster image first and a strict performance budget keep a 3D site fast. Treat speed as a requirement from day one, not something to fix after the models are built. Always test on mid-range phones as well as powerful desktops.

Is WebGL good or bad for SEO?

WebGL itself is neutral. What's drawn inside a 3D canvas isn't text in the page's HTML, so the scene contributes little to search on its own. The content around it does the work, meaning real headings, descriptive copy and structured data. Pair the 3D experience with a properly written page and you keep your visibility in search and AI answers.

What kinds of businesses benefit most from a 3D website?

Businesses selling physical products benefit most, especially where fine detail or a choice of options drives the decision. Furniture, watches, audio gear, vehicles and property are good examples. Brands launching something new or wanting a memorable flagship can gain too. Service businesses usually get more from sharp copy and a clear offer, with 3D used sparingly for atmosphere.

Do WebGL websites work on mobile phones?

Yes, in modern mobile browsers on hardware that supports it. The challenge is performance, because phones have less graphics power and often slower connections. Well-built 3D sites lower the rendering quality on weaker devices and fall back to a static image on older hardware. Design for mobile first, since roughly half of Australian web traffic arrives on a phone.