webgpu-impl-render-usecases
Installation
SKILL.md
WebGPU Render Use Cases
API-level setup for common render workloads: PBR materials, full-screen passes, post-processing, and screen-space effects on WebGPU 1.0-stable (Chrome 113+, Safari 26+, Firefox 141+).
Quick Reference
| Use case | API resources needed | Key technique |
|---|---|---|
| PBR material | 2 uniform buffers (matrices, material params), 3 texture_2d<f32>, 1 filtering sampler, 1 bind group |
Cook-Torrance BRDF in WGSL fragment shader |
| Full-screen pass | NO vertex buffer, 1 sampled texture_2d<f32>, 1 sampler |
Generate 3 vertices from @builtin(vertex_index) |
| Post-processing | Offscreen color texture, full-screen pass per effect | Sample previous result, write next (cross-link webgpu-impl-multipass) |
| Screen-space effects (SSAO, SSR) | G-buffer textures, depth as texture_depth_2d, inverse projection matrix |
Full-screen pass reconstructs position from depth |
ALWAYS generate a full-screen pass from three shader-built vertices. NEVER bind a
vertex buffer for a full-screen pass. WebGPU clip-space Z is 0 to 1 (not -1 to
1 like WebGL); the framebuffer is Y-down while clip space is Y-up.