Cesium 源码解析地球加载过程（一）

原创

已于 2023-02-10 18:12:36 修改 · 2.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#cesium

于 2022-10-25 18:24:11 首次发布

本文介绍地形处理过程，渲染需地形数据，其下载依赖相机位置和地图服务。Cesium的地球封装在Globe类，将功能拆分用于地形加载等。还讲解了Globe的创建、更新和渲染三条主线流程，包括各流程涉及的类和具体操作。

对于地形处理的过程的大概认识是，渲染需要地形数据，地形数据的下载需要依据相机的位置确定，地形数据的下载需要地图服务，而地图服务也有很多种(WMS(网络地图服务)、WMTS(网络地图瓦片服务)、TMS(瓦片地图服务))，针对TMS服务输出的地形瓦片数据也有很多种格式(quantized-mesh、heightmap等) ，gis行业多年以来出现的各种技术、规范构成今天庞大的gis行业体系。

Cesium中的地球被封装在了Globe类中，通过这个中将各个功能进行拆分成几个模块用于地形的加载、影像的加载、材质的处理等过程。

本文只是大概讲解以下流程，具体过程分几节解析，下面是个草图，后续会完善。

讲解流程分三条主线

1、Globe的创建过程：

a、在CesiumWidget.js这个类中创建了Globe对象，这个类的创建时传入了一个椭球，默认是Ellipsoid.WGS84椭球；

b、在Globe对象内部，封装了相当多的成员变量，其中比较重量级的是GlobeSurfaceShaderSet、QuadtreePrimitive、GlobeSurfaceTileProvider、EllipsoidTerrainProvider、ImageryLayerCollection；

GlobeSurfaceShaderSet：用于地球材质的封装；

QuadtreePrimitive: 四叉树的封装；

GlobeSurfaceTileProvider：封装了地球瓦片的创建、瓦片中地形数据的组织、瓦片中影像数据的组织等；

EllipsoidTerrainProvider：地形数据的范围、规格、网格数据的解码、gpu资源的创建等过程；

ImageryLayerCollection：这是一个集合，因为地球可以叠加多个影像层。

function Globe(ellipsoid) {
  // 椭球规格
  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
  // 地形（请求地形数据），默认使用高度图
  var terrainProvider = new EllipsoidTerrainProvider({
    ellipsoid: ellipsoid,
  });
  // 影像集合，可以同时使用多个影像（请求影像数据）
  var imageryLayerCollection = new ImageryLayerCollection();

  // 椭球
  this._ellipsoid = ellipsoid;
  // 影像集合
  this._imageryLayerCollection = imageryLayerCollection;

  // 地球表面shader集合
  this._surfaceShaderSet = new GlobeSurfaceShaderSet();
  // 材质
  this._material = undefined;

  // 四叉树图元地球表面
  this._surface = new QuadtreePrimitive({
    // 地球表面瓦片提供商（封装了地形、影像提供商）
    tileProvider: new GlobeSurfaceTileProvider({
      terrainProvider: terrainProvider,         // 地形提供商（数据）
      imageryLayers: imageryLayerCollection,    // 影像提供商（数据）
      surfaceShaderSet: this._surfaceShaderSet, // 着色器集合（着色）
    }),
  });

  // 地形提供商
  this._terrainProvider = terrainProvider;
  // 地形提供商改变了
  this._terrainProviderChanged = new Event();

  // 颜色
  this._undergroundColor = Color.clone(Color.BLACK);
  // 地下面的颜色 透明度随着距离变化
  this._undergroundColorAlphaByDistance = new NearFarScalar(
    ellipsoid.maximumRadius / 1000.0,
    0.0,
    ellipsoid.maximumRadius / 5.0,
    1.0
  );

  // 封装了地球透明属性
  this._translucency = new GlobeTranslucency();

  // 着色器脏了
  makeShadersDirty(this);

  /**
   * Determines if the globe will be shown.
   * 地球显示
   *
   * @type {Boolean}
   * @default true
   */
  this.show = false;

  // 海洋法线图资源脏了
  this._oceanNormalMapResourceDirty = true;
  // 海洋法线图片资源
  this._oceanNormalMapResource = new Resource({
    url: buildModuleUrl("Assets/Textures/waterNormalsSmall.jpg"),
  });

  /**
   * The maximum screen-space error used to drive level-of-detail refinement.  Higher
   * values will provide better performance but lower visual quality.
   * 
   * 最大屏幕误差用来驱动lod改进，数值大将提高加载效率但是会降低质量
   *
   * @type {Number}
   * @default 2
   */
  this.maximumScreenSpaceError = 2;

  /**
   * The size of the terrain tile cache, expressed as a number of tiles.  Any additional
   * tiles beyond this number will be