0
# Render Bundles
1

2
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.
3

4
## Capabilities
5

6
### GPURenderBundle Interface
7

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

10
```typescript { .api }
11
interface GPURenderBundle extends GPUObjectBase {
12
  readonly label: string | undefined;
13
}
14
```
15

16
### GPURenderBundleEncoder Interface
17

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

20
```typescript { .api }
21
interface GPURenderBundleEncoder extends 
22
  GPUObjectBase,
23
  GPUCommandsMixin,
24
  GPUDebugCommandsMixin,
25
  GPUBindingCommandsMixin,
26
  GPURenderCommandsMixin {
27
  readonly label: string | undefined;
28
  
29
  /**
30
   * Completes recording of the render bundle commands sequence.
31
   * @param descriptor - Optional descriptor for the render bundle
32
   * @returns The completed render bundle
33
   */
34
  finish(descriptor?: GPURenderBundleDescriptor): GPURenderBundle;
35
}
36
```
37

38
### Render Bundle Creation
39

40
Render bundles are created through the GPUDevice interface.
41

42
```typescript { .api }
43
// From GPUDevice interface
44
createRenderBundleEncoder(
45
  descriptor: GPURenderBundleEncoderDescriptor
46
): GPURenderBundleEncoder;
47
```
48

49
### Configuration Types
50

51
```typescript { .api }
52
type GPURenderBundleDescriptor = GPUObjectDescriptorBase;
53

54
interface GPURenderBundleEncoderDescriptor extends GPURenderPassLayout {
55
  /**
56
   * If true, indicates that the render bundle does not modify the depth component
57
   * of any render pass the render bundle is executed in.
58
   */
59
  depthReadOnly?: boolean;
60
  
61
  /**
62
   * If true, indicates that the render bundle does not modify the stencil component
63
   * of any render pass the render bundle is executed in.
64
   */
65
  stencilReadOnly?: boolean;
66
}
67

68
interface GPURenderPassLayout extends GPUObjectDescriptorBase {
69
  /**
70
   * List of texture formats of the color attachments for this pass or bundle.
71
   */
72
  colorFormats: Iterable<GPUTextureFormat | null | undefined>;
73
  
74
  /**
75
   * The texture format of the depth/stencil attachment for this pass or bundle.
76
   */
77
  depthStencilFormat?: GPUTextureFormat;
78
  
79
  /**
80
   * Number of samples per pixel in the attachments for this pass or bundle.
81
   */
82
  sampleCount?: GPUSize32;
83
}
84
```
85

86
**Usage Example:**
87

88
```typescript
89
// Create a render bundle encoder
90
const bundleEncoder = device.createRenderBundleEncoder({
91
  colorFormats: ['bgra8unorm'],
92
  depthStencilFormat: 'depth24plus',
93
  sampleCount: 1
94
});
95

96
// Record render commands into the bundle
97
bundleEncoder.setPipeline(renderPipeline);
98
bundleEncoder.setBindGroup(0, uniformBindGroup);
99
bundleEncoder.setVertexBuffer(0, vertexBuffer);
100
bundleEncoder.setIndexBuffer(indexBuffer, 'uint16');
101
bundleEncoder.drawIndexed(indexCount);
102

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

108
// Execute the bundle in a render pass
109
const commandEncoder = device.createCommandEncoder();
110
const renderPass = commandEncoder.beginRenderPass({
111
  colorAttachments: [{
112
    view: context.getCurrentTexture().createView(),
113
    clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
114
    loadOp: 'clear',
115
    storeOp: 'store'
116
  }]
117
});
118

119
renderPass.executeBundles([renderBundle]);
120
renderPass.end();
121

122
device.queue.submit([commandEncoder.finish()]);
123
```