首页 / three.js / 使用示例
体积光散射
三层山脊挡住低角度的太阳,光束从山后透出。 效果由一段自定义着色器完成:从每个像素出发,沿指向太阳的方向逐步采样并累积亮部。
源码与运行效果
沿一条线累加
每个像素向太阳的屏幕位置连一条线,在这条线上采样四十次, 把亮部按递减权重加起来。遮挡物边缘的亮像素会在整条线上留下痕迹, 看起来就像光从缝里漏过来。
真实体积光需要沿视线在三维空间里步进,计算量高得多。 屏幕空间的径向模糊只借用已有画面,成本恒定,对远景剪影类场景足够。
| uniform | 取值 | 作用 |
|---|---|---|
uLight | 每帧投影 | 太阳在屏幕上的 UV |
uStrength | 1.0 | 散射强度 |
uDecay | 0.94 | 每次采样的权重衰减 |
uAspect | 宽高比 | 让距离衰减不被拉伸 |
亮度筛选很关键
示例用 smoothstep(0.55, 0.95, brightness) 只让高亮像素参与累积。
去掉这一步,整片画面都会被模糊,得到一层均匀的灰雾而不是光束。
太阳出画时的处理。投影坐标超出 0 到 1 时,光线仍然会朝画面外累积, 结果通常是整屏发白。稳妥的做法是在 CPU 侧判断太阳是否在视锥内, 不在时把强度降到零或直接跳过这个 pass。