WebGPU

WebGPU is a new W3C standard API that gives web applications low-level, high-performance access to GPU hardware for graphics rendering and general-purpose computation.

Category: Front End (also: Ai, Design)

Author: Atomic Glue Editorial Team

## Definition

[WebGPU](/glossary/webgpu) is a [W3C](https://www.w3.org/) standard JavaScript API that provides modern, low-level access to GPU hardware from web browsers. It succeeds WebGL 2.0 as the next-generation graphics API for the web, offering dramatically better performance, lower CPU overhead, and access to modern GPU features (compute shaders, storage buffers, bindless resources). WebGPU is designed to map efficiently to native GPU APIs (DirectX 12, Vulkan, Metal) without the translation overhead that WebGL suffered from. It supports both traditional 3D rendering and general-purpose GPU compute (GPGPU), enabling physics simulations, machine learning inference, image processing, and scientific computing in the browser. Developed by the W3C GPU for the Web Working Group, WebGPU reached Candidate Recommendation Draft status in 2024 and is shipping in Chrome, Edge, and Firefox. It represents the most significant upgrade to web graphics in over a decade.

## WebGPU vs WebGL

WebGL (based on OpenGL ES 2.0/3.0) was designed in 2011. It runs on top of OpenGL, which is outdated and has high driver overhead. WebGPU is built from scratch for modern hardware: it compiles to DirectX 12, Vulkan, and Metal natively, reducing CPU overhead significantly (up to 10x fewer draw call overhead). WebGPU introduces compute shaders (WebGL has none), explicit resource management (no hidden driver magic), multi-threaded command preparation, and a modern shading language (WGSL) instead of GLSL. For developers, WebGPU means more draw calls, more complex scenes, and GPU compute workloads that were previously impossible in the browser. The tradeoff is a steeper learning curve: WebGPU is lower-level and requires more explicit setup than WebGL's simpler (but slower) model.

## GPU Compute in the Browser

WebGPU's most transformative feature is compute shaders: running arbitrary GPU programs that are not part of a rendering pipeline. This enables: on-device ML inference (running small models directly in the browser), physics simulations, image and video processing, particle systems, audio processing, data visualization at scale, and cryptocurrency mining (for better or worse). Before WebGPU, these workloads required either WebGL hacks (using fragment shaders) or server-side processing. WebGPU treats GPU compute as a first-class citizen, with dedicated compute pipelines, workgroup dispatch, and shared memory. This positions the browser as a genuine compute platform, not just a rendering engine.

## Practical Considerations

WebGPU is powerful but complex. Most developers will use it through higher-level abstractions: Three.js, Babylon.js, and PlayCanvas all have WebGPU backends. WGSL (WebGPU Shading Language) is the official shader language, with a syntax similar to Rust. The API design is explicitly async and buffer-oriented, favoring pre-allocation and explicit synchronization over WebGL's immediate-mode style. Browser support: Chrome 113+, Edge 113+, Firefox Nightly. Safari support (WebGPU) is in development behind experimental flags. For production, you typically need a WebGL fallback. The performance difference is most visible on scenes with many draw calls, GPU compute workloads, and complex post-processing effects. Simple 3D scenes see minimal difference.

## In code

// Request a WebGPU adapter and device
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create a compute pipeline (WGSL shader)
const shaderModule = device.createShaderModule({
  code: `
    @group(0) @binding(0) var<storage, read> input: array<f32>;
    @group(0) @binding(1) var<storage, read_write> output: array<f32>;

    @compute @workgroup_size(256)
    fn main(@builtin(global_invocation_id) id: vec3<u32>) {
      output[id.x] = input[id.x] * 2.0;
    }
  `
});

## Common questions

Q: Will WebGPU replace WebGL?

A: Eventually, yes. WebGL is not going away overnight (it has 15+ years of ecosystem), but new projects should use WebGPU whenever possible. Browser vendors are investing in WebGPU as the future. WebGL will be maintained for compatibility.

Q: Do I need to learn WebGPU directly?

A: Probably not. Frameworks like Three.js and Babylon.js provide WebGPU support through their existing APIs. You need WebGPU directly only if you are building a graphics engine, doing GPU compute, or need maximum performance. Most web developers will never write WebGPU code directly.

Q: Can WebGPU run AI models in the browser?

A: Yes. WebGPU's compute shaders enable on-device ML inference. Projects like WebLLM, Transformers.js, and ONNX Runtime Web use WebGPU for client-side AI. It is not as fast as a dedicated GPU API but eliminates server costs and provides offline capability.

## Key takeaways

• WebGPU is the next-generation web graphics API with significantly better performance and modern GPU features.
• It natively maps to DirectX 12, Vulkan, and Metal, eliminating WebGL's translation overhead.
• Compute shaders enable GPU workloads (ML inference, physics) directly in the browser.
• Most developers will use WebGPU through frameworks; direct use is for engine builders and GPU compute applications.

## Related entries

• [WebXR](atomicglue.co/glossary/webxr)
• [Edge AI](atomicglue.co/glossary/edge-ai)
• [View Transitions API](atomicglue.co/glossary/view-transitions-api)

Last updated July 2026. Permalink: atomicglue.co/glossary/webgpu