Command Palette

Search for a command to run...

Hectal
Course outline
Topic 0.1Beginner ~21 min · step 1 of 6

What 3D on the Web Is

In one line

3D on the web is a scene your page describes in JavaScript and the visitor's own graphics chip draws, about 60 times a second, so they can turn it, change it and play with it. It is powerful, and it has real costs.

0/6 · 0%

Think of it like this

In a furniture shop's catalogue you see the sofa from the front, in one colour. In the shop itself you walk around it, sit on it and hold the fabric samples against it. A photo is the catalogue. A 3D scene in a web page is closer to the shop: the visitor chooses where to look from and what to change.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

3D scene
A description of things in a space: their shapes, where they are, what they look like, and where the viewer stands. The computer turns it into a picture.
GPU
The graphics processing unit: a chip with thousands of small workers that colour pixels in parallel. Every phone and laptop has one, built in or as a separate card.
canvas
The HTML <canvas> element: a rectangle of pixels on the page that JavaScript can paint into.
WebGL 2
The browser API that lets JavaScript send drawing work to the GPU. Available in almost every browser since about 2017.
WebGPU
The newer browser API for the GPU. It is faster for big scenes and can also run general computations, but some browsers and devices don't have it yet.
three.js
A free JavaScript library (MIT licence) that turns simple code like new THREE.Mesh(...) into the low-level WebGL or WebGPU calls the GPU needs.
render
To draw the scene into pixels once. Animation is rendering again and again, usually about 60 times a second.

Step by step

01The page gives you a canvas

A 3D page is a normal web page with one special element: a <canvas>. To the browser it is just a box of pixels, for example 800 × 500. Nothing in it is a real object; it only holds colours.

three.js creates this canvas for you (renderer.domElement) and you put it on the page like any other element.

02Your JavaScript describes a scene

You don't paint pixels yourself. You describe *things*: "a box, 1 metre on each side, orange, here", "a light, up there", "a camera, standing here, looking there". three.js keeps these descriptions in a scene.

That is the big idea of a 3D library: you work with objects and positions, the way you would arrange furniture, and the library works out the pixels.

03The GPU draws it, again and again

When you call renderer.render(scene, camera), three.js turns every object into triangles (flat three-cornered pieces; even a ball is made of them) and sends them to the GPU. The GPU works out which pixels each triangle covers and what colour each one gets, in a few milliseconds.

To make things move, you change the scene a little (turn the cube a few degrees) and render again, about 60 times a second. Each picture is one frame.

04The visitor changes it

Because the picture is made fresh every frame, the visitor can take part: drag to turn the camera, click to pick a part, choose a colour. Your code changes the scene, and the very next frame shows it.

This is what a photo can never do, and it is the reason to pay the cost of 3D.

05Plan for the browser that can't

Some visitors get no 3D: an old phone, a work laptop with the GPU blocked, a browser with WebGL switched off. A good 3D page checks first and shows something useful instead, such as a photo and the same information as text.

The first live example below asks the browser what it supports, the same way a real page does. You build Lumen's own support check in Topic 1.6.

Try it yourself

  1. 1

    Ask your own browser

    Press Run on "Does this browser draw 3D?". On a recent Chrome or Edge on a laptop you should see WebGL 2: yes and WebGPU: yes, a GPU adapter was found. On some browsers and devices the second line says the API exists but no adapter was found, or that there is no WebGPU at all. That is normal, and it is exactly why pages need a fallback.

    If you have a second browser, open this page there and compare.

  2. 2

    See what the GPU is doing

    Look under the lit cube's canvas: the status bar shows the backend, draw calls, triangles and more, live. Change new THREE.BoxGeometry(1, 1, 1) to new THREE.SphereGeometry(0.7) and watch the triangle count jump from 12 to 960. A sphere is made of many small triangles, which is why it looks round.

  3. 3

    Look at your GPU report

    In Chrome or Edge, type chrome://gpu (or edge://gpu) in the address bar. Near the top, "Graphics Feature Status" should say WebGL2: Hardware accelerated and WebGPU: Hardware accelerated. "Software only" means the browser draws 3D without the GPU: it works, but slowly.

Code & diagrams

Does this browser draw 3D? New tab

The answer depends on your browser and device, so this example has no fixed output. Try it in two browsers.

idle

Console

Run the scene to see its console.
three.js in a few lines: a lit cube New tab

renderer.info counts what the GPU was asked to do. One box is 6 faces × 2 triangles = 12 triangles, drawn in 1 draw call.

idle

Console

Run the scene to see its console.

Expected console output

three.js version: 186
draw calls: 1
triangles: 12

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Turn the lights off

In "three.js in a few lines: a lit cube", delete the four light lines, from scene.add(new THREE.AmbientLight(...)) down to scene.add(sun);. Press Run. (Delete all four: leave scene.add(sun) behind and you get ReferenceError: sun is not defined instead.)

terminal
$ Run, with no lights in the scene
── what you'll see ──
three.js version: 186
draw calls: 1
triangles: 12
No error, the same numbers, and the cube is a black shape on a dark background.

Break #2

Pretend this browser has no WebGL

In "three.js in a few lines: a lit cube", add this line straight after the import line: HTMLCanvasElement.prototype.getContext = () => null;. It makes the browser answer "no" whenever a page asks a canvas for a drawing context, which is what a blocked GPU looks like to a page.

terminal
$ Run, with WebGL switched off
── what you'll see ──
THREE.WebGLRenderer: THREE.WebGLRenderer: Error creating WebGL context.
Uncaught Error: THREE.WebGLRenderer: Error creating WebGL context.
The first line is three.js's console error and the second is the exception that stops your script, so the console.log lines never run. The canvas stays empty. In a real browser the wording can differ a little with the browser and the reason.

Myth vs fact

Myth

3D on the web needs a plugin or a game engine.

Fact

It is built into every modern browser (WebGL 2, and increasingly WebGPU). A library like three.js is just JavaScript you import.

Myth

WebGPU has replaced WebGL, so WebGL is dead.

Fact

WebGL 2 still reaches more browsers (97.13% against about 86%, caniuse, October 2026). Real pages use WebGPU where it exists and fall back to WebGL 2, and three.js's WebGPU renderer does that fallback for you.

Myth

Adding 3D always makes a site better.

Fact

It makes a site heavier, slower to load, harder on batteries and harder for screen-reader users. Use it when the visitor needs to do something a photo can't.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    WebGL 2 is the browser version of OpenGL ES 3.0. WebGPU is a new design that maps onto the modern native APIs (Vulkan, Metal, Direct3D 12): it records work in command buffers and sets up pipelines ahead of time, so the browser does less checking per draw. Phase 14 builds a triangle in both.

  • ▸

    three.js removed WebGL 1 support in r163 (its release notes say "Remove WebGL 1 support."). So a three.js page today needs WebGL 2 or WebGPU; there is no third rung on the ladder except a non-3D fallback.

  • ▸

    The 530.30 kB figure is one unsplit bundle with three.js core. Phase 18 shows how to load three.js only when the 3D part of a page is about to be seen, so the rest of the page is not slowed down.

Remember this

  1. 1

    The problem this solves: a photo shows one angle, one colour and one moment. If a customer wants the back of the bike, or the bike in green, someone must take another photo. A 3D scene is drawn on the visitor's own device, live, from whatever angle and in whatever colour they pick, so one scene answers questions nobody photographed.

  2. 2

    Where you meet it. Product viewers and configurators (shoes, cars, sofas, bikes), maps and globes, data shown in 3D, games, the moving hero section at the top of a landing page, architecture walk-throughs, medical and engineering viewers, and "see it in your room" augmented reality on a phone.

  3. 3

    How the browser draws it. The page holds a <canvas> element, a rectangle of pixels the browser lets JavaScript paint. JavaScript talks to the GPU (the graphics chip, built to colour millions of pixels at once) through one of two browser APIs: WebGL 2 (in 97.13% of browsers in use, caniuse, 2026-10-16) or the newer WebGPU (about 86% fully, a few percent more partly; Chrome and Edge since version 113, Safari 26, and Firefox 141 on Windows only; caniuse marks the Safari on Mac and Firefox support as partial). Both are low level: a cube takes about a hundred lines of raw WebGL. So almost everyone uses a library, and the most used one by far is three.js (85.7 million npm downloads in the month to 2026-10-12).

  4. 4

    What it costs. Every 3D page ships a library: the display stand you build in Topic 0.6, with nothing else in it, builds with Vite 8 to 530.30 kB of JavaScript (132.01 kB after gzip compression), and Vite itself warns that the file is over 500 kB. The GPU uses battery and makes phones warm. A canvas is one picture to a screen reader, and search engines cannot read text drawn inside it. Old or blocked GPUs show nothing at all unless you plan a fallback.

  5. 5

    When 3D is the wrong choice. If a photo, a short video or a drawing answers the question, use it: it is smaller, faster and accessible by default. If you only need to show one ready-made model that people can turn, Google's <model-viewer> web component does it in one HTML tag. Build a real 3D scene when the visitor must *do* something: choose, configure, explore, play.

  6. 6

    What this course uses. three.js r186 (version 0.186.1, pinned so every example behaves the same), WebGL 2 everywhere, WebGPU where the browser has it (with an automatic WebGL 2 fallback), and from Phase 11 React Three Fiber 9 with React 19. Everything you need runs on this page; nothing is installed until Topic 0.4.

Explain it without notes

01

Explain to a friend why a 3D scene can answer questions a set of photos can't.

02

Name three costs of putting 3D on a page, and one case where you would use a photo instead.

Practice

01

List four kinds of website where you have seen 3D, and for each one say what the visitor can do that a photo would not allow.

02

A shop wants a 3D model of every product, but customers only ever look at them from the front. What would you recommend, and why?

Trade-offs

  • ↔

    3D vs photos: interaction and "any angle" against size, battery and accessibility.

  • ↔

    three.js vs a one-tag viewer like <model-viewer>: full control (any scene, any interaction) against a ready-made viewer with less code.

  • ↔

    WebGPU vs WebGL 2: more speed and compute on new browsers against wider reach; the usual answer is "WebGPU with a WebGL 2 fallback".

Done when you can

  • Say what a canvas, the GPU, WebGL 2, WebGPU and three.js each are, in one sentence each

  • Explain why a 3D scene is drawn again about 60 times a second

  • Name three costs of 3D and one case where a photo is the better choice

  • Check what your own browser supports, on this page and in chrome://gpu