Gods 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-viewGods Eye View是一个运行在浏览器里的间谍卫星模拟器它把真实的航班、船舶、卫星、地震与公共摄像头数据融合到一个照片级真实感的 3D 地球上。而它最违和的卖点是用一组GLSL 后处理着色器把整个实时地球瞬间换装成 FLIR 热成像、黑色电影Noir、飘雪的冬天等视觉风格——按数字键1~7即可无缝切换。本文带你读懂这三个着色器的实现思路并学会在 CesiumJS 中挂载自己的后处理管线。 第一步认识 Gods Eye View 的 6 套视觉风格Gods Eye View 一共内置了 6 套视觉风格每一套对应src/styles/目录下的一个独立 GLSL 着色器模块按键风格着色器文件效果一句话1Retro CRTretro.js老式显像管电视的像素化与抖动2NVG 夜视surveillance.jsP43 磷光绿夜视仪 蜂巢纹理 扫描线3FLIR 热成像thermal.js白热/黑热模式、Ironbow 配色、模拟温度读数4Animeanime.js赛璐璐量化 饱和增强的动画电影感5Noirnoir.js黑白高对比 胶片颗粒 暗角的侦探片质感6Snowsnow.js五层视差雪花 冷色调 底部薄雾所有着色器在 src/ui/visualPresets.js 中汇总为一张STYLES表启动时统一注册进渲染管线。切换时不是开关灯而是对intensity参数做500 毫秒的交叉淡入淡出见 src/ui/visualPresets.js 中的TRANSITION_DURATION_MS所以整个地球会像调光一样平滑过渡。 FLIR 热成像着色器在 300 行 GLSL 里造一台捕食者thermal.js 是最复杂的一个文件头注释就写明了它的目标军用级热成像包含白热/黑热模式、相干时域噪声、热点泛光、温度色带和全 GLSL HUD。核心技巧拆开看有 5 个Ironbow 色带真实热成像标志性的捕食者配色黑→深紫→品红→红→橙→黄→白并不是贴图而是 6 段mix()手工拼接的调色函数见 src/styles/thermal.js。亮度即温度没有真实红外数据着色器直接把画面亮度重新映射为 0~1 的温度用sensitivityuniform 控制对比范围src/styles/thermal.js。热点泛光对每个像素做 9×9 邻域加权采样只让够热的像素向外晕染——这就是热成像里车灯、引擎炸开一圈的观感src/styles/thermal.js。相干噪声用 FBM分形布朗运动叠加 4 层 value noise 并缓慢漂移模拟热像仪特有的云状噪声而不是逐像素白噪点src/styles/thermal.js。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函数值得细读它用格子哈希在着色器里凭空生成雪花把 UV 空间放大切格每个格子用hash()取两个伪随机坐标作为雪花位置uv.y time * speed让雪往下落sin(time * 0.5 layer * 3.14)驱动左右摇摆的风每层检查 3×3 邻域格子避免雪花在格子边界闪现主函数里叠加 5 层不同深度、速度和尺寸的雪层src/styles/snow.js近大远小形成视差。再配合冷色调偏移vec3(0.85, 0.9, 1.1)、亮部结霜和屏幕底部薄雾实时地球就变成了一个正在下雪的冬天。⚙️ 关键机制着色器如何挂进 CesiumJS 管线理解了单个着色器剩下的是工程集成核心代码在 src/ui/visualEffects.js遍历STYLES表为每个风格创建一个 Cesium 的PostProcessStage把fragmentShader和全部 uniform 默认值传入每个 stage 都带一个intensityuniform——着色器内所有效果都乘以它最后用mix(原图, 效果, intensity)合成这样强度为 0时输出就是原图天然支持平滑过渡需要动画的着色器如 FLIR 噪声、雪花声明uniform float time运行时每帧推进stage.enabled value 0.001强度为 0 时直接跳过整个 stage零额外渲染开销。这套intensity 驱动 500ms 交叉淡入淡出的模式是你给任何 WebGL 应用加视觉风格时可以直接抄的架构。 五步上手本地跑起来亲手切换克隆仓库需要Node.js 24.xgit clone https://gitcode.com/GitHub_Trending/go/gods-eye-view.git cd gods-eye-view npm ci npm run dev浏览器打开http://localhost:4173无需任何 API key 即可看到卫星底图 实时航班按1~7快速切换 CRT / NVG / FLIR / Anime / Noir / Snow打开显示面板拖动各风格的 Sensitivity、Grain、Density 等 uniform 滑杆感受参数如何实时改变 GLSL 输出;想加自己的风格新建一个文件导出{ name, uniforms, fragmentShader }对象仿照 noir.js 的写法然后在 src/ui/visualPresets.js 的STYLES表里注册即可。更多运行时细节可参考 docs/CURRENT-STATE.md 与 docs/PERFORMANCE.md数据源清单见 DATA_SOURCES.md。 小结Gods 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
God‘s Eye View实战教程：如何从零编写GLSL后处理着色器（FLIR/Noir/Snow视觉风格）
Gods 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-viewGods Eye View是一个运行在浏览器里的间谍卫星模拟器它把真实的航班、船舶、卫星、地震与公共摄像头数据融合到一个照片级真实感的 3D 地球上。而它最违和的卖点是用一组GLSL 后处理着色器把整个实时地球瞬间换装成 FLIR 热成像、黑色电影Noir、飘雪的冬天等视觉风格——按数字键1~7即可无缝切换。本文带你读懂这三个着色器的实现思路并学会在 CesiumJS 中挂载自己的后处理管线。 第一步认识 Gods Eye View 的 6 套视觉风格Gods Eye View 一共内置了 6 套视觉风格每一套对应src/styles/目录下的一个独立 GLSL 着色器模块按键风格着色器文件效果一句话1Retro CRTretro.js老式显像管电视的像素化与抖动2NVG 夜视surveillance.jsP43 磷光绿夜视仪 蜂巢纹理 扫描线3FLIR 热成像thermal.js白热/黑热模式、Ironbow 配色、模拟温度读数4Animeanime.js赛璐璐量化 饱和增强的动画电影感5Noirnoir.js黑白高对比 胶片颗粒 暗角的侦探片质感6Snowsnow.js五层视差雪花 冷色调 底部薄雾所有着色器在 src/ui/visualPresets.js 中汇总为一张STYLES表启动时统一注册进渲染管线。切换时不是开关灯而是对intensity参数做500 毫秒的交叉淡入淡出见 src/ui/visualPresets.js 中的TRANSITION_DURATION_MS所以整个地球会像调光一样平滑过渡。 FLIR 热成像着色器在 300 行 GLSL 里造一台捕食者thermal.js 是最复杂的一个文件头注释就写明了它的目标军用级热成像包含白热/黑热模式、相干时域噪声、热点泛光、温度色带和全 GLSL HUD。核心技巧拆开看有 5 个Ironbow 色带真实热成像标志性的捕食者配色黑→深紫→品红→红→橙→黄→白并不是贴图而是 6 段mix()手工拼接的调色函数见 src/styles/thermal.js。亮度即温度没有真实红外数据着色器直接把画面亮度重新映射为 0~1 的温度用sensitivityuniform 控制对比范围src/styles/thermal.js。热点泛光对每个像素做 9×9 邻域加权采样只让够热的像素向外晕染——这就是热成像里车灯、引擎炸开一圈的观感src/styles/thermal.js。相干噪声用 FBM分形布朗运动叠加 4 层 value noise 并缓慢漂移模拟热像仪特有的云状噪声而不是逐像素白噪点src/styles/thermal.js。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函数值得细读它用格子哈希在着色器里凭空生成雪花把 UV 空间放大切格每个格子用hash()取两个伪随机坐标作为雪花位置uv.y time * speed让雪往下落sin(time * 0.5 layer * 3.14)驱动左右摇摆的风每层检查 3×3 邻域格子避免雪花在格子边界闪现主函数里叠加 5 层不同深度、速度和尺寸的雪层src/styles/snow.js近大远小形成视差。再配合冷色调偏移vec3(0.85, 0.9, 1.1)、亮部结霜和屏幕底部薄雾实时地球就变成了一个正在下雪的冬天。⚙️ 关键机制着色器如何挂进 CesiumJS 管线理解了单个着色器剩下的是工程集成核心代码在 src/ui/visualEffects.js遍历STYLES表为每个风格创建一个 Cesium 的PostProcessStage把fragmentShader和全部 uniform 默认值传入每个 stage 都带一个intensityuniform——着色器内所有效果都乘以它最后用mix(原图, 效果, intensity)合成这样强度为 0时输出就是原图天然支持平滑过渡需要动画的着色器如 FLIR 噪声、雪花声明uniform float time运行时每帧推进stage.enabled value 0.001强度为 0 时直接跳过整个 stage零额外渲染开销。这套intensity 驱动 500ms 交叉淡入淡出的模式是你给任何 WebGL 应用加视觉风格时可以直接抄的架构。 五步上手本地跑起来亲手切换克隆仓库需要Node.js 24.xgit clone https://gitcode.com/GitHub_Trending/go/gods-eye-view.git cd gods-eye-view npm ci npm run dev浏览器打开http://localhost:4173无需任何 API key 即可看到卫星底图 实时航班按1~7快速切换 CRT / NVG / FLIR / Anime / Noir / Snow打开显示面板拖动各风格的 Sensitivity、Grain、Density 等 uniform 滑杆感受参数如何实时改变 GLSL 输出;想加自己的风格新建一个文件导出{ name, uniforms, fragmentShader }对象仿照 noir.js 的写法然后在 src/ui/visualPresets.js 的STYLES表里注册即可。更多运行时细节可参考 docs/CURRENT-STATE.md 与 docs/PERFORMANCE.md数据源清单见 DATA_SOURCES.md。 小结Gods 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
