最近在给Cesium项目做优化,加载3D Tiles模型后,我陷入了深深的自我怀疑——
这模型怎么又黑又蓝呢??
我怀疑过模型本身,怀疑过光照,甚至怀疑过我的显示器是不是坏了...
直到我发现,问题不在模型,而在Cesium的渲染参数。
今天就把我摸索出来的"去蓝提亮"组合拳分享给大家,全程只需改几个参数,效果立竿见影
具体效果如图所示:
第一招:先把画面"稳住"(抗锯齿三件套)
我的解决方案是HDR + MSAA + FXAA 全家桶:
const scene = viewer.scene;
// 开启HDR,让高光不糊成一片白,暗部更有层次
scene.highDynamicRange = true;
// MSAA 8倍采样,专治几何边缘锯齿(建筑轮廓、斜线)
scene.msaaSamples = 8;
// 伽马校正2.2,让明暗过渡更自然,符合人眼习惯
scene.gamma = 2.2;
// FXAA后处理抗锯齿,对付细碎高频锯齿(贴图细线、远处密集结构)
viewer.scene.fxaa = true;
人话解释:
- HDR = 让画面有"动态范围",亮的地方能亮上去,暗的地方不死黑
- MSAA = 给模型边缘做"磨皮"(几何层面)
- FXAA = 给整个画面做"柔焦"(后处理层面)
- 两者叠加,既保住细节又去掉了毛刺
💡 小提示:MSAA开太高会吃GPU,8是个比较甜的平衡点
第二招:干掉"天光蓝"(PBR环境光调色)
这是重头戏!Cesium默认的PBR光照,特别喜欢给你加"蓝色滤镜"——因为模拟了真实的大气散射,天光确实是偏蓝的,但我们做的是数字孪生,不是天气预报,不需要那么真实(且难看)的蓝色。
核心思路:保留亮度,干掉偏色。
// 只保留环境漫反射,关掉环境镜面反射(减少镜面偏色)
tiles.imageBasedLighting.imageBasedLightingFactor = new Cesium.Cartesian2(1.0, 0.0);
const env = tiles.environmentMapManager;
// 1. 提亮整体环境光
env.brightness = 1.5;
// 2. ★ 关键:降低大气散射强度,这是"发蓝"的罪魁祸首!
env.atmosphereScatteringIntensity = 1.0;
// 3. 把环境光"去色",进一步抑制偏色
env.saturation = 0;
// 4. 改地面回光颜色:从默认的偏绿/土色 → 中性浅灰白
// 这样模型底部暗部不会染上奇怪的颜色
env.groundColor = Cesium.Color.fromBytes(230, 230, 230);
第三招:我的调参顺序建议
别一次性改一堆,建议按这个顺序来,方便定位问题:
- 先开HDR + gamma → 看明暗层次是否舒服
- 加MSAA + FXAA → 看边缘是否还锯齿
- 调 brightness → 解决"不够亮"
- 降 atmosphereScatteringIntensity → 解决"发蓝"
- 降 saturation + 改 groundColor → 微调至"展厅级"质感
最终效果总结
用这套组合拳后,我的模型从灰蓝色变成了 "明亮干净的展厅效果":
✅ 更亮 —— brightness提升,不再灰蒙蒙
✅ 更白 —— 干掉大气蓝,白墙就是白墙
✅ 更稳 —— MSAA+FXAA,边缘不毛躁
✅ 更干净 —— 中性groundColor,暗部不染色
(备注:cesium版本是1.135)