OpenGL 之 帧缓冲 使用实践

简介: 帧缓冲(Framebuffer Object),简称 FBO,在渲染绘制中, 图像最终都是绘制到 FBO 上的,一般都是默认的 FBO 上,也就是我们的屏幕。

作者:星陨
来源:音视频开发进阶

帧缓冲(Framebuffer Object),简称 FBO,在渲染绘制中, 图像最终都是绘制到 FBO 上的,一般都是默认的 FBO 上,也就是我们的屏幕。

除此之外,还可以创建自己的 FBO,用来作为绘制的载体,当在自己的 FBO 上绘制好了之后,可以再把绘制内容显示到屏幕上,实现一个双缓冲的绘制。

FBO 实际上是由颜色附件、深度附件、模板附件组成的,作为着色器各方面(一般包括颜色、深度、深度值)绘制结果存储的逻辑对象。

渲染缓冲(Renderbuffer Object),简称 RBO,由应用程序分配的 2D 图像缓冲区,可以用于分配和存储 深度 和 模板 值,也可以用作 FBO 的 深度 或者 模板 附件,另外,纹理也可以作为 FBO 的颜色和深度附件。

帧缓冲与渲染缓冲和纹理的关系如下:

image.png

使用概述

帧缓冲的使用,首先就创建对应的帧缓冲对象,然后给它添加对应的附件,比如颜色附件或者深度附件等。

接着就是切换到帧缓冲渲染,在帧缓冲中进行绘制,此时绘制的内容都是记录在上一步添加的颜色附件或者深度附件上了。

然后切换到屏幕的缓冲区,这时可以把帧缓冲中记录的颜色或者深度信息取出来,再把他们绘制到屏幕上。

帧缓冲的使用看似很简单,但是用处却很普遍,使用帧缓冲可以在一些相机应用中做美颜处理、滤镜处理,也可以用来作贴纸等等效果。

使用步骤

创建 FBO
按照上面的步骤,首先是创建 FBO 。

1        int[] framebuffers = new int[1];
2        GLES20.glGenFramebuffers(1, framebuffers, 0);

和 OpenGL 中创建的大多对象相同,都是通过一个 int 型对象来表示的。

接下来就可以给这个 FBO 添加一些附件了。

绑定纹理

1// 把纹理绑定到颜色附件
2GLES20.glFramebufferTexture2D(
3    GLES20.GL_FRAMEBUFFER, 
4    GLES20.GL_COLOR_ATTACHMENT0, // 作为颜色附件
5    GLES20.GL_TEXTURE_2D, 
6    fboTextureId, 
7    0);

通过 glFramebufferTexture2D 函数可以将纹理绑定到 FBO 上作为附件,在绑定时有多种附件选项可以选择。

  • GL_COLOR_ATTACHMENT0
    ·颜色附件

  • GL_DEPTH_ATTACHMENT
    ·深度附件

  • GL_STENCIL_ATTACHMENT
    ·模板附件

当然作为纹理,只有颜色和深度两种可以选择。

如果是使用 OpenGL 3.x 版本,在绑定 FBO 时,还可以选择是绑定只读还是只写的 FBO。

  • GL_READ_FRAMEBUFFER
    ·只读的 FBO

  • GL_DRAW_FRAMEBUFFER
    ·只写的 FBO

如果是使用 GL_FRAMEBUFFER 的话,那么读写皆可以。

绑定渲染缓冲
除了纹理之外,还可以绑定到渲染缓冲。

首先还是创建一个渲染缓冲对象:

1        int[] renderbuffers = new int[1];
2        GLES20.glGenRenderbuffers(1, renderbuffers, 0);

之后,要绑定到当前的渲染缓冲对象,并初始化渲染缓冲对象的数据存储,再把它添加到 FBO 上。

1// 绑定到当前渲染缓冲对象
2GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, renderbufferId);
3// 初始化渲染数据存储
4GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_ATTACHMENT, width, height);
5// 将渲染缓冲添加到 FBO 上
6GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT, GLES20.GL_RENDERBUFFER, renderbufferId);

绑定渲染缓冲对象,并且初始化数据存储这一步有点类似于创建纹理并且初始化的操作。

1        // 绑定纹理
2        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
3        // 初始化纹理数据
4        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGB, width, height,
5                0, GLES20.GL_RGB, GLES20.GL_UNSIGNED_SHORT_5_6_5, null);

渲染
在渲染时,先渲染到 FBO 上,在渲染到屏幕上。

首先要切换到 FBO 进行渲染:

1GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);

如果 fboId 参数为 0 ,则代表切换到默认的屏幕上进行绘制。

此时就可以进行正常的绘制,由添加的附件去记录绘制的信息。

1// 加载纹理
2int textureId = TextureHelper.loadTexture(context, R.drawable.lgq);
3// 将纹理绘制到 FBO 上
4mTextureRect.drawSelf(textureId);

在 FBO 上绘制一张纹理贴图,此时 FBO 所绑定的颜色附件,会记录下纹理贴图的所有颜色内容。

也就是说,FBO 所绑定的纹理作为颜色附件,此时它已经被渲染上了颜色,而这个颜色就是我们绘制的内容,那么接下来就可以使用 FBO 绑定的纹理继续用来绘制。

1        // 切换到屏幕的缓冲区
2        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
3        // 使用 FBO 所绑定的纹理进行绘制
4        mTextureRect.drawSelf(fboTextureId);

切换到屏幕的缓冲区后,直接使用 FBO 绑定的纹理进行绘制,此时看到的效果和未使用 FBO 是相同的。

但是内部的绘制就是完全不一样了。

文章中具体代码部分,可以参考我的 Github 项目,欢迎 Star 。

https://github.com/glumes/AndroidOpenGLTutorial

参考

https://blog.csdn.net/cauchyweierstrass/article/details/53166940

《OpenGL ES 3.x 游戏开发下卷》

OpenGL 系列文章

「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

阿里云社区.png

相关文章
|
9月前
|
存储
QT+OpenGL 面剔除和帧缓冲
OpenGL能够检查所有面向(Front Facing)观察者的面,并且渲染他们,而丢弃那些背向的面,节省我们很多的片段着色器的调用。 我们需要告诉OpenGL哪些是正面,哪些是背面。逆时针是正面,顺时针是反面。
65 0
|
API Android开发 异构计算
OpenGL 实践之贝塞尔曲线绘制
说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图。
733 0
OpenGL 实践之贝塞尔曲线绘制
|
存储 移动开发 API
OpenGL 之 EGL 使用实践
OpenGL 是跨平台的、专业的图形编程接口,而接口的实现是由厂商来完成的。
1148 0
OpenGL 之 EGL 使用实践
|
小程序
OpenGL ES 实践
OpenGL ES实践(一)—— 一个简单的小程序OpenGL ES实践(二)—— 一个简单的三角形OpenGL ES实践(三)—— 一个三色三角形的绘制OpenGL ES实践(四)—— 简单图形的旋转OpenGL ES实践(五)—— 使用一个纹理来给...
782 0
|
4天前
|
XML 小程序 Java
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
59 0
|
存储 编解码 算法
Opengl ES之LUT滤镜(上)
Opengl ES之连载系列
348 0
|
数据安全/隐私保护 开发者
OpenGL ES 多目标渲染(MRT)
Opengl ES连载系列
227 0
|
数据安全/隐私保护 索引
Opengl ES之纹理数组
Opengl ES连载系列
185 0
|
数据安全/隐私保护
Opengl ES之水印贴图
Opengl ES之连载系列
90 0