CesiumJS PrimitiveAPI 高级着色入门 - 从参数化几何与 Fabric 材质到着色器 - 上篇

关注

VIP免费原创最新推荐文章于 2026-04-16 10:59:38 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

Cesium开发高级篇 | 01空间数据可视化之Primitive 在基础篇中我们讲过空间数据可视化之Entity实体类，今天我们介绍另外一个比较接近渲染引擎底层的类Primitive，虽然两者都可用于绘制同样的几何图形，但考虑到性能问题，我们更推荐您使用Primitive类实现。在使用Primitive API之前，您最好具备WebGL基础知识，如果对WebGL不是太了解，建议先学习《WebGL编程指南》这本书。 Primitive介绍 1. Primitive组成 Primitive由两部分组成：几何形状（Geometry）和外观（Appearance）。几何形状定阅读详情

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

0. 基础

0.1. 坐标系基础

这里的“坐标系”特指 WebGL 图形渲染的坐标系。Primitive API 收到的几何数据，默认没有任何坐标系（即最基本的空间直角坐标），想要移动到地表感兴趣的地方，需要借助 ENU 转换矩阵，或者把几何顶点的坐标直接设为 EPSG:4978 坐标（即所谓通俗的“世界坐标”）。

ENU 转换矩阵，用道家八卦的说法类似“定中宫”。它能将坐标转换到这样一个 ENU 地表局部坐标系上：

指定一处地表点（经纬度）为坐标原点
以贴地正东方（ENU 中的 E）为正 X 轴
以贴地正北方（ENU 中的 N）为正 Y 轴
以地心到坐标原点的方向（即 ENU 中的 U，up）为正 Z 轴

这样一个 ENU 坐标系上的局部坐标左乘 ENU 转换矩阵后，就能得到标准的 EPSG:4978 世界坐标。

GIS 中的投影坐标、经纬坐标不太适用，需要转换。

0.2. 合并批次

虽然 WebGL 支持实例绘制技术，但是 Primitive API 减少绘制调用并不是通过这个思路来的，而是尽可能地把 Vertex 数据合并，这个叫做 Batch，也就是“合并批次（并批）”。

在 CesiumJS 的 API 文档中能看到 new Primitive() 时，可以传递一个 GeometryInstance 或者 GeometryInstance 数组，而 GeometryInstance 对象又能复用具体的某个Geometry 对象，仅在几何的变换位置（通过矩阵表达）、顶点属性（Vertex Attribute）上做差异化。

CesiumJS 会在 WebWorker 中异步地拼装这些几何数据，尽可能一次性发送给底层的 Renderer，以达到尽可能少的 DC。

我没有十分精确地去确认这个并批的概念和 CesiumJS 源码中合并的过程，如有错误请指出。

1. 参数化几何

这是公开 API 的最常规用法了，你可以在官方指引文档中学习如何使用参数化几何来创建内置的几何对象：Custom Geometry and Appearance

1.1. 几何类清单

CesiumJS 内置的参数几何有如下数种：

立方体（盒） - BoxGeometry & BoxOutlineGeometry
矩形 - RectangleGeometry & RectangleOutlineGeometry
圆形 - CircleGeometry & CircleOutlineGeometry
线的缓冲区（可设定转角类型和挤出高度） - CorridorGeometry & CorridorOutlineGeometry
圆柱、圆台、圆锥 - CylinderGeometry & CylinderOutlineGeometry
椭圆、椭圆柱 - EllipseGeometry & EllipseOutlineGeometry
椭球面 - EllipsoidGeometry & EllipsoidOutlineGeometry
多边形（可挤出高度） - PolygonGeometry & PolygonOutlineGeometry
多段线 - PolylineGeometry & SimplePolylineGeometry
多段线等径柱体 - PolylineVolumeGeometry & PolylineVolumeOutlineGeometry
球面 - SphereGeometry & SphereOutlineGeometry
墙体 - WallGeometry & WallOutlineGeometry
四棱台（视锥截头体） - FrustumGeometry & FrustumOutlineGeometry
平面 - PlaneGeometry & PlaneOutlineGeometry
共面多边形 - CoplanarPolygonGeometry & CoplanarPolygonOutlineGeometry
Esri I3S 专用的几何 - I3SGeometry

这里有两个特别说明：

除了 I3SGeometry 比较特殊外，其它的几何对象都有其对应的边线几何对象（边线不是三角网格）
CoplanarPolygonGeometry 和 PolygonGeometry 两个 API 很像，但是前者是 2018 年 1.48 后来添加的 API，适用于顶点共面的多边形；不共面的顶点在 PolygonGeometry 中可能会引起崩溃，但在这个共面多边形 API 不会（尽管可能会产生一些不可预测的三角形）。在 PolygonGeometry 出现三角形显示不正常、不完整的情况，可考虑用这个共面多边形 API；也支持挖洞。