经纬志
首页 / three.js / 使用示例

环境光遮蔽

三十四个体块挤在一片地面上,墙角、体块之间的缝隙明显变暗。 「仅遮蔽」按钮把画面切到纯遮蔽结果,能直接看出算法在哪些位置生效。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

需要先有整张画面

SSAO 依赖上一帧的深度与法线,因此合成器里必须先有 RenderPass, 再接 SSAOPass,最后用 OutputPass 做色彩空间转换。 顺序错了会得到全黑屏或者没有遮蔽结果。

SSAOPass 内部会额外渲染一遍法线与深度,也就是说场景被画了两次。 这层开销在复杂场景里不可忽略,必须配合性能预算一起考虑。

参数取值说明
kernelRadius8采样半球半径,越大遮蔽越夸张
minDistance0.005过滤过近的噪点
maxDistance0.12限制遮蔽的影响深度
输出成片 / 仅遮蔽调试时看后者更直观

为什么只适合小范围

屏幕空间意味着「画面之外的信息一律不可见」。远处的山挡住近处的谷地, 阴影交界处的遮蔽就会缺失或错位。视距越远,这个问题越明显。

大地形场景通常只在近景启用 SSAO,远景用烘焙好的环境光贴图代替。 两者混用时要注意色调衔接,否则拉远镜头会看到亮度突变。

分辨率变化要通知所有环节。渲染器、合成器、SSAO 各自持有尺寸, 窗口变化时必须全部同步,漏掉一级会让遮蔽结果与画面对不上,出现错位的暗边。