God‘s Eye View实战教程：如何从零编写GLSL后处理着色器（FLIR/Noir/Snow视觉风格）

God's Eye View实战教程：如何从零编写GLSL后处理着色器（FLIR/Noir/Snow视觉风格）

【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view

God's Eye View是一个运行在浏览器里的间谍卫星模拟器：它把真实的航班、船舶、卫星、地震与公共摄像头数据融合到一个照片级真实感的 3D 地球上。而它最"违和"的卖点，是用一组GLSL 后处理着色器把整个实时地球瞬间换装成 FLIR 热成像、黑色电影（Noir）、飘雪的冬天等视觉风格——按数字键1~7即可无缝切换。本文带你读懂这三个着色器的实现思路，并学会在 CesiumJS 中挂载自己的后处理管线。

🎨 第一步：认识 God's Eye View 的 6 套视觉风格

God's Eye View 一共内置了 6 套视觉风格，每一套对应src/styles/目录下的一个独立 GLSL 着色器模块：

所有着色器在 src/ui/visualPresets.js 中汇总为一张STYLES表，启动时统一注册进渲染管线。切换时不是"开关灯"，而是对intensity参数做500 毫秒的交叉淡入淡出（见 src/ui/visualPresets.js 中的TRANSITION_DURATION_MS），所以整个地球会像调光一样平滑过渡。

🔥 FLIR 热成像着色器：在 300 行 GLSL 里造一台"捕食者"

thermal.js 是最复杂的一个，文件头注释就写明了它的目标：军用级热成像，包含白热/黑热模式、相干时域噪声、热点泛光、温度色带和全 GLSL HUD。核心技巧拆开看有 5 个：

1. Ironbow 色带：真实热成像标志性的"捕食者"配色（黑→深紫→品红→红→橙→黄→白）并不是贴图，而是 6 段mix()手工拼接的调色函数，见 src/styles/thermal.js。
2. 亮度即温度：没有真实红外数据，着色器直接把画面亮度重新映射为 0~1 的"温度"，用sensitivityuniform 控制对比范围（src/styles/thermal.js）。
3. 热点泛光：对每个像素做 9×9 邻域加权采样，只让"够热"的像素向外晕染——这就是热成像里车灯、引擎"炸"开一圈的观感（src/styles/thermal.js）。
4. 相干噪声：用 FBM（分形布朗运动）叠加 4 层 value noise 并缓慢漂移，模拟热像仪特有的"云状"噪声，而不是逐像素白噪点（src/styles/thermal.js）。
5. GLSL 画 HUD：右上角的"温度读数"是一台纯着色器实现的 7 段数码管渲染器——用位移掩码（0x7E、0x6D…）决定哪些段点亮（src/styles/thermal.js），配合中心准星、右侧色标条，整套 HUD 零 DOM 开销。

🕵️ Noir 黑色电影着色器：4 个算子拍出侦探片

noir.js 是学习"氛围感着色器"的最佳范本，整个main()只有 4 个步骤（src/styles/noir.js）：

• 去饱和：按人眼感知权重（0.299/0.587/0.114）算出亮度，与彩色混合得到灰度；
• S 曲线对比：(color - 0.5) * contrast + 0.5一行代码拉出高对比；
• 胶片颗粒：经典fract(sin(dot(uv, ...)) * 43758.5453)哈希噪声，按grainAmt强度叠加；
• 暗角 + 暖调：uv * (1.0 - uv)计算到中心的距离做暗角，再混入 15% 棕褐色，黑白画面立刻有了旧胶片温度。

整个流程由contrastAmt、grainAmt、vignetteAmt三个 uniform 驱动，用户可在界面里实时拖动调节——这就是后处理着色器的标准结构：效果 = 固定管线 + 可暴露的 uniform 旋钮。

❄️ Snow 降雪着色器：五层视差雪 + 风向

snow.js 的snowLayer函数值得细读，它用格子哈希在着色器里凭空生成雪花：

1. 把 UV 空间放大切格，每个格子用hash()取两个伪随机坐标作为雪花位置；
2. uv.y += time * speed让雪往下落，sin(time * 0.5 + layer * 3.14)驱动左右摇摆的风；
3. 每层检查 3×3 邻域格子，避免雪花在格子边界"闪现"；
4. 主函数里叠加 5 层不同深度、速度和尺寸的雪层（src/styles/snow.js），近大远小形成视差。

再配合冷色调偏移（vec3(0.85, 0.9, 1.1)）、亮部结霜和屏幕底部薄雾，实时地球就变成了一个正在下雪的冬天。

⚙️ 关键机制：着色器如何挂进 CesiumJS 管线

理解了单个着色器，剩下的是工程集成，核心代码在 src/ui/visualEffects.js：

1. 遍历STYLES表，为每个风格创建一个 Cesium 的PostProcessStage，把fragmentShader和全部 uniform 默认值传入；
2. 每个 stage 都带一个intensityuniform——着色器内所有效果都乘以它，最后用mix(原图, 效果, intensity)合成，这样"强度为 0"时输出就是原图，天然支持平滑过渡；
3. 需要动画的着色器（如 FLIR 噪声、雪花）声明uniform float time，运行时每帧推进；
4. stage.enabled = value > 0.001：强度为 0 时直接跳过整个 stage，零额外渲染开销。

这套"intensity 驱动 + 500ms 交叉淡入淡出"的模式，是你给任何 WebGL 应用加视觉风格时可以直接抄的架构。

🚀 五步上手：本地跑起来亲手切换

1. 克隆仓库（需要Node.js 24.x+）：

   git clone https://gitcode.com/GitHub_Trending/go/gods-eye-view.git cd gods-eye-view npm ci && npm run dev

2. 浏览器打开http://localhost:4173，无需任何 API key 即可看到卫星底图 + 实时航班；

3. 按1~7快速切换 CRT / NVG / FLIR / Anime / Noir / Snow；

4. 打开显示面板，拖动各风格的 Sensitivity、Grain、Density 等 uniform 滑杆，感受参数如何实时改变 GLSL 输出;

5. 想加自己的风格？新建一个文件导出{ name, uniforms, fragmentShader }对象，仿照 noir.js 的写法，然后在 src/ui/visualPresets.js 的STYLES表里注册即可。

更多运行时细节可参考 docs/CURRENT-STATE.md 与 docs/PERFORMANCE.md，数据源清单见 DATA_SOURCES.md。

📌 小结

God's Eye View 证明了 GLSL 后处理着色器的价值：不碰一张纹理、不加一帧数据，只靠 300 行片元着色器，就能让一个实时 3D 地球在 FLIR 热成像、黑色电影和雪夜之间自由换装。其可复用的三板斧——intensity 统一驱动所有效果、uniform 暴露为 UI 旋钮、固定时长交叉淡出——足以成为你下一个 WebGL 项目里"视觉风格系统"的起点。

【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view