Skip to main content

​
WebGPU extension

The WebGPU extension (ext/webgpu/) implements the WebGPU API specification in Deno, enabling hardware-accelerated graphics and compute capabilities through the GPU.

​
Overview

WebGPU is a modern graphics and compute API that provides access to GPU capabilities in a cross-platform way. Deno’s implementation is built on top of wgpu, Mozilla’s safe, portable GPU abstraction library written in Rust.
The WebGPU spec is still in development. Deno’s implementation targets the spec draft as of March 31, 2024, and is updated regularly as the specification evolves.

​
Key features

GPU compute

Run high-performance compute workloads on the GPU

3D graphics

Render 3D graphics and visualizations

Cross-platform

Works across different operating systems and GPU vendors

Safe by default

Built on wgpu for memory safety and portability

​
Basic usage

​
Requesting a GPU adapter

// Request a GPU adapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error("No GPU adapter found");
}

console.log("GPU adapter:", adapter);

​
Creating a device

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

console.log("GPU device:", device);
console.log("Limits:", device.limits);
console.log("Features:", Array.from(device.features));

​
GPU compute example

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create a compute shader
const shaderCode = `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;
  
  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
    data[global_id.x] = data[global_id.x] * 2.0;
  }
`;

const shaderModule = device.createShaderModule({
  code: shaderCode,
});

// Create a buffer
const buffer = device.createBuffer({
  size: 256,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
});

// Create bind group layout
const bindGroupLayout = device.createBindGroupLayout({
  entries: [{
    binding: 0,
    visibility: GPUShaderStage.COMPUTE,
    buffer: { type: "storage" },
  }],
});

// Create pipeline
const pipeline = device.createComputePipeline({
  layout: device.createPipelineLayout({
    bindGroupLayouts: [bindGroupLayout],
  }),
  compute: {
    module: shaderModule,
    entryPoint: "main",
  },
});

// Create bind group
const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [{
    binding: 0,
    resource: { buffer },
  }],
});

// Execute compute shader
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(4);
passEncoder.end();

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

​
WebGPU API components

The extension implements the full WebGPU specification, including:

​
Core interfaces

  • navigator.gpu - Entry point for WebGPU
  • GPUAdapter - Represents a GPU adapter
  • GPUDevice - Represents a logical GPU device
  • GPUQueue - Command submission queue

​
Resources

  • GPUBuffer - GPU-accessible data storage
  • GPUTexture - Image data storage
  • GPUSampler - Texture sampling configuration

​
Shaders and pipelines

  • GPUShaderModule - Compiled shader code
  • GPURenderPipeline - Graphics rendering pipeline
  • GPUComputePipeline - Compute shader pipeline

​
Command encoding

  • GPUCommandEncoder - Records GPU commands
  • GPURenderPassEncoder - Records rendering commands
  • GPUComputePassEncoder - Records compute commands
  • GPURenderBundle - Pre-recorded rendering commands

​
Binding resources

  • GPUBindGroupLayout - Describes resource binding layout
  • GPUBindGroup - Binds resources to a pipeline
  • GPUPipelineLayout - Complete pipeline resource layout

​
Query and synchronization

  • GPUQuerySet - Performance queries
  • GPUFence - GPU synchronization (deprecated in favor of promises)

​
Debugging

Set the DENO_WEBGPU_TRACE environment variable to output a wgpu trace to a specified directory for debugging.
export DENO_WEBGPU_TRACE=./webgpu-trace
deno run --allow-env --unstable-webgpu your-script.ts

​
Testing

Deno’s WebGPU implementation is tested using:
GPU availability in CI environments is limited. Some test configurations rely on software renderers like DirectX WARP and Vulkan lavapipe.

​
Resources

WebGPU specification

Official WebGPU API specification

Design documents

WebGPU design documentation

Conformance tests

WebGPU CTS test suite

WebGPU examples

WebGPU examples for Deno

​
Community

For help with WebGPU development:

Build docs developers (and LLMs) love

Get started for freeTalk to us