首页 / three.js / 使用示例
泛光
十六个自发光几何体围成一圈,亮度超过阈值的部分向外扩散。 强度、半径、阈值三个滑杆分别控制光晕的浓度、范围与触发门槛。
源码与运行效果
阈值决定谁能发光
threshold 是亮度下限,低于它的像素完全不参与泛光。
示例的自发光强度设到 3.2,配合 0.55 的阈值,只有几何体本身发光,
地面与背景保持干净。
阈值调低到 0 时,整片画面都会参与模糊,得到雾蒙蒙的效果; 调高到接近 1 则只剩最亮的中心点。夜景类场景通常在 0.4 到 0.7 之间。
| 参数 | 默认 | 观感 |
|---|---|---|
strength | 1.1 | 光晕浓度,0 即完全关闭 |
radius | 0.5 | 扩散范围,超过 0.8 会盖住细节 |
threshold | 0.55 | 参与发光的亮度门槛 |
| 自发光强度 | 3.2 | 决定像素是否越过门槛 |
为什么最后还要 OutputPass
合成器里的中间纹理是线性空间、高动态范围的。
OutputPass 负责做色调映射与 sRGB 编码,
少了它画面会偏暗偏灰,泛光也会集中在极少数像素上。
泛光会吃掉小字。半径超过 0.7 时,密集的标注文字会被光晕糊在一起。 需要同时保留文字可读性的界面,应该只在三维图层上做泛光, 文字放在 DOM 层,或者把泛光半径压到 0.3 以下。