首页 / three.js / 使用示例
环境光遮蔽
三十四个体块挤在一片地面上,墙角、体块之间的缝隙明显变暗。 「仅遮蔽」按钮把画面切到纯遮蔽结果,能直接看出算法在哪些位置生效。
源码与运行效果
需要先有整张画面
SSAO 依赖上一帧的深度与法线,因此合成器里必须先有 RenderPass,
再接 SSAOPass,最后用 OutputPass 做色彩空间转换。
顺序错了会得到全黑屏或者没有遮蔽结果。
SSAOPass 内部会额外渲染一遍法线与深度,也就是说场景被画了两次。
这层开销在复杂场景里不可忽略,必须配合性能预算一起考虑。
| 参数 | 取值 | 说明 |
|---|---|---|
kernelRadius | 8 | 采样半球半径,越大遮蔽越夸张 |
minDistance | 0.005 | 过滤过近的噪点 |
maxDistance | 0.12 | 限制遮蔽的影响深度 |
| 输出 | 成片 / 仅遮蔽 | 调试时看后者更直观 |
为什么只适合小范围
屏幕空间意味着「画面之外的信息一律不可见」。远处的山挡住近处的谷地, 阴影交界处的遮蔽就会缺失或错位。视距越远,这个问题越明显。
大地形场景通常只在近景启用 SSAO,远景用烘焙好的环境光贴图代替。 两者混用时要注意色调衔接,否则拉远镜头会看到亮度突变。
分辨率变化要通知所有环节。渲染器、合成器、SSAO 各自持有尺寸, 窗口变化时必须全部同步,漏掉一级会让遮蔽结果与画面对不上,出现错位的暗边。