Volume Shader：WebGL 体积渲染工作原理
从 WebGL 体积渲染角度解释 volume shader、ray marching、GPU 成本和浏览器 benchmark 的适用边界。
你将学到
- 体积着色器和传统表面着色在渲染目标上的核心差异是什么。
- 为什么体积渲染会让每像素承担更多计算与采样次数。
- ray marching 如何把三维场景中的体积信息转换为可见雾、烟、云等图像。
- 为什么 Volume Shader BM 用这一负载做浏览器 GPU 测试。
- 体积着色器结果与原生完整基准之间最常见的边界在哪里。
快速定义
体积着色器（Volume Shader）会在 3D 空间体积中采样并累积颜色、密度和吸收项，而不仅仅处理网格表面，因此更适合表达雾、烟、云、火焰等非平面介质。WebGL 中通常沿视线方向做大量步进采样，再将采样结果积累为最终像素。
What is a volume shader? 指南
Volume Shader：WebGL 体积渲染工作原理 中的「What is a volume shader?」重点说明：从 WebGL 体积渲染角度解释 volume shader、ray marching、GPU 成本和浏览器 benchmark 的适用边界。 这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。
实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。
Why do volume shaders matter for GPU benchmarks? 指南
Volume Shader：WebGL 体积渲染工作原理 中的「Why do volume shaders matter for GPU benchmarks?」重点说明：从 WebGL 体积渲染角度解释 volume shader、ray marching、GPU 成本和浏览器 benchmark 的适用边界。 这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。
实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。
How does volumetric rendering differ from surface rendering? 指南
Volume Shader：WebGL 体积渲染工作原理 中的「How does volumetric rendering differ from surface rendering?」重点说明：从 WebGL 体积渲染角度解释 volume shader、ray marching、GPU 成本和浏览器 benchmark 的适用边界。 这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。
实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。
关键结论
- 01 当目标是“占据体积”的物体时，体积着色器更符合真实表达。
- 02 主要成本来自每个像素内大量采样与重复光照累计。
- 03 浏览器体积测试有助于暴露 fragment shader 的吞吐与稳定性。
- 04 Volume Shader BM 的对比必须固定 preset、浏览器、渲染分辨率和电源策略。