WebGPU 相机可视化
原文作者：webgpufundamentals Contributors
原文链接：https://webgpufundamentals.org/webgpu/lessons/webgpu-camera-visualization.html
以下示例可帮助读者直观理解相机可视化的实际效果。
实时演示
下方为站内可编辑的双相机可视化演示，左侧为代码编辑器，右侧为实时预览，可直接修改并运行：
3 个核心优化要点
由于原文本身没有阐述优化内容，以下要点是基于 WebGPU 相机可视化这一场景的常见工程实践提炼而成，并特别结合了原文待办事项“支持两个相机控制器”的潜在需求。这些建议不属于原文直接表述，但可作为该主题的实用补充。
1. 使用 Uniform Buffer 传递相机矩阵，减少 CPU-GPU 数据传输
在 WebGPU 中，相机视图矩阵（view matrix）和投影矩阵（projection matrix）通常每帧更新。应通过 uniform buffer（统一缓冲区）一次性上传，而不是每帧重新创建或更新顶点缓冲区。这样可避免频繁的 queue.writeBuffer 小数据量调用，并允许 GPU 端高效缓存。
2. 利用 Bind Group 缓存每帧变化的资源，避免重复绑定
将与相机相关的 uniform buffer、纹理采样器等资源打包到 bind group（绑定组）中，并在渲染循环中复用。若同时存在两个相机控制器（如编辑器和第一人称视角），可以为每个相机创建独立的 bind group，或者使用同一个 bind group 配合 dynamic offset 动态偏移，从而在不重新创建绑定组的情况下切换相机参数。
3. 多相机场景考虑统一相机参数布局 + Dynamic Offsets
当需要支持多个相机控制器时，将多个相机的视图/投影矩阵存储在同一个 uniform buffer 中，并利用 bind group 的 dynamic offset 机制在绘制调用间选择对应相机的数据段。这样既避免了为每个相机创建多个 bind group 的开销，也减少了 setBindGroup 的调用次数，适合需要频繁切换相机的可视化工具场景。
GLSL/WebGL 专业术语检查
原文虽然讨论 WebGPU，但其概念与 WebGL/GLSL 有对应关系。下面列出文中出现或隐含的关键术语，并给出规范中文译名，同时指出 WebGPU 与 WebGL 的术语差异，避免混淆。
| 英文术语 | 规范中文 | 备注 |
|---|---|---|
| WebGPU | WebGPU | 新一代 Web 图形 API，使用 WGSL 而非 GLSL |
| WGSL | WebGPU 着色语言 | WebGPU 专用着色语言，对应 GLSL 在 WebGL 中的角色 |
| Camera Controller | 相机控制器 | 用于控制相机移动/旋转的组件 |
| Uniform Buffer | 统一缓冲区 | 对应 WebGL 中的 uniform buffer object (UBO) |
| Bind Group | 绑定组 | WebGPU 资源绑定单元，类似 WebGL 中的 uniform block 绑定 |
| Dynamic Offset | 动态偏移 | 在绑定组中动态调整缓冲区偏移量 |
| Vertex Buffer | 顶点缓冲区 | 存储顶点数据，WebGL 与 WebGPU 均有 |
| Storage Buffer | 存储缓冲区 | WebGPU 特有的可读写缓冲区，对应 WebGL 中的 SSBO |
| Clip Space | 裁剪空间 | 顶点着色器输出坐标空间，WebGL 与 WebGPU 概念一致 |
| MSAA | 多重采样抗锯齿 | 全称 Multisample Anti-Aliasing |
| Compute Shader | 计算着色器 | WebGPU 与 WebGL 2.0 均支持，但 API 不同 |
| Inter-stage Variables | 阶段间变量 | 着色器阶段之间传递的数据，类似 GLSL 中的 varying |
| View Matrix / Projection Matrix | 视图矩阵 / 投影矩阵 | 相机变换核心矩阵，术语通用 |
注意：WebGPU 使用 WGSL 而非 GLSL，因此在描述 WebGPU 着色器时应避免使用 “GLSL 代码” 的说法。同时，WebGPU 的管线状态（pipeline state）与 WebGL 的运行时状态管理有较大区别，涉及优化时应使用 WebGPU 原生概念（如 bind group、render pass encoder 等）。
总结：原文目前内容极少，仅标记了待办事项和示例嵌入。本文如实编译现有内容，并基于 WebGPU 相机可视化主题补充了三条工程优化建议，同时完成了专业术语的核对与区分，帮助读者准确理解 WebGPU 与 WebGL/GLSL 的差异。
