cesium系列篇:Entity vs Primitive 源码解析（从Entity到Primitive）02

news2025/1/17 21:33:57

上篇文章中，我们介绍了使用viewer.entities.add添加entity之后的信号传递以及最后entity对象被传递到GeometryVisualizer；

这篇文章，我们则介绍如何在逐帧渲染的过程中根据GeometryVisualizer中的entity对象创建相应的primitive

这是下文中涉及到的类的类图，从中可以清晰的了解各个对象之间的关系，下面我们结合代码来仔细讲解。

在这里插入图片描述

循环的一帧

我们先看下viewer初始化的时候做了什么，在何处定义了每一帧的循环，并持续的进行渲染，结合时序图（见第三节）和源码，可以将其分为两个部分

`Viewer`初始化

viewer初始化并创建clock

function Viewer(container, options){
    let clock;
    let clockViewModel;
    let destroyClockViewModel = false;
    if (defined(options.clockViewModel)) {
        clockViewModel = options.clockViewModel;
        clock = clockViewModel.clock;
    } else {
        clock = new Clock();
        clockViewModel = new ClockViewModel(clock);
        destroyClockViewModel = true;
    }
}

将clock作为参数之一创建cesiumWidget

// 省略其他参数
const cesiumWidget = new CesiumWidget(cesiumWidgetContainer, {clock: clock});

添加监听事件，建立事件响应，其效果我们在后面再具体描述

eventHelper.add(clock.onTick, Viewer.prototype._onTick, this);

`cesiumWidget`初始化

在构造函数中设置渲染循环策略this.useDefaultRenderLoop

this._useDefaultRenderLoop = undefined;
this.useDefaultRenderLoop = defaultValue(
  options.useDefaultRenderLoop,
  true
);

结合useDefaultRenderLoop的set函数可知其实是调用了startRenderLoop函数

useDefaultRenderLoop: {
    get: function () {
      return this._useDefaultRenderLoop;
    },
    set: function (value) {
      if (this._useDefaultRenderLoop !== value) {
        this._useDefaultRenderLoop = value;
        if (value && !this._renderLoopRunning) {
          startRenderLoop(this);
        }
      }
    },
}

在startRenderLoop中定义了render函数并每一帧进行调用

function startRenderLoop(widget) {
  widget._renderLoopRunning = true;

  let lastFrameTime = 0;
  function render(frameTime) {
    // 此处省略细节
    widget.render();
    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

在render函数中起实际作用的是函数widget.render，其内部通过调用this._clock.tick()发出信号，结合上一节viewer初始化中提到的事件监听的建立可以知道，进行响应的是Viewer.prototype._onTick函数

CesiumWidget.prototype.render = function () {
  if (this._canRender) {
    this._scene.initializeFrame();
    const currentTime = this._clock.tick();
    this._scene.render(currentTime);
  } else {
    this._clock.tick();
  }
};

Clock.prototype.tick = function () {
  this.onTick.raiseEvent(this);
  return currentTime;
};

在Viewer.prototype._onTick函数中，会通过调用函数this._dataSourceDisplay.update(time)进行实际的primitive对象的创建

Viewer.prototype._onTick = function (clock) {
  const isUpdated = this._dataSourceDisplay.update(time);
};

时序图

这里我们附上整个过程的时序图，帮助大家更好的了解整个过程

生成`Primitive`

通过上面的描述，我们知道了cesium的每一帧是如何更新的，以及其通过调用this._dataSourceDisplay.update(time)进行primitive的创建，下面我们就探究下具体的创建过程

在update中，获取了this._defaultDataSource的_visualizers属性，通过上一篇文章我们知道，其是一个包含了GeometryVisualizer等多个Visualizer的列表，其中GeometryVisualizer是后续创建polygon对应primitive的类

DataSourceDisplay.prototype.update = function (time) {
  visualizers = this._defaultDataSource._visualizers;
  vLength = visualizers.length;
  for (x = 0; x < vLength; x++) {
    result = visualizers[x].update(time) && result;
  }
  
  return result;
};

[图片]

在GeometryVisualizer的update函数中主要做了如下几件事:
- 获取被添加对象，在上一篇文章中我们知道，通过_onCollectionChanged函数，将添加的entity添加到了this._addedObjects属性中
```
const addedObjects = this._addedObjects;
addedObjects.set(id, entity);
```
- 遍历每一个被添加的对象
  - 创建UpdaterSet，其内部的updaters包含了PolygonGeometryUpdater在内的10个Updater
  - 通过updater尝试创建instance（后面详细介绍）
- 移除已经被添加的对象
- 在batch中创建primitive（后面详细介绍）

代码节选如下：

GeometryVisualizer.prototype.update = function (time) {
  // 获取被添加对象
  const addedObjects = this._addedObjects;
  const added = addedObjects.values;
  
  // 遍历每一个被添加的对象
  for (i = added.length - 1; i > -1; i--) {
    entity = added[i];
    id = entity.id;
    // 创建UpdaterSet
    updaterSet = new GeometryUpdaterSet(entity, this._scene);
    this._updaterSets.set(id, updaterSet);
    // 通过每一个updater尝试创建instance 并添加到batch中
    updaterSet.forEach(function (updater) {
      that._insertUpdaterIntoBatch(time, updater);
    });
  }

  // 移除已经被添加的对象
  addedObjects.removeAll();

  // 在batch中创建primitive
  let isUpdated = true;
  const batches = this._batches;
  const length = batches.length;
  for (i = 0; i < length; i++) {
    isUpdated = batches[i].update(time) && isUpdated;
  }

  return isUpdated;
};

生成`instance`

获取polygonOutline对应的instance
- 在函数GeometryVisualizer.prototype._insertUpdaterIntoBatch中将updater传递到StaticOutlineGeometryBatch.prototype.add函数中
```
this._outlineBatches[shadows].add(time, updater);
```
- 在StaticOutlineGeometryBatch.prototype.add先创建polygonOutline对应的instance
```
const instance = updater.createOutlineGeometryInstance(time);
```
- StaticOutlineGeometryBatch.prototype.add中，调用batch.add函数，传入instance，并写入字典this.geometry
```
this.geometry.set(id, instance);
```
获取polygon对应的instance
- 同样在函数GeometryVisualizer.prototype._insertUpdaterIntoBatch中，将updater传递到StaticGeometryColorBatch.prototype.add函数中
```
this._closedColorBatches[shadows].add(time, updater);
```
- 在StaticGeometryColorBatch.prototype.add先创建polygon对应的instance
```
const instance = updater.createFillGeometryInstance(time);
```
- StaticGeometryColorBatch.prototype.add中，调用batch.add函数，传入instance，并写入字典this.geometry
```
this.geometry.set(id, instance);
```

生成primitive

在循环中遍历所有的GeometryBatch对象，并update
[图片]

生成polygonOutline对应的primitive
- 通过StaticOutlineGeometryBatch.prototype.update遍历solidBatchesLength属性，并update
- 在batch.update中生成primitive
生成polygon对应的primitive
- 通过StaticGeometryColorBatch.prototype.update调用updateItems函数，在其内部，遍历batch并update
- 在batch.update中生成primitive