WebGPU Introduction

WebGPU is a JavaScript API that lets a web page use the graphics card (GPU) directly.

With WebGPU you can draw 2D and 3D graphics, and you can also run general-purpose calculations on the GPU. It is the modern replacement for WebGL.

Example

Check if your browser supports WebGPU:

if (!navigator.gpu) {
  console.log("WebGPU is not supported.");
} else {
  const adapter = await navigator.gpu.requestAdapter();
  console.log(adapter ? "WebGPU is supported!" : "No GPU adapter found.");
}

Edit & Run »

What is WebGPU?

WebGPU is a web standard from the W3C
WebGPU runs in the browser: no plugin, no install
WebGPU can render graphics and run compute work
WebGPU programs are written in JavaScript (the CPU side) and WGSL (the GPU side)

Why Learn WebGPU?

WebGPU is used to build:

3D games and interactive scenes, like City Drive
Data visualization with millions of points
Image and video filters
Physics and particle simulations
Fast tools, like the GPU search in our JSON viewer
Machine learning in the browser

WebGPU vs WebGL

WebGL is based on OpenGL, a design from the 1990s. WebGPU is based on the modern native APIs: Vulkan, Metal and Direct3D 12.

Feature	WebGL 2	WebGPU
Shading language	GLSL	WGSL
Compute shaders	No	Yes
State model	Global state machine	Pipeline objects created up front
CPU cost per draw call	Higher	Lower
Error reporting	`gl.getError()`	Detailed validation messages

Browser Support

The numbers in the table are the first browser version with WebGPU turned on by default:

Browser	Desktop	Mobile
Chrome	113	121 (Android)
Edge	113	—
Safari	26 (macOS)	26 (iOS, iPadOS)
Firefox	141 (Windows)	Rolling out

Warning WebGPU only works on a secure page: one served over https://, or from http://localhost while you develop. Opening an HTML file directly from your disk may not work.

Checking for WebGPU

All of WebGPU starts at navigator.gpu. If it does not exist, the browser does not support WebGPU.

Next, ask for an adapter. An adapter represents one physical GPU in the computer. It can be null even when navigator.gpu exists, for example if the GPU is blocked by the browser.

Example

Show the GPU vendor:

const adapter = await navigator.gpu.requestAdapter();
if (adapter) {
  document.getElementById("result").textContent = adapter.info.vendor;
}

Edit & Run »

Tip await works at the top level of a <script type="module">. All examples in this tutorial use module scripts for that reason.

WebGPU Terms

These words appear in every lesson. You do not need to remember them now:

Term	Meaning
Adapter	A physical GPU
Device	Your connection to the adapter. Every buffer, texture and pipeline belongs to a device.
Shader	A small program that runs on the GPU, written in WGSL
Pipeline	Shaders plus the settings needed to run them
Buffer	A block of GPU memory
Texture	An image stored on the GPU
Command encoder	Records GPU commands so they can be sent in one batch
Queue	Where recorded commands are submitted to the GPU

Exercises

1. Which property tells you if a browser has WebGPU?

Show answer

navigator.gpu

2. What is the name of the shading language used by WebGPU?

Show answer

WGSL, the WebGPU Shading Language.

3. Can requestAdapter() return null even when navigator.gpu exists?

Show answer

Yes. For example, when the GPU or its driver is blocked by the browser. Always check the adapter too.

Summary

WebGPU gives web pages access to the GPU for graphics and compute.
It replaces WebGL and is modelled on Vulkan, Metal and Direct3D 12.
Check navigator.gpu, then requestAdapter(), before anything else.

Official documentation

Go deeper with the specifications and reference documentation:

WebGPU Introduction

Example

What is WebGPU?

Why Learn WebGPU?

WebGPU vs WebGL

Browser Support

Checking for WebGPU

Example

WebGPU Terms

Exercises

Summary

Official documentation

MDN: WebGPU API

MDN: navigator.gpu

WebGPU specification: introduction

Can I use: WebGPU