Android OpenGL ES 学习(十三) -离屏渲染FBO(截图)RBO, OES转 FBO

Android OpenGL ES 学习(一) – 基本概念

Android OpenGL ES 学习(二) – 图形渲染管线和GLSL

Android OpenGL ES 学习(三) – 绘制平面图形

Android OpenGL ES 学习(四) – 正交投屏

Android OpenGL ES 学习(五) – 渐变色

Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序

Android OpenGL ES 学习(七) – 纹理

Android OpenGL ES 学习(八) –矩阵变换

Android OpenGL ES 学习(十) – GLSurfaceView 源码解析GL线程以及自定义 EGL

Android OpenGL ES 学习(十一) –渲染YUV视频以及视频抖音特效

Android OpenGL ES 学习(十二) - MediaCodec + OpenGL 解析H264视频+滤镜
Android OpenGL ES 学习(十三) -离屏渲染FBO(截图)RBO, OES转 FBO

代码工程地址： https://github.com/LillteZheng/OpenGLDemo.git

更多音视频，参考：Android 音视频入门/进阶教程

最近遇到需要截图的功能，发现直接使用 GLES30.glReadPixels 竟然达到了2s多，且会阻塞卡顿。
因此有必要学习一下 FBO 了。这次要实现的效果如下：

在这里插入图片描述

一. 基本概念

OpenGL 默认把 framebuffer(帧缓冲） 当做渲染窗口，在我们之前的程序中，都是使用了默认帧缓冲，它是在你程序启动时就生成和配置好的。
但是 OpenGL 也允许我们定义自己的帧缓冲 FBO ，它可以在不影响默认帧缓冲的情况，来存储我们几次不同的渲染采样的结果，等处理完再显示到窗口上。
比如摄像头拿到流之后，进行美颜效果，再显示出来。

1.1 优势

这样做的好处有：

  1. 提高渲染效率(后台绘制)
  2. 避免卡顿闪屏
  3. 实现纹理共享 (fbo 的纹理id)

二. FBO 概念

2.1 创建 FBO

在 OpenGL 中，创建FBO的方式非常简单：

val frameBuffers = IntArray(1)
GLES30.glGenFramebuffers(1, frameBuffers, 0)

然后使用

GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, frameBuffers[0])

激活帧缓冲对象，但它并不完整；一个完整的帧缓冲需要满足以下的条件：

  • 附加至少一个缓冲（颜色、深度或模板缓冲）。
  • 至少有一个颜色附件(Attachment)。
  • 所有的附件都必须是完整的（保留了内存）。
  • 每个缓冲都应该有相同的样本数。

从上面的条件知道，帧缓冲至少需要附着一个颜附件，才能正常工作；
在这里插入图片描述

2.2 附件

需要给帧缓冲附加一个附件。附件是一个内存位置，它能够作为帧缓冲的一个缓冲，可以将它想象为一个图像。当创建一个附件的时候我们有两个选项：纹理或渲染缓冲对象(Renderbuffer Object)。

之后所有的渲染操作将会渲染到当前绑定帧缓冲的附件中。由于我们的帧缓冲不是默认帧缓冲，渲染指令将不会对窗口的视觉输出有任何影响。出于这个原因，渲染到一个不同的帧缓冲被叫做离屏渲染(Off-screen Rendering)。

2.3 纹理附件

当把一个纹理附加到帧缓冲的时候，所有的渲染指令将会写入到这个纹理中，就像它是一个普通的颜色/深度或模板缓冲一样。使用纹理的优点是，所有渲染操作的结果将会被储存在一个纹理图像中，我们之后可以在着色器中很方便地使用它。

这样，当我们用 fbo 渲染完成后，可以拿到这个 纹理 的id，去做特效或者显示。

三 使用 FBO 进行纹理显示

我们复制第七章纹理的代码 Android OpenGL ES 学习(七) – 纹理 在他的基础上实现使用 FBO 的功能，对FBO进行一个认知。效果如下：

在这里插入图片描述

为帧缓冲创建一个纹理和普通纹理的创建差不多：

 val textures = IntArray(1)GLES30.glGenTextures(1, textures, 0)val textureId = textures[0]GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId)//纹理过滤GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_MIN_FILTER,GLES30.GL_NEAREST)GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)GLES30.glTexImage2D(GLES30.GL_TEXTURE_2D,0,GLES30.GL_RGB,width,height,0,GLES30.GL_RGB,GLES30.GL_UNSIGNED_SHORT_5_6_5,null)

注意我们在 glTexImage2D 的数据data 那里设置了 null，因为我们只需要内存地址，暂时不需要去填充它，然后环绕方式，我们也不用太去关注，大小也是。

最后，则需要将它附加到帧缓冲上了：

GLES30.glFramebufferTexture2D(GLES30.GL_FRAMEBUFFER,GLES30.GL_COLOR_ATTACHMENT0,GLES30.GL_TEXTURE_2D,textureId,0)

glFrameBufferTexture2D有以下的参数：

  • target：帧缓冲的目标（绘制、读取或者两者皆有）
  • attachment：我们想要附加的附件类型。当前我们正在附加一个颜色附件。注意最后的0意味着我们可以附加多个颜色附件。我们将在之后的教程中提到。
  • textarget：你希望附加的纹理类型
  • texture：要附加的纹理本身
  • level：多级渐远纹理的级别。我们将它保留为0。

当然，除了颜色附件，还有深度和模板缓冲，这里暂时不需要关注。完整代码如下：

private var fboBean: FboBean? = nullprivate fun useFbo(width: Int, height: Int) {val frameBuffers = IntArray(1)GLES30.glGenFramebuffers(1, frameBuffers, 0)val textures = IntArray(1)GLES30.glGenTextures(1, textures, 0)val textureId = textures[0]GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId)//纹理过滤GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D,GLES30.GL_TEXTURE_MIN_FILTER,GLES30.GL_NEAREST)GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)GLES30.glTexImage2D(GLES30.GL_TEXTURE_2D,0,GLES30.GL_RGB,width,height,0,GLES30.GL_RGB,GLES30.GL_UNSIGNED_SHORT_5_6_5,null)GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, frameBuffers[0])GLES30.glFramebufferTexture2D(GLES30.GL_FRAMEBUFFER,GLES30.GL_COLOR_ATTACHMENT0,GLES30.GL_TEXTURE_2D,textureId,0)val status = GLES30.glCheckFramebufferStatus(GLES30.GL_FRAMEBUFFER)if (status != GLES30.GL_FRAMEBUFFER_COMPLETE) {throw RuntimeException("Failed to create texture.")}GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, 0)fboBean = FboBean(frameBuffers[0], textureId, width, height)}

3.1 怎么使用？

在 Android OpenGL ES 学习(七) – 纹理 中，我们首先通过加载图片，拿到原图片的纹理id，而我们截图只需要显示图片大小，因此，当我们加载好原始图片，就使用 fbo 即可：

 texture = loadTexture(TAG, MainApplication.context, R.mipmap.wuliuqi)?.apply {Log.d(TAG, "useVaoVboAndEbo() called width = $width, height = $height")useFbo(width, height)Log.d(TAG, "bind frame buffer succeeded")}

3.2 渲染

那如何渲染呢？前面说到，当我们使用 GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,fboId) 时，已经从默认帧缓冲切换到自己的帧缓冲了，然后所有的渲染都在你 fbo 的纹理上。
那这样就很简单，按照这样的步骤：

  1. 绑定 FBO GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,fboId)
  2. 渲染纹理数据 GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, id)
  3. 解绑 FBO GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,0)
  4. 渲染原图或者 FBO 的纹理

完成代码如下：

    override fun onDrawFrame(gl: GL10?) {resetMatrix()// 步骤1：使用 glClearColor 设置的颜色，刷新 SurfacefboBean?.apply {GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT )// 绑定 FBOGLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,fboId)GLES30.glViewport(0, 0, width, height)//解决倒影//rotate(180f)texture?.apply {GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, id)}GLES30.glBindVertexArray(vao[0])GLES30.glDrawElements(GLES30.GL_TRIANGLE_STRIP, 6, GLES30.GL_UNSIGNED_INT, 0)val startTime = System.currentTimeMillis()val bmp = readBufferPixelToBitmap(width, height)image?.post {image?.setImageBitmap(bmp)}val endTime = System.currentTimeMillis()Log.d(TAG, "zsr onDrawFrame: ${endTime - startTime}")// 解绑 FBOGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,0)}GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT )GLES30.glViewport(0, 0, screenWidth, screenHeight)resetMatrix()// 正交投影if (aspectRatio > 1) {Matrix.orthoM(UnitMatrix, 0, -aspectRatio, aspectRatio, -1f, 1f, -1f, 1f)} else {Matrix.orthoM(UnitMatrix, 0, -1f, 1f, -aspectRatio, aspectRatio, -1f, 1f)}GLES30.glUniformMatrix4fv(uMatrix, 1, false, UnitMatrix, 0)//显示 fbo 的图片fboBean?.let {GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, it.textureId)}?: GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture!!.id)//使用原图// GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture!!.id)GLES30.glBindVertexArray(vao[0])GLES30.glDrawElements(GLES30.GL_TRIANGLE_STRIP, 6, GLES30.GL_UNSIGNED_INT, 0)}

然后你会发现，怎么是倒影的?
那是因为 FBO 的坐标是帧缓冲坐标，跟纹理坐标是相反的(图片来源(https://blog.csdn.net/yu540135101/article/details/102912319))：
图片来源(https://blog.csdn.net/yu540135101/article/details/102912319)

四 RBO (缓冲对象附件)

与 VBO ,VAO 相似，RBO(Renderbuffer Object) 是纹理附件的缓冲对象，它会将数据储存为OpenGL原生的渲染格式，它是为离屏渲染到帧缓冲优化过的。
如果你有多个渲染对象或者有深度和模板附件时，使用 RBO 是一个非常不错的选择。

渲染缓冲对象直接将所有的渲染数据储存到它的缓冲中，不会做任何针对纹理格式的转换，让它变为一个更快的可写储存介质。然而，渲染缓冲对象通常都是只写的，所以你不能读取它们（比如使用纹理访问）。当然你仍然还是能够使用glReadPixels来读取它，这会从当前绑定的帧缓冲，而不是附件本身，中返回特定区域的像素。

因为它的数据已经是原生的格式了，当写入或者复制它的数据到其它缓冲中时是非常快的。所以，交换缓冲这样的操作在使用渲染缓冲对象时会非常快。

创建 rbo 和 帧缓冲非常相似：

 //创建rbo
val rbos = IntArray(1)
GLES30.glGenFramebuffers(1,rbos,0)

然后绑定这个缓冲对象，让之后所有的渲染缓冲操作在rbo上：

GLES30.glBindRenderbuffer(GLES30.GL_RENDERBUFFER,rbos[0])

由于渲染缓冲对象通常都是只写的，它们会经常用于深度和模板附件，因为大部分时间我们都不需要从深度和模板缓冲中读取值，只关心深度和模板测试。

说到深度测试，我们就自然而然想到我们的第九章 Android OpenGL ES 学习(九) – 坐标系统和。实现3D效果 了。

创建一个深度和模板渲染缓冲对象可以通过调用 glRenderbufferStorage 来实现

       GLES30.glRenderbufferStorage(GLES30.GL_RENDERBUFFER,GLES30.GL_DEPTH24_STENCIL8,width,height)

这个对象是专门被设计作为帧缓冲附件使用的，而不是纹理那样的通用数据缓冲(General Purpose Data Buffer)。这里我们选择GL_DEPTH24_STENCIL8作为内部格式，它封装了24位的深度和8位的模板缓冲。

最后一件事就是附加这个渲染缓冲对象：

 GLES30.glFramebufferRenderbuffer(GLES30.GL_FRAMEBUFFER,GLES30.GL_DEPTH_STENCIL_ATTACHMENT,GLES30.GL_RENDERBUFFER,rbos[0])

4.1 渲染

跟之前一样，把 3D 效果先绘制到 FBO 上，此时 FBO 的 textureId 已经有了整个效果了，那我们其实就绘制纹理就可以了，就不用再 for 循环去绘制每一个面了。：

    override fun onDrawFrame(gl: GL10?) {// notUseDeepTest()resetMatrix()fboBean?.apply {// 绑定 FBOGLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,fboId)GLES30.glBindRenderbuffer(GLES30.GL_RENDERBUFFER,rboId)GLES30.glViewport(0, 0, width, height)useDeepTest()val startTime = System.currentTimeMillis()val bmp = readBufferPixelToBitmap(width, height)image?.post {image?.setImageBitmap(bmp)}val endTime = System.currentTimeMillis()Log.d(TAG, "zsr onDrawFrame: ${endTime - startTime}")// 解绑 FBOGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER,0)GLES30.glBindRenderbuffer(GLES30.GL_RENDERBUFFER,0)}// useDeepTest()GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT or GLES30.GL_DEPTH_BUFFER_BIT)resetMatrix()GLES30.glBindVertexArray(vao[0])//直接用 fbo 的纹理绘制即可fboBean?.let {GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, it.textureId)}GLES30.glDrawArrays(GLES30.GL_TRIANGLES, 0, 36)}

效果如下：
在这里插入图片描述
这样，我们就对 FBO 学习差不多；基本上掌握了 FBO 的使用原理，想开头的效果，OES 装 FBO ，基本上自己也可以写了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/16124.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2.SpringBoot集成Swagger

2.SpringBoot集成Swagger

1.添加依赖 <!--添加Swagger依赖 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0</version></dependency><!--添加Swagger-UI依赖 --><dependenc…
阅读更多...
TortoiseGit 入门指南02：创建和克隆仓库

TortoiseGit 入门指南02：创建和克隆仓库

图标 本节讲解如何使用 TortoiseGit 创建和克隆仓库。但在此之前&#xff0c;我们先来看下 TortoiseGit 软件的一个特色&#xff1a;图标。 TortoiseGit 会给 工作区 中的文件和文件夹叠加图标&#xff08;Icon Overlays&#xff09;&#xff0c;图标反应的是这些文件和文件夹…
阅读更多...
2023黑马头条.微服务项目.跟学笔记(三)

2023黑马头条.微服务项目.跟学笔记(三)

2023黑马头条.微服务项目.跟学笔记 三 自媒体文章发布1.自媒体前后端搭建1.1 后台搭建1.2 前台搭建 2.自媒体素材管理2.1 素材上传2.2.1 需求分析2.2.2 素材管理-图片上传-表结构2.2.3 实现思路2.2.4 接口定义2.2.5 自媒体微服务集成heima-file-starter2.2.6 具体实现 2.2 素材…
阅读更多...
ARMv8的异常等级（Exception Level）以及执行状态（AArch64/AArch32）

ARMv8的异常等级（Exception Level）以及执行状态（AArch64/AArch32）

目录 1&#xff0c;异常等级&#xff08;Exception Level&#xff09; 2&#xff0c;Execution states&#xff0c;执行状态 AArch64的异常等级 AArch32的异常等级 3&#xff0c;异常等级切换 4&#xff0c;执行状态切换&#xff08;AArch64 <> AArch32&#xff09;…
阅读更多...
【QT】QT搭建OpenCV环境

【QT】QT搭建OpenCV环境

QT/OpenCV 01、开始之前02、QT03、CMake04、OpenCV05、配置06、测试 01、开始之前 本文版本&#xff1a; 1、QT&#xff1a;Based on Qt 5.12.2 (MSVC 2017, 32 bit)&#xff0c;编译方式是MinGW 2、CMake&#xff1a;cmake-3.27.0-rc4-windows-x86_64.msi 3、OpenCV&#xff1…
阅读更多...
CSS 制作动态蚂蚁线

CSS 制作动态蚂蚁线

效果&#xff1a; 代码&#xff1a; <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <style type"text/css"> .line{position:relative;margin-bottom: 5px;width: 1200px;height: …
阅读更多...
Django系列所有漏洞复现vulhubCVE-2018-14574，CVE-2022-34265，CVE-2021-35042

Django系列所有漏洞复现vulhubCVE-2018-14574，CVE-2022-34265，CVE-2021-35042

文章目录 Django < 2.0.8 任意URL跳转漏洞&#xff08;CVE-2018-14574&#xff09;漏洞详情&#xff1a;复现&#xff1a; Django Trunc(kind) and Extract(lookup_name) SQL注入漏洞&#xff08;CVE-2022-34265&#xff09;漏洞详情&#xff1a;复现&#xff1a; Django Qu…
阅读更多...
mtk log、kernel log、adb log的详细使用

mtk log、kernel log、adb log的详细使用

目录 mtk logkernel logadb log 打印MTK log&#xff0c;里面就包含了kernel层的log&#xff0c;像我们adb log打印的是上层应用的log&#xff0c;mtk log打印的则是更底层的log。 那么什么时候需要用到mtk log 呢&#xff1f; 就比如你想抓一些从关机到开机的log&#xff0c;…
阅读更多...
漏刻有时数据可视化Echarts组件开发(27)：端午地图粽情之你的家乡吃甜还是吃咸？

漏刻有时数据可视化Echarts组件开发(27)：端午地图粽情之你的家乡吃甜还是吃咸？

端午地图粽情之你的家乡吃甜还是吃咸&#xff1f; 前言Echarts创意来源Echarts核心代码1.引入外部文件2.构建HTML容器3.Echarts组件开发预置各省数据初始化DOM配置选项geo组件series组件自适应浏览器完整option选项配置代码 前言 中国各地对粽子的口味偏好存在一定的差异&…
阅读更多...
记录一次使用thinkphp5分页器获取数据

记录一次使用thinkphp5分页器获取数据

// 输出当前页 $nowPage $data->currentPage(); // 输出总条数 $total $data->total(); // 输出当前页条数 $listRows $data->listRows();db(tablename)->where("id > 0")->paginate(10,true,[page>4]); //每页显示10条记录&#xff0c;且打…
阅读更多...
docker安装ES，IK分词器，Kibana

docker安装ES，IK分词器，Kibana

dockerhub上自己搜要拉的镜像版本 // 拉取es 6.8.0的镜像版本 docker pull elasticsearch:6.8.0// 运行es镜像 docker run -d -p 9300:9300 -p 9200:9200 --name elasticsearch elasticsearch:6.8.0运行报错了 ERROR: [1] bootstrap checks failed [1]: max virtual memory are…
阅读更多...
爬取新闻评论数据并进行情绪识别

爬取新闻评论数据并进行情绪识别

一、为什么要爬取新闻评论数据并进行情绪识别&#xff1f; 爬取新闻评论数据并进行情绪识别的目的是为了从网页中抓取用户对新闻事件或话题的评价内容&#xff0c;并从中识别和提取用户的情绪或态度&#xff0c;如积极、消极、中立等。爬取新闻评论数据并进行情绪识别有以下几个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023