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

Cesium原理篇:6 Render模块(4: FBO)的更多相关文章

  1. Cesium原理篇:5最长的一帧之影像

    如果把地球比做一个人,地形就相当于这个人的骨骼,而影像就相当于这个人的外表了.之前的几个系列,我们全面的介绍了Cesium的地形内容,详见: Cesium原理篇:1最长的一帧之渲染调度 Cesium原 ...

  2. Cesium原理篇:7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...

  3. Cesium原理篇:3最长的一帧之地形(2:高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  4. Cesium原理篇:6 Renderer模块(1: Buffer)

    刚刚结束完地球切片的渲染调度后,打算介绍一下目前大家都很关注的3D Tiles方面的内容,但发现要讲3D Tiles,或者充分理解它,需要对DataSource,Primitive要有基础,而这要求对 ...

  5. Cesium原理篇:6 Renderer模块(1: Buffer)【转】

    https://www.bbsmax.com/A/n2d9P1Q5Dv/ 刚刚结束完地球切片的渲染调度后,打算介绍一下目前大家都很关注的3D Tiles方面的内容,但发现要讲3D Tiles,或者充分 ...

  6. Cesium原理篇:GroundPrimitive

    今天来看看GroundPrimitive,选择GroundPrimitive有三个目的:1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处 ...

  7. Cesium原理篇:GroundPrimitive【转】

    今天来看看GroundPrimitive,选择GroundPrimitive有三个目的:1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处 ...

  8. Cesium原理篇:6 Render模块(3: Shader)

    在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Textur ...

  9. Cesium原理篇:6 Render模块(5: VAO&RenderState&Command)

    VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO ...

随机推荐

  1. bzoj2599: [IOI2011]Race(点分治)

    写了四五道点分治的题目了,算是比较理解点分治是什么东西了吧= = 点分治主要用来解决点对之间的问题的,比如距离为不大于K的点有多少对. 这道题要求距离等于K的点对中连接两点的最小边数. 那么其实道理是 ...

  2. weblogic 12c web部署注意的问题

    废话不多说下面讲介绍他的具体部署web应用,应该注意哪些问题. 准备工作: Java JDK 安装及环境配置 http://jingyan.baidu.com/article/ff41162596a7 ...

  3. linux内核分析作业8:理解进程调度时机跟踪分析进程调度与进程切换的过程

    1. 实验目的 选择一个系统调用(13号系统调用time除外),系统调用列表,使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 分析汇编代码调用系统调用的工作过程,特别是参数的传递的方 ...

  4. ThoughtWorks代码挑战——FizzBuzzWhizz

    很久没发表过文章了,今天看到一篇文章 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏(C#解法) 看到LZ的2B青年代码,实在是惨不忍睹,故写篇文章来探讨下这类 ...

  5. .NET Core 构建配置文件从 project.json 到 .csproj

    从 .NET Core SDK 1.0 Preview 3 build 004056 开始,.NET Core 弃用 project.json,回归 .csproj,主要原因是为了兼容 MSBuild ...

  6. .net core 学习

    资源: https://github.com/aspnet/home https://github.com/dotnet/cli

  7. .Net开发笔记(十七) 应用程序扩展

    在很多场合,我们需要在已有软件程序上增加一些新的功能,几乎所有原因是因为原有软件功能不能满足我们的需要,我们平时做的插件就属于这种情况,最常见的是VS IDE的插件开发,网上老外写的一篇关于插件开发的 ...

  8. ASP.Net中通过Jquery前端对Repeater控件绑定的数据进行操作

    说明:由于Repeater控件是动态绑定,通过Id获取数据只能默认获取第一行: 1.对Repeater中div设置样式 2.通过$(".css").each(function(){ ...

  9. KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新

    .example { display: inline-block; padding: 1em; margin-right: 2em; background: #F6F6EF; } 注意:本文档适用于K ...

  10. 【源码】Word转PDF V1.0.1 小软件,供新手参考

    昨天有一朋友让我帮忙找一款Word转PDF的软件,今天自己捣鼓出点成果封装个Helper供大家使用~ 开源地址:https://github.com/dunitian/WordConvertPDF 软 ...