Skip to content
OpenPWA

WebGPU: GPU rendering and compute in the browser

In one line: WebGPU lets a web page use the underlying system’s GPU for high-performance rendering and general-purpose compute, through navigator.gpu, an adapter/device model, and its own shading language, WGSL — positioned by MDN as the successor to WebGL.

The adapter/device model

Section titled “The adapter/device model”

WebGPU access starts from navigator.gpu, exposed as Navigator.gpu in window contexts and WorkerNavigator.gpu in worker contexts. Getting to a usable GPU takes two async steps:

  1. navigator.gpu.requestAdapter() resolves to a GPUAdapter representing a physical or software GPU the user agent can use, or to null if no suitable adapter is found.
  2. adapter.requestDevice() returns a GPUDevice, the object you actually create buffers, textures, pipelines, and command encoders from.

Rendering and compute pipelines are described using WGSL (WebGPU Shading Language), a dedicated shader language distinct from WebGL’s GLSL.

Browser & ecosystem support

Section titled “Browser & ecosystem support”
Engine Where it ships
Chrome (desktop) Partial since Chrome 113 (ChromeOS, macOS, Windows only); recorded without the partial_implementation flag since Chrome 144 (adds Linux, still limited to Intel Gen12+ GPUs there)
Chrome (Android) Since Chrome 121
Firefox (desktop) Partial since Firefox 141 — Windows since 141, Apple silicon macOS Tahoe since 145, older Apple silicon macOS since 147; no Intel Mac, no Linux, no service workers
Firefox (Android) Not supported
Safari Since Safari 26

Data per the MDN browser-compat-data entry for the GPU interface, which marks Chrome 113–143 and Firefox 141+ as partial_implementation with the OS/CPU caveats noted; Chrome 144+ is recorded without that partial-implementation flag. Support is gated on a secure context in every engine.

Minimal example

Section titled “Minimal example”
async function initWebGPU(canvas) {
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) throw new Error("No WebGPU adapter available");
  const device = await adapter.requestDevice();
  const context = canvas.getContext("webgpu");
  context.configure({
    device,
    format: navigator.gpu.getPreferredCanvasFormat(),
  });
  return { device, context };
}

Feature detection and fallback

Section titled “Feature detection and fallback”
async function getGpuDevice(canvas) {
  if (!("gpu" in navigator)) {
    // WebGPU is unsupported here — fall back to a WebGL2 (or Canvas2D) render path.
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    // No compatible GPU/adapter was returned even though the API exists.
    return null;
  }
  return adapter.requestDevice();
}

Practical checklist

Section titled “Practical checklist”
  • Feature-detect with "gpu" in navigator before calling anything on navigator.gpu — it is unsupported in older engine versions and, per the table above, on Firefox for Android, Linux, and Intel Macs.
  • requestAdapter() can resolve to null even when navigator.gpu exists; always check the adapter before calling requestDevice().
  • Keep a WebGL2 (or Canvas2D) fallback path for engines/platforms without WebGPU — per the compat data above, that still includes Firefox on Android, Linux, and Intel Macs, and pre-144 Chrome on Linux.
  • WebGPU requires a secure context (HTTPS or localhost) in every shipping engine.
  • WGSL is a different shader language from GLSL — existing WebGL shaders are not portable to WebGPU without a rewrite or a cross-compiler.

Where to go next

Section titled “Where to go next”