526互联

1_Scene渲染流程分析

发布时间 2023-11-28 12:37:36作者: 安安静静的码农

参考:
Cesium原理篇：6 Render模块(4: FBO)

Scene渲染流程分析

// Scene.js
function render(scene, time) {
  //...

  // 1) 渲染到哪里?
  // updateAndExecuteCommands -> executeCommandsInViewport -> updateAndClearFramebuffers
  updateAndClearFramebuffers();

  // 2) 执行渲染命令
  // updateAndExecuteCommands -> executeCommandsInViewport -> executeCommands
  executeCommands();

  // 3) 处理渲染结果
  resolveFramebuffers();

  // ...
}

1、渲染到哪里?

fn updateAndClearFramebuffers() {
  // 这里选择其中一种情况,渲染到 globeDepth 的 帧缓冲区中。
  passState.framebuffer = view.globeDepth.framebuffer;

  // 选择好后清除上一次的渲染结果
  clear.execute(context, passState);
}

2、执行渲染命令

executeCommands() {
  // 深度清除
  clearDepth.execute(context, passState);
  clearStencil.execute(context, passState);
}

Context.prototype.draw = function(drawCommand, passState) {
 passState = defaultValue(passState, this._defaultPassState);
 // 获取对应的FBO，优先离屏渲染
 var framebuffer = defaultValue(drawCommand._framebuffer, passState.framebuffer);
 beginDraw(this, framebuffer, drawCommand, passState);
 continueDraw(this, drawCommand);
};

3、处理渲染结果

globeDepth._colorTexture，绑定在GlobeDepth中，而之前的FBO的过程正是对这张纹理的渲染。

function resolveFramebuffers(scene, passState) {
 if (useFXAA) {
  if (!useOIT && useGlobeDepthFramebuffer) {
  // 绑定到FXAA中的FBO中
  passState.framebuffer = scene._fxaa.getColorFramebuffer();
  // 将globeDepth的_colorTexture渲染到fxaa中
  scene._globeDepth.executeCopyColor(context, passState);
  }
  // framebuffer置空，即渲染到屏幕
  passState.framebuffer = environmentState.originalFramebuffer;
  // 将fxaa._texture渲染到屏幕
  scene._fxaa.execute(context, passState);
 }
}