OpenGL ES实践教程(七)多滤镜叠加处理

教程

OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践教程3-Demo03-Mirror OpenGL ES实践教程4-Demo04-VR全景视频播放 OpenGL ES实践教程5-Demo05-多重纹理实现图像混合 OpenGL ES实践教程6-Demo06-全景视频获取焦点 其他教程请移步OpenGL ES文集

前言

有朋友问我有关实现滤镜的叠加问题,滤镜有饱和度和色温。 已经实现两个滤镜一起显示的效果,但是两个滤镜处理都写在同一个shader里面,是否能否分开写在不同的shader? 我建议开个新帧缓存先处理饱和度,把输出的纹理作为色温的输入,关键函数是glFramebufferTexture2D。 不过朋友并没有解决这问题,卡在了帧缓存这一步,然后把demo整理发给我。 demo的shader写得很棒,但是帧缓存的配置和纹理选择存在较大问题;花时间整理工程后,有了这篇文章。

核心思路

定义两个GLProgram,来处理饱和度与色温的Shader,每个Shader都有对应的转换矩阵和纹理; 激活纹理单元1,上传初始图像; 配置一个新的帧缓存,以纹理单元1作为输入,以纹理单元0作为帧缓存的颜色输出(glFramebufferTexture2D函数); 配置一个新的帧缓存,以纹理单元0作为输入,以CAEAGLLayer作为颜色输出(通过前后帧交换后显示到屏幕);

效果预览

饱和度和色温.gif

具体步骤

1、初始化OpenGL ES配置 初始化数据->设置CAEAGLLayer->选择OpenGL ES上下文->初始化帧缓存->编译shader->配置顶点数组信息。 这一部分和前面的文章有较大的重复,具体看代码代码即可,我们重点关注饱和度Shader相关的帧缓存配置部分:

- (void)setupTemp {
    glGenFramebuffers(1, &_tempFramebuffer);
    glActiveTexture(GL_TEXTURE0);
    glGenTextures(1, &_tempTexture);
    glBindTexture(GL_TEXTURE_2D, _tempTexture);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glBindFramebuffer(GL_FRAMEBUFFER, _tempFramebuffer);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _tempTexture, 0);
}

glActiveTexture是激活纹理单元,这里选择纹理单元0作为输出,glFramebufferTexture2D是把帧缓存的颜色输出定位到纹理中,这样shader的绘制结果就会成为纹理;

2、滤镜渲染 滤镜渲染分为两部分,第一部分是饱和度渲染,第二部分是色温渲染;

  • 饱和度渲染: 先绑定事先配置好的_tempFramebuffer并使用饱和度的shader; 这里同样需要用glViewport设置视口大小; 初始化变量,注意选择纹理单元1作为输入纹理; 最后开始绘制。
    // 绘制第一个滤镜
    glUseProgram(_tempProgramHandle);
    glBindFramebuffer(GL_FRAMEBUFFER, _tempFramebuffer);
    glViewport(0, 0, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor);
    glClearColor(0, 0, 1, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glUniform1i(glViewUniforms[TEMP_UNIFORM_INPUT_IMAGE_TEXTURE], 1);
    glUniform1f(glViewUniforms[UNIFORM_SATURATION], _saturation);
    glVertexAttribPointer(glViewAttributes[TEMP_ATTRIBUTE_POSITION], 4, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), 0);
    glVertexAttribPointer(glViewAttributes[TEMP_ATTRIBUTE_INPUT_TEXTURE_COORDINATE], 2, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), (GLvoid *)(sizeof(float) * 4));
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  • 色温渲染: 先使用色温的shader并绑定GL_FRAMEBUFFERGL_RENDERBUFFERglViewport设置视口大小同样需要;(虽然两个视口大小一致,设置一次即可,但是这里是应该设置的) 初始化变量,这次选择纹理单元0(饱和度的输出纹理)作为输入纹理; 发送渲染指令,并用presentRenderbuffer:显示到屏幕。
    // 绘制第二个滤镜
    glUseProgram(_programHandle);
    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _renderbuffer);
    glClearColor(1, 0, 0, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(0, 0, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor);
    glUniform1i(glViewUniforms[UNIFORM_INPUT_IMAGE_TEXTURE], 0);
    glUniform1f(glViewUniforms[UNIFORM_TEMPERATURE], _temperature);
    glVertexAttribPointer(glViewAttributes[ATTRIBUTE_POSITION], 4, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), 0);
    glVertexAttribPointer(glViewAttributes[ATTRIBUTE_INPUT_TEXTURE_COORDINATE], 2, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), (GLvoid *)(sizeof(float) * 4));
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    [_context presentRenderbuffer:GL_RENDERBUFFER];

遇到的问题

GPU Frame Capture没有返回 在OpenGL ES的渲染指令没有得到想到的结果时,看看GPU的渲染指令和上下文,能非常快定位问题所在;但是昨天又遇到一直卡在Capturing的界面,并且在结束进程后才能得到不完整的结果。 仔细看了一遍苹果的文档,以为是GLKit没有导入的问题;尝试把ViewController的父类从UIViewController改成GLKitViewController,但是依旧没有返回; Google上的答案,大多数问的是Metal下GPU Frame Capture的问题; 仔细翻了几页,so给了两个解决方案: 1、glInsertEventMarkerEXT(0, "com.apple.GPUTools.event.debug-frame"); 2、用instrucment的GPU Driver; 尝试后都无效,怀疑是XCode工程设置问题,新建工程带入代码测试,无效; 最后终于发现问题所在: GPU Frame Capture执行后,需要调用渲染;但是demo的并没有用CADisplayLink管理帧刷新。 于是每次Capture之后,需要手动触发一下渲染。

大部分时间的消耗在这个问题。

渲染结果不一致(黑屏) 现象是黑屏,原因未知,这个问题是demo打开就存在的。 简单查看代码流程,没有问题; 之后尝试用GPU Frame Capture,就遇到前面的问题,但是Capture并没有很快解决。 在用instrucment的OpenGL ES Analysis时发现帧缓存的设置有问题; 回来检查帧缓存的初始化代码,发现是glFramebufferTexture2D的第一个参数被设置成_tempFramebuffer! 修改掉这个处比较明显的bug后,仍旧是黑屏; 尝试二分代码,把饱和度去掉,把色温的输入纹理设置为纹理单元1,可以显示; 尝试保留饱和度,去掉色温的shader,直接把饱和度的处理结果显示到屏幕,正常; 但是把两个处理结果串联起来就会黑屏; 最后还是先回去解决GPU Frame Capture,在Capture问题解决后,马上发现问题: 饱和度渲染结果是空; 饱和度的输入纹理是正常的,纹理单元、纹理对象、转换矩阵的设置也是正常的; 最后尝试一行行代码的看,终于发现是glFramebufferTexture2D函数调用前,没有调用glBindFramebuffer函数。 添加后,显示结果终于正常。

总结

代码不多,但是调试起来挺麻烦;特别是当结果只能显示在屏幕时,二分代码进行BUG定位是常见的。 GPU Frame Capture一定要会用,不然会浪费更多的时间。 代码地址 有什么好玩的想法、demo,欢迎来私信探讨。 如果觉得文章有所帮助或者有点意思,麻烦点个喜欢。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信小驿站

R语言之可视化⑦easyGgplot2散点图目录

ggplot2.stripchart是一个易于使用的函数(来自easyGgplot2包),使用ggplot2绘图系统和R软件生成条带图。 条形图也被称为一维散点...

1161
来自专栏Python数据科学

Seaborn从零开始学习教程(一)

最近在做几个项目的数据分析,每次用到seaborn进行可视化绘图的时候总是忘记具体操作。虽然seaborn的官方网站已经详细的介绍了使用方法,但是毕竟是英文,而...

1591
来自专栏拂晓风起

Flash图片处理 图像处理 效果 滤镜 pixelbender blender mode

  前6个小玩意,正好对应Flash CS滤镜面板的几个效果,使用比较简单,详细可以参考这个: http://blog.sina.com.cn/s/blog_3...

1532
来自专栏hightopo

根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

1553
来自专栏tkokof 的技术,小趣及杂念

HGE系列之管中窥豹(变形网格)

  近来实在忙了一些,一直没有时间继续这个HGE系列,但实际上,时间紧之类的说辞深究起来往往都是有些苍白无力的,尤其当你一心想做成某事时,时间总归是可以挤出来的...

1062
来自专栏落影的专栏

OpenGL ES学习阶段性总结

前言 最近观看下面这本书有感,结合之前的学习,对OpenGL的知识进行回顾。 ? 概念 帧缓存:接收渲染结果的缓冲区,为GPU指定存储渲染结果的区域。 ...

4388
来自专栏章鱼的慢慢技术路

用OpenGL实现动态的立体时钟

6685
来自专栏前端说吧

echarts - 特殊需求实现代码汇总之【线图】篇

继7月24的echarts-柱图配置汇总后,echarts特殊配置连载第四篇 之 线图终于也被我这个懒家伙放出来了!

2363
来自专栏钱塘大数据

【干货】这17个技能,让你的Excel飞一样的提升

1、最快数据行公式求和 选取空行,点Σ(或按Alt + =)可以快速设置求和公式 ? 2、多区域最快求和 如果求和的区域有多个,可以选定位,然后再点Σ(或按A...

3756
来自专栏一“技”之长

Cocos2d-x-v3中3D网格特效动画的应用

        基础的动作是对节点整体进行移动,变形等操作,网格特效的原理是将节点分割成多个尺寸相同的网格,根据改变每个网格块的属性使整体节点产生3D的效果。

1042

扫码关注云+社区

领取腾讯云代金券