3D and WebGL websites: speed, SEO and when 3D is worth it

A video is a sequence of pictures someone rendered in advance. Real-time 3D is drawn on the spot, by the visitor’s own graphics chip, many times a second. That is the whole difference, and everything else follows from it.

Because the picture is drawn live, it can react. Move the mouse and the light shifts. Drag and the object turns. Scroll and the camera travels. WebGL is the browser standard that makes this possible without a plugin; every modern browser on desktop and phone supports it.

The same fact explains the cost. The visitor’s device does the work, so a scene that runs smoothly on a new laptop can crawl on a three-year-old phone. Real-time 3D is a commitment to keep checking on weaker hardware, not a single effect you switch on.

Ask one question first: does the visitor need to do something with the thing, or only see it? If seeing is enough, live 3D is the wrong tool. If they need to turn it, open it, compare it or walk through it, nothing else does the job as well.

• A product to explore. A watch, a chair, a machine part, a building. Anything whose shape matters and which a buyer would pick up and turn in a shop. A rotating model answers questions a gallery of six photos cannot.
• A brand moment. One scene that becomes the thing people remember about a company. It works when it is short, says something true about the brand, and gets out of the way of the content underneath.
• Data you need to feel. Flows, networks, terrain, anything with depth or movement. A chart says a number went up. A field of particles that thickens as it rises makes the change felt before it is read.

The four ways to put visuals on a page, compared on what decides the choice.

A 3D site that stutters does more harm than a flat one, because it makes the whole company look slow. The fix is boring and it works: write the limits down before anyone builds, then test against them on real devices.

Most screens redraw sixty times a second, so smooth motion means the scene must be ready on every redraw. When it misses, the eye notices immediately. A budget turns that into a number you can check instead of a feeling you argue about.

• Load size. How much the page may download before it shows something useful. Text and layout come first; models and textures arrive after, and the visitor can read while they do.
• Frame rate. The scene must stay smooth on an ordinary phone, not only on the designer’s desktop. If it cannot, it gets simpler until it can.
• Phones. A lighter version for weaker devices: fewer particles, smaller textures, simpler lighting. Visitors on a mid-range phone should not be able to tell they got the reduced cut.
• Battery. A scene that keeps drawing when nobody is looking is draining someone’s phone. Pause it when it scrolls out of view and when the tab is in the background.
• Fallbacks. If WebGL fails or is switched off, a still image takes its place and the page works exactly the same around it.
• Reduced motion. Operating systems let people ask for less movement. The site should listen: calm the scene down or replace it with the still.

A WebGL canvas is a rectangle of pixels. A search engine sees almost nothing inside it: no headings, no paragraphs, no links. A site where every word is painted into the 3D scene is, to a crawler, a blank page with a script attached.

The rule is simple. Every heading, every paragraph and every link exists as real HTML on the page, next to the canvas, whether or not the 3D loads. The scene decorates and explains; the HTML carries the content. Search engines index the text, assistants quote it, and people on slow connections can still read it.

This studio’s own site is built that way. The eye on our home page is a live WebGL scene that follows your cursor, and the copy you read around it is ordinary HTML that search engines read without running a single frame of 3D.

• One page per idea. A single scene that holds the whole site gives search engines one address to rank. Separate pages, each with its own title and text, give them many.
• Speed counts. Search engines measure how fast a page becomes usable. Loading the HTML first and the 3D after keeps that measurement honest.
• Describe the scene. A short paragraph saying what the 3D shows helps both search and visitors who never see it.

Screen readers cannot see a canvas, and many people browse with a keyboard, a switch or a magnifier. If the 3D is the only way to reach information, those people are locked out. Build so that everything the scene shows is also said in text, and everything it lets you do can be done with the keyboard.

Contrast and readability matter more, not less, when text sits over a moving background. Keep body copy on a calm surface. Give controls visible focus. And treat the reduced-motion setting as an instruction, not a suggestion: for some visitors, sweeping camera moves cause real nausea.

For a working example, open North Signal. It is a studio piece: a WebGL interface you fly through rather than click, built to show how far the interaction can go. The pages around it keep their content readable in HTML, which is what lets an experiment like that sit on a site that still has to be found.