大家好,这是推送的第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
领取专属 10元无门槛券
私享最新 技术干货