or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

commands.mdconfiguration.mdcore-types.mdgpu-interfaces.mdindex.mdpipelines.mdrender-bundles.mdresources.md
tile.json

tessl/npm-webgpu--types

Complete TypeScript type definitions for the WebGPU standard enabling type-safe GPU programming.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@webgpu/types@0.1.x

To install, run

npx @tessl/cli install tessl/npm-webgpu--types@0.1.0

index.mddocs/

@webgpu/types

TypeScript type definitions for the WebGPU standard, providing complete type safety for GPU programming in web browsers. This package defines interfaces, types, and constants that enable developers to use WebGPU APIs with full IntelliSense support and compile-time error checking.

Package Information

  • Package Name: @webgpu/types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @webgpu/types

Core Imports

Since this is a type definitions package, it provides ambient types that augment the global DOM environment:

/// <reference types="@webgpu/types" />

Or via tsconfig.json:

{
  "compilerOptions": {
    "types": ["@webgpu/types"]
  }
}

Alternative configuration using typeRoots:

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types"]
  }
}

Basic Usage

After configuring the types, WebGPU APIs become available with full type safety:

// Access the GPU API through navigator
const gpu: GPU = navigator.gpu;

// Request an adapter with type safety
const adapter: GPUAdapter | null = await gpu.requestAdapter({
  powerPreference: "high-performance"
});

if (!adapter) {
  throw new Error("WebGPU not supported");
}

// Request a device with features and limits
const device: GPUDevice = await adapter.requestDevice({
  requiredFeatures: ["depth-clip-control"],
  requiredLimits: {
    maxBufferSize: 512 * 1024 * 1024
  }
});

// Configure canvas context
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const context: GPUCanvasContext = canvas.getContext('webgpu')!;

context.configure({
  device,
  format: gpu.getPreferredCanvasFormat(),
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
});

Architecture

@webgpu/types provides comprehensive type coverage for the WebGPU ecosystem:

  • Ambient DOM Extensions: Enhances existing interfaces like Navigator, HTMLCanvasElement
  • Complete Type Hierarchy: 200+ interfaces covering the entire WebGPU specification
  • Strict Type Variants: Additional safety types like GPUExtent3DStrict to prevent common errors
  • Usage Flag Constants: Strongly-typed constants for buffer usage, texture usage, etc.
  • Error Type Hierarchy: Complete error handling with GPUError subtypes
  • Event System: Type-safe event handling for GPU device events

Capabilities

Core Types and Enums

Basic types, primitive aliases, and string literal enums that form the foundation of the WebGPU type system.

type GPUSize32 = number;
type GPUIntegerCoordinate = number;
type GPUExtent3D = Iterable<GPUIntegerCoordinate> | GPUExtent3DDict;

type GPUTextureFormat = 
  | "r8unorm" | "r8snorm" | "r8uint" | "r8sint"
  | "r16uint" | "r16sint" | "r16float"
  | "rg8unorm" | "rg8snorm" | "rg8uint" | "rg8sint"
  // ... 98 more texture formats

type GPUBufferUsageFlags = number;

Core Types and Enums

GPU Interfaces

Main WebGPU interfaces including the root GPU object, adapters, and devices that provide the foundation for GPU access.

interface GPU {
  requestAdapter(options?: GPURequestAdapterOptions): Promise<GPUAdapter | null>;
  getPreferredCanvasFormat(): GPUTextureFormat;
}

interface GPUAdapter {
  readonly features: GPUSupportedFeatures;
  readonly limits: GPUSupportedLimits;
  readonly info: GPUAdapterInfo;
  requestDevice(descriptor?: GPUDeviceDescriptor): Promise<GPUDevice>;
}

interface GPUDevice extends EventTarget {
  readonly features: GPUSupportedFeatures;
  readonly limits: GPUSupportedLimits;
  readonly queue: GPUQueue;
  destroy(): void;
  createBuffer(descriptor: GPUBufferDescriptor): GPUBuffer;
  createTexture(descriptor: GPUTextureDescriptor): GPUTexture;
  // ... many more creation methods
}

GPU Interfaces

Resources

GPU resource objects including buffers, textures, samplers, and bind groups for managing GPU memory and data.

interface GPUBuffer {
  readonly size: GPUSize64Out;
  readonly usage: GPUBufferUsageFlags;
  readonly mapState: GPUBufferMapState;
  mapAsync(mode: GPUMapModeFlags, offset?: GPUSize64, size?: GPUSize64): Promise<void>;
  getMappedRange(offset?: GPUSize64, size?: GPUSize64): ArrayBuffer;
  unmap(): void;
  destroy(): void;
}

interface GPUTexture {
  readonly width: GPUIntegerCoordinateOut;
  readonly height: GPUIntegerCoordinateOut;
  readonly depthOrArrayLayers: GPUIntegerCoordinateOut;
  readonly format: GPUTextureFormat;
  readonly usage: GPUTextureUsageFlags;
  createView(descriptor?: GPUTextureViewDescriptor): GPUTextureView;
  destroy(): void;
}

interface GPUBindGroup {
  readonly label: string | undefined;
}

Resources

Pipelines and Shaders

Render pipelines, compute pipelines, and shader modules for defining GPU programs and rendering state.

interface GPURenderPipeline {
  readonly label: string | undefined;
  getBindGroupLayout(index: number): GPUBindGroupLayout;
}

interface GPUComputePipeline {
  readonly label: string | undefined;
  getBindGroupLayout(index: number): GPUBindGroupLayout;
}

interface GPUShaderModule {
  readonly label: string | undefined;
  getCompilationInfo(): Promise<GPUCompilationInfo>;
}

Pipelines and Shaders

Commands and Passes

Command recording, encoding, and execution including render passes and compute passes.

interface GPUCommandEncoder {
  beginRenderPass(descriptor: GPURenderPassDescriptor): GPURenderPassEncoder;
  beginComputePass(descriptor?: GPUComputePassDescriptor): GPUComputePassEncoder;
  copyBufferToBuffer(source: GPUBuffer, sourceOffset: GPUSize64, destination: GPUBuffer, destinationOffset: GPUSize64, size: GPUSize64): void;
  copyBufferToTexture(source: GPUTexelCopyBufferInfo, destination: GPUTexelCopyTextureInfo, copySize: GPUExtent3D): void;
  finish(descriptor?: GPUCommandBufferDescriptor): GPUCommandBuffer;
}

interface GPURenderPassEncoder extends GPURenderCommandsMixin {
  setViewport(x: number, y: number, width: number, height: number, minDepth: number, maxDepth: number): void;
  setScissorRect(x: GPUIntegerCoordinate, y: GPUIntegerCoordinate, width: GPUIntegerCoordinate, height: GPUIntegerCoordinate): void;
  end(): void;
}

Commands and Passes

Render Bundles

Pre-recorded command bundles for efficient command resubmission and improved rendering performance.

interface GPURenderBundle extends GPUObjectBase {
  readonly label: string | undefined;
}

interface GPURenderBundleEncoder extends 
  GPUObjectBase,
  GPUCommandsMixin,
  GPUDebugCommandsMixin,
  GPUBindingCommandsMixin,
  GPURenderCommandsMixin {
  readonly label: string | undefined;
  finish(descriptor?: GPURenderBundleDescriptor): GPURenderBundle;
}

Render Bundles

Configuration and Descriptors

Configuration interfaces and descriptor objects for creating and configuring GPU resources and state.

interface GPUBufferDescriptor extends GPUObjectDescriptorBase {
  size: GPUSize64;
  usage: GPUBufferUsageFlags;
  mappedAtCreation?: boolean;
}

interface GPUTextureDescriptor extends GPUObjectDescriptorBase {
  size: GPUExtent3D;
  mipLevelCount?: GPUIntegerCoordinate;
  sampleCount?: GPUSize32;
  dimension?: GPUTextureDimension;
  format: GPUTextureFormat;
  usage: GPUTextureUsageFlags;
}

interface GPURenderPipelineDescriptor extends GPUPipelineDescriptorBase {
  vertex: GPUVertexState;
  primitive?: GPUPrimitiveState;
  depthStencil?: GPUDepthStencilState;
  multisample?: GPUMultisampleState;
  fragment?: GPUFragmentState;
}

Configuration and Descriptors

Usage Constants

The package provides strongly-typed constants for various usage flags:

interface GPUBufferUsage {
  readonly MAP_READ: GPUFlagsConstant;
  readonly MAP_WRITE: GPUFlagsConstant;
  readonly COPY_SRC: GPUFlagsConstant;
  readonly COPY_DST: GPUFlagsConstant;
  readonly INDEX: GPUFlagsConstant;
  readonly VERTEX: GPUFlagsConstant;
  readonly UNIFORM: GPUFlagsConstant;
  readonly STORAGE: GPUFlagsConstant;
  readonly INDIRECT: GPUFlagsConstant;
  readonly QUERY_RESOLVE: GPUFlagsConstant;
}

declare var GPUBufferUsage: GPUBufferUsage;

interface GPUColorWrite {
  readonly RED: GPUFlagsConstant;
  readonly GREEN: GPUFlagsConstant;
  readonly BLUE: GPUFlagsConstant;
  readonly ALPHA: GPUFlagsConstant;
  readonly ALL: GPUFlagsConstant;
}

declare var GPUColorWrite: GPUColorWrite;

interface GPUMapMode {
  readonly READ: GPUFlagsConstant;
  readonly WRITE: GPUFlagsConstant;
}

declare var GPUMapMode: GPUMapMode;

interface GPUShaderStage {
  readonly VERTEX: GPUFlagsConstant;
  readonly FRAGMENT: GPUFlagsConstant;
  readonly COMPUTE: GPUFlagsConstant;
}

declare var GPUShaderStage: GPUShaderStage;

interface GPUTextureUsage {
  readonly COPY_SRC: GPUFlagsConstant;
  readonly COPY_DST: GPUFlagsConstant;
  readonly TEXTURE_BINDING: GPUFlagsConstant;
  readonly STORAGE_BINDING: GPUFlagsConstant;
  readonly RENDER_ATTACHMENT: GPUFlagsConstant;
}

declare var GPUTextureUsage: GPUTextureUsage;

DOM Integration

The package extends existing DOM interfaces for seamless WebGPU integration:

interface HTMLCanvasElement {
  getContext(contextId: "webgpu"): GPUCanvasContext | null;
}

interface OffscreenCanvas {
  getContext(contextId: "webgpu"): GPUCanvasContext | null;
}

interface Navigator extends NavigatorGPU {}
interface WorkerNavigator extends NavigatorGPU {}

interface NavigatorGPU {
  readonly gpu: GPU;
}