WebGL, the browser's 3D graphics API, has served us well since 2011. It enabled WebGL games, interactive data visualizations, 3D product configurators, and much more. But WebGL was always a wrapper around OpenGL ES — an API designed in 2003 for a very different world. Modern GPUs have evolved enormously. WebGL hadn't kept up.

WebGPU is the answer. Standardized by the W3C's GPU for the Web community group and now available in Chrome, Firefox (behind a flag), and Safari Technology Preview, WebGPU exposes modern GPU capabilities — compute shaders, pipeline state objects, storage buffers — directly to the web platform.

WebGL vs WebGPU: What Actually Changed

The differences go beyond a version bump:

  • Compute shaders — WebGL could only run shaders for rendering (vertex + fragment). WebGPU adds compute shaders, enabling GPU-accelerated general computation in the browser. This is huge for ML inference, physics simulation, image processing.
  • Modern API design — WebGPU matches Vulkan, Metal, and D3D12 semantics. Less global state, explicit resource management, pipeline compilation upfront → fewer surprises at runtime.
  • Better multi-threading — WebGPU works well with Web Workers, enabling rendering off the main thread without the hacks WebGL required.
  • Storage buffers — Direct read/write access to GPU memory, essential for compute workloads.
  • Timestamp queries — Proper GPU performance measurement, finally.

Your First Triangle in WebGPU

Let's draw the obligatory triangle. WebGPU is more verbose than WebGL, but more explicit and predictable:

async function init() {
  // 1. Request adapter and device
  const adapter = await navigator.gpu.requestAdapter();
  const device  = await adapter.requestDevice();

  // 2. Configure the canvas
  const canvas  = document.getElementById('canvas');
  const context = canvas.getContext('webgpu');
  const format  = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });

  // 3. Write shaders (WGSL — WebGPU Shading Language)
  const shader = device.createShaderModule({ code: `
    @vertex
    fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
      var pos = array(
        vec2f( 0.0,  0.5),   // top
        vec2f(-0.5, -0.5),   // bottom-left
        vec2f( 0.5, -0.5),   // bottom-right
      );
      return vec4f(pos[idx], 0.0, 1.0);
    }

    @fragment
    fn fs_main() -> @location(0) vec4f {
      return vec4f(0.0, 0.83, 1.0, 1.0);  // cyan
    }
  `});

  // 4. Create render pipeline
  const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex:   { module: shader, entryPoint: 'vs_main' },
    fragment: { module: shader, entryPoint: 'fs_main',
                targets: [{ format }] },
    primitive: { topology: 'triangle-list' },
  });

  // 5. Render frame
  function frame() {
    const encoder  = device.createCommandEncoder();
    const pass     = encoder.beginRenderPass({
      colorAttachments: [{
        view:       context.getCurrentTexture().createView(),
        loadOp:     'clear',
        clearValue: { r: 0.04, g: 0.04, b: 0.06, a: 1 },
        storeOp:    'store',
      }]
    });
    pass.setPipeline(pipeline);
    pass.draw(3);
    pass.end();
    device.queue.submit([encoder.finish()]);
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

init();
🎨
WGSL — The New Shading Language
WebGPU uses WGSL (WebGPU Shading Language), not GLSL. It's strongly typed, designed to catch errors at compile time, and has a Rust-like syntax. The learning curve is mild if you know any shading language.

Compute Shaders: GPU-Accelerated Everything

The headline feature for AI developers: compute shaders let you run arbitrary parallel computation on the GPU from the browser. This enables running quantized LLMs, image models, and other neural networks client-side:

// A simple compute shader that squares each element in a buffer
const computeShader = device.createShaderModule({ code: `
  @group(0) @binding(0) var data: array;

  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) gid: vec3u) {
    let i = gid.x;
    data[i] = data[i] * data[i];  // square it
  }
`});

Projects like WebLLM and Transformers.js are already using WebGPU to run Llama, Phi-2, and other models entirely in the browser — no server required.

Browser Support Today

  • Chrome 113+ — Stable, full WebGPU support on Windows/macOS/ChromeOS
  • Edge 113+ — Same as Chrome (Chromium-based)
  • Firefox — Behind a flag in Nightly; stable support expected 2024
  • Safari 17.4+ — Full support in Safari Technology Preview and iOS 17.4

Coverage is ~80% of browser market share and climbing. For production apps, include a WebGL fallback for unsupported browsers.

The Growing Ecosystem

  • Three.js — WebGPU renderer available as experimental backend
  • Babylon.js — Native WebGPU support in v6+
  • wgpu (Rust) — Cross-platform GPU abstraction, targets WebGPU on the web
  • WebLLM — Run LLMs in the browser with WebGPU acceleration
  • TensorFlow.js WebGPU backend — 2-5x faster than WebGL for inference
WebGPU doesn't just improve graphics. It brings desktop-class GPU compute to the browser. That's a different kind of capability shift — one that makes client-side AI inference genuinely practical.

Getting Started

The best way to learn WebGPU is through official resources:

  • webgpufundamentals.org — The definitive tutorial site, from the author of WebGL Fundamentals
  • Chrome's samples — github.com/webgpu/webgpu-samples
  • W3C spec — gpuweb.github.io/gpuweb
  • Dawn (Chrome's WebGPU impl) — Source for understanding implementation details

WebGPU is one of the most consequential web platform additions since WebAssembly. If you build interactive graphics, games, data visualizations, or client-side ML — this is the future you've been waiting for.

TF Editorial

TF Editorial

Editorial Team · Tomfoolering

We write about technology with depth and without condescension.