Cesium中实现高度雾效果

已于 2024-04-08 10:45:01 修改
阅读量626 收藏
点赞数 1
文章标签： 图形渲染 3d web javascript 算法 cesium
于 2023-10-20 10:11:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43481439/article/details/133940482
版权

高度雾

高度雾效果是一种在三维建模和渲染中广泛使用的技术，主要用于模拟现实世界中的雾气、烟雾等氛围效果。通过在场景中添加高度雾，可以增加场景的深度感、真实感和立体感，使渲染结果更加接近现实环境。

开启/关闭高度雾对比
现实中的高度雾

具体实现

在Cesium中可以通过后处理的方式实现高度雾效果。

主要实现思路：

  1. 根据深度还原像素点的世界坐标
  2. 根据世界坐标计算当前像素点对应的高程
  3. 根据高程和相机到像素点的距离计算雾气浓度
  4. 混合雾气浓度和原图像

其中计算雾气浓度有很多方式，根据实现方式可以分为：Linear-线性雾 、Exponetial-指数雾、Exponetial Squared-指数平方雾。

这里只是简单的使用线性雾的方式实现高度雾效果。

效果展示

由于采用后处理方式实现，因此适用于场景中所有可见的物体。
在这里插入图片描述
在这里插入图片描述

实际效果

Cesium中实现后处理高度雾之《迷雾下的阿美利坚》

原文链接

Cesium中实现高度雾效果

Allen.l
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium 场景特效之【雾气效果】
喜欢钻研前端和分享技术
04-18 723
cesium天气效果
第43节：cesium 大雾效果（自定义代码）（含源码+视频）
qq_29384639的博客
07-10 477
cesium 大雾效果
Cesium 封装雾效果
QQhelphelp的博客
01-28 196
Cesium 封装雾效果。
GIS融合之路（五）给CesiumJS加上体积云（Volumetric Cloud）和高度雾（Height Fog）
shanhaijing_bi的博客
07-06 711
上一篇文章我们已经将大气散射和空气透视的效果整合到了CesiumJS之上，不过真实感渲染除了大气部分，还有体积云和高度雾。相比于大气散射来说，体积云可以说要复杂的多.
cesium 实战008--场景效果 （雾）
最新发布
weixin_47907069的博客
03-25 249
【代码】cesium 实战007--场景效果 （雾）
cesium 实现天气效果雨雪雾
11-04
完整cesium实现雨雪雾效果，比较全，欢迎下载交流指正。
Cesium之雾的实现
http://8.130.10.148:3000/digitaltwin/index.html
07-02 549
以前记录的文章。雾是一种让远处几何渐隐的图形技术。早期的游戏引入了雾来隐藏在远处渲染的几何图形。即使在不再需要它之后，游戏仍然支持fog，因为它增加了场景的真实性，减少了draw call的数量，因为完全在fog中的几何体可以被剔除。在Cesium中，雾是大气颜色和地平线上地形的混合。部分处于雾中的地形瓦片会增加其屏幕空间误差（SSE），这样可以渲染低分辨率的地形。完全在雾中的瓦片将被完全剔除，甚至不被请求。这些优化将地平线视图中渲染的瓦片和从服务器请求的瓦片的数量都减少了35%。
cesium 实现雾霾效果
LBY_XK的博客
07-18 407
【代码】cesium 实现雾霾效果。
cesium 实现风场图效果
08-01
cesium加载风场效果
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气）
07-11
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气） 参考链接：https://blog.csdn.net/qq_35984445/article/details/125743739 天际线已公布 资源链接：https://download.csdn.net/download/qq_35984445/86744804
Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；
12-31
Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；
Cesium实现动态扩散预警
06-21
Cesium预警效果---动态扩散圆圈。用户可在界面动态调整扩散范围、扩散速度、波纹数量以及扩散效果的颜色。附带框架的完整源码，一键部署运行。
Cesium实现线条流动效果.rar
10-10
线条流动效果的实现，通过修改纹理的图片和流动时间来实现不同的效果。网上合适的资源不太好找。希望大家喜欢。
cesium 天气效果（雾）
God's asylum的博客
02-09 951
cesium 雾天效果，代码用es6编写，直接复制调用即可
第44节：cesium 大雾效果（cesium自带）（含源码+视频）
qq_29384639的博客
07-10 1304
cesium 大雾效果（cesium自带）
cesium张贴卫星云图离地30万米形成戴森球效果
左直拳的马桶_日用桶
07-30 2230
在平面GIS开发中，有时会装下逼，在地图上贴一张卫星云图 作为二维生物，没有高度的概念，卫星云图与下面的地图融为一体，没有高下之分。 但在三维GIS中，如果贴个卫星云图，还紧紧地贴在地面上，仿佛膏药似的，就体现不出立体的优势了。 当然啦，云层应该就是离地面不到万米而已，贴上去，也看不出什么垂直高度。但为了看出效果，不妨夸张一点，让卫星云图漂浮在地球上面的太空，形成戴森球。这样才过瘾。楚帮场，丁炸桥，孔过瘾。 怎么弄呢？ 思路是这样的： 1、构造一个矩形图元（Cesium.Primitive），此图元范
cesium天气效果——雾天效果
专注GIS开发
01-20 3348
cesium实现雾天效果
Cesium中实现灯泡的效果
04-05
在Cesium中实现灯泡的效果，可以通过以下步骤完成： 1. 创建一个圆锥体(Cone)，作为灯泡的光源。 2. 设置圆锥体的位置、方向和半角，以控制光线的发射方向和范围。 3. 创建一个材质(Material)，设置光线的颜色和强度。 4. 创建一个Entity对象，将圆锥体和材质添加到该对象中。 5. 将Entity对象添加到Cesium Viewer中，以显示灯泡的效果。 下面是一个示例代码，实现在Cesium中创建一个灯泡的效果： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 创建一个圆锥体 var cone = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), cylinder: { length: 10000.0, topRadius: 0.0, bottomRadius: 5000.0 }, orientation: Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_X, Cesium.Math.toRadians(-90)), material: new Cesium.Color(1.0, 1.0, 1.0, 0.5) }); // 创建一个材质，设置光线颜色和强度 var material = new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: new Cesium.Color(1.0, 1.0, 1.0, 0.5) } } }); // 创建Entity对象，将圆锥体和材质添加到该对象中 var entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), cylinder: { length: 10000.0, topRadius: 0.0, bottomRadius: 5000.0 }, orientation: Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_X, Cesium.Math.toRadians(-90)), material: material }); // 将Entity对象添加到Cesium Viewer中，以显示灯泡的效果 viewer.zoomTo(viewer.entities); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值