WebGPU Resources（WebGPU 资源与优化指南）
原文作者：webgpufundamentals Contributors
原始链接：https://webgpufundamentals.org/webgpu/lessons/webgpu-resources.html
说明：原文为资源索引页，无 GLSL/WebGL 着色器代码块，因此不存在需要保留的核心代码；下文编译保留所有资源链接与工具名称，并补充核心优化要点与术语对照。
一、正文编译
以下按原文分类，将资源条目翻译为中文：
文章（Articles）
- 你的第一个 WebGPU 应用
- WGSL 之旅 — WGSL 着色语言入门导览
- WebGPU Unleashed：实用教程
- 高效渲染 glTF 模型
- WebGPU 最佳实践
- Rosetta — 对比多种着色器语言（GLSL、WGSL 等）
- 3D 图形初学者教程与项目
- WebGPU 渲染束最佳实践
示例（Examples）
- WebGPU 官方示例集
- WebGPU 延迟渲染
- WebGPU 阴影实验场
- WebGPU 元球
- Shadertoy 示例移植到 WebGPU
- Shader Graph WGSL
- Compute Toys
调试 / 性能分析（Debugging / Profiling）
工具（Tools）
- WebGPUReport.org — 显示当前浏览器的 WebGPU 特性支持情况
库（Libraries）
3D 库
实用工具（Utilities）
- webgpu-utils — 帮助设置 uniform buffer 等数据
- wgsl-struct-buffer — 在 TypeScript 中提供 WGSL 结构体缓冲区视图，带类型检查与推断
- TypeGPU — 以类型安全、声明式的方式管理 WebGPU 资源
调试 / 性能分析库
- webgpu_inspector — 检查 WebGPU 资源与命令
- webgpu-dev-extension — 作为浏览器扩展提供各种调试与开发辅助
- webgpu-helpers — 各种调试与开发辅助工具
- webgpu-memory — 显示当前使用的内存量
- webgpu-avoid-redundant-state-setting — 检查代码中冗余的 WebGPU 调用
- webgpu_recorder — 将 WebGPU 调用记录为 .HTML 文件，便于为 bug/issue 创建独立复现仓库
游戏开发（Game Dev）
二、核心优化要点提炼
从上述资源所引用的工具与最佳实践中，可提炼出以下 3 个核心优化方向：
1. 使用渲染束（Render Bundles）降低命令记录开销
渲染束允许预先记录一组渲染命令并在多帧中重复执行，从而减少每帧命令编码、状态验证和绘制调用的 CPU 成本。对于静态或半静态几何体，将绘制命令打包成渲染束后再提交，可以显著提高渲染循环的效率。参见 WebGPU Render Bundle Best Practices。
2. 避免冗余的 WebGPU 状态设置
WebGPU 的状态管理是显式的，频繁调用 setPipeline、setBindGroup、setVertexBuffer 等方法会产生不必要的 CPU 验证与状态跟踪开销。应只在状态实际发生变化时才更新，并可借助 webgpu-avoid-redundant-state-setting 检查代码中的重复调用。这一思路与 WebGL 中减少程序切换、纹理绑定切换的优化一致。
3. 借助性能剖析工具定位 GPU/CPU 与内存瓶颈
使用 PIX（Windows）分析 GPU 时间，使用 webgpu-memory 监控显存与系统内存占用，可以精准定位带宽瓶颈、资源泄漏和过度分配问题。进一步可优化 bind group 布局、合并 render pass、减少资源切换，从而提升整体性能。
三、GLSL/WebGL 专业术语检查与对照
原文虽为 WebGPU 资源页，但涉及大量与 WebGL/GLSL 相似或对应的术语。下表列出推荐中文译名及对应关系，帮助避免混淆：
| 原文术语 | 推荐中文译名 | 与 WebGL/GLSL 的关系 |
|---|---|---|
| WGSL | WGSL（WebGPU 着色语言） | WebGL 使用 GLSL；两者语法不同，不可混用 |
| Shader | 着色器 | GLSL 中同概念 |
| Render Pipeline | 渲染管线 | WebGL 中类似 program + 状态组合，但更显式 |
| Bind Group | 绑定组 | 对应 WebGL 中 uniform/texture 绑定点的集合，但拥有显式布局 |
| Uniform Buffer | 统一缓冲区 | 类似 WebGL 的 UBO（Uniform Buffer Object） |
| Storage Buffer | 存储缓冲区 | 类似 WebGL 的 SSBO 或存储纹理，读写更灵活 |
| Render Bundle | 渲染束 / 渲染捆绑包 | WebGL 无直接对应，类似显示列表/命令缓存 |
| Render Pass | 渲染通道 | WebGL 中由 framebuffer 切换隐式形成 |
| Compute Shader | 计算着色器 | GLSL 中也有 compute shader |
| Vertex Buffer | 顶点缓冲区 | 同概念 |
| Inter-stage Variables | 阶段间变量 | 对应 GLSL 中的 varying 或 in/out |
| Cube Map | 立方体贴图 | 同概念 |
| Multisampling / MSAA | 多重采样 / MSAA 抗锯齿 | 同概念 |
| Deferred Rendering | 延迟渲染 | 同概念 |
| PIX | PIX（GPU 性能分析工具） | 类似 RenderDoc、Nsight，非着色器语言术语 |
| Profiling | 性能分析 / 剖析 | 同概念 |
特别注意：WebGPU 使用 WGSL 作为着色语言，而不是 GLSL。阅读上述资源时，凡涉及 shader 代码的部分都应按 WGSL 语法理解，不要误认为是 GLSL。
以上即为对原文《WebGPU Resources》的深度解读与编译。原页面为资源索引，所有超链接均已保留，方便进一步查阅。
