CesiumJS 有两种卷帘，一种是 ImageryLayer 的对比，一种是 3DTiles 或 Model 的对比。官方示例均能找到，目前仅支持左右对比。1. 核心原理1.1. 影像图层对比原理通过控制不同 ImageryLayer 所处的地球瓦片（QuadtreeTile、GlobeSurfaceTile）的透明度实现。可以在 GlobeFS.glsl 着色器代码中找到这么一段： {代码...} ...

你知道吗？Cesium 是元素 铯 的英文单词，而 铯原子钟 具有世界上最高的计时精度时间，是时刻间隔的意思，时刻是静态的点；而时间就指有起止时刻的一段范围很多应用都要有一个时钟，例如 GPS 授时、实时渲染系统，时间可以测量很多事物，万物运动也体现了时间在流逝1. 时间的“诞生”首次创建时间是出现在 Scene 的构造函...

之前对实时渲染（RealTimeRendering）的殿堂就十分向往，也有简单了解过实时渲染中的光，无奈一直没能系统学习。鉴于笔者已经有一点 CesiumJS 源码基础，所以就抽了一个周末跟了跟 CesiumJS 中的光照初步，在简单的代码追踪后，发现想系统学习光照材质，仍然是需要 RTR 知识的，这次仅仅了解了光在 CesiumJS 底层中是如...

这篇如果 Vue 和 CesiumJS 不发生史诗级的变动，应该不会再有后文了。主要是这类文章没什么营养。这篇主要修正上篇 [链接] 中一些插件的变化，并升级开发服务器的版本。心急的朋友拉到文末，有示例工程链接下载。1. 本篇适用范围与目的1.1. 适用范围严格使用 Vue3 + TypeScript 的前端项目，包管理器默认使用 pnpm构建工...

CesiumJS 能用的 WMTS 目前只支持两种切片方案（TilingScheme）：0 级瓦片有 2 个的 GeographicTilingScheme0 级瓦片只有 1 个的 WebMercatorTilingScheme光说很抽象，上图：0 级瓦片有 2 个的投影，是直接以经纬度数值展平成平面，众所周知：$$ 纬度跨度:经度跨度 = 180:360 = 1:2 $$所以 GeographicTilingScheme 的样...

明确一个定义，在 Primitive API 中应用着色器，实际上是给 Appearance 的 vertexShaderSource、fragmentShaderSource 或 Material 中的 fabric.source 设置着色器代码，它们所能控制的层级不太一样。但是他们的共同目的都是为了 Geometry 服务的，它们会随着 CesiumJS 的每帧 update 过程，创建 ShaderProgram，创建 Dr...

Primitive API 还包括 Appearance API、Geometry API 两个主要部分，是 CesiumJS 挡在原生 WebGL 接口之前的最底层图形封装接口（公开的），不公开的最底层接口是 DrawCommand 为主的 Renderer API，DC 对实时渲染管线的技术要求略高，可定制性也高，这篇还是以 Primitive API 为侧重点。

这篇介绍的在 Awesome GIS 基本上都有，经过我的筛选，在 npmjs.com 上也都能找到，方便融入日益强大的 npm 生态。不过这些库大部分都保留了全局库的形式，在非框架中也能使用。有一部分是浏览器 + NodeJS 双端可用的。

CesiumJS 和 glTF 之间有一段很长的合作关系。在 2012 年，CesiumJS 就实现了一个 glTF 加载器，是最早的一批加载器了，当时的 glTF 叫做“WebGLTF”。

如何创建前端 WebGPU 项目？1. 丐版 HelloWebGPU最简单的 WebGPU 程序应该是这样的： {代码...} 将上面的代码保存成 index.html，双击打开就可以在控制台看到输出的对象：如果你是什么都不会的新手，那么接下来这几个问题我只说一次。当然，老手可以选择性跳过。① 为什么是 index.html不为什么，你喜欢可以改成 home.htm...

原文 [链接]本文如何使用 WebGPU 的时间戳查询（timestamp-query）功能来计算你的 GPU 指令执行耗时。在 WebGPU 中，时间戳查询是一项可选功能，不一定全部实现版本都有。撰写本文时，出于安全考虑，在浏览器上是禁用的（具体原因参考 gpuweb/gpuweb #2218）概述下面先简单介绍时间戳查询的流程：请求设备对象时加上 tim...

截止发文，1.97 还未发布，但已经在源码仓库完成了 Model API 的替换，文章会跟进。本文着重介绍新的构建指令的用法（配套 esbuild 的使用），见第三节。

1. 核心概念这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数 WebGPU 原生程序要接触的，并不是全部。① 适配器和设备适配器，也就是 GPUAdapter，指代真正的物理显卡，WebGPU 给了个对象来代替它： {代码...} 它提供了一个最重要行为，请求设备对象 GPUDevice： {代码...} 那么什么是 Device？其...

什么是应用级？这两个库都屏蔽了 WebGL 的底层调用细节，大多数时候，你编写的代码更专注于“场景”中的“三维物体”的位置，加载“模型文件”，高级点的会写漂亮的“材质”。这些带引号的概念，在 WebGL 底层接口都是没有的，是实时渲染技术的一些概念在 JavaScript 中的实现。

构成矩形的两个三角形需要使用 mapboxgl.MercatorCoordinate.fromLngLat 方法转换至 WebGL 中的场景世界坐标，注意案例中是如何设置三角形顺序的，要逆时针

1. 前言1.1. 经典的 OGC 标准回顾直至今日，GeoServer 仍在发挥作用，WebGIS 的几大服务标准仍在应用：WMS，网络地图服务WMTS，网络瓦片地图服务WFS，网络要素服务这三个应该是耳熟能详的了，还有其它的就不列举了，本篇的重点并不是介绍这些现行标准，上面三个标准的速查可参考我往期的文章。1.2. 共同特点与时代变化现...

本文只介绍实际工作中常用的 WMS、WMTS、WFS、TMS 四种，WCS、WPS 等其它 OGC WebService 类型请自行查阅官方资料。

我也很荣幸自己的文章能被读者看到，如果对你有帮助、有启发，点个赞就是对我最大的鼓励，感激不尽。本系列文章写于 2022 年，梳理的是 CesiumJS 前端库中的主要源码结构，不涉及着色器原理、WebGL 效果原理剖析等内容较为专一、可以独立出文的内容。

在 XHR 技术横行的年代，就出现过 ajax 这种神器，但是 Cesium 团队选择了自己封装 XHR。后来 ES6 出现了 Promise API，axios 再次封装了 XHR，但是 Cesium 团队对这种底层的改动非常敏感，也是最近一年（2021~2022年）才把 var 改为了 const/let，把 when.js 改为了原生 Promise，把 ""/'' 字符串部分改为了 ...

3DTiles 与 I3S 是竞争关系，可是比起生态开放性、数据定义的灵活性与易读性来说，3DTiles 比 I3S 好太多了。由于数据生产工具的开发者水平参差不齐，且数据并不存在极致的、万能的优化方法，故 3DTiles 1.0 时代的一些工具可能导致的数据渲染质量问题，让 3DTiles 的性能、显示效果颇受争议。

三维模型架构（即 Scene/ModelExperimental 目录下的模块）有别于旧版模型 API（即 Scene/Model.js 模块为主的一系列处理 glTF 以及处理 3DTiles 点云文件的源码），它重新设计了 CesiumJS 中的场景模型加载、解析、渲染、调度架构，更合理，更强大。

任何一个有追求的 WebGL 3D 库都会封装 WebGL 原生接口。CesiumJS 从内部封测到现在，已经有十年了，WebGL 自 2011 年发布以来也有 11 年了，这期间小修小补不可避免。

在创建 Viewer 时可以直接指定 影像供给器（ImageryProvider），官方提供了一个非常简单的例子，即离屏例子（搜 offline）：

Primitive API 是公开的 API 的最底层了，它面向的场景是高性能、可自定义材质着色器（Appearance API + FabricMaterial Specification）、静态三维物体。

使用 VSCode 插件 LiveServer 的 HTTP 服务器对本机提供 5500 端口的页面服务，即 http://localhost:5500/index.html

API 用法回顾只需传入参数对象，就可以简单地创建三维几何体或者三维模型。 {代码...} Entity API 通常会被拿来与 Primitive API 比较，无外乎：前者使用 Property API 使得动态效果简单化，后者需要自己编写着色器；个体数量较多时，前者的性能不如后者；后者支持较底层的用法，可以自己控制材质着色器、几何数据并批优...

书接上文，Scene.js 模块内的 render 函数会将控制权交给 WebGL，执行 CesiumJS 自己封装的指令对象，画出每一帧来。

对类的使用，不添加 Cesium 命名空间前缀，例如对于 Viewer，不会写 Cesium.Viewer，默认使用 ESM 格式解构导入类；

WGSL 还在积极讨论中，虽然各位大佬不是很满意这个新生儿。不过，社区已经有了基础的实验性工具（VSCode 插件），并支持了较新的语法。① WGSL 插件这个插件支持对文件扩展名为 .wgsl 的源代码文件进行高亮显示。② WGSL Literal 插件这个插件允许你在 JavaScript / TypeScript 的模板字符串中进行 wgsl 代码高亮，需要加...

这篇东西非常长，不计代码字符也有1w字，能比较好理解 WebGPU 的计算管线中的各个概念，并使用一个简单的 2D 物理模拟程序来理解它，本篇重点是在计算管线和计算着色器，绘图部分使用 Canvas2D 来完成。

受制于个人学识浅薄，本文只能浅表性地列举 WebGL 和 WebGPU 中它们创建、数据传递和着色器中大致的用法，格式差异，顺便捞一捞压缩纹理的资料。

其实，写到第六篇比对基本上常规的 API 就差不多比对完了（除了 GPGPU、查询方面的 API 未涉及），但是有一个细节仍然值得我开一篇比对文章进行思考、记录，那就是渲染到何处。

林林总总写了一些文章来对比 WebGL 与 WebGPU 的常规功能，兴许在 API 的理解上有些业余，甚至不排除有表述错误，但是写对的部分，我希望对读者与未来的图形开发者有所启迪。

在下一个版本，也就是 Cesium 1.92，第三方库 when.js 将被原生 Promise API 代替。Cesium.when 将被废弃，且于下个版本移除。关于如何升级，请参考下方个人点评，我转载了官方指导文档。

模块 ol/proj 中，useGeographic() 和 setUserProjection() 方法现在已经是官方 API 了，这两个方法使得地理坐标或局部投影坐标系的使用更简单

这个问题貌似在各前端框架的模板中是不会出现的，我不确定。也有人在 Webpack 中遇到了这个类似的情况，究其原因，我认为还是 cesium 包的导出有些不完备，见下面第二节的分析。