GPURenderBundle
注意：此功能在 Web Workers 中可用。
GPURenderBundle 介面是 WebGPU API 的一部分，它表示一個用於預先錄製命令包的容器。
命令包使用 GPURenderBundleEncoder 進行編碼；一旦所需的命令被編碼，它們就會透過 GPURenderBundleEncoder.finish() 方法錄製到一個 GPURenderBundle 物件例項中。
然後，透過將 GPURenderBundle 物件傳遞給 GPURenderPassEncoder.executeBundles() 呼叫，可以在多個渲染通道中重用這些命令包。在 JavaScript 繪製呼叫開銷成為瓶頸的情況下，重用預先錄製的命令可以顯著提高應用程式效能。當一批物件需要在多個檢視或幀中以相同方式繪製，而唯一區別是使用的緩衝區內容（例如更新的矩陣 uniform）時，渲染包最為有效。
VR 渲染是一個很好的例子。將渲染錄製為渲染包，然後為每隻眼睛調整檢視矩陣並重放它，是為場景的兩個渲染髮出繪製呼叫的更有效方法。
例項屬性
示例
在 WebGPU 示例的 Animometer 示例 中，許多類似的opertions同時在許多不同的物件上進行。渲染包使用以下函式進行編碼：
js
function recordRenderPass(
passEncoder: GPURenderBundleEncoder | GPURenderPassEncoder
) {
if (settings.dynamicOffsets) {
passEncoder.setPipeline(dynamicPipeline);
} else {
passEncoder.setPipeline(pipeline);
}
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.setBindGroup(0, timeBindGroup);
const dynamicOffsets = [0];
for (let i = 0; i < numTriangles; ++i) {
if (settings.dynamicOffsets) {
dynamicOffsets[0] = i * alignedUniformBytes;
passEncoder.setBindGroup(1, dynamicBindGroup, dynamicOffsets);
} else {
passEncoder.setBindGroup(1, bindGroups[i]);
}
passEncoder.draw(3, 1, 0, 0);
}
}
稍後，會建立一個 GPURenderBundleEncoder，呼叫該函式，並使用 GPURenderBundleEncoder.finish() 錄製渲染包。
js
const renderBundleEncoder = device.createRenderBundleEncoder({
colorFormats: [presentationFormat],
});
recordRenderPass(renderBundleEncoder);
const renderBundle = renderBundleEncoder.finish();
然後使用 GPURenderPassEncoder.executeBundles() 在多個渲染通道中重用該工作以提高效能。請參閱示例程式碼列表以獲取完整上下文。
js
// …
return function doDraw(timestamp) {
if (startTime === undefined) {
startTime = timestamp;
}
uniformTime[0] = (timestamp - startTime) / 1000;
device.queue.writeBuffer(uniformBuffer, timeOffset, uniformTime.buffer);
renderPassDescriptor.colorAttachments[0].view = context
.getCurrentTexture()
.createView();
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
if (settings.renderBundles) {
passEncoder.executeBundles([renderBundle]);
} else {
recordRenderPass(passEncoder);
}
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
};
// …
規範
| 規範 |
|---|
| WebGPU # gpurenderbundle |
瀏覽器相容性
載入中…