Skip to main content
On this page

@std/webgpu

Unstable

This @std package is experimental and its API may change without a major version bump.

Overview Jump to heading

Utilities for interacting with the WebGPU API.

import { createTextureWithData } from "@std/webgpu";

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

createTextureWithData(device, {
  format: "bgra8unorm-srgb",
  size: {
    width: 3,
    height: 2,
  },
  usage: GPUTextureUsage.COPY_SRC,
}, new Uint8Array([1, 1, 1, 1, 1, 1, 1]));

Add to your project Jump to heading

deno add jsr:@std/webgpu

See all symbols in @std/webgpu on

What is the WebGPU API? Jump to heading

WebGPU is a modern graphics API that provides high-performance 3D graphics and computation capabilities in web applications. It is designed to be a successor to WebGL, offering lower-level access to GPU hardware and improved performance for complex graphics and compute tasks.

Why use @std/webgpu? Jump to heading

Use for common WebGPU patterns and utilities to simplify setup and resource management:

  • Request the adapter/device once and reuse; feature/limit negotiation up front avoids runtime failures.
  • Set texture usage bits to match all intended operations (COPY_SRC, COPY_DST, TEXTURE_BINDING, RENDER_ATTACHMENT).
  • Prefer device.queue.writeBuffer/writeTexture for small uploads; use staging buffers for large transfers.

Examples Jump to heading

Writing to a buffer Jump to heading

const buf = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM,
});
device.queue.writeBuffer(buf, 0, new Uint32Array([1, 2, 3, 4]));

Describe a texture format Jump to heading

import { describeTextureFormat } from "@std/webgpu";

const info = describeTextureFormat("rgba8unorm");
console.log(info.sampleType); // e.g. "float"
console.log(info.allowedUsages.includes(GPUTextureUsage.RENDER_ATTACHMENT));
console.log(info.blockSize, info.blockDimensions); // bytes per block and block size

Copy a texture to a buffer (with padding) Jump to heading

import {
  describeTextureFormat,
  getRowPadding,
  resliceBufferWithPadding,
} from "@std/webgpu";

const format: GPUTextureFormat = "rgba8unorm";
const size = { width: 320, height: 200 };
const tex = device.createTexture({
  format,
  size,
  usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
});

// Compute bytesPerRow with required alignment for buffer copies
const { blockSize, blockDimensions } = describeTextureFormat(format);
const bytesPerPixel = blockSize /
  (blockDimensions.width * blockDimensions.height);
const { padded: bytesPerRow } = getRowPadding(size.width * bytesPerPixel);
const bufferSize = bytesPerRow * size.height;

const out = device.createBuffer({
  size: bufferSize,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});

const encoder = device.createCommandEncoder();
encoder.copyTextureToBuffer(
  { texture: tex },
  { buffer: out, bytesPerRow, rowsPerImage: size.height },
  size,
);
device.queue.submit([encoder.finish()]);

await out.mapAsync(GPUMapMode.READ);
const padded = out.getMappedRange();
const pixels = resliceBufferWithPadding(
  new Uint8Array(padded),
  bytesPerRow,
  size,
);
// `pixels` is tightly packed RGBA rows, suitable for encoding/saving

Capture a render target into a buffer Jump to heading

import { createCapture } from "@std/webgpu";

const { texture, outputBuffer } = createCapture(device, {
  size: { width: 256, height: 256 },
  format: "rgba8unorm",
});

// draw to `texture` as a color attachment, then copy it into `outputBuffer` internally
// later map the buffer to read pixels
await outputBuffer.mapAsync(GPUMapMode.READ);
const data = new Uint8Array(outputBuffer.getMappedRange());
// use `data`...

Tips Jump to heading

  • Check for WebGPU support with if (!navigator.gpu) { ... }.
  • Request the adapter/device once and reuse; feature/limit negotiation up front avoids runtime failures.
  • Set texture usage bits to match all intended operations (COPY_SRC, COPY_DST, TEXTURE_BINDING, RENDER_ATTACHMENT).

Did you find what you needed?

Edit this page
Privacy policy