webgpu-core-pipeline-architecture
Installation
SKILL.md
WebGPU Pipeline Architecture
Conceptual model of WebGPU pipelines: how shader modules, render and compute pipelines, and pipeline layouts fit together, and how to choose auto layout versus an explicit layout. Baseline: WebGPU 1.0-stable (Chrome 113+, Safari 26+, Firefox 141+).
Quick Reference
A pipeline is an immutable, pre-compiled object that fixes all shader code and fixed-function state for a GPU pass. Two kinds exist.
| Aspect | GPURenderPipeline | GPUComputePipeline |
|---|---|---|
| Purpose | Rasterized graphics: draw triangles, lines, points to attachments | General-purpose parallel work over a dispatch grid |
| Created by | device.createRenderPipeline(desc) / createRenderPipelineAsync(desc) |
device.createComputePipeline(desc) / createComputePipelineAsync(desc) |
| Shader stages | vertex (required) + fragment (optional) |
compute (required) |
| Used inside | GPURenderPassEncoder via setPipeline then draw/drawIndexed |
GPUComputePassEncoder via setPipeline then dispatchWorkgroups |
| Writes to | Color and depth/stencil attachments | Storage buffers and storage textures |
Three object types form the pipeline graph: