1_Scene渲染流程分析
参考:
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);
}
}