1.CesiumJS 源码杂谈 - 从光到 Uniform
2.Cesium专栏-气象要素(温度、修改修改降水)色斑图制作
3.cesium实现大批量POI点位聚合渲染优化方案
4.Cesium速成教程：一小时入门Cesium
5.cesium 之自定义气泡窗口 infoWindow 后续优化篇（附源码下载）
6.cesium 笔记-自定义Primitive

CesiumJS 源码杂谈 - 从光到 Uniform

       CesiumJS 源码探索：光照与Uniform的源码源码转换之旅

       CesiumJS 对光照的处理主要依赖于其底层API与WebGL着色器的交互。尽管它默认只支持一个太阳光，美化但通过DirectionalLight扩展，展示可模拟各种光照效果。修改修改光在CesiumJS中被转换为Uniform值，源码源码网狐 麻将源码以统一的美化形式传递给着色器执行。

       首先，展示CesiumJS的修改修改光照类型主要包括场景默认的太阳光和DirectionalLight，后者允许设定光照方向。源码源码例如，美化官方示例中的展示《Lighting》展示了如何运用DirectionalLight创建灯光效果。方向光多了一个方向属性，修改修改通常表示为单位向量。源码源码

       在源码中，美化光照信息通过UniformState对象在每帧渲染时传递给Renderer。这个过程始于Scene.js模块的render函数，其中的uniformState会更新来自FrameState的光照参数。当Context对象执行DrawCommand时，ShaderProgram的_uniforms列表会填充来自uniformState的值，包括那些由AutomaticUniforms自动更新的，如光的属性。

       光照Uniform在着色器中的应用十分广泛，如点云着色时使用czm_lightColor，冯氏着色法（Phong）材质通过czm_lightColor进行漫反射和高光计算，Globe.js则在GlobeFS片元着色器中使用czm_lightColor。在Model API的PBR着色法中，czm_lightColorHdr变量在光照阶段的计算中扮演重要角色。

       总的来说，CesiumJS的光照系统通过Uniform的转换，确保光照信息在复杂渲染流程中的顺畅传递。然而，深入研究光照材质，特别是在自定义光照效果方面，仍需要进一步学习实时渲染（RealTimeRendering）的知识。

Cesium专栏-气象要素(温度、降水)色斑图制作

       Cesium是一款用于构建虚拟地球Web应用的JavaScript开源产品，具有高性能、简洁收录网源码高精度、卓越的渲染质量以及跨平台特性，且易于使用。

       色斑图和等值线图是展示气象要素（如温度、降水）的可视化工具。在本篇文章中，我们将通过kriging.js进行色斑图的制作。kriging.js是一个用于全局范围插值的工具，但色斑图类似GIS中的专题图，因此我们需要在kriging.js的基础上进行源码修改，自定义色带和绘制网格色值。

       为了展示色斑图的最终效果，这里提供了一个示例（逐小时降水|温度）。

       制作色斑图的具体步骤如下：

       1. 定义色带（数据来源于中国天气网）

       2. 修改源码，自定义获取颜色值

       3. 更改赋值

       除了色斑图，等值线图是色斑图的进阶版，它通过将色值的边界线抽象出来，提供更细致的分析视角。等值线图可以通过turf.js生成，或者使用Java后台生成geojson格式的数据产品。

       由于某些原因，代码和数据无法在此处提供。如有合作需求，请联系作者QQ：。

cesium实现大批量POI点位聚合渲染优化方案

       在处理成千上万个甚至几十万个点位的聚合渲染优化问题时，仅使用 Cesium 的 entityCluster 聚合类可能会导致性能问题。为了解决这一问题，我们可以通过模仿 entityCluster 的实现方式，利用其核心算法，将其实现方式从 entity 改为 primitive。

       首先，获取 Cesium 的源码并搜索 EntityCluster 关键字，找到 EntityCluster.js 文件。此文件包含了实现聚合的逻辑核心。复制该文件，将其改名为 PrimitiveCluster。接着，双电机控制源码在 getScreenSpacePositions 方法中，删除与 entity 相关的逻辑，以避免因 item.id 为空导致的报错。

       完成源码的调整后，我们关注的重点是如何将调整后的代码应用于实际项目中，以避免在 canvas 相关方面出现错误。

       将调整后的代码整合到项目中，并在需要聚合渲染大量点位的场景中进行测试。确保在实际应用中，代码能够正常运行，同时实现高效的渲染效果。

       对于有兴趣深入了解和实践此优化方案的开发者，可以参考开源项目：github.com/tingyuxuan...。该项目集合了目前常用的三维动画场景，并持续更新，为开发者提供了丰富的资源和示例。

Cesium速成教程：一小时入门Cesium

       Cesium是JavaScript开发的WebGL三维地球和地图可视化库，支持多种地理数据类型，广泛应用于交通、规划、城市管理、地形仿真等领域。其高效的数据可视化平台，为三维GIS提供强大支持。Cesium特点包括：

       1. 跨平台、跨浏览器，无需插件，确保兼容性与灵活性。

       2. 强大地理数据可视化能力，自定义3D Tiles数据格式，支持海量数据渲染，提升显示效率。

       3. 提供丰富工具，包括三类地图模式、三维、二维、哥伦布视图（2.5D），openwrt修改源码ssh以及地图和地形图层定义、地址搜索、信息属性框等交互功能。支持全屏模型和网络虚拟现实(WebVR)体验。

       为了在Vue项目中集成Cesium，具体步骤如下：

       1. 使用pnpm创建项目。

       2. 选择Vue框架。

       3. 进入项目目录，安装依赖。

       4. 安装Cesium依赖。

       5. 修改vite.config.js文件，配置Cesium相关设置。

       6. 在app.vue中引入Cesium组件，并进行基础打印测试。

       7. 运行项目，验证Cesium集成效果。

       获取Cesium完整版PDF教程、视频和源代码的步骤：

       1. 关注指定公众号。

       2. 在公众号后台回复关键词"cesium"。

       以上步骤将帮助您快速上手Cesium，实现高效的三维数据可视化。

cesium 之自定义气泡窗口 infoWindow 后续优化篇（附源码下载）

       本文旨在深入探讨并实现一种基于cesium源代码的优化方案，以自定义气泡窗口（infoWindow）为核心，旨在提供更直观、更灵活的交互体验。相较于直接修改cesium源代码的临时方法，本篇内容将引导大家从更深层次理解cesium API，实现一种更加稳定、适应性强的自定义气泡窗口解决方案。

       自定义气泡窗口设计时，充分考虑了与cesium生态的融合，借鉴了leaflet的风格，使得视觉效果更为协调。通过精心设计，实现了气泡窗口的样式定制，以适应不同场景需求。

       对于气泡窗口位置的串口监听工具源码动态更新，本文提出了在postRender事件中进行处理的方法，确保窗口位置与地图元素的实时同步，提升用户体验。

       为促进社区交流与资源共享，本文特提供了一套实现方案的源码，供感兴趣的开发者参考与实践。如需获取源码，欢迎私信作者，费用为8.8元。

cesium 笔记-自定义Primitive

       在 Cesium 技术中，`Primitive` 是一个关键接口，尤其对于新手来说，通常会更熟悉 `Entity`。官方也提供了相应的指导文档来解释 `Entity` 和 `Primitive` 的区别。相比之下，`Entity` 在 Cesium 中属于更上层的接口，它封装了一系列的图形，提供了一致的对外 API，更加易于理解和使用。`Entity` 具备强大的属性功能，但性能方面不如更底层的 `Primitive`。而 `Primitive` 更多面向底层图形开发人员，通过 `Geometry` 和 `Appearance` 实现更底层的绘制操作。它提供了接近原始 WebGL 的接口，但在上层进行了一定的封装，使其相对于原始 WebGL 更加易于使用。

       使用 `Primitive` 创建一个矩形并添加贴图，主要代码如下。第一步是创建一个矩形，并添加所需的贴图。在第二步，我们考虑更改皮肤。我们知道，像 Windy 的色斑图渲染通常使用 canvas 方式，而现在我们使用单通道，可以考虑类似 Wind-Layer 的方式在着色器中进行双线性插值和着色，使渲染效果更佳。下面是如何进行改造的步骤。

       在着色器中，我们创建一个 * 1 的 canvas 来兼容渐变色带和非渐变色带，具体效果可以通过观察结果来验证。接着，我们修改材质的 uniforms，并新增一些数据以适应这个变化。然而，到目前为止，我们还无法获得预期效果。我们还需要修改 fabric 以添加一个新的材质着色器。最后，我们改变 options.colorScaleType，将其设置为 step，并指定插值步长，重新查看效果。

       在实现预期效果后，我们提出需求，需要针对瓦片数据进行拾取。基于材质的修改，我们尝试使用默认的 `scene.pick` 方法。虽然结果表明 `Primitive` 被正确拾取，但我们无法获取对应数据位置的像素数据。因此，我们考虑使用鼠标位置计算其在原始灰度数据瓦片的位置，然后读取数据。然而，在处理大规模图像数据时，这种方法在 JS 中操作效率较低。为提高效率，我们应考虑使用类似 `pick` 的方式通过 GPU 进行读取，这需要我们对 `Primitive` 进行自定义。

       自定义 `Primitive` 需要实现以下接口，以达到实现上节效果的目的。关键点包括顶点着色器实现、顶点数据生成、适应 3D 和 2D 渲染需求、数据投影兼容性、渲染过程和拾取操作。在 SCENE3D 下渲染时，代码可以正常工作，但在 SCENE2D 和 COLUMBUS_VIEW 视图中无法渲染。我们在查看 Cesium 相关资料时发现，实际内部使用的顶点数据是区分 3D 和 2D 的。在源码的 `Primitive.prototype.update` 函数中，可以看到它并未直接使用 `vertexArray` 的数据，而是经过了一系列处理步骤。这些步骤包括 `PrimitivePipeline.combineGeometry` 的处理，以及 `loadSynchronous` 和 `createVertexArray` 的具体工作，有兴趣的开发者可以自行查看源码。完成这些处理后，需要根据 `va` 的数量生成多个 `DrawCommand`。

       数据投影兼容性是实现自定义 `Primitive` 的重要部分，特别是在使用不同投影系统时。例如，当使用 Web Mercator 纹理数据时，需要对数据进行重投影计算。在实现中，这一步骤确保了与 Cesium 内部使用的投影系统相兼容。

       在创建 `DrawCommand` 同时，应创建与之对应的 framebuffer 的渲染。这两个渲染是一一对应的，fboShaderProgram 的顶点着色器复用真实绘制的顶点着色器，但在去除灰度值与色带的对应逻辑后，将计算结果保存到 framebuffer 的纹理输出。从 framebuffer 读取像素值的过程较为复杂，需要先将对应数据渲染到 framebuffer，然后读取鼠标位置的颜色值，根据传入参数计算像素值对应的数值。

       在完成以上步骤后，即可实现预期功能，如对鼠标位置的像素值进行计算，进而获取真实值。这涵盖了自定义 `Primitive` 的关键实现过程，包括渲染、拾取操作等，为实现更复杂的图形渲染功能提供了基础。

Cesium for UE插件编译

       Cesium for Unreal作为Cesium Native的扩展，它构建在C++类库基础上，提供了强大的3D地理空间处理功能，如3D Tiles传输流、Gltf解码编码、精确的3D运算和地理坐标系统支持。因此，使用Cesium for Unreal前，先要编译Cesium Native，它还是其他渲染引擎插件的基石，如Cesium for Unity和Cesium for Omniverse等。

       自己编译和定制UE的Cesium插件需要一定的技术基础，主要包括：理解并修改C++代码的能力，尤其是基本的调试技巧；熟悉Visual Studio（VS）环境；掌握HTTP网络协议；具备UE插件开发知识，以及WebGIS的基本原理，包括理解WMTS协议和地图加载逻辑。虽然看起来要求较多，但通过逐步教程，这个过程其实并不复杂。

       两篇文章详尽地阐述了编译、打包和源码修改的步骤，成功实现在天地图或Geoserver的WMTS上加载。以下是相关的技术资源：

       无需关注公众号，直接获取编译教程内容即可。

CesiumJS 更新日志 1. 与 1. - 新构建工具 esbuild 体验及 Model API 更替完成

       本文将对CesiumJS的1.与1.版本进行概述，并详细介绍构建工具esbuild的使用与新Model API的更替。对于1.版本，主要更新内容包括两项过期API消息。至于1.版本，尽管尚未发布，但在源码仓库中已完成Model API的替换，相关更新内容将持续更新。

       在新构建工具esbuild的引入中，CesiumJS项目经历了重大改进，包括优化代码构建过程，减小发行版库文件体积，提升加载速度以及解决Linux系统中Chrome浏览器的长期问题。esbuild的使用不仅带来更小体积的库文件，还加速了构建过程，显著缩短了网络加载时间。

       esbuild与Rollup的对比显示，CesiumJS在构建过程中存在未进行轻量化与最小化处理的问题。因此，选择esbuild作为构建工具，以替代Rollup，来实现ESModule到库文件的转换，同时解决WebWorker的遗留问题。目前，由于Firefox仍未在WebWorker中支持ESModule，开发人员暂时使用Rollup和RequireJS解决此问题。一旦Firefox更新支持，CesiumJS将完全切换至esbuild。

       构建过程中的重头戏包括旧构建指令的移除与新指令的用法。官方对构建脚本进行了重新评估和设计，包括构建、build-ts、build-docs、release等关键指令的引入或变更。这些更新旨在优化构建过程，提高效率并确保兼容性。

       使用esbuild进行构建后，CesiumJS的性能显著提升。例如，与使用gulp时的构建速度相比，使用build指令的加速效果十分明显，从加载时间到库文件大小，都实现了优化。此外，基于HTTP2的CDN传输体积也能进一步提升加载速度。

       未来CesiumJS可能考虑转向TypeScript，并在Firefox支持ESM后，彻底移除RequireJS和Rollup，以进一步加速构建过程和减小发布版本的库代码。对于开发者而言，了解如何最优地引入CesiumJS并利用CDN加速，以及避免应用打包器对CesiumJS的额外打包，将是提高项目性能的关键。

Cesium专栏-裁剪效果（基于3dtiles模型，附源码下载）

       Cesium是一款全球领先的JavaScript开源产品，专为构建高质量三维地球与地图的Web应用而设计。借助Cesium提供的JavaScript开发包，开发者能轻松创建无需插件的虚拟地球应用，且确保在性能、精度、渲染质量以及多平台兼容性与易用性方面达到高标准。

       探讨裁剪功能，这一概念在图像处理领域并不陌生。在三维场景中，Cesium能够实现类似PS中的裁剪效果，即动态调整视图区域，突出展示用户感兴趣的三维模型部分。本文重点介绍如何基于3dtiles模型实现这一功能。

       实现动态裁剪模型效果，需要遵循以下步骤：

       1. 初始化地球模型，并启用深度测试功能，确保场景中的元素正确排序，提升视觉效果。

       2. 创建一个切面平面对象，用以定义裁剪区域的边界。

       3. 加载3dtiles模型，并将裁剪平面应用到模型上，实现动态调整视图区域的功能。

       对于想要实践这一效果的开发者，我们提供了源码下载。只需点击下方链接，即可获取实现动态裁剪模型功能所需的Cesium源码。