webgpu-impl-async-patterns
Installation
SKILL.md
WebGPU Async Patterns
WebGPU is asynchronous by design: the GPU runs on its own timeline while JavaScript runs on the content timeline. This skill structures the frame loop, maps buffers safely, and loads pipelines without blocking on WebGPU 1.0-stable (Chrome 113+, Safari 26+, Firefox 141+).
Quick Reference
| API | Returns | Timeline | Use for |
|---|---|---|---|
buffer.mapAsync(mode, offset, size) |
Promise<undefined> |
resolves when buffer is CPU-owned | CPU access to a MAP_READ/MAP_WRITE buffer |
buffer.mapState |
"unmapped" / "pending" / "mapped" |
read synchronously | guard before calling mapAsync |
buffer.getMappedRange(offset, size) |
ArrayBuffer |
valid only while mapped |
read or write the mapped bytes |
buffer.unmap() |
undefined |
returns buffer to "unmapped" |
release the buffer back to the GPU |
queue.onSubmittedWorkDone() |
Promise<undefined> |
resolves after submitted work completes | one-time GPU completion checkpoint |
device.createRenderPipelineAsync(desc) |
Promise<GPURenderPipeline> |
compiles off the content timeline | load-time pipeline creation |
device.createComputePipelineAsync(desc) |
Promise<GPUComputePipeline> |
compiles off the content timeline | load-time pipeline creation |
requestAnimationFrame(cb) |
frame handle | content timeline | the per-frame render driver |