webGL FrameBuffer Object

大家好，这是推送的第N篇内容。

这是一篇前端技术文章，大家如果不想看可以听听歌，乐队名称特别好玩，loveBugs.

在webgl中，一系列的数据（顶点、纹理、and so on）经过渲染管线的一系列处理之后，最终绘制成一个个像素点输出到屏幕（canvas）中。对于webgl来说，渲染管线的最终输出目的地叫做帧缓存。

The WebGLFramebuffer interface is part of the WebGL API and represents a collection of buffers that serve as a rendering destination.

上面这句话是MDN中对于WebGLFramebuffer的释义，WebGLFramebuffer实际上是一系列buffer数据的集合。

Texture

默认情况下，webgl绘制的最终目的地就是屏幕（canvas）,但是我们可以将渲染管线的输出重定向的指定的对象中去——也就是我们本文的主角FrameBuffer Object（FBO）.

通常情况下我们使用FBO的目的是做offscreen rendering，简单的来说就是去做动态纹理。所以这里就是将webgl输出到texture中去。

这里的操作是很简单的，具体的代码如下：

FBO和纹理创建设置完毕就可以开始进行绘制了：

完整代码如下，有兴趣可以复制出来自己跑一下：

效果图如下：

到现在位置我们就完成了动态纹理的渲染，但是现在发现纹理似乎有点奇怪。（这里的例子不是非常明显，可以看这个例子相对非常明显）。

这里需要介绍一个新的概念：

Renderbuffer Object

Renderbuffer Object

In addition, renderbuffer object is newly introduced for offscreen rendering. It allows to render a scene directly to a renderbuffer object, instead of rendering to a texture object. Renderbuffer is simply a data storage object containing a single image of a renderable internal format. It is used to store OpenGL logical buffers that do not have corresponding texture format, such as stencil or depth buffer.

可以用一张图来描述下FrameBuffer Object、Renderbuffer Object、texture之间的关系。

途中的连线可以看做是bind操作。FBO的本质是一系列附件的组合，其中颜色信息和texture绑定，而深度附件则依赖Renderbuffer Object中的深度缓冲。

所以需要在FBO中加入 RenderBuffer Object.具体代码如下：

这样最终产出的动态纹理就会带有深度信息。

今天之所以写这篇内容的目的不是单纯的想做一个动态纹理。FBO在另外的一个方向也有非常大的用处，那就是GPU计算。我们都知道GPU的算力非常强，现在很多人用GPU来进行挖矿。目前在web中调用GPU的方式似乎只有webgl一个方法（这里不敢绝对）。所以可以通过framebuffer来操作GPU进行大量的计算操作(机器学习等)，然后通过方法做数据的输出。

以上为我关于FBO的理解，有任何问题可以和我联系交流。

参考文档：

https://webglfundamentals.org/webgl/lessons/webgl-render-to-texture.html

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindRenderbuffer

https://www.khronos.org/opengl/wiki/Renderbuffer_Object

https://stackoverflow.com/questions/2213030/whats-the-concept-of-and-differences-between-framebuffer-and-renderbuffer-in-op

http://blog.csdn.net/dreamcs/article/details/7691690

https://www.web-tinker.com/article/20169.html