webgpu
Guide WebGPU application, compute, render pipeline, buffer, texture, bind group, command encoding, and GPU performance work. Use when writing or debugging WebGPU code, GPU pipelines, WGSL bindings from JavaScript or TypeScript, shader resource layouts, compute dispatches, render passes, or WebGPU performance issues.
来源信息
- 仓库
- rogie/figma-webgpu-shader-studio
- 最近来源活动
- 2026年7月19日 16:34
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 0
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- webgpu
- description
- Guide WebGPU application, compute, render pipeline, buffer, texture, bind group, command encoding, and GPU performance work. Use when writing or debugging WebGPU code, GPU pipelines, WGSL bindings from JavaScript or TypeScript, shader resource layouts, compute dispatches, render passes, or WebGPU performance issues.
# WebGPU
## Instructions
When working on WebGPU code:
1. Verify pipeline resources agree end-to-end: WGSL `@group/@binding`, bind group entries, buffer usages, texture formats, sampler types, uniform packing, and dispatch/draw dimensions.
2. Prefer stable, reusable GPU resources. Cache pipelines, shader modules, bind group layouts, buffers, samplers, and static lookup tables when dimensions or formats have not changed.
3. Keep uniform buffers 16-byte aligned. Pack scalars into vec4-sized slots or explicitly pad structs and matching JavaScript writes.
4. Choose the smallest resource usage flags that cover actual use: `UNIFORM`, `STORAGE`, `COPY_DST`, `COPY_SRC`, `TEXTURE_BINDING`, `RENDER_ATTACHMENT`, etc.
5. Avoid per-frame allocation for resources that can be reused. Recreate only when size, format, binding layout, or algorithm changes.
6. For compute workloads, match `@workgroup_size` and `dispatchWorkgroups()` to the problem shape. Use parallel dispatches for independent pixels; accept serial execution only when the algorithm has true data dependencies.
7. For render pipelines, verify target format comes from the output texture when possible rather than hardcoding.
8. For alpha output, be explicit about straight vs premultiplied alpha and the blend state expected by the host.
## Performance Checklist
- Minimize CPU-to-GPU writes; update only the buffers that changed.
- Prefer sequential memory access in storage buffers.
- Avoid dynamic loops, dynamic indexing, and repeated bounds checks in hot shader paths when a generator or specialization can unroll them.
- Split border handling from common interior paths for image kernels.
- Precompute static lookup tables on the CPU when they remove repeated shader work.
- Use textures for sampled image data and storage buffers for structured working data.
## Debugging
When a WebGPU update fails:
1. Find the first real validation or shader compilation error; browser wrapper errors often hide useful stderr.
2. Check binding layout mismatches before changing shader logic.
3. Check buffer sizes and alignment before changing resource code.
4. Reduce to the smallest failing pass: load, compute, render, or present.
在 GitHub 查看