- 博客(332)
- 收藏
- 关注
RSS订阅
原创 Cesium高级教程-教程简介
《Cesium高级教程》是一套面向具备Cesium和WebGL基础的开发者设计的进阶学习资料，涵盖离屏渲染、深度图应用、体渲染等16个技术模块。教程提供原理讲解和从零实现的验证代码，支持主题切换和目录导航。内容持续更新，包含渲染流程、自定义光源、百万级图形渲染等实战案例，并附有效果展示图。读者可通过官网获取最新内容，遇到问题可联系作者获得一对一指导。本教程旨在帮助开发者突破技术瓶颈，提升三维GIS开发能力。
2024-10-16 19:27:00
3289
原创 Cesium基础教程-教程简介
Cesium基础教程在xt3d官网上被命名为Cesium实战学习基地，可以看作是Cesium基础教程的升级版，与Cesium进阶教程和Cesium高级教程相比，这里更注重基础知识与功能实用性，之所以起名为实战学习基地，是因为教程中提供了大量相关示例代码，这些示例可修改运行。除此之外，还提供了大量教程中没有的示例，这些示例也提供了代码编辑和效果预览，所有示例提供完整源码，可以直接复制使用，对您的学习和工作都非常有帮助。
2024-10-14 11:51:05
1159
原创 Cesium进阶教程-教程简介
本教程名为Cesium进阶教程，适合具备基础的Cesium开发能力，想要学习Cesium进阶开发技能的Cesium开发者，教程的阅读者需要具备基础的Cesium开发能力和基本的WebGL知识。阅读教程时可以通过右上角的主题切换按钮设置一个喜欢的颜色模式（浅色/深色），每个文章的右侧都会生成一个文章内容的目录组织，可以方便您查看该篇文章的大致内容，文章中有些链接可以直接点击进行跳转。教程包含大量的功能示例代码，这些示例代码都是经过运行验证过的，对应的源代码已经放置在教程文章中。
2024-10-13 21:04:14
1711
原创 Cesium高级教程-三维风场粒子-视觉效果提升
本文介绍了Cesium三维风场粒子效果的两种视觉提升方法。首先，提出将风速与流向分离表达的技术方案：使用矩形图元+外观定义实现风速底图，粒子仅显示流向，通过着色器采样颜色纹理实现风速可视化。其次，描述了为粒子添加随机高度值的方法，通过在坐标转换时引入高度参数增强立体感。文章提供了关键代码思路和效果截图，并建议参考xt3d官网查看完整示例。这两种优化方式有效提升了风场数据的视觉表现力，使风速大小和方向信息更加清晰直观。
2026-06-02 15:45:38
257
原创 Cesium高级教程-三维风场粒子-粒子图形效果优化
本文介绍了Cesium中三维风场粒子动画效果的优化方法。针对原有二维粒子图形在倾斜视角下立体感不足的问题，提出了三种解决方案：1）重新定义具有立体感的粒子图形（如圆锥形）；2）将粒子图形变换为平行于屏幕的形态；3）为粒子图形添加旋转动画。每种方案都附有核心代码片段和实现效果说明，展示了如何通过修改顶点数据、坐标变换或添加动态旋转来增强视觉效果。文章还提供了在线示例链接，方便读者查看实际效果。这些优化方法有效提升了风场粒子在不同视角下的立体表现。
2026-06-02 15:42:17
148
原创 Cesium高级教程-三维风场粒子-越界处理与消亡重生
本文介绍了Cesium三维风场粒子系统的越界处理与消亡重生机制。通过判断粒子是否超出数据边界，对越界粒子重新赋予初始随机位置，同时使用标识位解决位置突变导致的闪烁问题。针对粒子数量减少问题，提出了为粒子设置生命周期的方案，根据速度决定消亡时间并在适当位置重生，以维持区域内粒子分布的均匀性。文章包含详细的GLSL代码实现，并附有效果演示链接。
2026-06-02 15:32:57
378
原创 Cesium高级教程-三维风场粒子-粒子动画效果
本文介绍了在Cesium中实现三维风场粒子动画效果的原理与实现过程。动画效果基于粒子移动的四个要素（当前位置、方向、速度、时间），通过两个计算指令实现：第一个计算指令计算方向与速度的乘积得到移动量，第二个计算指令将当前位置与移动量相加得到下一位置。通过每帧交换纹理数据实现动画循环，最终将计算结果应用于绘制指令，形成动态粒子效果。文章提供了完整代码示例，并可通过xt3d官网查看实际效果。
2026-06-02 15:25:41
548
原创 Cesium高级教程-三维风场粒子-粒子颜色与大小设置
本文介绍了在Cesium中设置三维风场粒子颜色与大小的技术方法。主要内容包括：1）通过颜色带纹理实现根据风速大小设置粒子颜色，使用渐变色生成器创建颜色带；2）自定义粒子长度和宽度范围，使粒子图形更均匀；3）根据相机距离动态缩放粒子大小，保证远距离可见性；4）改进缩放机制，实现平滑过渡效果。这些技术通过着色器编程实现，可显著提升三维风场可视化效果。
2026-06-02 15:17:26
182
原创 Cesium高级教程-三维风场粒子-粒子实例化渲染与插值
本文介绍了Cesium中实现三维风场粒子可视化的关键技术。首先通过GPU实例化渲染批量生成风场粒子，利用gl_InstanceID为每个粒子赋予独立属性，包括位置和风速矢量。然后提出数据插值方案，将有限分辨率的风场数据通过纹理采样实现平滑过渡，支持显示10,000个随机分布的风场粒子。文章详细讲解了纹理数据的处理和着色器中的实现逻辑，最终实现了高密度风场的可视化效果。该方法可扩展应用于大规模气象数据的实时渲染。
2026-06-01 17:51:56
221
原创 Cesium高级教程-三维风场粒子-风场粒子设计与渲染
本文介绍了在Cesium中实现三维风场粒子效果的设计与渲染方法。主要内容包括： 粒子设计：采用流线型几何形状，头部宽尾部细，并设置透明度渐变效果来模拟风的流动轨迹。粒子形状可通过调整首尾宽度形成梯形或三角形。 粒子渲染方案： 考虑到需要渲染百万级粒子，采用实例化渲染而非Entity/Primitive方式 详细讲解了两种实现方法： (1) 矩阵变换法：通过平移、缩放和旋转矩阵将基本图形与风场矢量数据匹配 (2) 向量计算法：直接根据风场矢量信息计算粒子图形的世界坐标 技术实现： 使用Cesium的底层图形A
2026-06-01 17:35:26
153
原创 Cesium高级教程-三维风场粒子-风场数据表达
本文介绍了Cesium中三维风场数据的可视化表达方法。风场数据属于格点数据和矢量场数据，包含方向（u、v分量）和大小信息。可视化方式包括符号化表达（如风向杆、箭头）和动态粒子效果，后者通过粒子形状、颜色和运动方向来展示风速和风向。文章还提供了示例效果的查看链接和更多教程资源。
2026-06-01 17:23:06
200
原创 Cesium高级教程-三维风场粒子-风场数据处理
本文介绍了两种将NCEP风场二进制数据转换为JSON格式的方法：一是使用开源命令行工具grib2json（需Java环境），二是通过提供的可视化转换工具（同样需要Java支持）。转换后的JSON文件可直接用于前端加载解析，数据属性清晰易懂。两种方式均可实现风场数据格式转换，开发者可根据需求选择适合的工具进行处理。
2026-06-01 17:15:10
350
原创 Cesium高级教程-三维风场粒子-风场数据获取
本文介绍了从不同网站获取风场数据的方法，重点以美国国家环境预测中心(NCEP)为例详细说明了下载流程。文章首先列举了CMA、国家气象科学数据中心等数据源，指出NCEP网站无需注册即可下载。随后分步骤讲解了在NCEP网站选择GFS数据（包括分辨率、日期、字段、高度层和区域范围）的操作方法，并提示下载的.grib2格式数据需要转换后才能用于前端显示。最后提到不同数据源转换方法可能不同，但最终目标格式一致。文章可作为风场数据获取与处理的入门指南。
2026-06-01 17:09:17
244
原创 Cesium高级教程-百万级图形渲染-百万级图形渲染的其它典型应用
本文介绍了Cesium中实例化图形渲染在百万级图形场景下的两种典型应用：高斯泼溅渲染和自定义粒子系统。通过实例化图形技术，可以高效渲染数百万个参数各异的高斯椭球，实现原始高斯泼溅数据的可视化；同时该技术也适用于构建三维风场等自定义粒子系统。文章提供了示例效果展示和进一步学习资源，展示了Cesium在大规模图形渲染方面的强大能力。
2026-04-30 20:50:14
312
原创 Cesium高级教程-百万级图形渲染-百万个图形实现体渲染效果
本文介绍了在Cesium中使用实例化渲染技术实现体渲染效果的方法。首先通过将体数据转换为3D纹理，并使用大量BoxGeometry来表示体素，构建了一个百万级图形的渲染场景。文章详细讲解了如何通过调整顶点着色器和实例化参数来优化渲染效果，包括位置排列、颜色映射和维度缩放等技术要点。同时提供了性能优化思路，建议根据实际数据调整三个维度的长度比例以获得更好的表现。这种方法虽然不能完全替代光线步进等传统体渲染技术，但在特定场景下能够实现不错的效果，适合对性能要求较高的应用场景。
2026-04-30 20:47:23
457
1
原创 Cesium高级教程-百万级图形渲染-实例化图形渲染的阴影与拾取
本文介绍了Cesium中实现实例化图形渲染的阴影效果和拾取功能的关键技术。在阴影方面，通过设置viewer的shadows属性开启阴影功能，并在创建DrawCommand时配置receiveShadows和castShadows参数实现阴影接收和投射。在拾取功能方面，使用scene.context.createPickID()方法为每个实例生成唯一拾取颜色，通过顶点着色器传递拾取颜色数据，实现图形对象的精准拾取。文章还包含实际效果演示和代码示例，展示了如何在Cesium中实现大规模实例化渲染的高级图形效果。
2026-04-30 20:40:30
99
原创 Cesium高级教程-百万级图形渲染-传入与实例图形相关联的数据
本文介绍了Cesium中实现百万级图形渲染的两种数据传递方案：顶点数据和纹理数据。通过顶点缓冲（VBO）方式，演示了如何为每个实例图形设置特有颜色值，包括创建颜色缓冲区、配置顶点属性数组和着色器处理流程。同时讲解了纹理数据方案，展示了如何将颜色值打包为纹理并应用于实例渲染。文章重点说明了instanceDivisor属性的作用，区分了顶点关联和实例关联数据的不同更新方式。两种方案均适用于大规模实例化渲染场景，可有效提升渲染性能。
2026-04-30 20:33:58
142
原创 Cesium高级教程-百万级图形渲染-使用内置图形进行实例化渲染
本文介绍了Cesium中利用内置几何图形进行高效实例化渲染的方法。通过BoxGeometry示例展示了如何从几何体创建VAO（Vertex Array Object），并利用顶点着色器和片元着色器实现光照计算，使渲染效果更具真实感。文章详细讲解了使用内置几何体的优势，包括自动处理法线、纹理等顶点数据，以及如何通过修改着色器代码加入冯氏光照模型。最后提供了一个完整的实例化渲染10个立方体的代码示例，演示了如何结合Cesium的DrawCommand和自定义Primitive实现批量渲染。这种方法适用于需要渲染
2026-04-30 20:15:18
171
原创 Cesium高级教程-百万级图形渲染-顶点索引与图形的排列问题
本文介绍了Cesium中高级图形渲染技术，重点讲解了顶点索引的使用和图形排列问题。在顶点索引部分，通过Box示例展示了如何用8个顶点代替36个顶点，详细说明了索引缓冲区的创建方法。在图形排列部分，探讨了二维和三维场景下的图形分布策略，包括如何通过gl_InstanceID实现位置偏移，以及使用纹理坐标处理多维度数据的方法。文章提供了完整的代码示例和可视化效果展示，帮助开发者优化大规模图形渲染性能。这些技术在Cesium的三维可视化应用中具有重要价值，特别是在处理百万级图形渲染时能显著提升效率。
2026-04-30 20:08:50
303
原创 Cesium高级教程-百万级图形渲染-自定义实例化渲染基础
本文介绍了在Cesium中实现自定义实例化渲染的基础方法。首先通过定义三角形顶点坐标创建顶点缓冲和顶点数组，然后构建绘制指令DrawCommand并设置instanceCount为10以渲染10个实例。由于初始状态下所有三角形位置重叠，需在顶点着色器中使用gl_InstanceID变量区分实例，通过修改z坐标使各三角形产生偏移。最后将自定义Primitive加入场景渲染队列，实现多个三角形的实例化渲染效果。该方法为Cesium中大规模图形渲染提供了基础实现方案。
2026-04-30 19:43:44
229
原创 Cesium高级教程-百万级图形渲染-如何自定义实例化渲染
本文深入探讨了Cesium中实例化渲染的高级应用。首先分析了GeometryInstance接口的局限性，指出其在处理百万级图形时性能不足的问题。然后揭示了实例化渲染的底层实现原理，即基于WebGL的glDrawElementsInstanced和glDrawArraysInstanced方法。接着详细讲解了如何通过修改DrawCommand类的instanceCount属性来实现自定义实例化渲染，并指出仅设置该属性不足以区分不同图形特征，为后续讲解埋下伏笔。文章为处理大规模图形渲染提供了性能优化思路，强调
2026-04-30 19:27:28
170
原创 Cesium高级教程-百万级图形渲染-百万级图形的渲染方案
本文介绍了在Cesium/WebGL中实现百万级图形渲染的优化方案——图形实例化渲染技术。该技术通过单次Draw Call即可渲染大量相同几何图形，相比传统渲染方式大幅提升性能。文章重点讲解了Cesium中的顶层图形实例化接口GeometryInstance的使用方法，包括如何创建基础几何体、设置实例属性（位置、颜色等），并通过代码示例演示了如何渲染1000个随机分布的立方体。最后指出还存在更底层的实例化渲染接口，为后续更深入的性能优化和定制开发留下扩展空间。
2026-04-30 19:18:27
817
原创 Cesium高级教程-地形应用-地形抬升
前一节我们是通过Cesium自动的接口获取地形上的点位来构建抬升盒子（墙体），因为我们是通过深度图获取地形上的点位，所以可以直接使用。等高级技术，所以要获取研究区（某一小块）的地形顶点，不一定要从原始的地形数据中解析，而是可以通过间接方式获取的。自己构造研究区的地形顶点，将原有的地形顶点隐藏掉，难度稍微大一点，但是灵活性更高，不需要操作Cesium源码。地形抬升的第一种实现思路是修改地形数据，类似前面说过的地形压平，其原理基本一致，我们需要干预地形顶点数据。），获取纹理可以分为静态和动态两种方式。
2025-04-02 22:03:36
2996
原创 Cesium进阶教程-阴影贴图-视频融合-多路视频
至于能够支持多少路视频同时播放，首先得看您的电脑配置能够带得动多少个阴影贴图和后处理程序，当然您也可以继续进行优化处理，比如考虑仅用一个后处理程序来处理，这在实际应用中可根据实际情况进行优化。方法为主方法，调用该方法就创建一个视频贴图对象，调用几次就创建几路视频，因为现在只有一个视频，所以用一个。要实现多路视屏与场景进行融合，只需重复单路视频融合的步骤即可，一路视频对应一个。现在传入不同的参数就可以创建不同的视频贴图，相当简单不再过多阐述。方法用于创建阴影贴图对象，参数。，一个阴影贴图对应一个。
2024-12-09 21:59:10
977
2
原创 Cesium高级教程-地形应用-地形裁剪
首先找到地形片元着色器，然后将范围数据传入着色器，在着色器中判断片元和范围的关系，使用。相对于地形压平来说，地形裁剪功能实现起来容易得多，因为Cesium自带了地形裁剪的API接口，直接调用即可，而地形压平目前没有提供接口，需要花费时间和精力研究。所以还是不能偷懒，必须在将数据传递到片元着色器，然后在片元着色器中进行关系判断，因为在片元着色器中拿到的点是经过插值过的，所以效果会比顶点着色器中判断的好。方法是片元着色器的入口，因为地形片元着色器和顶点着色器是挨着的，所以很容易就找到着色器位置(
2024-11-24 22:30:43
1808
原创 Cesium高级教程-地形应用-修改地形数据的方式实现地形压平
方法，但是还是不知道数据是如何使用的，不过这里有一个重要的知识点，地形数据并不是加载完成立马就解析渲染，而是基于状态的一种管理方式，加载完成或者失败都是先标识这块数据的一个状态，当渲染时根据这个状态来决定是否加入渲染队列。这个方法就是用来加分块的地形数据的，因为地形服务提供者会有不同的类型，不同的类型对应不同格式的地形数据，不同类型的加载方法肯定是不一样的，我们最常用的是。方法，我们为其添加一个拦截器，就是我们先拿到这个方法的返回值，然后加以改造，最后将改造后的数据作为返回值返回，拦截器代码如下。
2024-11-24 22:27:26
2497
原创 Cesium高级教程-地形应用-修改着色器实现地形压平
如果您做过倾斜模型相关的压平功能，那么首先想到的应该也是通过顶点着色器的方式来实现地形压平，因为原理都是共通的，我们只需要找到地形渲染的顶点着色器位置，然后再研究如何修改顶点着色器以达到最终的目的。是从哪儿来的，我们就很清楚了，这是从地形的顶点着色器中传入到片元着色器的高程值，我们要实现地形的压平，就需要看看这个高度值是怎么计算的，我们只需要将其改为压平的高度，再加上范围限定，就是我们想要的地形压平效果了。因为在Cesium中，地形的渲染和图元一样的，最后都是构建VAO，生成绘制指令，然后通过。
2024-11-24 22:18:39
1968
1
原创 Cesium高级教程-地形应用-地形压平
要实现地形压平，目前有两种方式可以实现，一种是通过修改着色器实现，另一种是通过修改地形数据实现。两种方式实现的思想是一样的，效果也相差不大。相对于修改着色器的方式，修改地形数据的方式稍微复杂一点，涉及到的内容要多一点，您得翻看更多的Cesium源码，具有一定的知识储备后才能完成。场景一：由于地形数据的精度一般都较低，会导致和精度较高的倾斜或人工模型产生冲突，因为倾斜或人工模型本身就已经具有正确的高度信息，此时如果通过调整模型的高度来适配地形，可能会影响其他数据的正常显示，所以只能修改冲突部分的地形高度。
2024-11-24 22:10:27
1087
原创 Cesium高级教程-自定义光源-后处理光源
有了前一节在模型着色器中实现光源的知识，在后处理中实现就很简单了，难点是需要计算片元的法线，在后处理中可以通过偏导数dFdx、dFdy来计算片元法线。不管是模型光源还是后处理光源目前都存在以下两个问题遮挡关系后面被前面挡住的建筑物也会进行光照计算阴影光照没有阴影，真实的光照应该会产生阴影因为我们只是简单地按照公式计算了光照颜色，其余的没有做任何处理，所以会出现以上两个问题，要实现逼真的光照效果，需要解决这些问题。
2024-11-05 21:13:06
1125
原创 Cesium高级教程-自定义光源-模型光源
上面的代码中因为没有设置关照衰减，所以无论离光源多远都会有光照效果，接下来我们添加一个衰减，离光源越远，光照越弱。类的片元着色器默认能够获取到的相关参数在文档中看不到，可以根据Cesium提供的示例或者查看源码获取更多的参数。中添加自定义光源需要注意的是您的模型需要有法线信息，如果模型不带法线可能结果出不来。光线方向是通过光源位置和片元位置计算而来，而光源位置是从外部传递到着色器内部。光源颜色肯定是我们从外部传递到着色器内部的，颜色可以自定义。实现多光源，只需要将多个光源的颜色进行叠加即可。
2024-11-05 21:07:48
2089
原创 Cesium高级教程-自定义光源-光照原理
关于光照原理可以参考WebGL编程指南第八章的相关内容，里面有非常详细的介绍。本章的重点在于如何在Cesium中去实现，而不是研究光照的原理，要看原理随便百度一下文章多如牛毛。获取WebGL编程指南可以百度搜索下载电子版，或者联系作者获取在编程世界中，所有抽象的问题最后最会都可以转变为数学公式的表达，以点光源为例，计算公式为最后的颜色=光源颜色 x 物体基底色 x（ 光线方向 . 物体法线 ），所以如果要在Cesium中实现点光源，首先需要弄明白公式中每个参与运算的变量是什么？如何获取？
2024-11-05 20:59:10
1216
原创 Cesium高级教程-管道图元-变换顶点数据
顶点数据先要经过一次旋转变换，从建模的角度旋转到目标角度，该过程可以看着是一个向量旋转到另一个向量，所以只需要找到这两个向量的旋转轴和旋转角度，然后根据数学公式计算即可。一个向量旋转到另一个向量，旋转轴可以由两个向量的叉积计算而得，而旋转角度就是两个向量的夹角。相对于旋转变换，平移变换就简单得多了，只需要根据两个坐标点的差值就可获得。我们根据原理修改构建顶点的方法，加入旋转和平移操作。可以看到生成的顶点结果和管道的。的方向已经正确对上了。
2024-10-27 22:06:00
545
原创 Cesium高级教程-管道图元-生成顶点数据
在代码中我们将每个顶点乘上了一个平移矩阵，因为生成的顶点是在坐标系原点（地球中心点）进行的，不好看结果。有了起点和终点，我们可以计算出管道的长度，然后在坐标原点进行顶点生成，将其封装成一个方法。假定一个管道的起点和终点如下，设管道半径为。为了查看生成的顶点数据，我们可以先将其通过。调用生成顶点的方法，传入相关参数。的方式添加到场景中显示出来。
2024-10-25 23:34:29
594
原创 Cesium高级教程-管道图元-图元分析建模
虽然生成管道的坐标点不是固定的，但是建模的时候我们一般先在坐标原点进行，最后经过矩阵变换将其转到正确的位置，任何管线都可以像下面这样建模。一根简单的管道通常由两个坐标点与半径构成（先不考虑厚度），管道的长度由构成管道的两个坐标点决定，其示意图如下。图形的顶点比较规则，上下两部分都是由构成一个圆的顶点组成，所以生成顶点时，按照圆周进行计算即可。然后通过旋转平移变换将其转到正确的位置。
2024-10-25 23:20:59
608
2
原创 Cesium高级教程-管道图元-管道图元简介
大多数时候使用Cesium加载地下管线都是使用专业的管线建模工具进行建模，然后转换为3DTiles进行加载，但是当需要实现流动效果或者动态更新数据时，这种静态的数据不一定适用，可能需要结合静态数据和动态数据一起使用。
2024-10-25 23:07:37
1345
原创 Cesium高级教程-渲染流程-场景渲染
类中的一个内部定义的方法，该方法中包含了Cesium三维场景渲染一帧所包含的关键步骤，在实现比如离屏渲染等功能可以参考此方法。方法更新帧状态，帧状态对象中存储了绘制一帧所需要的相关信息，比如绘制指令集合。方法，用于捕获渲染错误时发生的异常信息。，接下来我们看看场景中的渲染方法。
2024-10-24 22:44:42
1010
原创 Cesium高级教程-渲染流程-引擎初始化
的作用是通过鼠标移动/旋转/缩放场景，虽然看起来是操作场景，但是其实是改变相机。并且通过鼠标操作后并不是立即更新相机参数，而是将操作的信息先保存起来（比如鼠标滚轮滚动时，先记录滚动了多少），这些操作是由。方法中主要是根据场景的模式修改相机视椎体，场景模型切换到二维模式时才会进行修改，此处不多介绍，因为我们不考虑二维模式。可以以监听鼠标滚轮事件为例，进行源码的跟踪，因为代码非常之多，所以此处就不往下研究，感兴趣可以看源码。中被创建，创建完成后设置相机的基本信息，比如视椎体的宽高比。对象，在场景中会创建相机。
2024-10-24 22:41:59
852
原创 Cesium高级教程-渲染流程-程序入口
当然绝大部分情况下，我们不会选择单独使用渲染引擎部件，因为这只是Cesium框架的一种模块解耦设计，使用完整的框架功能，还是选择使用。这是因为从部件（组件）的层面上来说，Cesium将其框架内容分为了两大类，分别为渲染引擎部件和页面部件，渲染引擎部件主要就是。初始化各种部件以后，还为场景注册了默认的一些事件，比如单击实体进行选择，双击实体进行视角追踪。部件，这是Cesium中最核心的部件，是三维场景渲染的入口。，而页面部件就是页面上的那些小控件，比如时间线、搜索框等，而。部件后，从该部件中获取。
2024-10-24 22:39:07
765
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人