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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Cesium不仅仅提供了FBO，也就是Framebuffer类，而且整个渲染过程都是在FBO中进行的。FBO，中文就是帧缓冲区，通常都属于高级用法，但其实，如果你了解了它的基本原理后，用起来还是很简单的，关键在于理解。比如你盖楼，地基没打好，盖第一层楼，还可以，盖第二层楼，有点挫了，盖第三层楼，塌了。你会认为第三层楼（FBO）太难了，其实根本原因还是出在地基上。

窗口系统所管理的帧缓存有自己的缓存对象（颜色，深度和模板），它们诞生于窗口创建前，而我们自己创建的帧缓冲，这些缓存对象则需要自己来手动创建。还是默认大家了解FBO的概念和WebGL中使用的方式，在这个基础上我们来看一下Cesium中对FBO的封装。首先看一下FBO中的主要属性：

function Framebuffer(options) {
var gl = options.context._gl;
var maximumColorAttachments = ContextLimits.maximumColorAttachments; this._gl = gl;
this._framebuffer = gl.createFramebuffer(); this._colorTextures = [];
this._colorRenderbuffers = [];
this._activeColorAttachments = []; this._depthTexture = undefined;
this._depthRenderbuffer = undefined; this._stencilRenderbuffer = undefined; this._depthStencilTexture = undefined;
this._depthStencilRenderbuffer = undefined;
}

通过属性可以看到，Cesium的FBO主要支持两种方式渲染到Texture（RTT）和渲染到渲染缓冲区（RBO）两种方式，而且两种方式在使用上都基本相同，二选一，当然可以有多个颜色纹理（缓存），只要不超过maximumColorAttachments限制。当然也提供了帧缓存附件来保存渲染结果，这提供了同时写入多个缓存的能力（MRT），可以实现一些多屏和分屏效果。个人认为RenderBuffer性能上更好一些，尽可能减少数据消耗的消耗，在支持的能力上两者都差不多，都属于离屏渲染。但纹理可以拿出来独立用，而RBO的数据必须要关联到一个帧缓存对象后才有意义。我们来看一下创建方式：

globeDepth.framebuffer = new Framebuffer({
context : context,
colorTextures : [globeDepth._colorTexture],
depthStencilTexture : globeDepth._depthStencilTexture,
destroyAttachments : false
});this._fb = new Framebuffer({
context : context,
colorTextures : [new Texture({
context : context,
width : width,
height : height
})],
depthStencilRenderbuffer : new Renderbuffer({
context : context,
format : RenderbufferFormat.DEPTH_STENCIL
})
});

个人认为，RenderBuffer相比RenderTexture的方式要好一些，但前者在使用上有诸多限制，使用起来也不方便，关键是有一些接口是WebGL2.0的标准，兼容性很差，比如glBlitFramebuffer，所以很多情况下，如果我们想要读该缓存对象时，一般都采用Texture方式。下面我们看看，当我们new一个新的Framebuffer时，内部的构造过程：

// 绑定FBO
Framebuffer.prototype._bind = function() {
var gl = this._gl;
gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffer);
};
// 释放FBO
Framebuffer.prototype._unBind = function() {
var gl = this._gl;
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
};// 绑定颜色纹理，指定帧缓存附件attachment
function attachTexture(framebuffer, attachment, texture) {
var gl = framebuffer._gl;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, texture._target, texture._texture, 0);
}
// 绑定渲染缓存对象，指定帧缓存附件attachment
function attachRenderbuffer(framebuffer, attachment, renderbuffer) {
var gl = framebuffer._gl;
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, renderbuffer._getRenderbuffer());
}function Framebuffer(options) {
this._bind();
if (defined(options.colorTextures)) {
// 查看颜色纹理的个数是否超过上限
length = this._colorTextures.length = this._activeColorAttachments.length = textures.length;
if (length > maximumColorAttachments) {
throw new DeveloperError('The number of color attachments exceeds the number supported.');
} // 依次绑定颜色纹理
for (i = 0; i < length; ++i) {
texture = textures[i]; attachmentEnum = this._gl.COLOR_ATTACHMENT0 + i;
attachTexture(this, attachmentEnum, texture);
this._activeColorAttachments[i] = attachmentEnum;
this._colorTextures[i] = texture;
}
} // 同理依次绑定渲染缓存，深度，模板等 this._unBind();
}

封装了整个FBO创建的过程，用户只需要简单几句话，Cesium就很好的完成了封装的过程。Over，FBO的用法结束了，就是这么简单。下面讲两个Cesium中使用FBO的地方，一个是Cesium最终将FBO贴到屏的过程，一个是Pick的实现。

FBO贴屏

部分浏览器，可能因为显卡兼容性的问题，比如你用的是A卡，会不支持深度纹理，Cesium对此做了一些特殊考虑。下面的逻辑是在支持深度纹理的情况下的一个大概流程。首先，在初始化时会在GlobeDepth中创建FBO：

function createFramebuffers(globeDepth, context, width, height) {
// GlobeDepth中创建一个和当前窗口大小一样的颜色纹理
globeDepth.framebuffer = new Framebuffer({
context : context,
colorTextures : [globeDepth._colorTexture],
depthStencilTexture : globeDepth._depthStencilTexture,
destroyAttachments : false
});
}

而我们的渲染过程大致如下：

function render(scene, time) {
// 清空FBO
var passState = scene._passState;
passState.framebuffer = undefined;
// 更新passState.framebuffer，并对该FBO渲染
updateAndExecuteCommands(scene, passState, defaultValue(scene.backgroundColor, Color.BLACK));
// 处理FBO，并渲染到屏幕中
resolveFramebuffers(scene, passState);
}

首先我们先了解一下如何渲染到FBO的过程（updateAndExecuteCommands），大概的逻辑是选择合适的FrameBuffer，然后将DrawCommand渲染到该FBO上，关键代码如下：

// updateAndExecuteCommands中调用，更新passState.framebuffer
function updateAndClearFramebuffers(scene, passState, clearColor, picking) {
if (environmentState.isSunVisible && scene.sunBloom && !useWebVR) {
passState.framebuffer = scene._sunPostProcess.update(passState);
} else if (useGlobeDepthFramebuffer) {
passState.framebuffer = scene._globeDepth.framebuffer;
} else if (useFXAA) {
passState.framebuffer = scene._fxaa.getColorFramebuffer();
}
}// updateAndExecuteCommands中调用，开始渲染所有的DrawCommand
function executeCommandsInViewport(firstViewport, scene, passState, backgroundColor, picking) {
executeCommands(scene, passState);
}
// DrawCommand实际上会调用Context.draw方法，下一篇会详细介绍DrawCommand
DrawCommand.prototype.execute = function(context, passState) {
context.draw(this, 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);
};

可见，framebuffer的优先选择_globeDepth，其次是_fxaa，而且此时Context.prototype.draw中，必然是离屏渲染，也就是渲染到FBO上。另外，我们渲染的对象都封装到一个DrawCommand类中，比如之前地形切片，模型数据还是Geometry数据，最终都会创建一个DrawCommand来完成最终的渲染。

然后就是最终一步，所以养兵千日用兵一时，我们费了这么一番周折，最终来到了最后的一步。还记得我们在初始化的时候创建的globeDepth._colorTexture，绑定在GlobeDepth中，而之前的FBO的过程正是对这张纹理的渲染，现在，我们要做的事情就是讲该纹理渲染到FXAA中的FBO中，然后FXAA将其渲染到屏幕中：

在渲染到屏幕中，FXAA（Fast Approximate Anti-Aliasing）的Shader中实现了抗锯齿的效果，相当于对地球做了一次美颜效果，最终完成该帧的渲染。对应的是vec3 FxaaPixelShader(vec2 pos, sampler2D tex, vec2 rcpFrame)方法，通过GPU实现范走样效果。

PickFramebuffer

有了上面的过程，大家应该对FBO的使用方式有一个清楚的了解，下面我们来看看如果通过FBO实现拾取功能，对应的是PickFramebuffer类。其实拾取的思路很简单，就是来一张“ID”纹理，对每一个渲染的Object赋予一个唯一的ID并将ID转为RGBA，在渲染到“ID纹理”时，渲染的是ID颜色。这时用户点击想要拾取每一个地物，则查找对应ID纹理中的颜色值并转为ID，根据ID找到对应的地物。在这个过程中，我们可以通过FBO和Shader实现ID纹理的绘制，并读取FBO的颜色纹理值两个技术点。首先先看看ID纹理的实现方式：

// 构建一个PickID对象，包括该Object以及Key和Color
function PickId(pickObjects, key, color) {
this._pickObjects = pickObjects;
this.key = key;
this.color = color;
}// 提供构建PickID方法
// 保证每一个Ojbect的ID唯一
// 通过Color.fromRgba(key)方法将ID转为对应的Color
Context.prototype.createPickId = function(object) {
++this._nextPickColor[0];
var key = this._nextPickColor[0]; this._pickObjects[key] = object;
return new PickId(this._pickObjects, key, Color.fromRgba(key));
};

这样，更新该地物在渲染是的颜色（Color->PickColor），这在GLSL代码中很简单就可以做到。而点击事件会触发场景的Pick事件：

Scene.prototype.pick = function(windowPosition) {
var passState = this._pickFramebuffer.begin(scratchRectangle); updateAndExecuteCommands(this, passState, scratchColorZero, true);
resolveFramebuffers(this, passState); var object = this._pickFramebuffer.end(scratchRectangle);
}

这时，会更新screenSpaceRectangle，只对点击的相关区域进行渲染,也就是只会更新局部区域，并返回PickFramebuffer中的FBO，因此渲染结果都是保存在PickFramebuffer的帧缓冲中，完成ID纹理。最后，在PickFramebuffer.prototype.end中读取对应纹理的颜色值，找到对应的object，完成整个拾取的过程。下面是获取颜色ID对应Object的过程：

PickFramebuffer.prototype.end = function(screenSpaceRectangle) {
var width = defaultValue(screenSpaceRectangle.width, 1.0);
var height = defaultValue(screenSpaceRectangle.height, 1.0); var context = this._context;
// 获取点击区域的颜色值，RGBA类型
var pixels = context.readPixels({
x : screenSpaceRectangle.x,
y : screenSpaceRectangle.y,
width : width,
height : height,
framebuffer : this._fb
}); var colorScratch = new Color();
// RGBA转为4个byte数组，分别对应0~1之间的一个float颜色分量
colorScratch.red = Color.byteToFloat(pixels[0]);
colorScratch.green = Color.byteToFloat(pixels[1]);
colorScratch.blue = Color.byteToFloat(pixels[2]);
colorScratch.alpha = Color.byteToFloat(pixels[3]);
// 通过颜色值获取对应的Object并返回
var object = context.getObjectByPickColor(colorScratch);
if (defined(object)) {
return object;
}
// 没有选中任何Object
return undefined;
};Context.prototype.getObjectByPickColor = function(pickColor) {
// 颜色值转为4个byte，在换算成一个int
// 感觉这里绕了一个圈子
return this._pickObjects[pickColor.toRgba()];
};

总结

FBO使用简单，功能强大，之所以不容易理解，也在于实际应用中的灵活运用，很多实际问题的解决思路都可以通过FBO的技术，实现理屏处理（在看不见的情况下，通过Shader的可编程管线，通过编码实现高效灵活的解决），比如FXAA的范走样，或者ID纹理，这也正是FBO的强大之处。可以说，有了FBO，我们可以将任何属性信息，以我们自定义的格式渲染到渲染缓冲对象或纹理中，并按照这个规范来解读这些属性，从而可以扩展出很多高级应用。并且FBO支持MRT的能力，实现了硬件上基于GPU，并行的，通过可视化技术的数据处理能力，开启了一个新的窗口，迎来的一个新世界。