Course outline

Topic 1.5Beginner ~19 min · step 5 of 6

WebGL, WebGPU and the Libraries

In one line

A web page reaches the GPU through WebGL 2 or the newer WebGPU, and almost nobody uses them directly: libraries such as three.js sit on top. You choose a library by what it costs and gives you, and you must always check that the browser can draw 3D before you try.

0/6 · 0%

Think of it like this

To reach a city you can drive a car yourself, take a taxi or take a guided coach. Raw WebGL is driving yourself: you control everything and do all the work. A library like three.js is the taxi: you say where to go. A ready-made viewer such as <model-viewer> is the coach: one ticket and you are there, but on its route only.

Words you'll meet

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

WebGL 2: The browser's graphics interface for the GPU, based on OpenGL ES 3.0. Works in about 97% of browsers.
WebGPU: The newer, more explicit graphics and compute interface (about 88% of browsers). Uses the WGSL shader language.
compute shader: A GPU program that does plain calculation (not drawing) on huge lists of numbers. Only WebGPU has them on the web.
feature detection: Asking the browser whether it can do something before you try, instead of guessing from its name.
fallback: What your page does when the best option is missing: the WebGL 2 backend, a still picture, or a message.
adapter: WebGPU's name for the physical GPU the browser offers. navigator.gpu.requestAdapter() returns one or null.

Step by step

01Ask for a WebGL 2 context

Make a canvas that is not on the page and call getContext("webgl2"). A context object means yes; null means no (no GPU, a blocklisted driver, graphics switched off, or an old browser). It can also throw in rare locked-down environments, so wrap it in try.

02Ask about WebGPU

"gpu" in navigator tells you the API exists. await navigator.gpu.requestAdapter() tells you whether a GPU is available through it. Both must pass. You also need await renderer.init() with three.js before the first frame.

03Pick the path

The usual rule: WebGPU if you need it and it works, otherwise WebGL 2, otherwise a still image and a message. The showroom needs only WebGL 2 for now, so it checks that one thing. Phase 13 adds the WebGPU path with the same fallback chain.

Pick the pathdiagram

Rendering diagram…

04Know what the library costs

three.js is hundreds of kilobytes of JavaScript even after minifying, which is large for a page whose first view is text. That is one reason Phase 18 loads it only when the 3D area is needed, and why a simple model display can be better served by <model-viewer>.

Try it yourself

1
Read the backend
Run "The same cube on the WebGPU renderer" and read the status bar and the console. On a computer with WebGPU you should see WebGPU in the status bar. If you see WebGL 2 (fallback) your browser has no usable WebGPU adapter, and the picture is still the same cube.
2
Ask for a context twice
In the detection example, add console.log("1st:", c.getContext("2d") === c.getContext("2d")); after the c line. It prints 1st: true: the second request returns the same context, which is how pages use getContext safely in many places.

Code & diagrams

Feature detection with throwaway canvases New tab

Run it in your own browser too: the answers on a phone with a blocked GPU would differ. Note what happens when a canvas is asked for a second kind of context.

idle

Console

Run the scene to see its console.

Expected console output

webgl2: true
webgl (version 1): true
2d: true
a made-up type: false
first ask, 2d: true
then ask, webgl2: null
same object twice: true

The same cube on the WebGPU renderer New tab

The output differs by browser, so the page does not check it. In Chrome or Edge with WebGPU it prints `running on: WebGPU`. Without it three.js prints the warning `THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.` and the line reads `running on: WebGL 2 (fallback)`. Note that `navigator.gpu` can be there while no adapter is (that first line says `true` even in a browser that then has to fall back). The status bar shows the backend too.

idle

Console

Run the scene to see its console.

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

Check for WebGL 2 with the wrong test

In the detection example, change canvas.getContext(type) !== null to canvas.getContext(type) !== undefined.

terminal

$ Run

── what you'll see ──

webgl2: true

webgl (version 1): true

2d: true

a made-up type: true

first ask, 2d: true

then ask, webgl2: null

same object twice: true

Myth vs fact

Myth

WebGPU has replaced WebGL, so I should only learn WebGPU.

Fact

Today about one browser in eight has no WebGPU, and in every browser it may be unavailable on old or blocked GPUs. Libraries such as three.js hide the difference and fall back for you; and everything in the pipeline (Topic 1.4) is the same.

Myth

Checking the browser's name tells me whether it supports WebGL 2.

Fact

The same browser can have 3D switched off, a blocked driver or a crashed GPU. Ask for a context and see whether you get one.

Pro corner

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

▸
Browsers may refuse a WebGL context even when the API exists: a driver on the browser's blocklist, hardware acceleration switched off, a GPU process that crashed, or a limit of about 16 contexts per page. getContext then returns null. With failIfMajorPerformanceCaveat: true you can ask for no context at all when the GPU would be a slow software one (like SwiftShader), and choose the still image instead.
▸
navigator.gpu.requestAdapter() takes options such as powerPreference ("low-power" or "high-performance"), which on laptops with two GPUs selects one. Chrome and Edge 113 shipped WebGPU first (Windows, macOS, ChromeOS), then Chrome 121 on Android 12+; Firefox 141 (on Windows) and Safari 26 followed. Support differs by operating system and GPU, so check caniuse.com for the current state before you decide.
▸
three.js's WebGPURenderer has a forceWebGL option, handy for testing the fallback path on a machine that has WebGPU. The helper WebGPU.isAvailable() (three/addons/capabilities/WebGPU.js) does the full test for you: it checks navigator.gpu and that requestAdapter() gives an adapter.

Remember this

1
The problem this solves: the web has two ways to talk to the GPU, several libraries on top of them, and a browser that may not support either. You need to know what each choice costs, and how to find out, before drawing, whether the visitor's browser can draw 3D at all.
2
WebGL 2. The web's version of OpenGL ES 3.0, the graphics interface of phones. Chrome and Firefox have had it since early 2017 and Safari since 2021, and it works in about 97% of browsers (caniuse.com, 16 October 2026). It is a big set of global switches you flip in the right order: bind this buffer, use this program, draw. A beginner can start quickly, and can also leave a switch in the wrong state without any error. three.js removed WebGL 1 support in release r163, so this course uses only WebGL 2.
3
WebGPU. The modern replacement, available in about 88% of browsers (same source). It is designed like Metal, Vulkan and Direct3D 12: you describe the work in advance as objects (pipelines, bind groups, command buffers) and submit it, which costs the CPU less and lets the GPU be used for plain calculation too, through compute shaders. Its shader language is WGSL. It is more explicit and more code to write by hand.
4
Libraries. three.js is the most used: scene graph, cameras, lights, materials, loaders, and this course's focus. React Three Fiber (Phase 11) lets you write three.js scenes as React components. Babylon.js is a fuller engine with its own tools, PlayCanvas is an engine with an online editor, and **<model-viewer>** (Topic 0.1) is one HTML tag that shows a glTF model with no code at all. They trade control against effort.
5
What three.js gives you. WebGLRenderer uses WebGL 2. WebGPURenderer (import it from three/webgpu) uses WebGPU and, when the browser has none, runs on a WebGL 2 backend instead, printing a warning. The scene, camera, geometry and loaders stay the same; Phase 13 covers what changes. Choose three.js when you need to build something specific, a configurator like the showroom, and want to read every line.
6
Feature detection. Never assume. Ask the browser: canvas.getContext("webgl2") returns a context or null, and navigator.gpu exists only where WebGPU does, though even then navigator.gpu.requestAdapter() can return null when no usable GPU is found. A canvas also keeps the first context type it is given, so asking for webgl2 after 2d gives null. A browser may also refuse a context after its GPU process has crashed, or when the page already holds too many contexts.

Explain it without notes

Name the main differences between WebGL 2 and WebGPU a beginner needs to know, and say which one this course starts with and why.

Why is checking navigator.gpu alone not enough to use WebGPU?

Practice

Write a function canUseWebGPU() that returns true only when WebGPU is really usable.

Your client wants a 3D model of a chair on a product page, with nothing else interactive. Which tool would you try first and why?

Done when you can

Say what WebGL 2, WebGPU and three.js each are and how they relate
Choose between three.js and a ready-made viewer for a given job
Check WebGL 2 and WebGPU support correctly, including the null cases
Say what to show when neither is available

Command Palette