- 博客(312)
- 收藏
- 关注
RSS订阅
原创 Cesium高级教程-教程简介
本教程包含离屏渲染、反射水面、体渲染、体积云等Cesium高级开发内容的原理讲解及实现， 适合想要学习Cesium高级开发技能的Cesium开发者，需要具备一定的Cesium开发基础和一定的WebGL知识。教程采用图文结合，原理讲解+代码实现的方式，保证每个人都能够看得懂学得会。教程所涉及到的示例代码都已放到文章之中，您只需按照教程的步骤，复制对应的代码，即可实现一样的效果。但是本教程的价值不在于这些代码，而在于代码所包含的原理，学会原理以后，代码的写法可以有无数种。
2024-10-16 19:27:00
2570
原创 Cesium基础教程-教程简介
Cesium基础教程在xt3d官网上被命名为Cesium实战学习基地，可以看作是Cesium基础教程的升级版，与Cesium进阶教程和Cesium高级教程相比，这里更注重基础知识与功能实用性，之所以起名为实战学习基地，是因为教程中提供了大量相关示例代码，这些示例可修改运行。除此之外，还提供了大量教程中没有的示例，这些示例也提供了代码编辑和效果预览，所有示例提供完整源码，可以直接复制使用，对您的学习和工作都非常有帮助。
2024-10-14 11:51:05
918
原创 Cesium进阶教程-教程简介
本教程名为Cesium进阶教程，适合具备基础的Cesium开发能力，想要学习Cesium进阶开发技能的Cesium开发者，教程的阅读者需要具备基础的Cesium开发能力和基本的WebGL知识。阅读教程时可以通过右上角的主题切换按钮设置一个喜欢的颜色模式（浅色/深色），每个文章的右侧都会生成一个文章内容的目录组织，可以方便您查看该篇文章的大致内容，文章中有些链接可以直接点击进行跳转。教程包含大量的功能示例代码，这些示例代码都是经过运行验证过的，对应的源代码已经放置在教程文章中。
2024-10-13 21:04:14
1197
原创 Cesium高级教程-地形应用-地形抬升
前一节我们是通过Cesium自动的接口获取地形上的点位来构建抬升盒子（墙体），因为我们是通过深度图获取地形上的点位，所以可以直接使用。等高级技术，所以要获取研究区（某一小块）的地形顶点，不一定要从原始的地形数据中解析，而是可以通过间接方式获取的。自己构造研究区的地形顶点，将原有的地形顶点隐藏掉，难度稍微大一点，但是灵活性更高，不需要操作Cesium源码。地形抬升的第一种实现思路是修改地形数据，类似前面说过的地形压平，其原理基本一致，我们需要干预地形顶点数据。），获取纹理可以分为静态和动态两种方式。
2025-04-02 22:03:36
1430
原创 Cesium进阶教程-阴影贴图-视频融合-多路视频
至于能够支持多少路视频同时播放，首先得看您的电脑配置能够带得动多少个阴影贴图和后处理程序，当然您也可以继续进行优化处理，比如考虑仅用一个后处理程序来处理，这在实际应用中可根据实际情况进行优化。方法为主方法，调用该方法就创建一个视频贴图对象，调用几次就创建几路视频，因为现在只有一个视频，所以用一个。要实现多路视屏与场景进行融合，只需重复单路视频融合的步骤即可，一路视频对应一个。现在传入不同的参数就可以创建不同的视频贴图，相当简单不再过多阐述。方法用于创建阴影贴图对象，参数。，一个阴影贴图对应一个。
2024-12-09 21:59:10
649
2
原创 Cesium高级教程-地形应用-地形裁剪
首先找到地形片元着色器，然后将范围数据传入着色器，在着色器中判断片元和范围的关系，使用。相对于地形压平来说，地形裁剪功能实现起来容易得多，因为Cesium自带了地形裁剪的API接口，直接调用即可，而地形压平目前没有提供接口，需要花费时间和精力研究。所以还是不能偷懒，必须在将数据传递到片元着色器，然后在片元着色器中进行关系判断，因为在片元着色器中拿到的点是经过插值过的，所以效果会比顶点着色器中判断的好。方法是片元着色器的入口，因为地形片元着色器和顶点着色器是挨着的，所以很容易就找到着色器位置(
2024-11-24 22:30:43
1395
原创 Cesium高级教程-地形应用-修改地形数据的方式实现地形压平
方法，但是还是不知道数据是如何使用的，不过这里有一个重要的知识点，地形数据并不是加载完成立马就解析渲染，而是基于状态的一种管理方式，加载完成或者失败都是先标识这块数据的一个状态，当渲染时根据这个状态来决定是否加入渲染队列。这个方法就是用来加分块的地形数据的，因为地形服务提供者会有不同的类型，不同的类型对应不同格式的地形数据，不同类型的加载方法肯定是不一样的，我们最常用的是。方法，我们为其添加一个拦截器，就是我们先拿到这个方法的返回值，然后加以改造，最后将改造后的数据作为返回值返回，拦截器代码如下。
2024-11-24 22:27:26
1886
原创 Cesium高级教程-地形应用-修改着色器实现地形压平
如果您做过倾斜模型相关的压平功能，那么首先想到的应该也是通过顶点着色器的方式来实现地形压平，因为原理都是共通的，我们只需要找到地形渲染的顶点着色器位置，然后再研究如何修改顶点着色器以达到最终的目的。是从哪儿来的，我们就很清楚了，这是从地形的顶点着色器中传入到片元着色器的高程值，我们要实现地形的压平，就需要看看这个高度值是怎么计算的，我们只需要将其改为压平的高度，再加上范围限定，就是我们想要的地形压平效果了。因为在Cesium中，地形的渲染和图元一样的，最后都是构建VAO，生成绘制指令，然后通过。
2024-11-24 22:18:39
1444
原创 Cesium高级教程-地形应用-地形压平
要实现地形压平，目前有两种方式可以实现，一种是通过修改着色器实现，另一种是通过修改地形数据实现。两种方式实现的思想是一样的，效果也相差不大。相对于修改着色器的方式，修改地形数据的方式稍微复杂一点，涉及到的内容要多一点，您得翻看更多的Cesium源码，具有一定的知识储备后才能完成。场景一：由于地形数据的精度一般都较低，会导致和精度较高的倾斜或人工模型产生冲突，因为倾斜或人工模型本身就已经具有正确的高度信息，此时如果通过调整模型的高度来适配地形，可能会影响其他数据的正常显示，所以只能修改冲突部分的地形高度。
2024-11-24 22:10:27
818
原创 Cesium高级教程-自定义光源-后处理光源
有了前一节在模型着色器中实现光源的知识，在后处理中实现就很简单了，难点是需要计算片元的法线，在后处理中可以通过偏导数dFdx、dFdy来计算片元法线。不管是模型光源还是后处理光源目前都存在以下两个问题遮挡关系后面被前面挡住的建筑物也会进行光照计算阴影光照没有阴影，真实的光照应该会产生阴影因为我们只是简单地按照公式计算了光照颜色，其余的没有做任何处理，所以会出现以上两个问题，要实现逼真的光照效果，需要解决这些问题。
2024-11-05 21:13:06
830
原创 Cesium高级教程-自定义光源-模型光源
上面的代码中因为没有设置关照衰减，所以无论离光源多远都会有光照效果，接下来我们添加一个衰减，离光源越远，光照越弱。类的片元着色器默认能够获取到的相关参数在文档中看不到，可以根据Cesium提供的示例或者查看源码获取更多的参数。中添加自定义光源需要注意的是您的模型需要有法线信息，如果模型不带法线可能结果出不来。光线方向是通过光源位置和片元位置计算而来，而光源位置是从外部传递到着色器内部。光源颜色肯定是我们从外部传递到着色器内部的，颜色可以自定义。实现多光源，只需要将多个光源的颜色进行叠加即可。
2024-11-05 21:07:48
1526
原创 Cesium高级教程-自定义光源-光照原理
关于光照原理可以参考WebGL编程指南第八章的相关内容，里面有非常详细的介绍。本章的重点在于如何在Cesium中去实现，而不是研究光照的原理，要看原理随便百度一下文章多如牛毛。获取WebGL编程指南可以百度搜索下载电子版，或者联系作者获取在编程世界中，所有抽象的问题最后最会都可以转变为数学公式的表达，以点光源为例，计算公式为最后的颜色=光源颜色 x 物体基底色 x（ 光线方向 . 物体法线 ），所以如果要在Cesium中实现点光源，首先需要弄明白公式中每个参与运算的变量是什么？如何获取？
2024-11-05 20:59:10
941
原创 Cesium高级教程-管道图元-变换顶点数据
顶点数据先要经过一次旋转变换，从建模的角度旋转到目标角度，该过程可以看着是一个向量旋转到另一个向量，所以只需要找到这两个向量的旋转轴和旋转角度，然后根据数学公式计算即可。一个向量旋转到另一个向量，旋转轴可以由两个向量的叉积计算而得，而旋转角度就是两个向量的夹角。相对于旋转变换，平移变换就简单得多了，只需要根据两个坐标点的差值就可获得。我们根据原理修改构建顶点的方法，加入旋转和平移操作。可以看到生成的顶点结果和管道的。的方向已经正确对上了。
2024-10-27 22:06:00
402
原创 Cesium高级教程-管道图元-生成顶点数据
在代码中我们将每个顶点乘上了一个平移矩阵，因为生成的顶点是在坐标系原点（地球中心点）进行的，不好看结果。有了起点和终点，我们可以计算出管道的长度，然后在坐标原点进行顶点生成，将其封装成一个方法。假定一个管道的起点和终点如下，设管道半径为。为了查看生成的顶点数据，我们可以先将其通过。调用生成顶点的方法，传入相关参数。的方式添加到场景中显示出来。
2024-10-25 23:34:29
351
原创 Cesium高级教程-管道图元-图元分析建模
虽然生成管道的坐标点不是固定的，但是建模的时候我们一般先在坐标原点进行，最后经过矩阵变换将其转到正确的位置，任何管线都可以像下面这样建模。一根简单的管道通常由两个坐标点与半径构成（先不考虑厚度），管道的长度由构成管道的两个坐标点决定，其示意图如下。图形的顶点比较规则，上下两部分都是由构成一个圆的顶点组成，所以生成顶点时，按照圆周进行计算即可。然后通过旋转平移变换将其转到正确的位置。
2024-10-25 23:20:59
456
2
原创 Cesium高级教程-管道图元-管道图元简介
大多数时候使用Cesium加载地下管线都是使用专业的管线建模工具进行建模，然后转换为3DTiles进行加载，但是当需要实现流动效果或者动态更新数据时，这种静态的数据不一定适用，可能需要结合静态数据和动态数据一起使用。
2024-10-25 23:07:37
942
原创 Cesium高级教程-渲染流程-场景渲染
类中的一个内部定义的方法，该方法中包含了Cesium三维场景渲染一帧所包含的关键步骤，在实现比如离屏渲染等功能可以参考此方法。方法更新帧状态，帧状态对象中存储了绘制一帧所需要的相关信息，比如绘制指令集合。方法，用于捕获渲染错误时发生的异常信息。，接下来我们看看场景中的渲染方法。
2024-10-24 22:44:42
744
原创 Cesium高级教程-渲染流程-引擎初始化
的作用是通过鼠标移动/旋转/缩放场景，虽然看起来是操作场景，但是其实是改变相机。并且通过鼠标操作后并不是立即更新相机参数，而是将操作的信息先保存起来（比如鼠标滚轮滚动时，先记录滚动了多少），这些操作是由。方法中主要是根据场景的模式修改相机视椎体，场景模型切换到二维模式时才会进行修改，此处不多介绍，因为我们不考虑二维模式。可以以监听鼠标滚轮事件为例，进行源码的跟踪，因为代码非常之多，所以此处就不往下研究，感兴趣可以看源码。中被创建，创建完成后设置相机的基本信息，比如视椎体的宽高比。对象，在场景中会创建相机。
2024-10-24 22:41:59
705
原创 Cesium高级教程-渲染流程-程序入口
当然绝大部分情况下，我们不会选择单独使用渲染引擎部件，因为这只是Cesium框架的一种模块解耦设计，使用完整的框架功能，还是选择使用。这是因为从部件（组件）的层面上来说，Cesium将其框架内容分为了两大类，分别为渲染引擎部件和页面部件，渲染引擎部件主要就是。初始化各种部件以后，还为场景注册了默认的一些事件，比如单击实体进行选择，双击实体进行视角追踪。部件，这是Cesium中最核心的部件，是三维场景渲染的入口。，而页面部件就是页面上的那些小控件，比如时间线、搜索框等，而。部件后，从该部件中获取。
2024-10-24 22:39:07
619
原创 Cesium高级教程-渲染模块-内置glsl库
这些内容会自动注入到着色器程序中，所以我们在使用Cesium着色器时，可以直接使用这些内容，Cesium官方也提供了对应的文档说明。Cesium内置了一个小型的。
2024-10-23 22:08:28
799
原创 Cesium高级教程-渲染模块-自动统一值
来提供的，因为要进行数据类型的转换，首先要知道对应的类型关系。中的封装的数据其类型是Cesium框架定义的类型（比如纹理是。统一值状态的数据最后在着色器程序中被使用，使用时是通过。自动统一值的作用就是充当两种数据类型转换的桥梁。的取值进行封装，我们称之为自动统一值。类（准确来说是一个对象）对。类），这些数据在传入。
2024-10-23 22:05:56
424
原创 Cesium高级教程-渲染模块-统一值状态
UniformState类我们称为统一值状态，存储了场景渲染一帧需要传递到着色器中的相关数据，比如。类初始化时被实例化，并且整个程序只实例化一个对象（这是毋庸置疑的）方法用于更新这些数据，在渲染每一帧之前，都会先调用。场景在渲染每一帧前，都会先调用。方法对相关数据进行更新。对象中存储的相关数据。
2024-10-23 22:03:12
295
原创 Cesium高级教程-渲染模块-绘制指令
类是 Cesium 渲染器的核心，我们称之为绘制指令，绘制指令相当于Cesium框架中上层接口与渲染器的桥梁，我们所熟知的。渲染状态，封装如深度测试（depthTest）、剔除（cull）、混合（blending）等状态类型的参数设置。类是Cesium最底层的绘图接口，该接口没有对外公开，要使用此类，必须参考源码。顶点数组，向 GPU 传递顶点属性、索引（可选的）数组等几何信息。类进行绘图，您可以绕过Cesium对几何。的限制（可以回想一下，我们使用。原生的绘图方式进行图形的绘图。绘制指令绘图，我们在。
2024-10-23 21:50:56
748
原创 Cesium高级教程-渲染模块-渲染器
将与WebGL交互的部分封装到一个模块，在Cesium其他地方都可以调用。减小WebGL更新带来的影响，开发者无需关心底层API的变动。Cesium团队具有丰富的经验，封装的渲染器能够保证程序性能。WebGL是一个状态机，渲染器能够统一管理这些状态。封装的3D地图引擎，其绘图操作底层都是调用的。着色器程序 对着色器的编译，链接的封装。我们都知道，Cesium是一个基于。相关的基础概念，可以先参考。的基础概念，如果您不熟悉。顶点缓冲对象，即常说的。顶点数组对象，即常说的。帧缓冲区对象，即常说的。
2024-10-23 21:49:14
751
原创 Cesium高级教程-后处理体积云-实现更逼真的全球体积云
内，而要实现全球体积云，我们需要根据地球的形状设置体积云的渲染范围，因为地球是一个椭圆，所以体积云的渲染范围是一个。）方法，在球壳中求光线步进的起点和终点，其实就是通过求射线与球的交点来实现的，这分为多种情况。因为地球的半径是不规则的，所以需要实时获取相机处的地球半径作为着色器中用于计算的地球半径，在。限定体积云的渲染范围，即为限定光线步进的范围，所以我们只需要将上一节的光线步进范围从。前面一节我们实现的体积云是局部的，即将云的渲染范围限定在一个指定的。内，也就是光线步进的范围限定在。，您可以想象大气层。
2024-10-23 17:41:22
2558
1
原创 Cesium高级教程-后处理体积云-实现更逼真的体积云
上一节我们参考博客实现了简单的体积云效果，虽然勉强得到了一个体积云，但是因为是从一张2D柏林噪声纹理中获取云的噪声数据，所以看上去效果并不那么完美，本节我们看看更逼真的体积云如何实现。更逼真的体积云效果作者也是参考游戏引擎和多篇大佬的博客实现的，最主要的就是噪声数据的获取，其他的和前一节一样，先附上。方法用于计算当前的片元云的颜色，计算出云的颜色后，将此颜色与片元原本的颜色进行混合，得到最终的颜色。最后根据云的密度生成云的颜色返回，计算云的密度最后使用的是。方法中开始讲起，和前一节的区别在于多了一个。
2024-10-23 17:30:32
1318
原创 Cesium高级教程-后处理体积云-实现简单的体积云效果
你可以先看看文章，然后自己思考有没有难点，如果觉得没有，可以自己先实现一遍，看能不能做出来，因为学习其实最重要的是过程，而不是结果。的中心点，所以他直接使用相关坐标进行计算，而我们的盒子中心并不在世界坐标的中心，所以不能直接算，需要像上一节那样建立一个。为了提高光线步进的性能，需要将射线的起点设置到与盒子最近的点，从该点开始前进，这就省去了相机到盒子这段的距离。本节到此结束，至于后面的改进，如果您有时间，可以继续研究，作为教程，到此已经包含所有体积云的关键知识点。实现简单的体积云，我们先参考这篇博客。
2024-10-23 17:14:19
1800
原创 Cesium高级教程-后处理体积云-后处画一个Box
这是因为后处理就是一副画，这是一个二维的概念，所以肯定没有立体的效果。中心点建立一个局部坐标系，每个片元还原到世界坐标，然后转到这个局部坐标系，通过判断坐标值的大小就可以判断这个片元是否在该。然后将次坐标系信息传入后处理着色器，着色器中每个片元坐标先还原为世界坐标，然后转到该坐标系下，最后进行坐标数值比较。如果有交点，那么该片元就被遮蔽，所以问题转为相机到片元的射线和Box求交，射线和Box求交有很多算法，这里采用。所遮蔽的片元设置为蓝色即可，这里就涉及到一个重要的知识，的需要哪些信息，一般需要知道。
2024-10-23 16:58:38
1214
1
原创 Cesium高级教程-后处理体积云-体积云原理
实现体渲染，更接近真实的体渲染效果，但是此方式需要在片元着色器中还原世界坐标，相对麻烦一点，不过在后处理中还原世界坐标的相关知识，相信对于此阶段的您已不成问题，如果相关知识您还不会，可以先看看。要实现体积云，我们可以先参考游戏引擎的相关代码，作者实现体积云也是参考的其他引擎的代码，所以本章的重点在于讲解在Cesium的整体实现思路，至于涉及到的着色器里面的计算原理，作者也是。因为光线步进的原理是模拟光的前进，所以光从哪儿前进，每次前进多少，最多前进多远这些参数的设置对程序的性能有很大影响。
2024-10-23 16:50:43
1494
原创 Cesium高级教程-深度图-填挖方分析
根据思路我们只需要将研究区域微分为多个小区域，计算每个小区域的填挖值，最后进行累加即可。具体的实现是获取每个小区域的地表高度值，如果高度值小于参考面，那么这个区域就是填方，反之是挖方，填方或挖方的体积就是该区域的面积 x 区域表面高度到参考面的距离即。的基础上，指定开挖的参考高度，高于参考高度的就是挖方，小于参考高度的就是填方。至于微分到何种程度，就是设置深度图纹理的大小，深度图中的每个点代表多大的面积。填挖方分析一种简单的思路是微分法，将填充或开挖的范围微分为多个小的范围，然后求取个小范围填挖的累加。
2024-10-22 23:46:39
1477
原创 Cesium高级教程-深度图-区域高差分析
高差分析用来计算某个研究区域最高点和最低点，使用深度图来进行计算，可以很方便地获取这两个点。我们只需要在前一节的基础上，过滤出研究区域内的点，然后进行高程值对比即可。深度图纹理的大小决定了结果准确性的高低，越大结果越准确，但是性能越低，当然，渲染到深度图的过程没有影响，但是解析和判断点关系时点数量越多，需要的时间就越长。得到研究区域内的坐标数组后，只需要遍历一下，获取每个点的高程值进行一下对比，就能轻松获取这个区域的最高点和最低点。
2024-10-21 22:54:45
1037
原创 Cesium高级教程-深度图-坐标解析
假定研究区域范围如下首先需要设置离屏相机，一般将离屏相机设置在感兴趣的研究区域，从上往下看，我们将其封装为一个方法//创建相机 （正交投影）//设置相机的位置})//中心点//获取中心点的法线//中心点向上平移5000米//相机方向 从上往下看//设置相机上方向 （这里使用类似正北的方向）near: 0.1,far: 10000});//可视化相机updateOnChange: false,//不更新}));示例效果可到xt3d 官网运行查看。
2024-10-21 22:09:12
1126
2
原创 Cesium高级教程-深度图-场景深度图
Cesium并没有提供场景深度纹理的访问接口，因为这个深度纹理是在渲染过程中会根据指定的条件获取，并不固定，并且在整个渲染生命周期结束后，可能就将深度图就被清空了，所以在外面即使能获取到也没有什么用，具体可见。在将场景渲染结果交给后处理程序进行处理时，传入了对应的深度纹理。类型，也就是一张纹理图，只是存储的是深度信息。在Cesium应用中，可以通过。属性来判断是否支持深度图。
2024-10-21 21:57:50
927
原创 Cesium基础教程-地形-简介
地形用于表达地球上高低起伏的状态，地形数据则是具体的实现方式。Cesium中的地形类是Terrain，每一个Terrain关联了一个我们称之为地形提供者或地形服务提供者，其类型为。这是因为地形数据可能多种多样，用于解析具体的数据，而Terrain则用于屏蔽这些差异，提供统一的控制接口。Cesium目前只支持设置一个地形，所以如果您的地形数据有多个，需要先合并成一个，才能同时添加显示。
2024-10-17 23:26:31
757
原创 Cesium进阶教程-热力图-简介
热力图的设计原理是基于人眼对颜色的敏感度，不同颜色的明暗程度可以传达不同的数据密度或强度。一般来说，较亮的颜色（如红色或黄色）表示高密度或高强度的数据，而较暗的颜色（如蓝色或绿色）表示低密度或低强度的数据。热力图是一种用颜色来表示数据密度或强度的图表，它通过将数据映射到不同的颜色，以展示数据的分布和变化情况。热力图通常用于显示大量数据的空间分布或趋势，帮助用户快速理解数据的模式和关系。热力图可以显示数据的分布密度，通过颜色的明暗程度来表示不同区域或点的数据密集程度。通过颜色的明暗程度来表示数据的强弱程度。
2024-10-17 23:20:16
515
原创 Cesium高级教程-离屏渲染-隐藏不必要的渲染内容
方法里面的代码，代码中其实有些可能是我们不需要的，比如有时我们的离屏渲染可能并不需要天空、大气、甚至连地球也不需要，那我们可以在离屏渲染时将这些对象隐藏掉，以节省程序的性能开销。在上一节我们通过翻转的方式，将。
2024-10-17 23:19:48
590
原创 Cesium基础教程-事件-使用示例
在一个应用程序中，事件的应用是很常见的，比如我们经常会将地图相关的功能封装到一个地图组件中，这个地图组件会有很多相关的事件，比如地图初始化开始、地图初始化结束、数据加载、地图销毁等等，其他的组件想要关心地图组件的各种状态改变，就可以通过注册地图组件的各种事件来进行状态的监听，以做出相应的处理。
2024-10-17 23:17:23
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人