专栏首页进击的多媒体开发OpenGL 之 帧缓冲 使用实践

OpenGL 之 帧缓冲 使用实践

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

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

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

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

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

使用概述

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

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

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

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

使用步骤

创建 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

参考

  1. https://blog.csdn.net/cauchyweierstrass/article/details/53166940
  2. 《OpenGL ES 3.x 游戏开发下卷》

本文分享自微信公众号 - 纸上浅谈(glumes_blog),作者:glumes

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OpenGL 之 GPUImage 源码分析

    GPUImage 是 iOS 上一个基于 OpenGL 进行图像处理的开源框架,后来有人借鉴它的想法实现了一个 Android 版本的 GPUImage ,本文...

    glumes
  • OpenGL 的 glDrawElements 绘制方法

    在之前的绘制中,我们都是通过 glDrawArrays 方法来实现的,它会按照我们传入的顶点顺序和指定的绘制方式进行绘制。

    glumes
  • Android 通过 JNI 访问 Java 字段和方法调用

    在前面的两篇文章中,介绍了 Android 通过 JNI 进行基础类型、字符串和数组的相关操作,并描述了 Java 和 Native 在类型和签名之间的转换关系...

    glumes
  • 【Android 音视频开发打怪升级:OpenGL渲染视频画面篇】五、OpenGL FBO数据缓冲区

    上一篇文章,讲解了如何使用EGL,并且提到EGL可以建立一个离屏渲染的缓冲区,这种离屏渲染的方式通常用于模拟整个渲染窗口,比如可以用于FFmpeg软编码,将显示...

    开发的猫
  • mysql事务

    ANSI/ISO SQL标准定义了4中事务隔离级别:未提交读(read uncommitted),提交读(read committed),重复读(repeata...

    东营浪人
  • Python 生成 GIF 文件

    用户2398817
  • 提升文件的读写效率--缓冲流

    爱学习的孙小白
  • 科大讯飞李伟:人机交互如何选择合适的「耳朵」

    AI 研习社按:人工智能当前正处于爆发阶段,语音交互作为人工智能的重要组成部分正在各行业全面的落地,在人机进行语音交互的过程中,机器需要通过耳朵实现听觉的作用。

    AI研习社
  • 小程序云开发实战六:云数据库读取的数据显示在小程序端列表里

    参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/data...

    祈澈菇凉
  • 小试Flex框架Fabrication

    fabrication 是在pureMVC基本上做了扩展,简化了pureMVC的开发难度。

    meteoric

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动