WebGPU Graphics Programming

Next-generation graphics on the web. Learn how to use WebGPU for high-performance rendering and compute.

Introduction

WebGPU is the successor to WebGL, bringing the power of modern graphics APIs like Vulkan, Metal, and DirectX 12 to the web. It offers lower overhead, better performance, and access to advanced GPU features like compute shaders.

This tutorial introduces the core concepts of WebGPU and guides you through drawing your first triangle.

Why WebGPU?

• Performance: Reduced CPU overhead compared to WebGL.
• Compute Shaders: Unlock general-purpose GPU programming (GPGPU) for physics simulations, AI, and more.
• Modern API: Designed to match how modern GPUs actually work.

The Pipeline

WebGPU uses a pipeline architecture. You define the state of the GPU (shaders, blend modes, topology) in a pipeline object, and then issue draw commands.

Initialization

First, we need to request an adapter and a device.

if (!navigator.gpu) {
  throw Error("WebGPU not supported.");
}

const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw Error("Couldn't request WebGPU adapter.");
}

const device = await adapter.requestDevice();

Configuring the Canvas

We need to configure the canvas context to be compatible with our device.

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

context.configure({
  device,
  format: presentationFormat,
});

Shaders (WGSL)

WebGPU uses a new shading language called WGSL (WebGPU Shading Language).

@vertex
fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5)
  );

  return vec4f(pos[vertexIndex], 0.0, 1.0);
}

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

Creating the Pipeline

const shaderModule = device.createShaderModule({
  label: "Our hardcoded red triangle shaders",
  code: `... shader code above ...`,
});

const pipeline = device.createRenderPipeline({
  label: "our hardcoded red triangle pipeline",
  layout: "auto",
  vertex: {
    module: shaderModule,
    entryPoint: "vs_main",
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fs_main",
    targets: [{ format: presentationFormat }],
  },
});

Rendering

Finally, we create a command encoder and submit a render pass.

const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: textureView,
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
      loadOp: "clear",
      storeOp: "store",
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();

device.queue.submit([commandEncoder.finish()]);

Conclusion

This is just the tip of the iceberg. WebGPU enables complex 3D rendering, particle systems, and even machine learning directly in the browser. As browser support grows, it will become the standard for high-performance web graphics.