cesium后处理6（体积云-噪声云图版）

置顶 已于 2025-05-17 17:13:27 修改
阅读量500 收藏
点赞数
分类专栏： cesium实战 文章标签： 前端 着色器 cesium javascript 后处理
于 2025-01-07 23:41:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46730573/article/details/144995189
版权
cesium实战 专栏收录该内容
121 篇文章 ¥129.90 ¥299.90
订阅专栏

cesium后处理（体积云-噪声云图版）

更多内容/样例cesium实战目录

在这里插入图片描述
在这里插入图片描述

实现思路
一、先说一下大概思路：

1、要实现局部体积云我们首先要加载一个box盒子。
2、以Box中心点建立一个局部坐标系，每个片元还原到世界坐标，然后转到这个局部坐标系，通过判断坐标值的大小就可以判断这个片元是否在该Box内，如果在内，就设置颜色为蓝色。我们按照思路编写代码，因为要转坐标系，首先我们通过Box的原点坐标建立一个局部坐标系
3、将次坐标系信息传入后处理着色器，

了解本专栏 订阅专栏 解锁全文
cesium实战目录必看
God's asylum的博客
08-08 4909
本文作者长期从事GIS相关工作，专注于三维和地图可视化领域，熟悉Cesium、Three.js、WebGL等开发框架。文章目录展示了作者在Cesium应用中的多项技术实践，涵盖水面反射、离屏渲染、后处理效果、地形裁剪、Shader着色器、动态单体化、气象图、缓冲区域、坡度和坡向分析、三维热力图、通视分析、态势标绘等多个方面。这些内容为开发者提供了丰富的技术参考，展示了Cesium在三维可视化中的强大功能和应用场景。
cesium 后处理7（局部体积云）
God's asylum的博客
01-15 387
本文介绍了如何在Cesium中实现局部体积云效果。通过使用Cesium的着色器功能，开发者可以自定义云的外观和行为。文章提供了完整的HTML代码示例，展示了如何设置Cesium场景、地形以及云的相关参数，如云覆盖度、风速、云层厚度等。着色器代码部分详细解释了如何计算射线与云盒子的交点距离，并定义了云的最大细节级别、步进距离等参数。通过这些设置，开发者可以在Cesium中创建逼真的局部体积云效果，增强三维场景的视觉效果。
Cesium 大气散射效果+体积云
北京-giser的博客
03-03 437
Cesium 大气散射效果+体积云
Cesium中实现全球体积云
weixin_43481439的博客
12-18 4424
体积云的密度计算比较简单，只需要在 RayMarching 的过程中，采样相应的噪声图，并累加噪声结果，直到达到噪声最大值或者结束步进。体渲染通常对性能消耗是很大的，因此为了保证帧数，体积云的渲染会采用较低的步进次数，这样做会导致云渲染出现分层。从该点向摄像机方向做步进，累加噪声值得到该点在摄像机方向的“深度”，深度越大损失的光能越多。与其他渲染云的方式不同，体积云是真正具有体积感的云，一个最简单的区分方式是，在某点向光源方向做 8 次步进，前 3 次在云的内部，后 5 次在云的外部。
Cesium学习笔记——随机生成大面积云及封装
最新发布
mingyu_mingyu的博客
04-17 1232
在之前的笔记中，我们了解了如何用Cesium内置的CumulusCloud制作积云，但是，在实际项目中一般都是大面积生成云朵，而不是手动生成。这一次，我们来学习一下如何大面积生成积云。随机生成大面积云一共分3步，首先，绘制一个面，然后，在面内随机生成点的坐标，最后在这些地方生成云朵就好了。
Cesium高阶学习十二、体积云
程迷学习的博客
10-11 2734
Cesium高阶学习十二、体积云
Cesium中实现体积云和大气美化效果
weixin_43481439的博客
02-14 1401
因此第一步当然是先计算从相机出发的视线，是否与大气外层球体相交。如果不相交，说明该视线方向上不会发生大气散射，此时，直接返回透明色即可。
Cesium高级教程-后处理体积云-体积云原理
xt3d的博客
10-23 1359
实现体渲染，更接近真实的体渲染效果，但是此方式需要在片元着色器中还原世界坐标，相对麻烦一点，不过在后处理中还原世界坐标的相关知识，相信对于此阶段的您已不成问题，如果相关知识您还不会，可以先看看。要实现体积云，我们可以先参考游戏引擎的相关代码，作者实现体积云也是参考的其他引擎的代码，所以本章的重点在于讲解在Cesium的整体实现思路，至于涉及到的着色器里面的计算原理，作者也是。因为光线步进的原理是模拟光的前进，所以光从哪儿前进，每次前进多少，最多前进多远这些参数的设置对程序的性能有很大影响。
Cesium 局部体积云 + 雷电效果
qq_34504481的博客
07-16 499
Cesium 局部雷电效果体积云。
Cesium高级教程-后处理体积云-实现简单的体积云效果
xt3d的博客
10-23 1650
你可以先看看文章，然后自己思考有没有难点，如果觉得没有，可以自己先实现一遍，看能不能做出来，因为学习其实最重要的是过程，而不是结果。的中心点，所以他直接使用相关坐标进行计算，而我们的盒子中心并不在世界坐标的中心，所以不能直接算，需要像上一节那样建立一个。为了提高光线步进的性能，需要将射线的起点设置到与盒子最近的点，从该点开始前进，这就省去了相机到盒子这段的距离。本节到此结束，至于后面的改进，如果您有时间，可以继续研究，作为教程，到此已经包含所有体积云的关键知识点。实现简单的体积云，我们先参考这篇博客。
Cesium 实现UE5大气、体积云等特效
zwzhlj100000的专栏
09-13 1995
Cesium 不修改源码 实现UE5 大气、环境特效，包括大气渲染、体积云、雾等环境特效模拟，可设置云层厚度、云层高度、风速、风向等模拟参数
基于Cesium+VUE实现的空间体体积计算功能组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-18
基于Cesium+VUE实现的空间体体积计算功能组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行 其中涉及到的引用turf可以自行下载：https://turfjs.fenxianglu.cn/category/，或者 npm install @turf/turf 形式安装。 文章描述：https://blog.csdn.net/qq_34205305/article/details/125335419 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论或者私信，百分百回复哦
体积云插件
04-26
体积云插件，各种云朵模型和相关shader，以及相关插件的使用
Cesium 体积云实践总结
qq_34447899的博客
03-06 3079
参考网上各路大佬的资料，做了cesium的体积云，记录分享一下。
Cesium高级教程-后处理体积云-实现更逼真的体积云
xt3d的博客
10-23 1211
上一节我们参考博客实现了简单的体积云效果，虽然勉强得到了一个体积云，但是因为是从一张2D柏林噪声纹理中获取云的噪声数据，所以看上去效果并不那么完美，本节我们看看更逼真的体积云如何实现。更逼真的体积云效果作者也是参考游戏引擎和多篇大佬的博客实现的，最主要的就是噪声数据的获取，其他的和前一节一样，先附上。方法用于计算当前的片元云的颜色，计算出云的颜色后，将此颜色与片元原本的颜色进行混合，得到最终的颜色。最后根据云的密度生成云的颜色返回，计算云的密度最后使用的是。方法中开始讲起，和前一节的区别在于多了一个。
Cesium 实现UE5大气、体积云等特效-最终版
zwzhlj100000的专栏
10-08 1813
原生Cesium 实现UE5大气、体积云等特效，包括云层高度、风速、风向等参数设置模拟，兼容Cesium最新版本
Cesium 全球体积云
北京-giser的博客
10-21 597
Cesium 全球体积云
Cesium中实现全球体积云效果的一种方案
2301_79959413的博客
07-10 6434
本文介绍的全球体积云实现方案主要是把现有的一些开源方案做了组合，它不需要依赖外部的噪声纹理，也不用再从片元向光源步进去计算云层的漫反射光颜色，优势是实现步骤简单明了，在仿真要求不是特别高的场景是够用的。，其中 raySphereDst 函数用于计算射线和球体的相交情况，rayCloudLayerDst 函数计算从相机发出的射线和云层最小高度和最大高度分别确定的两个球体的相交情况，从而得到体积云渲染光线步进的起点和终点。上面的步骤分别是体数据的生成和光线步进起止点的计算，体积云的正式渲染可以参考。
Cesium高级教程-后处理体积云-后处画一个Box
xt3d的博客
10-23 1146
这是因为后处理就是一副画，这是一个二维的概念，所以肯定没有立体的效果。中心点建立一个局部坐标系，每个片元还原到世界坐标，然后转到这个局部坐标系，通过判断坐标值的大小就可以判断这个片元是否在该。然后将次坐标系信息传入后处理着色器，着色器中每个片元坐标先还原为世界坐标，然后转到该坐标系下，最后进行坐标数值比较。如果有交点，那么该片元就被遮蔽，所以问题转为相机到片元的射线和Box求交，射线和Box求交有很多算法，这里采用。所遮蔽的片元设置为蓝色即可，这里就涉及到一个重要的知识，的需要哪些信息，一般需要知道。
npm install cesium @cesium/engine vite-plugin-cesium -D
03-29
### 安装 Cesium 及其相关依赖项 为了在基于 Vite 的项目中使用 Cesium，可以通过以下方法安装所需的依赖项并将其设置为开发依赖： #### 使用 npm 进行安装 运行以下命令可以一次性完成 `cesium`、`@cesium/engine...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS-CL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值