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将其渲染到屏幕中：

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);
    }
}

在渲染到屏幕中，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，并行的，通过可视化技术的数据处理能力，开启了一个新的窗口，迎来的一个新世界。