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

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

• FXAA: https://github.com/mattdesl/g…
• SMAA http://threejs.org/examples/#…

而且在 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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。