v137 · webgpu
Streaming Buffer Pipeline
Simulates a per-frame streaming pipeline: CPU generates data → uploads to a staging buffer → copies to a GPU processing buffer using the simplified copyBufferToBuffer(src, dst) overload → result mapped back to CPU. Shows how the 2-arg overload reduces boilerplate in real frame loops.
WebGPU not available — requires Chrome 113+.
Pipeline
CPU data
—
→
Staging buf
—
→
Processing buf
—
→
Readback
—
—Ready — click "Run one frame" to start.
Code pattern
// Per-frame pattern — simplified with 2-arg overload (Chrome 137+)
async function renderFrame(device, frameData) {
// 1. Upload CPU data to staging buffer
const staging = device.createBuffer({
size: frameData.byteLength,
usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE
});
await staging.mapAsync(GPUMapMode.WRITE);
new Float32Array(staging.getMappedRange()).set(frameData);
staging.unmap();
// 2. Copy staging → processing (new 2-arg overload — no offsets needed)
const enc = device.createCommandEncoder();
enc.copyBufferToBuffer(staging, processingBuf); // ← Chrome 137+
// old form required: enc.copyBufferToBuffer(staging, 0, processingBuf, 0, size)
device.queue.submit([enc.finish()]);
staging.destroy();
}