GIS融合之路(六)-Cesium的雨雪风雷电效果

终于来到系列第六篇了,也来到大家最喜闻乐见天气效果

系列传送门:

山海鲸可视化:GIS融合之路(一)技术选型CesiumJS/loaders.gl/iTowns?

山海鲸可视化:GIS融合之路(二)CesiumJS和ThreeJS深度缓冲区整合

山海鲸可视化:GIS融合之路(三)CesiumJS和ThreeJS相机同步

山海鲸可视化:GIS融合之路(四)如何用CesiumJS做出Cesium For Unreal的效果

山海鲸可视化:GIS融合之路(五)给CesiumJS加上体积云(Volumetric Cloud)和高度雾(Height Fog)

实际上山海鲸的孪生中已经有了所有的雨雪风电效果,甚至可以直接绑定实时数据来展示天气,具体可以参照隔壁文章:

山海鲸可视化:山海鲸如何实现动态天气

实际上雨雪雷电本身在Cesium上的直接展示基本不需要做任何的特殊处理,我们可以先看下效果:

那么和Cesium的整合有什么特别之处吗,实际上雨雪的效果就是一个粒子效果的叠加,这里并没有什么值得一提的。但Cesium本身并不支持法线贴图的输出,雪面的覆盖是需要当前的法线的,因为法线朝上的积雪的可能性是最高的。

那么Cesium中获取法线信息的方式有哪几种呢

1.倾斜摄影中可以直接通过CustomShader,只要转出来的3dtiles的顶点上有法线信息,就可以直接获取。

2.对于底图和地形,需要改写Cesium的源码修改Shader

对于1来说,一方面要求倾斜摄影转换的时候带了法线信息,同时也只能应用在倾斜摄影中当中

对于2来说,侵入性修改Cesium会导致后续的跟随升级将带来巨大的麻烦,那么剩下的选项就只有通过后处理方式获取法线了,我们现在有的信息一张ColorMap,一张DepthMap,那么留给我们的选项就只有通过dFdx和dFdy来将DepthMap转换为法线贴图。

这个过程相对简单,我们读取depthmap后直接通过以下shader代码进行处理:

scss 复制代码
vec3 vNormalW = normalize( cross(dFdy( positionW.xyz ),dFdx( positionW.xyz )) );

但由于直接的dFdx和dFdy方法输出的法线非常的闪烁,因此我们还需要在这个基础上做一次降噪让法线更加的平滑,由于我们只是用法线来做雪面覆盖,并不需要十分精确,因此我们选择采用联合双边滤波的形式来进行降噪处理,我们结合color和depth在两个维度来进行滤波,最终得到一个相对稳定的雪面覆盖结果:

相关推荐
不浪brown2 小时前
WebGISer的福利!基于Cesium+Vue3的智慧数字农田项目,开源!
前端·cesium
郭不耐4 小时前
DeepSeek智能时空数据分析(五):基于区域人口数量绘制地图散点-大模型搜集数据NL2SQL加工数据
数据分析·aigc·时序数据库·数据可视化·大屏端
anyup6 小时前
借助 Trae 从 0 到 1 实现海外地图渲染(leaflet + OSM)
前端·数据可视化·trae
郭不耐7 小时前
DeepSeek智能时空数据分析(四):绘制行政区域并定制样式
信息可视化·数据挖掘·数据分析·数据可视化
玄魂1 天前
有了Trae 上下文doc功能 ,快速上手陌生组件,再也不用提oncall了
前端·数据可视化·trae
Aloudata技术团队1 天前
Aloudata Agent 36 问,深度解惑!
大数据·数据分析·数据可视化
郭不耐2 天前
DeepSeek智能时空数据分析(三):专业级地理数据可视化赏析-《杭州市国土空间总体规划(2021-2035年)》
人工智能·信息可视化·数据分析·毕业设计·数据可视化·城市规划
生信碱移2 天前
大语言模型时代,单细胞注释也需要集思广益(mLLMCelltype)
人工智能·经验分享·深度学习·语言模型·自然语言处理·数据挖掘·数据可视化
xmyLydia2 天前
🚀 封装通用线程池 + Prometheus 可视化任务耗时与成功率(实战记录)
kafka·数据可视化
图表制作解说(目标1000个图表)3 天前
ECharts散点图-散点图15,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化