CesiumJS 直接在 Web 浏览器中渲染 3D 地球和 2D 地图。它利用 WebGL 进行硬件加速图形处理,以可视化动态地理空间数据。
该库处理并显示地形、影像、3D 模型以及各种矢量数据格式。其架构支持实时和随时间变化的数据可视化。核心渲染和数据 API 位于 @cesium/engine 包中。用户界面组件(如动画控制和底图选择器)由 @cesium/widgets 包提供。有关这些包的详细信息,请参阅 Monorepo 结构和核心包
一个核心的 Viewer 类负责在 Web 应用程序中初始化和管理地球或地图。该库包含 Sandcastle(沙盒),这是一个交互式开发环境,用户可以在其中创建、编辑、执行和分享示例。有关更多信息,请参阅 交互式开发环境 (Sandcastle)。CesiumJS 是基于 Apache 2.0 许可的开源软件,并通过 Cesium ion 提供可选的商业服务。详细的文档支持开发和贡献工作。有关更多详细信息,请参阅 许可和版权信息 以及 文档和贡献工作流。
CesiumJS Library and Ecosystem 【CesiumJS 库与生态系统】
它专为跨各种平台和浏览器的动态数据可视化而设计,支持开放格式和可扩展的数据处理。该项目在 Apache 2.0 许可下维护一个开源核心,采用开放核心商业模式运营,其中 Cesium ion 的可选商业订阅提供 3D 内容托管和流式传输等附加服务。
就其核心而言,CesiumJS 的架构支持灵活的数据处理方法。用户可以从 Cesium ion 等平台流式传输 3D 内容,或集成来自其他在线或离线服务的数据,从而确保数据源的适应性。该库的主 Viewer 类有助于在 Web 应用程序中实例化地球或地图。
该项目构建为 Monorepo(单体仓库),其中在 @cesium/engine 包中包含核心渲染和数据 API,在 @cesium/widgets 包中包含 UI 组件。当与模块打包器一起使用时,这种模块化方法支持诸如 Tree-shaking(摇树优化)之类的优化。有关项目内部组织的更多信息,请参阅 [Monorepo 结构和核心包]
开发过程由 Documentation 中的综合文档支持,涵盖了从贡献指南到高级渲染技术的各个方面。贡献指南在 CONTRIBUTING.md 中概述,而 CODE_OF_CONDUCT.md 确立了社区行为标准。有关构建和开发工具的信息,请参阅 [构建和开发工具]。CONTRIBUTORS.md 中维护了为项目做出贡献的个人和组织的完整记录。@cesium/engine 和 @cesium/widgets 包在不同版本之间的变更详见 CHANGES.md。
Monorepo Structure and Core Packages / Monorepo 结构和核心包
CesiumJS 采用 Monorepo 结构,这为其核心组件提供了统一的开发体验,同时允许它们作为模块化的 npm 包被使用。这种架构促进了项目不同部分之间的代码共享、一致的工具链以及简化的依赖管理。主要的模块化组件是 @cesium/engine 和 @cesium/widgets
位于 packages/engine 中的 @cesium/engine 包封装了 CesiumJS 的基础渲染和数据 API。这包括核心 WebGL 可视化引擎、场景管理、几何处理和动态数据处理。通过将这些功能隔离到一个专用包中,应用程序可以集成地理空间渲染核心,而不必打包其他组件。
位于 packages/widgets 的 @cesium/widgets 包作为引擎的补充,提供了一套用户界面组件。这些小部件简化了 CesiumJS 应用程序中的常见任务,例如动画控制、底图选择、地理编码和调试。
这种使用作用域 npm 包的模块化方法支持现代开发实践,如 Tree-shaking(摇树优化),它通过仅包含实际使用的代码来优化应用程序包。这确保了使用 CesiumJS 构建的 Web 应用程序可以尽可能轻量级和高性能。项目根目录下的 README.md 文件重点介绍了这些包及其在整体架构中的作用。
Testing Infrastructure and Quality Assurance / 测试基础设施与质量保证
CesiumJS 项目实施了全面的测试基础设施,以确保其 3D 地球和 2D 地图可视化引擎的可靠性和正确性。该系统主要依赖 Jasmine 进行单元测试,并辅以自定义匹配器和强大的模拟(Mocking)框架。Playwright 被集成用于更广泛的测试场景,而 Sinon 用于精确控制基于时间的场景。
单元测试框架的核心位于 Specs 目录中。Jasmine 用于定义测试规范,自定义匹配器注册在 Specs/addDefaultMatchers.js 中。这些匹配器有助于 CesiumJS 特定的断言,例如验证渲染输出 (toRender, toPickPrimitive)、比较带有 epsilon 容差的浮点值 (toEqualEpsilon) 以及验证预期的错误条件 (toThrowDeveloperError, toBeRejectedWithDeveloperError)。
为了实现隔离和可预测的测试,框架包含了用于创建模拟对象和受控环境的实用工具。Specs 目录中的 createCamera、createCanvas、createContext、createFrameState、createGlobe 和 createScene 等函数生成核心 CesiumJS 组件的轻量级、可配置版本。对于数据提供者,MockDataSource、MockImageryProvider 和 MockTerrainProvider 允许测试人员模拟各种数据加载和处理行为,而无需外部依赖。测试数据生成还得到了诸如 Cesium3DTilesTester.js 等实用工具的支持,该工具可以程序化地创建各种 3D Tiles 二进制格式以用于内容解析测试。同样,ImplicitTilingTester.js 和 MetadataTester.js 分别生成模拟隐式子树数据和 glTF/元数据结构。Specs/Data 目录存储了各种测试资产,包括 3D Tiles、glTF 2.0 模型和各种文本文件。
Web Worker 对于分担计算密集型任务至关重要,也经过了彻底的测试。Specs/TestWorkers 目录包含各种 Worker 模拟,用于验证 createTaskProcessorWorker 框架内的错误处理、数据传输和配置访问。
对于静态类型检查,Specs/TypeScript/index.ts 文件执行类型兼容性验证,确保核心 CesiumJS 接口(如 ImageryProvider、TerrainProvider、DataSource 以及各种几何类型)的实现符合其 TypeScript 定义。
整体测试过程和质量保证通过 gulpfile.js 管理,其中包括运行测试和生成代码覆盖率报告的任务。有关更多信息,请参阅 构建和开发工具。代码标准和测试覆盖率的遵守由 ESLint(在 eslint.config.js 中配置)强制执行,并由定义在 .github 目录中的持续集成管道进行检查。更多详细信息请参阅 文档和贡献工作流。
Build and Development Tooling / 构建与开发工具
CesiumJS 的构建和开发工具通过 gulpfile.js 进行编排,利用各种工具来管理项目的生命周期,从编译和测试到文档和质量保证。此设置确保了在 Monorepo 结构中一致且高效的开发工作流。有关项目模块化架构的一般概述,请参考 Monorepo 结构和核心包。
由 gulpfile.js 管理的主要构建过程利用 gulp 来定义和自动化任务,例如构建核心 @cesium/engine 和 @cesium/widgets 包、生成文档和准备发布。项目采用 esbuild 因其快速的 JavaScript 模块打包能力,有助于为库及其各个工作区创建 ESM、IIFE 和 CommonJS 包。在构建过程中,GLSL 着色器文件被编译成 JavaScript 模块(包括压缩和注释剥离),静态资产(如图像和字体)被管理并复制到各自的输出目录。Web Workers(包括第三方的和 Cesium 特有的)也被打包以支持分担计算任务。scripts/build.js 脚本概述了这些过程,包括生成 SpecList.js 文件以集成各个测试规范,如 引擎测试套件和质量保证 中所讨论的。
为了保证代码质量和一致性,通过 eslint.config.js 使用 @cesium/eslint-config 以及 HTML、React hooks、React refresh 和 TypeScript 插件配置了 eslint。此设置强制执行 JavaScript 和 TypeScript 文件的编码标准,并针对 Node.js、浏览器环境和测试文件进行了调整。此外,cspell 用于拼写检查,其配置位于 .vscode 中。.vscode/.cspell/cspell-packages.txt 中的静态单词列表由脚本 .vscode/.cspell/gen-cspell-packages.js 补充,该脚本从 package.json 文件动态生成单词列表,以防止包名称产生误报。
文档生成是一个关键方面,由 gulpfile.js 配置的 jsdoc 处理。位于 Tools/jsdoc 的自定义 JSDoc 标签和模板扩展了标准 jsdoc 功能,以生成全面的 HTML 文档,其中包含用于内部构造函数、GLSL 组件、性能指标等的自定义标签。该系统还集成了客户端交互性,如导航过滤和键盘快捷键,以增强用户体验。文档和贡献工作流 进一步解释了此过程的细节。
项目还包含用于应用程序构建的专用工具。例如,gulpfile.apps.js 处理 Sandcastle 和 CesiumViewer 等应用程序的构建过程,管理特定环境的配置并使用 esbuild 进行打包。gulpfile.makezip.js 脚本负责创建可分发的 ZIP 压缩包,涉及的任务包括构建 Sandcastle 应用程序、将 GLSL 转换为 JavaScript 以及修改 package.json 以进行发布。
开发工作流还受益于支持动态服务和增量构建的工具。scripts/createRoute.js 模块提供了一个 Express 路由,用于动态服务 JavaScript 包,并与 ContextCache (scripts/ContextCache.js) 集成以进行按需编译和缓存,从而显著缩短开发迭代时间。这种缓存机制对于支持增量构建和动态内容交付至关重要。此外,scripts/isCI.js 提供了一个简单的实用工具来检测持续集成环境,允许构建过程相应地调整其行为。
Documentation and Contribution Workflow / 文档与贡献工作流
CesiumJS 项目维护着详尽的文档和结构化的工作流程,以指导用户和贡献者。详细的指南涵盖了从初始设置到发布管理的各个方面,促进了协作开发环境。
对于贡献者,Documentation/Contributors 目录中的一套专用指南概述了开发过程。这包括有关设置开发环境的说明,例如用于编译项目的 BuildGuide,以及用于配置 Visual Studio Code 相关扩展和调试设置的 VSCodeGuide。代码标准通过 CodingGuide 强制执行,该指南详细说明了 JavaScript 和 GLSL 约定、命名策略、使用 prettier 和 cspell 的格式化规则,以及 API 设计的最佳实践(包括弃用警告)。
文档本身是贡献过程的关键部分,DocumentationGuide 指定了用于生成参考资料的 JSDoc3 标签。质量保证通过全面的 TestingGuide 维护,该指南涵盖了使用 Jasmine 的单元测试、使用 Playwright 的广泛测试以及使用 Sinon 的基于时间的场景模拟,以及 GLSL 单元测试和代码覆盖率的具体说明。性能测试指导也可通过 PerformanceTestingGuide 获得。
贡献工作流程有明确的定义,从 CONTRIBUTING.md 文件开始,该文件概述了如何提交 issue 和开启 pull request(拉取请求)。代码贡献的一个基本要求是签署贡献者许可协议(CLA),详见 CLAs。项目使用 GitHub Action,即位于 .github/actions/check-for-CLA 的 check-for-CLA,自动验证 pull request 的 CLA。此操作会检查 Google Sheets 中的已签署 CLA,如果缺少签名,则在 pull request 上发表评论,并添加 "PR - Needs Signed CLA" 标签。代码审查的最佳实践在 CodeReviewGuide 中列出,强调了公共 API 更改、测试和 Git 工作流的注意事项。提交者(Committers)的具体职责在 CommittersGuide 中详细说明。
发布管理和持续集成也有完善的文档。ContinuousIntegration 指南描述了基于 GitHub Actions 的 CI 系统,包括 Sandcastle 和文档等制品的持续部署。ReleaseGuide 详细说明了月度发布、补丁发布和预发布的过程,确保一致且可靠的发布周期。所有更改都在 CHANGES.md 中细致记录,提供了 @cesium/engine 和 @cesium/widgets 包不同版本中的修复、新增功能、重大更改和弃用的全面日志。
项目还遵守 CODE_OF_CONDUCT.md,采用贡献者公约(Contributor Covenant)以确保相互尊重和包容的社区环境。外部第三方库及其各自的许可记录在 LICENSE.md 中,而内部版权信息可在 Source/copyrightHeader.js 中找到。
Core Rendering and Data APIs / 核心渲染和数据 API
CesiumJS 是一个 JavaScript 库,用于创建 3D 地球和 2D 地图,利用 WebGL 直接在 Web 浏览器中进行硬件加速可视化。渲染和数据 API 的核心功能主要位于 packages/engine 目录中,该目录也作为 @cesium/engine npm 包。该包提供了将 3D 地理空间可视化集成到 Web 应用程序中的基础组件。
该库的设计侧重于跨平台和跨浏览器兼容性,支持在各种环境下的动态数据可视化。将 Cesium 场景嵌入 Web 应用程序的主要入口点是 CesiumWidget,它负责初始化、管理渲染循环、集成数据源和控制相机。CesiumWidget 还处理错误报告和资源清理,确保一个健壮且管理良好的可视化环境。
核心引擎处理各种各样的视觉元素和数据格式。这包括渲染来自不同提供商的地形数据、显示影像图层,以及处理和可视化 3D Tiles 和 glTF 3D 模型。它还支持不同的矢量数据格式,允许进行全面的地理空间数据集成。CesiumJS 的架构支持创建丰富、交互式的 3D 和 2D 地图应用程序。
Core Engine Functionality: Geometry, Terrain, and Utilities / 核心引擎功能:几何、地形与实用工具
| Component Type/组件类型 | Name/名称 | Description/描述 | File Path/文件路径 |
|---|---|---|---|
| Geometric Primitives | AxisAlignedBoundingBox | A bounding box aligned with the X, Y, and Z axes. 与 X、Y 和 Z 轴对齐的边界框 | Core/AxisAlignedBoundingBox.js |
BoundingSphere | A bounding sphere with a center and a radius. 具有中心和半径的包围球。 | Core/BoundingSphere.js | |
CylinderGeometry | A description of a cylinder. 圆柱体的描述。 | Core/CylinderGeometry.js | |
EllipsoidGeometry | A description of an ellipsoid centered at the origin. 以原点为中心的椭球体的描述。 | Core/EllipsoidGeometry.js | |
RectangleGeometry | A cartographic rectangle on an ellipsoid centered at the origin. | Core/RectangleGeometry.js | |
| Terrain Providers | CesiumTerrainProvider | Provides tiled terrain using the Cesium terrain format. | Core/CesiumTerrainProvider.js |
EllipsoidTerrainProvider | A very simple terrain provider that produces geometry by tessellating an ellipsoidal surface. | Core/EllipsoidTerrainProvider.js | |
| Geocoders | BingMapsGeocoderService | Geocoding using the Bing Maps API. | Core/BingMapsGeocoderService.js |
PeliasGeocoderService | Geocoding using the Pelias API. | Core/PeliasGeocoderService.js | |
GoogleGeocoderService | Geocoding using the Google Maps API. | Core/GoogleGeocoderService.js |
CesiumJS 提供了 2D、3D 和 4D 几何图元的基本构建块、其操作和生成功能,以及用于地形数据和地理编码的服务。此核心功能对于表示和交互地理及空间数据至关重要。
该项目定义了基本的几何图元:
-
Cartesian2表示 2D 点或向量,支持大小、归一化和逐分量运算等操作。BoundingRectangle在此基础上构建了 2D 轴对齐边界框,支持交集检查和区域管理。 -
Cartesian3处理 3D 点或向量,提供广泛的操作,包括点积和叉积、归一化以及从球坐标和大地坐标的转换。AxisAlignedBoundingBox和BoundingSphere定义了用于空间查询和剔除的 3D 包围体。 -
Cartesian4将其扩展到 4D 空间,这对于某些数学变换和数据表示非常有用。 -
Cartographic专门使用经度、纬度和高度表示地理位置,并提供与Cartesian3相互转换的实用工具。 -
复杂形状如
BoxGeometry和BoxOutlineGeometry支持生成 3D 盒子的网格数据及其线框表示,支持各种顶点属性以进行渲染。也支持曲线(如CatmullRomSpline)来定义平滑路径。
为了显示地形,引擎集成了各种 TerrainProvider 实现。ApproximateTerrainHeights使用预定义的数据集提供快速的地形高度近似。专门的提供者,如 ArcGISTiledElevationTerrainProvider 、Cesium3DTilesTerrainProvider 和 CesiumTerrainProvider,处理来自不同来源的地形数据,包括 ArcGIS 服务、3D Tiles 和 Cesium 自己的量化网格格式。这些提供者负责管理瓦片请求、数据处理(包括用于 glTF 地形的 Cesium3DTilesTerrainGeometryProcessor)以及可用性。
同时提供了地理编码服务,支持将文本位置查询转换为地理坐标。BingMapsGeocoderService 使用 Bing Maps REST API 进行全球地址查找,而 CartographicGeocoderService提供客户端坐标字符串解析。
为了优化数据存储和传输,AttributeCompression 提供了用于压缩几何属性的实用工具,特别是使用 oct 编码的归一化向量和纹理坐标。这对于高效渲染和数据流式传输至关重要。
核心数据结构和枚举支持这些功能。AssociativeArray提供了一种高效的键值存储,针对查找和迭代进行了优化。诸如 ArcType 之类的枚举指定顶点的连接类型(例如,测地线路径),而 ArticulationStageType定义了 glTF 模型关节的运动类型。这些基础组件对于引擎表示和渲染各种 2D 和 3D 地理空间数据的能力至关重要。
Dynamic Data Visualization with DataSources / 使用 DataSource 进行动态数据可视化
CesiumJS 采用属性驱动、基于事件的系统来管理和可视化动态图形实体,提供核心的 DataSource 功能以及强大的时变属性系统。这种架构确保视觉元素能够对随时间变化做出反应,将各种图形图元转换为可渲染的场景元素。
基本抽象是 DataSource,它充当提供实体实例的对象的接口。一个具体的实现允许手动管理 EntityCollection 中的实体,并通过 EntityCluster 促进聚合。位于 packages/engine/Source/DataSources/DataSourceClock.js 的 DataSourceClock 封装了 DataSource 的时间设置,支持控制 startTime、stopTime 和 currentTime。
这种动态可视化的一个核心组件是属性系统,它允许视觉属性随时间变化。 CallbackProperty 和 CallbackPositionProperty 支持通过用户提供的回调进行值的延迟求值,从而使动态数据更加高效。对于常量值,使用 ConstantProperty 和 ConstantPositionProperty。当属性在不同的时间间隔内发生变化时, CompositeProperty、 CompositeMaterialProperty 和 CompositePositionProperty 会聚合多个属性,每个属性在特定的时间范围内有效。BoundingSphereState 枚举用于跟踪包围球计算的状态,指示计算是已完成、挂起还是失败。
各种 Graphics 类定义了几何图元的视觉属性,相应的 Visualizer 类将这些属性转换为 Cesium 场景中的可渲染元素。例如, BillboardGraphics 描述 2D 图标,而 BillboardVisualizer 负责将其渲染为 Billboard 图元,包括与 EntityCluster 的聚合交互。同样, BoxGraphics 和 BoxGeometryUpdater 处理盒子的可视化。CorridorGraphics 和 CorridorGeometryUpdater 管理贴地的走廊形状。对于 3D Tiles, Cesium3DTilesetGraphics 和 Cesium3DTilesetVisualizer 将实体属性映射到 Cesium3DTileset 图元。像 CheckerboardMaterialProperty 和 ColorMaterialProperty 这样的材质属性允许动态图案和纯色。
For processing external data, CzmlDataSource in packages/engine/Source/DataSources/CzmlDataSource.js parses CZML data to create and update entities and their graphic properties, handling time-varying data and interpolation. To aggregate multiple entity collections, CompositeEntityCollection in packages/engine/Source/DataSources/CompositeEntityCollection.js non-destructively combines them, managing entity merging and property prioritization based on collection order, and provides mechanisms for event suspension to optimize performance during batch operations.
对于处理外部数据, CzmlDataSource 解析 CZML 数据以创建和更新实体及其图形属性,处理时变数据和插值。为了聚合多个实体集合, CompositeEntityCollection 非破坏性地组合它们,管理实体合并和基于集合顺序的属性优先级,并提供事件挂起机制以优化批处理操作期间的性能。
WebGL Rendering Abstraction Layer / WebGL 渲染抽象层
CesiumJS 通过分层抽象管理 WebGL 渲染,提供基于命令的架构、高效的资源管理和高级着色器处理。该层集中了与 WebGL API 的交互,支持 WebGL1 和 WebGL2 环境,同时适应硬件能力。
此抽象的核心是 Context 对象,定义在 packages/engine/Source/Renderer/Context.js 中。该对象初始化 WebGL 渲染上下文,管理其生命周期、功能和扩展。它查询硬件相关的限制,例如最大纹理尺寸和组合纹理单元,这些限制通过 packages/engine/Source/Renderer/ContextLimits.js 中的 ContextLimits 暴露。Context 提供了清除缓冲区、绘制元素、读取像素和管理全局 WebGL 状态的方法。它还实现了一种基于颜色的拾取机制,将唯一的 RGBA 颜色与对象关联以进行交互式选择。可以启用错误检查以在开发过程中捕获 WebGL 问题。
渲染操作封装在基于命令的架构中:
-
ClearCommand指定清除Framebuffer的颜色、深度或模板缓冲区的指令。 -
DrawCommand表示单个绘制调用,包含所有必要信息,如几何体、着色器程序、Uniform 变量和渲染状态。这些命令包括用于剔除、阴影和拾取行为的标志,并且可以浅克隆以进行变体绘制。 -
ComputeCommand定义通用 GPU 计算,指定着色器逻辑、Uniform 映射和输出纹理。这些命令由ComputeEngine执行,它通过片段着色器将全屏四边形渲染到离屏纹理。
高效的资源管理是渲染层的核心:
-
Buffers: The
Bufferclass (packages/engine/Source/Renderer/Buffer.js) manages WebGL buffer objects (vertex, index, pixel). It provides methods for creation, data transfer, and destruction, distinguishing betweenSTREAM_DRAW,STATIC_DRAW, andDYNAMIC_DRAWusage hints as defined inBufferUsage(packages/engine/Source/Renderer/BufferUsage.js).缓冲区(Buffers):
Buffer类 管理 WebGL 缓冲区对象(顶点、索引、像素)。它提供了创建、数据传输和销毁的方法,并根据BufferUsage中的定义区分STREAM_DRAW、STATIC_DRAW和DYNAMIC_DRAW使用提示。 -
帧缓冲区(Framebuffers):
Framebuffer类 抽象了用于离屏渲染的 WebGL 帧缓冲区对象。它允许附加Texture或Renderbuffer对象作为颜色、深度和模板目标,处理其生命周期并根据 WebGL 限制验证配置。FramebufferManager进一步管理帧缓冲区资源,支持多重采样和动态调整大小。 -
渲染缓冲区(Renderbuffers):
Renderbuffer类封装了 WebGL 渲染缓冲区对象,管理其创建、存储分配(包括多重采样)和销毁。它与RenderbufferFormat集成以进行格式验证。 -
纹理(Textures):
CubeMap和CubeMapFace管理立方体贴图纹理,处理创建、面特定数据的加载、通过Sampler进行采样配置以及多级渐远纹理(mipmap)生成。MipmapHint为 mipmap 生成质量提供指导。PixelDatatype定义了像素数据类型,并提供用于 WebGL 常量转换和字节大小计算的实用工具。
着色器管理处理编译、缓存和自动 Uniform 变量:
-
ShaderProgram管理 WebGL 着色器程序,包括编译、链接、Uniform/属性发现,并与ShaderCache集成以优化重用 -
ShaderBuilder通过管理定义、Uniform 和函数等组件,促进 GLSL 着色器程序的动态构建。 -
AutomaticUniforms定义了一组内置 GLSL Uniform 变量(例如czm_modelViewProjection、czm_viewport),它们自动将常见的渲染器状态暴露给着色器,从而简化着色器开发。 -
RenderState类定义并应用 WebGL 渲染管道状态,如剔除、深度测试和混合。RenderState对象是不可变的,通过缓存进行管理,并具有优化的partialApply方法,该方法仅应用更改的状态以最小化 WebGL 调用。PassState为特定的渲染通道补充这些状态,按需覆盖混合和剪裁测试。Pass枚举定义了渲染管道内命令的执行顺序。
Scene Management and Visual Elements / 场景管理与视觉元素
| Category | Component Name | Purpose | File Name |
|---|---|---|---|
| Core Rendering Concepts | AlphaMode | Defines how alpha values are interpreted for rendering, supporting opaque, masked, and blended modes. 定义渲染时如何解释 Alpha 值,支持不透明、遮罩和混合模式。 | AlphaMode.js |
Appearance | Defines the GLSL shaders and render state for drawing a primitive, allowing customization of material and rendering properties. 定义用于绘制图元的 GLSL 着色器和渲染状态,允许自定义材质和渲染属性。 | Appearance.js | |
BlendingState | Encapsulates blend equations, blend functions, and enablement for blending operations during rendering, providing common pre-defined states like alpha and additive blend. 封装渲染期间混合操作的混合方程、混合函数和启用状态,提供常见的预定义状态,如 Alpha 混合和叠加混合。 | BlendingState.js | |
BlendEquation | Specifies how source and destination pixel values are combined (e.g., add, subtract, min, max). 指定源像素值和目标像素值如何组合(例如,相加、相减、取最小值、取最大值)。 | BlendEquation.js | |
BlendFunction | Defines how blending factors are computed for RGB and alpha components of pixels. 定义如何计算像素的 RGB 和 Alpha 分量的混合因子。 | BlendFunction.js | |
| Scene Elements | Atmosphere | Manages common atmosphere settings for 3D Tiles and models, controlling sky atmosphere, ground atmosphere, and fog effects. 管理 3D Tiles 和模型的通用大气设置,控制天空大气、地面大气和雾效。 | Atmosphere.js |
Billboard | Represents a viewport-aligned image in the 3D scene, used within a BillboardCollection. 表示 3D 场景中与视口对齐的图像,用于 BillboardCollection 中。 | Billboard.js | |
BillboardCollection | Manages a renderable collection of Billboard objects, optimizing rendering by sharing textures and GPU resources. 管理一组可渲染的 Billboard 对象,通过共享纹理和 GPU 资源来优化渲染 | BillboardCollection.js | |
Axis | Defines constants for the X, Y, and Z axes and provides utility functions for coordinate system conversions. 定义 X、Y 和 Z 轴的常量,并提供用于坐标系转换的实用函数 | Axis.js | |
| Data Loading and Processing | AttributeType | An enum defining GLSL attribute types (e.g., SCALAR, VEC2, MAT4) for glTF and 3D Tiles, with utilities for getting component counts and GLSL type strings. 定义 glTF 和 3D Tiles 的 GLSL 属性类型(例如 SCALAR、VEC2、MAT4)的枚举,包含获取分量计数和 GLSL 类型字符串的实用工具。 | AttributeType.js |
BatchTable | Creates and manages a texture-based batch table for looking up per-instance attributes in batched primitives, handling data storage and shader integration. 创建和管理基于纹理的批处理表,用于在批处理图元中查找每个实例的属性,处理数据存储和着色器集成。 | BatchTable.js | |
BatchTableHierarchy | Handles the 3DTILES_batch_table_hierarchy extension for 3D Tiles, enabling hierarchical property inheritance for features. 处理 3D Tiles 的 3DTILES_batch_table_hierarchy 扩展,支持要素的层次属性继承。 | BatchTableHierarchy.js | |
BufferLoader | Loads embedded or external buffers, primarily for 3D Tiles and glTF assets, managing the asynchronous loading process. 加载嵌入式或外部缓冲区,主要用于 3D Tiles 和 glTF 资产,管理异步加载过程。 | BufferLoader.js | |
B3dmParser | Parses Batched 3D Model (.b3dm) files, extracting glTF, feature table, and batch table data. 解析 Batched 3D Model (.b3dm) 文件,提取 glTF、要素表和批处理表数据。 | B3dmParser.js | |
BoundingVolumeSemantics | Utilities for parsing bounding volume semantics (box, region, sphere, heights) from 3D Tiles 1.1 metadata. 用于解析 3D Tiles 1.1 元数据中的包围体语义(盒、区域、球体、高度)的实用工具。 | BoundingVolumeSemantics.js | |
| Imagery Providers | ArcGisMapServerImageryProvider | Provides tiled imagery from an ArcGIS MapServer, supporting both cached and dynamically generated tiles, and ArcGIS base map types. 从 ArcGIS MapServer 提供瓦片影像,支持缓存和动态生成的瓦片,以及 ArcGIS 底图类型。 | ArcGisMapServerImageryProvider.js |
ArcGisBaseMapType | Enumerates the supported ArcGIS image tile layers for base maps. 枚举支持的 ArcGIS 底图影像瓦片层。 | ArcGisBaseMapType.js | |
ArcGisMapService | Provides default settings and utilities for accessing ArcGIS image tile services, including default access tokens and server URLs. 提供访问 ArcGIS 影像瓦片服务的默认设置和实用工具,包括默认访问令牌和服务器 URL | ArcGisMapService.js | |
Azure2DImageryProvider | Delivers 2D imagery tiles from Azure Maps, handling tile requests and attribution. 提供来自 Azure Maps 的 2D 影像瓦片,处理瓦片请求和属性信息。 | Azure2DImageryProvider.js | |
BingMapsImageryProvider | Provides tiled imagery using the Bing Maps Imagery REST API, including support for various map styles and quadkey conversions. 使用 Bing Maps Imagery REST API 提供瓦片影像,包括支持各种地图样式和 quadkey 转换。 | BingMapsImageryProvider.js | |
BingMapsStyle | Defines the available styles for Bing Maps imagery (e.g., aerial, road). 定义 Bing Maps 影像的可用样式(例如,航空、道路) | BingMapsStyle.js | |
| Post-processing | BrdfLutGenerator | Generates a Bidirectional Reflectance Distribution Function (BRDF) lookup table (LUT) used for physically-based rendering (PBR). 生成用于基于物理渲染 (PBR) 的双向反射分布函数 (BRDF) 查找表 (LUT) | BrdfLutGenerator.js |
BoxEmitter | A particle emitter that generates particles randomly within a defined box volume, with initial velocities emanating from the box's center. 粒子发射器,在定义的盒子体积内随机生成粒子,初始速度从盒子中心发出。 | BoxEmitter.js | |
BillboardLoadState | An enum tracking the loading state of a billboard's image, from initialization to ready or error. 跟踪 Billboard 图像加载状态的枚举,从初始化到就绪或错误。 | BillboardLoadState.js | |
BatchTexture | Manages textures for per-feature color, show/hide, and picking in batch or feature tables, optimizing GPU memory and updates. 管理用于批处理或要素表中每个要素的颜色、显示/隐藏和拾取的纹理,优化 GPU 内存和更新。 | BatchTexture.js |
CesiumJS 的场景管理和视觉元素定义了 3D 地球和 2D 地图如何渲染以及如何与各种视觉组件(如大气效果、动态数据以及不同的影像和地形格式)进行交互。这包括核心渲染框架以及在虚拟地球中显示地理参考模型、瓦片和效果的组件。
这些功能的基础目录是 packages/engine/Source/Scene。该目录负责管理和渲染 3D 场景中的视觉组件,从基本的几何外观到复杂的大气效果和地理空间影像。它定义了核心渲染参数、场景元素的数据结构,以及加载和处理不同数据类型的机制。
Core Rendering Concepts and Utilities / 核心渲染概念和实用工具
渲染参数通过各种枚举和类进行管理。例如,透明度由 AlphaMode 处理,它指定了渲染期间如何解释 Alpha 值(例如 OPAQUE、MASK、BLEND)。图元的视觉属性由 Appearance 定义,它封装了 GLSL 着色器和 WebGL 渲染状态。混合配置(包括混合方程和因子)由 BlendEquation 和 BlendFunction 定义,而 BlendingState 提供了标准的混合预设。AttributeType 定义了 glTF 和 3D Tiles 的属性类型,提供了用于类型转换和着色器集成的实用工具。Axis 定义了坐标系轴,并提供了 Matrix4 常量以在不同的“向上”方向之间进行转换。
Scene Elements and Management / 场景元素与管理
3D 场景中的单个 2D 图像(称为 Billboard/广告牌)由 Billboard 类定义和管理。这些对象通过 BillboardCollection 组织成集合,该集合通过纹理图集、批处理和实例化来优化渲染。Billboard 图像的加载状态由 BillboardLoadState 跟踪。大气效果由 Atmosphere 控制,该类管理天空、地面和雾效的设置。粒子系统可以使用发射器实现,如 BoxEmitter,它将粒子随机放置在一个可配置的 3D 盒子中。
Data Loading and Processing / 数据加载与处理
加载和处理 3D Tiles(一种用于流式传输大型 3D 数据集的格式)是一项核心功能。B3dmParser 解析 Batched 3D Model (b3dm) 数组缓冲区,提取要素和批处理表数据。批处理图元的逐实例属性由 BatchTable 管理,它通过着色器中的纹理查找来存储属性。允许要素继承属性的 3DTILES_batch_table_hierarchy 扩展由BatchTableHierarchy 管理。批处理要素的视觉属性(如颜色和可见性)由 BatchTexture 处理。BoundingVolumeSemantics 解析来自 3D Tiles 1.1 元数据的包围体和高度语义。二进制缓冲区由BufferLoader 加载和管理。
Imagery Providers / 影像提供器
各种影像提供者允许摄取和显示来自外部来源的地图数据。对于 ArcGIS,ArcGisBaseMapType 枚举了支持的底图类型, ArcGisMapServerImageryProvider 提供瓦片影像,包括对要素拾取的支持。ArcGisMapService 管理 ArcGIS 服务的默认设置和访问令牌处理。Azure2DImageryProvider 提供来自 Azure Maps 的 2D 图像瓦片。同样,BingMapsImageryProvider 和 BingMapsStyle 集成了 Bing Maps 影像。
Post-processing / 后处理
后处理效果增强了场景的视觉质量。AutoExposure 通过对渲染场景的颜色纹理执行并行轻量化技术,计算平均场景亮度以进行色调映射。这有助于调整场景亮度以避免过度曝光或曝光不足。基于物理的渲染 (PBR) 通过 BrdfLutGenerator 支持,它生成用于精确光反射计算的双向反射分布函数 (BRDF) 查找表 (LUT) 纹理。
Web Worker Offloading for Performance / 使用 Web Worker 提高性能
CesiumJS 利用 Web Worker 将计算密集型任务(主要是几何生成和处理)从主浏览器线程卸载。这种设计模式确保了即使在处理复杂的 3D 数据和大型数据集时,用户界面也能保持响应。此架构的核心是在单独的执行上下文中创建和处理各种 2D 和 3D 几何体以及地形和矢量瓦片数据的能力。
核心实用函数 createTaskProcessorWorker 包装了特定的处理逻辑,使其能够从主线程接收任务并返回结果。此包装器处理通信样板、错误处理和数据的高效传输。
对于几何体创建,像 createBoxGeometry、createCircleGeometry,以及 createPolygonGeometry 等模块会生成各自对应的几何体形状。这些函数通常接受几何体参数的打包表示形式和一个可选的偏移量来解包数据,从而简化了线程之间的数据传输。
在生成最终几何体之前,会克隆内部属性如 _center 或 _ellipsoid,以确保数据完整性并防止因共享引用而产生的意外副作用。通用的几何体创建流程由 createGeometry 协调管理,该函数会根据需要动态导入专门的几何体生成模块。
除了基本几何体外,Web Workers还在处理更复杂的数据结构方面发挥着重要作用。例如,combineGeometry 能够高效地合并几何体数据。系统还支持生成约束折线,通过处理createVectorTileClampedPolylines,对压缩的位置和高度数据进行解码,生成可渲染的几何体。
对于矢量瓦片,createVectorTileGeometries 负责生成和变换3D几何体(如立方体、圆柱体、椭球体和球体),而 createVectorTilePoints 则将点数据解压缩并解码为笛卡尔坐标。
地形数据处理同样利用了Web Workers来处理各种地形格式的顶点缓冲区和索引缓冲区生成,这在 createVerticesFromCesium3DTilesTerrain 和 createVerticesFromQuantizedTerrainMesh 中都有体现。
这个Worker架构的一个关键设计原则是广泛使用可传输对象(例如 ArrayBuffer 实例)和 pack/unpack 机制。这种方法确保大数据集在主线程和Worker之间高效传输,避免了昂贵的序列化/反序列化操作,进一步提升了性能。此外,在 Worker 函数内使用"临时"对象有助于在计算过程中最小化内存分配,减少垃圾回收的开销。
Third-Party Integrations in the Engine / 引擎中的第三方集成
核心的CesiumJS引擎集成了外部功能来增强其能力,特别是在处理专业化数据格式和通过WebAssembly优化性能方面。这些集成经过精心管理,确保在引擎架构内无缝运行。
一个关键的集成涉及使用WebAssembly (WASM) 模块来卸载计算密集型任务并将C++ API暴露给JavaScript。这主要由JavaScript包装器促成,以 packages/engine/Source/ThirdParty/Workers 中的文件为例。该包装器处理WASM模块的动态加载和初始化,例如 basis_transcoder.wasm,这对高效数据处理至关重要。它提供了管理JavaScript和WASM之间共享内存的机制,包括WASM堆的分配、释放和调整大小,并确保JavaScript类型化数组视图(HEAP8、HEAPU8 等)与底层WASM内存保持一致。
还实现了一个全面的Embind系统来管理JavaScript和C++之间的数据类型转换,支持基本类型、字符串、枚举、值对象和内存视图。该系统还负责将C++函数、类方法和构造函数暴露给JavaScript环境,并提供强大的互操作错误处理机制。
另一个关键的第三方集成是Google Earth DBRoot协议缓冲区的解析,由 packages/engine/Source/ThirdParty/google-earth-dbroot-parser.js 处理。该组件提供了专门用于解码、验证并将二进制DBRoot数据转换为结构化JavaScript对象的JavaScript类。
这些类基于 dbroot_v2.proto 定义生成,使引擎能够处理外部的Google Earth数据,支持各种消息类型,如 StringEntryProto、PlanetModelProto、StyleAttributeProto 和 NestedFeatureProto。
该功能包括用于解码二进制流的静态方法、验证对象是否符合DBRoot消息结构,以及将消息实例与普通JavaScript对象之间进行转换以便序列化。这种集成确保了CesiumJS能够有效地解释和可视化来自Google Earth环境的复杂地理数据。
CesiumWidget: The Primary Viewport / CesiumWidget:主视窗
CesiumWidget 充当将CesiumJS 3D地球可视化集成到Web应用程序中的主要入口点。它封装了显示和与Cesium场景交互所需的核心功能,管理底层的WebGL上下文、DOM元素和各种可视化组件。
CesiumWidget 负责3D场景的初始化和持续管理。这包括创建和配置必要的HTML元素,例如用于渲染的画布以及署名和错误消息的显示。它协调管理Cesium Scene 以及可选功能如 Globe、SkyBox、SkyAtmosphere 和 ImageryLayer。
CesiumWidget 的一项关键职责是管理渲染循环,该循环持续更新显示的场景。开发者可以选择默认的自动渲染循环或手动控制帧渲染。该组件还会动态调整画布大小和相机视锥体,以在不同分辨率和窗口尺寸下保持最佳的显示效果和性能。
对于数据可视化,CesiumWidget 集成了 DataSourceCollection 和 DataSourceDisplay 来渲染各种数据类型,如实体、影像和3D瓦片集合。它可以自动同步场景时钟与新添加数据源的时间轴,从而实现动态的、时间变化的可视化效果。
相机控制是另一项核心功能。CesiumWidget 允许相机跟踪特定的实体,确保它们始终在视野范围内。它还提供了编程方法,如 zoomTo 和 flyTo,用于将相机移动到预定义的位置或目标,支持在可能需要先加载目标数据的场景下进行异步操作。
CesiumWidget 包含了强大的错误报告机制,当渲染错误发生时显示用户友好的面板。最后,它通过 destroy() 方法确保适当的资源管理,清理所有相关的Cesium对象和DOM元素,以防止在不再需要组件时发生内存泄漏。该组件的样式(包括错误面板和浅色主题选项)分别在 packages/engine/Source/Widget/CesiumWidget.css 和 packages/engine/Source/Widget/lighter.css 中定义。
Engine Test Suite and Quality Assurance / 引擎测试套件与质量保证
CesiumJS引擎包含一个综合性的测试框架,主要位于 packages/engine/Specs 目录中。该框架确保核心功能的正确性、行为规范以及在各种环境下的WebGL兼容性。
测试套件的结构设计为与引擎架构相对应,对从基础几何体和坐标系统到复杂数据源和WebGL渲染的各个组件提供详细验证。例如,packages/engine/Specs/Core 中的测试验证2D、3D和4D几何构造的操纵和生成,如 AxisAlignedBoundingBox、BoundingSphere 和各种 Cartesian 类型,以及地形数据提供者和地理编码服务。这包括检查包围体的 intersectPlane 操作或向量的 magnitude 等属性。属性压缩技术,如八面体编码/解码和ZigZag Delta解码,也在 packages/engine/Specs/Core/AttributeCompressionSpec.js 中进行验证,以确保数据优化的同时不损失精度。
位于 packages/engine/Specs/DataSources 的数据源测试套件专注于动态图形实体的管理和可视化。这些测试涵盖了核心 DataSource 功能,包括用于创建和更新广告牌图元的 BillboardVisualizer(在 packages/engine/Specs/DataSources/BillboardVisualizerSpec.js 中测试),以及各种几何体更新器用于将图形转换为可渲染实例。
很大一部分测试专注于基于属性的事件驱动时间变化数据系统,确保属性(ConstantProperty、CallbackProperty、CompositeProperty)正确更新并触发事件,以及数据源管理类如 CzmlDataSource(在 packages/engine/Specs/DataSources/CzmlDataSourceSpec.js 中测试)和 DataSourceDisplay 正确加载和可视化数据。
WebGL渲染组件在 packages/engine/Specs/Renderer 中得到彻底测试。这包括验证自动uniforms、缓冲区和GLSL内置函数的行为(在 packages/engine/Specs/Renderer/BuiltinFunctionsSpec.js 中测试)。
基于命令的渲染架构,包括 ClearCommand 和 ComputeCommand,经过验证以确保正确的执行和资源管理。帧缓冲区(例如 Framebuffer、MultisampleFramebuffer)、纹理(Texture3D、TextureAtlas)和着色器管理(ShaderProgram、ShaderCache)也经过测试以确保高效和准确的渲染。
createWebglVersionHelper 实用工具(在 packages/engine/Specs/createWebglVersionHelper.js 中找到)用于在WebGL 1和WebGL 2上下文中执行测试块,确保广泛的兼容性。
在 packages/engine/Specs/Scene 中描述的场景功能涵盖了诸如广告牌集合(在 packages/engine/Specs/Scene/BillboardCollectionSpec.js 中测试)、大气效果、粒子系统以及3D瓦片和影像格式的加载与处理等元素。对影像提供者的测试,如 ArcGisMapServerImageryProvider(在 packages/engine/Specs/Scene/ArcGisMapServerImageryProviderSpec.js 中测试),确认其符合 ImageryProvider 接口规范,并正确处理空间参考和特征拾取功能。类似地,Cesium3DTile(在 packages/engine/Specs/Scene/Cesium3DTileSpec.js 中测试)及相关组件针对包围体管理、几何误差计算和样式化进行了广泛测试。CesiumWidget(在 packages/engine/Specs/Widget/CesiumWidgetSpec.js 中测试)作为嵌入Cesium场景的主要视口,会针对初始化、资源清理、相机交互和错误报告等方面进行测试。