cesium-01 render入口

1.Viewer初始化里面有
注意有个useDefaultRenderLoop参数

  // Cesium widget
  var cesiumWidget = new CesiumWidget(cesiumWidgetContainer, {
    imageryProvider:
      createBaseLayerPicker || defined(options.imageryProvider)
        ? false
        : undefined,
    clock: clock,
    skyBox: options.skyBox,
    skyAtmosphere: options.skyAtmosphere,
    sceneMode: options.sceneMode,
    mapProjection: options.mapProjection,
    globe: options.globe,
    orderIndependentTranslucency: options.orderIndependentTranslucency,
    contextOptions: options.contextOptions,
    useDefaultRenderLoop: options.useDefaultRenderLoop,
    targetFrameRate: options.targetFrameRate,
    showRenderLoopErrors: options.showRenderLoopErrors,
    useBrowserRecommendedResolution: options.useBrowserRecommendedResolution,
    creditContainer: defined(options.creditContainer)
      ? options.creditContainer
      : bottomContainer,
    creditViewport: options.creditViewport,
    scene3DOnly: scene3DOnly,
    terrainExaggeration: options.terrainExaggeration,
    shadows: options.shadows,
    terrainShadows: options.terrainShadows,
    mapMode2D: options.mapMode2D,
    requestRenderMode: options.requestRenderMode,
    maximumRenderTimeChange: options.maximumRenderTimeChange,
  });

对应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函数

render函数

此处this._canRender是由configureCanvasSize函数判断，这里给的是true

进入下一步

this._scene.initializeFrame();

这里注意scene是在CesiumWidget里面初始化的

var scene = new Scene({
      canvas: canvas,
      contextOptions: options.contextOptions,
      creditContainer: innerCreditContainer,
      creditViewport: creditViewport,
      mapProjection: options.mapProjection,
      orderIndependentTranslucency: options.orderIndependentTranslucency,
      scene3DOnly: defaultValue(options.scene3DOnly, false),
      terrainExaggeration: options.terrainExaggeration,
      shadows: options.shadows,
      mapMode2D: options.mapMode2D,
      requestRenderMode: options.requestRenderMode,
      maximumRenderTimeChange: options.maximumRenderTimeChange,
    });
    this._scene = scene;

Scene初始化里面已经执行了initializeFrame

此处可以看到相机更新的逻辑

下面继续

分析这两行，看看有什么意义

var currentTime = this._clock.tick();
this._scene.render(currentTime);

首先Clock是在CesiumWidget初始化的时候构建的

tick函数

这里的tick就是每一帧都会调用，并且绑定上Clock.OnTick事件

所以Clock.OnTick每一帧都会调用了~~

然后又回到Viewer构造函数里

clock.onTick又和Viewer._onTick函数绑定上了，间接使得Viewer._onTick每一帧都会执行

其次就是this._scene.render(currentTime)了，每一帧都会执行

到此分析出cesium最终每一帧执行的两个关键的函数

第一个 this._scene.render(currentTime)
第二个 Viewer._onTick

下一篇分析this._scene.render(currentTime)