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?