在很久很久以前,盘古开辟了天地,他的头顶着天,脚踩着地,最后他挂了。他的毛发变成了森林,他的血液变成了河流,他的肌肉变成了大地。。。。。。
卡!
哦,不对,在很久很久以前,你属于我,我拥有你。
你还有没有程序员的自我修养啦。
不好意思,串戏了,下面进入。。。主题
本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。

在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。
如果需要在帧缓冲区(离屏渲染)上面实现去锯齿效果,需要在贴图内容上使用自己实现的post -process的AA,比如:

  • FXAA: https://github.com/mattdesl/glsl-fxaa
  • SMAA http://threejs.org/examples/#webgl_postprocessing_smaa
    而且在WebGL1中,不能通过上下文来改变MSAA的采样数量,这对于WebGL1下的去锯齿效果有很大影响。

多采样渲染缓冲对象

在WebGL2中,有了一个新的特性,叫做Multisampled Renderbuffer,恩,中文呢就叫做: 多采样渲染缓冲对象吧;通过多采样渲染缓冲对象,可以在帧缓冲区的渲染缓冲对象上实现MSAA(multisampled antialiasing), 然后通过下面的流程实现最终实现渲染的去锯齿:

pre-z pass –> rendering pass to FBO –> postprocessing pass –> render to window

renderbufferStorageMultisample

和多采样渲染缓冲对象相关的一个重要的函数就是gl.renderbufferStorageMultisample,下面是函数的签名:

gl.renderbufferStorageMultisample(target, samples, internalFormat, width, height);

该函数的第一个target是渲染缓冲对象的“目标”,samples表示采样数,internalFormat表示数据格式,width、height表示渲染缓冲对象的宽高。

下面是使用该函数的简单代码片段:

var frameBuffer = gl.createFrameBuffer();
var colorRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y); gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorRenderbuffer);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

这和webgl1 中创建帧缓冲区的代码类似,并没有太大差别,不同的是如下一行:

gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y);

通过gl.renderbufferStorageMultisample方法指定了渲染缓冲对象的多重采样,采样数是4。

多采样纹理附件

多采样纹理附件又是什么东西呢,好吧,其实在WebGL2中,没有这个多采样纹理附件,在OPENGL才有,为什么提到这个多采样纹理附件,大部分时间,我们的离屏渲染都需要渲染到一个纹理对象上面,才能进一步使用。
在没有多采样纹理附件,只有多采样渲染缓冲对象的情况下,要实现MSAA,只能渲染到渲染缓冲对象上,但是渲染缓冲对象的内容不能直接传递给纹理对象。
那么应该怎么做呢? 需要使用另外一个重要的函数:

gl.blitFramebuffer函数

通过gl.blitFramebuffer函数,可以把多采样渲染缓冲对象的内容传递给纹理对象。下面是该函数的签名:

gl.blitFramebuffer(srcX0, srcY0, srcX1, srcY1,
                        dstX0, dstY0, dstX1, dstY1,
                        mask, filter);

该函数的作用就是,把一个帧缓冲区(read framebuffer)上的指定区域像素转移给另外一个帧缓冲区(draw framebuffer)上的指定区域。
其中参数srcX0, srcY0, srcX1, srcY1指定read framebuffer上的区域;
dstX0, dstY0, dstX1, dstY1 指定draw framebuffer上的区域; mask指定那个buffer的内容会被copy,可选值:

  • gl.COLOR_BUFFER_BIT
  • gl.DEPTH_BUFFER_BIT
  • gl.STENCIL_BUFFER_BIT
    filter 表示当两个区域大小不同的时候,插值的方式,可以是以下值:
  • gl.NEAREST
  • gl.LINEAR

下面是代码片段:

var renderableFramebuffer = gl.createFramebuffer();
......
var colorFramebuffer = gl.createFramebuffer();
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, colorFramebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null); // ... // After drawing to the multisampled renderbuffers
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, renderableFramebuffer);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, colorFramebuffer);
gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
gl.blitFramebuffer(
    0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
    0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
    gl.COLOR_BUFFER_BIT, gl.NEAREST
);

代码中,首先把场景渲染到renderableFramebuffer中,然后把renderableFramebuffer绑定到目标gl.READ_FRAMEBUFFER,把colorFramebuffer绑定到目标gl.DRAW_FRAMEBUFFER,之后清空DRAW_FRAMEBUFFER上面的颜色关联对象,然后调用gl.blitFramebuffer方法把renderableFramebuffer的颜色关联对象上的数据复制到colorFramebuffer的颜色管理对象,colorFramebuffer的颜色关联对象是一个纹理对象,这样就把数据从渲染缓冲对象复制到纹理对象上面了。

READ_FRAMEBUFFER和DRAW_FRAMEBUFFER

在webgl1中,帧缓冲区的对象的目标只能是gl.FRAMEBUFFER,而在WebGL2中,增加两种目标:

  • gl.READ_FRAMEBUFFER
  • gl.DRAW_FRAMEBUFFER
    以上两种目标分别表示FBO可以分别进行读操作和写操作;这在FBO复制到FBO的时候很有用,就像前文中所叙述的,可以把READ_FRAMEBUFFER上的数据复制到DRAW_FRAMEBUFFER上。

参考

https://github.com/mrdoob/three.js/pull/8120
https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/blitFramebuffer
https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/blitFramebuffer
http://www.realtimerendering.com/blog/webgl-2-new-features/
https://www.khronos.org/registry/webgl/specs/latest/2.0/#2.2

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript、Python语言,熟悉数据库。熟悉java、nodejs应用系统架构,大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

ITman彪叔公众号

WebGL2系列之多采样渲染缓冲对象的更多相关文章

  1. WebGL2系列之顶点数组对象

    使用了顶点缓冲技术后,绘制效率有了较大的提升.但是还有一点不尽如人意,那就是顶点的位置坐标.法向量.纹理坐标等不同方面的数据每次使用时需要单独指定,重复了一些不必要的工作.WebGL2提供了一种专门用 ...

  2. WebGL2系列之采样器对象

    前言 在WebGL1中,纹理的图片和采样信息都是写在纹理对象之中. 采样信息告诉GPU如何去读取贴图上图片的信息. 如果我们希望从同一个图片多次读取像素信息,但是每次读取的时候使用的过滤方式不一样, ...

  3. 多人即时战斗游戏服务端系列[2]--90坦克Online游戏对象介绍以及渲染机制

    先上类图,略大,点击此处放大: 1.先说下方接口 1.1 场景物品接口 ISceneObject : OpLog.IOpItem, IStackPoolObject 全部场景对象的基本接口,包含类型定 ...

  4. 原生JavaScript运动功能系列(二):缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  5. java io系列23之 BufferedReader(字符缓冲输入流)

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_23.html 更多内容请参考:java io系列01之 "目录" Buffere ...

  6. java io系列24之 BufferedWriter(字符缓冲输出流)

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_24.html 更多内容请参考:java io系列01之 "目录" Buffere ...

  7. WorldWind源码剖析系列:星球表面渲染类WorldSurfaceRenderer

    星球表面渲染类WorldSurfaceRenderer描述如何渲染星球类(如地球)表面影像纹理.该类的类图如下. 星球类World包含的主要的字段.属性和方法如下: public const int ...

  8. WebGL2系列之实例数组(Instanced Arrays)

    实例化数组 实例化是一种只调用一次渲染函数却能绘制出很多物体的技术,它节省渲染一个物体时从CPU到GPU的通信时间.实例数组是这样的一个对象,使用它,可以把原来的的uniform变量转换成attrib ...

  9. 《Windows核心编程系列》八谈谈用内核对象进行线程同步

    使用内核对象进行线程同步. 前面我们介绍了用户模式下线程同步的几种方式.在用户模式下进行线程同步的最大好处就是速度非常快.因此当需要使用线程同步时用户模式下的线程同步是首选. 但是用户模式下的线程同步 ...

随机推荐

  1. Mysql事务,并发问题,锁机制-- 幻读、不可重复读--专题

    1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约 ...

  2. facebook javascript api 使用

    官方api文档:http://developers.facebook.com/docs 先简单的介绍下创建一个app(https://developers.facebook.com/apps),

  3. 【shell】gerrit同步备份脚本的实现

    本期分享下gerrit如何实现备份,由于之前的一台代码服务器直接down掉,所以为了以防万一,开始备份gerrit数据,有人说,gerrit不过是个审查代码的工具,备份这个做什么,git是分布式代码管 ...

  4. c#利用IronPython调用python的过程种种问题

    c#利用IronPython调用python的过程种种问题 小菜鸟一枚,最新学习了Python,感觉语言各种简短,各种第三方类库爽歪歪,毕竟之前是从c#转来的,看到Python的request类各种爽 ...

  5. LINQ学习笔记(三)

    下面对各子句解释 from子句:查询表达式的开始子句,查询表达式必须以from子句开头. 格式:from u in source 其中u表示范围变量,它表示源序列中的每个后续元素,source为数据源 ...

  6. 高启全:长江存储自主3D NAND,DRAM研发欢迎美光一起加入(千秋大业,慢慢做)

    台湾DRAM教父高启全转战大陆紫光集团操盘存储器大计划超过1年,日前晋升长江存储的执行董事.代行董事长,接受DIGITIMES独家专访公开未来规划:他指出,已齐聚500名研发人员在武汉投入3D NAN ...

  7. C# ACCESS 查询提示“至少一个参数没有被指定”问题

    错误的SQL指令如下: sqlStr = “select * from  tb_userInfo where userName=” + userName;    //错误的 sql 指令 正确的SQL ...

  8. 如何开发Office平台上的扩展应用(又称为Office 2013 App,Office 2013 Add-Ins,Apps for Office,Office 应用)

    Office 扩展应用(Office Apps,Office 2013 AddIns,Apps for Office)开发 —— 中文文档 继 VBA 和 VSTO 之后, 微软为 Office 平台 ...

  9. 为什么使用剪切板时都用GlobalAlloc分配内存(历史遗留问题,其实没关系了)

    我在使用剪切板时,发现通用的都是使用GlobalAlloc来分配内存,我就想不是说在Win32中GlobalAlloc和LocalAlloc是一样的那为什么不用LocalAlloc呢,原谅我的好奇心吧 ...

  10. Qt中实现单例模式(SingleTon),大约有3种办法

    Qt中实现单例模式(SingleTon) 单例模式分为“饥汉”和“饿汉”两种版本,也正是线程安全问题使得原本简单的单例模式变得复杂.由于单例模式很常用,Boost库中有强大的泛型单例实现,我也利用Qt ...