tessl/npm-webgpu--types

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

—

Pending

Overview

Eval results

Files

Render Bundles

Name: tessl/npm-webgpu--types
Author: tessl

Render bundles provide a way to pre-record and reuse collections of render commands for improved performance. They enable efficient command resubmission without the overhead of encoding commands multiple times.

Capabilities

GPURenderBundle Interface

Represents a pre-recorded bundle of render commands that can be executed efficiently.

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

GPURenderBundleEncoder Interface

Provides the ability to record render commands into a reusable bundle.

interface GPURenderBundleEncoder extends 
  GPUObjectBase,
  GPUCommandsMixin,
  GPUDebugCommandsMixin,
  GPUBindingCommandsMixin,
  GPURenderCommandsMixin {
  readonly label: string | undefined;
  
  /**
   * Completes recording of the render bundle commands sequence.
   * @param descriptor - Optional descriptor for the render bundle
   * @returns The completed render bundle
   */
  finish(descriptor?: GPURenderBundleDescriptor): GPURenderBundle;
}

Render Bundle Creation

Render bundles are created through the GPUDevice interface.

// From GPUDevice interface
createRenderBundleEncoder(
  descriptor: GPURenderBundleEncoderDescriptor
): GPURenderBundleEncoder;

Configuration Types

type GPURenderBundleDescriptor = GPUObjectDescriptorBase;

interface GPURenderBundleEncoderDescriptor extends GPURenderPassLayout {
  /**
   * If true, indicates that the render bundle does not modify the depth component
   * of any render pass the render bundle is executed in.
   */
  depthReadOnly?: boolean;
  
  /**
   * If true, indicates that the render bundle does not modify the stencil component
   * of any render pass the render bundle is executed in.
   */
  stencilReadOnly?: boolean;
}

interface GPURenderPassLayout extends GPUObjectDescriptorBase {
  /**
   * List of texture formats of the color attachments for this pass or bundle.
   */
  colorFormats: Iterable<GPUTextureFormat | null | undefined>;
  
  /**
   * The texture format of the depth/stencil attachment for this pass or bundle.
   */
  depthStencilFormat?: GPUTextureFormat;
  
  /**
   * Number of samples per pixel in the attachments for this pass or bundle.
   */
  sampleCount?: GPUSize32;
}

Usage Example:

// Create a render bundle encoder
const bundleEncoder = device.createRenderBundleEncoder({
  colorFormats: ['bgra8unorm'],
  depthStencilFormat: 'depth24plus',
  sampleCount: 1
});

// Record render commands into the bundle
bundleEncoder.setPipeline(renderPipeline);
bundleEncoder.setBindGroup(0, uniformBindGroup);
bundleEncoder.setVertexBuffer(0, vertexBuffer);
bundleEncoder.setIndexBuffer(indexBuffer, 'uint16');
bundleEncoder.drawIndexed(indexCount);

// Finish recording and create the bundle
const renderBundle = bundleEncoder.finish({
  label: 'Scene render bundle'
});

// Execute the bundle in a render pass
const commandEncoder = device.createCommandEncoder();
const renderPass = commandEncoder.beginRenderPass({
  colorAttachments: [{
    view: context.getCurrentTexture().createView(),
    clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
    loadOp: 'clear',
    storeOp: 'store'
  }]
});

renderPass.executeBundles([renderBundle]);
renderPass.end();

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

Install with Tessl CLI