渲染

Ray Marching：Volume Shader 如何在 WebGL 中采样空间

理解 ray marching 如何在 WebGL 中沿视线采样空间，以及 step count、density 和 early exit 如何影响 FPS。

你将学到

如何在 GLSL 中把相机射线转成可重复的采样循环。
步数、步长如何共同决定每帧 GPU 计算量。
密度累加为什么能把“不可见”的采样值变成可见颜色。
早停（early exit）如何在保留外观的前提下降低负载。
比较同一 benchmark 时应固定哪些 ray marching 参数。

快速定义

Ray Marching 是一种在射线方向上逐步推进并在每步采样函数值的体积渲染方式。它常见于体积雾、烟、云的可视化，因为它容易把空间细节表达为连续的密度场。

How does ray marching work in a volume shader? 指南

Ray Marching：Volume Shader 如何在 WebGL 中采样空间中的「How does ray marching work in a volume shader?」重点说明：理解 ray marching 如何在 WebGL 中沿视线采样空间，以及 step count、density 和 early exit 如何影响 FPS。这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。

实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。

float t = 0.0;
float density = 0.0;

for (int i = 0; i < 96; i++) {
  vec3 p = ro + rd * t;
  float sampleValue = mapDensity(p);
  density += sampleValue * 0.04;
  t += 0.03;
  if (density > 1.0 || t > 6.0) break;
}

What ray marching settings change performance? 指南

Ray Marching：Volume Shader 如何在 WebGL 中采样空间中的「What ray marching settings change performance?」重点说明：理解 ray marching 如何在 WebGL 中沿视线采样空间，以及 step count、density 和 early exit 如何影响 FPS。这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。

实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。

Why does ray marching make a good browser stress test? 指南

Ray Marching：Volume Shader 如何在 WebGL 中采样空间中的「Why does ray marching make a good browser stress test?」重点说明：理解 ray marching 如何在 WebGL 中沿视线采样空间，以及 step count、density 和 early exit 如何影响 FPS。这部分适合用来判断 shader 复杂度、浏览器图形路径和 GPU 稳定性。

实际测试时，请固定浏览器、预设、窗口大小、电源模式和热状态；如果页面变得卡顿或设备发热明显，应降低复杂度或停止运行。

关键结论

01 Ray Marching 概念简单，但每像素循环让它非常昂贵。
02 更多步数通常更细腻，却会成倍放大 FPS 压力。
03 早停是体积着色中最有价值的优化手段之一。
04 跨结果对比时，步数、渲染分辨率和 preset 要保持一致。

常见问题