WebGPU is a web API that gives JavaScript modern, low-overhead access to the graphics processor for both 3D rendering and general-purpose GPU computation. Among web APIs, it is the successor to WebGL, designed around the concepts of current native graphics interfaces such as Vulkan, Metal and Direct3D 12 rather than the older OpenGL model.
The API is standardized by the W3C together with its own shading language, the WebGPU Shading Language (WGSL). It enables browser-based games, visualization, video processing and on-device machine learning inference at performance levels that were previously reserved for native applications.
How WebGPU works
WebGPU exposes the GPU through a small set of explicit objects. An application first requests an adapter, which represents a physical or software GPU, and then a device, which is the logical connection used to create every other resource. All commands are recorded in advance and submitted in batches to a queue, which the browser translates to the native graphics API of the operating system.
| Object | Role | Typical use |
|---|---|---|
| GPUAdapter | Represents an available GPU implementation | Query features and limits |
| GPUDevice | Logical device that owns resources | Create buffers, textures, pipelines |
| GPUBuffer and GPUTexture | GPU memory for data and images | Vertices, uniforms, storage, images |
| Bind group | Set of resources bound together | Pass inputs to shaders efficiently |
| Render or compute pipeline | Precompiled shaders plus fixed state | Draw geometry or run compute work |
| Command encoder and queue | Record and submit GPU commands | Batch work for each frame |
The key design choice is pipeline state compiled up front. In WebGL, many settings change through global state calls before each draw, and drivers validate them repeatedly. WebGPU validates pipelines once, so each draw or dispatch carries far less CPU overhead, which matters when a scene contains thousands of objects.
WGSL shaders and compute capability
Shaders in WebGPU are written in WGSL, a strongly typed language with Rust-like syntax that the browser compiles into SPIR-V, Metal Shading Language or HLSL behind the scenes. A shader module may contain vertex, fragment and compute entry points.
Compute shaders are the most significant new capability compared with WebGL. Work is dispatched as a grid of workgroups, each containing many invocations that can share fast workgroup memory and synchronize through barriers. This model suits matrix multiplication, physics simulation, image filters and particle systems without abusing the rendering pipeline as a computing trick.
To keep the web portable, WebGPU defines guaranteed default limits that every implementation supports, and applications may request higher limits when the adapter offers them.
| Limit | Default value | What it constrains |
|---|---|---|
| maxTextureDimension2D | 8,192 pixels | Largest 2D texture side |
| maxBindGroups | 4 | Resource groups per pipeline |
| maxComputeInvocationsPerWorkgroup | 256 | Threads in one workgroup |
| maxComputeWorkgroupStorageSize | 16,384 bytes | Shared memory per workgroup |
| maxStorageBufferBindingSize | 128 MiB | Size of one bound storage buffer |
| maxBufferSize | 256 MiB | Size of one buffer allocation |
WebGPU compared with WebGL and other web APIs
WebGPU does not simply add features to WebGL; it is a different programming model. WebGL remains the most widely supported option, while WebGPU offers better CPU efficiency and real compute.
| Aspect | WebGPU | WebGL 2 | Canvas API 2D |
|---|---|---|---|
| Underlying model | Vulkan, Metal, Direct3D 12 concepts | OpenGL ES 3.0 | Immediate 2D drawing |
| Compute shaders | Yes, first-class | No | No |
| Shading language | WGSL | GLSL ES | None |
| State handling | Precompiled pipelines | Global state machine | Context state |
| CPU overhead per draw | Low | Moderate to high | Not comparable |
| Browser support | Modern versions, expanding | Nearly universal | Universal |
WebGPU also complements WebAssembly: engines written in C++ or Rust compile to WebAssembly for logic and call WebGPU for rendering and compute, a combination that brings native game engines and machine learning runtimes to the browser.
Practical use and adoption choices
WebGPU shipped first in Chromium-based browsers in 2023 and later reached Firefox and Safari, with platform coverage still varying by operating system and GPU driver. Production applications therefore detect support with `navigator.gpu` and keep a fallback path.
| Scenario | Recommended choice | Reason |
|---|---|---|
| Simple charts or 2D drawing | Canvas API or SVG | No GPU programming needed |
| 3D viewer needing maximum reach | WebGL 2, optionally WebGPU | Widest device support |
| Large scenes with many draw calls | WebGPU | Lower CPU cost per draw |
| On-device neural network inference | WebGPU compute | Parallel matrix operations |
| Image or video processing | WebGPU compute | Fast per-pixel parallel work |
Most teams do not write raw WebGPU calls. Rendering libraries and machine learning runtimes offer WebGPU back ends that fall back to WebGL automatically, which gives the speed benefit without abandoning older devices.
Limitations, security and common pitfalls
- Secure context required: WebGPU is available only on HTTPS pages and localhost.
- Device loss can occur after driver crashes or power events; applications must handle the
lostpromise and rebuild resources. - Asynchronous readback: mapping a buffer to read results is asynchronous, so naive code that waits for every result stalls the pipeline.
- Strict validation reports errors through error scopes and console messages rather than exceptions, which surprises developers used to WebGL.
- Fingerprinting concerns lead browsers to limit the adapter details they expose.
Browsers run WebGPU in a sandboxed GPU process and validate every command and memory access, so an invalid shader or out-of-range access produces a validation error instead of reading foreign memory. This security layer adds some overhead, but it is the reason that low-level GPU access can safely be offered to arbitrary web pages.
Understanding it simply
Every modern computer and phone contains a graphics chip that is extremely good at doing many small calculations at the same time. WebGPU is the way a web page can hand work to that chip directly and efficiently.
Older browser graphics technology could draw pictures but wasted effort on bookkeeping and could not easily do other kinds of math. WebGPU removes much of that waste and also lets pages use the chip for calculations that have nothing to do with drawing, such as running an AI model or filtering a photo. The result is that more demanding applications can run in a browser tab.
Applied in practice
A medical imaging startup offers a browser viewer for CT scans with several hundred slices. Its first version used WebGL and needed noticeable time to rebuild volume renderings when a radiologist changed the contrast window. It also had to send every scan to a server for a segmentation model, which raised privacy and latency concerns.
The team rebuilds the viewer on WebGPU compute shaders. Volume rendering and windowing now run as compute passes over a 3D texture, and a compact segmentation network runs entirely on the local GPU. On a typical office laptop, contrast adjustments update within a frame, and scan data never leaves the workstation. Older machines without WebGPU support automatically receive the previous WebGL viewer.