WebGPU
The modern browser API for graphics and GPU computation. It follows WebGL, adds compute shaders, and gives apps more direct control of the GPU.
See it
What it is
WebGPU is the browser's modern API for programming the graphics card. It is the successor to WebGL, with render pipelines for drawing and compute pipelines for general parallel work such as particle updates, image processing, and simulation. Shaders are written in WGSL, and JavaScript records commands into buffers that the GPU executes later. It maps more directly to APIs such as Metal, Direct3D 12, and Vulkan than WebGL does. Chrome shipped it in version 113 in 2023, and the other browsers followed.
Reach for it when a scene has enough geometry, post-processing, or GPU-side computation to justify explicit control over pipelines, buffers, bind groups, and render passes. Three.js's WebGPURenderer and Babylon.js hide much of that plumbing, while the raw API is useful for custom renderers and compute-heavy tools.
Gotcha: WebGPU is not WebGL with a new name. GLSL shaders and WebGL calls do not drop in, resource setup is more explicit, and pipeline creation should happen before the frame loop. Check for navigator.gpu, provide a fallback for unsupported browsers or devices, and handle device.lost because GPU access can disappear while the page is open.
Ask AI for it
Build a WebGPU particle renderer for 100,000 particles. Request a GPUAdapter and GPUDevice from navigator.gpu, configure the canvas with navigator.gpu.getPreferredCanvasFormat(), and write WGSL compute and render shaders. Store particle state in a GPUBuffer, update it in a compute pass, then draw it in the same command encoder each frame. Create pipelines once, resize for device pixel ratio, recover from device.lost, and show a WebGL2 fallback when navigator.gpu is absent.