GPUImage详细解析

作者: 落影loyinglin | 来源:发表于2016-05-14 00:00 被阅读31117次

从源码的角度分析、学习GPUImage和OpenGL ES,这是第一篇,介绍GPUImageFilterGPUImageFramebuffer

OpenGL ES准备

回顾下我们之前的OpenGL ES教程,图像在OpenGL ES中的表示是纹理,会在片元着色器里面进行像素级别的处理。
假设我们自定义一个OpenGL ES程序来处理图片,那么会有以下几个步骤:
1、初始化OpenGL ES环境,编译、链接顶点着色器和片元着色器;
2、缓存顶点、纹理坐标数据,传送图像数据到GPU;
3、绘制图元到特定的帧缓存;
4、在帧缓存取出绘制的图像。
GPUImageFilter负责的是第一、二、三步。
GPUImageFramebuffer负责是第四步。

GPUImageFilter解析

GPUImageFilter和响应链的其他元素实现了GPUImageInput协议,他们都可以提供纹理参与响应链,或者从响应链的前面接收并处理纹理。响应链的下一个对象是target,响应链可能有多个分支(添加多个targets)。

Filters and other subsequent elements in the chain conform to the GPUImageInput protocol, which lets them take in the supplied or processed texture from the previous link in the chain and do something with it. Objects one step further down the chain are considered targets, and processing can be branched by adding multiple targets to a single output or filter.

  • 获取纹理坐标
+ (const GLfloat *)textureCoordinatesForRotation:(GPUImageRotationMode)rotationMode;
  • 绘制结果输出
    绘制的结果后输入到outputframebuffer指定的缓存

usingNextFrameForImageCapture代表着输出的结果会被用于获取图像,所以在绘制之前要加锁

    if (usingNextFrameForImageCapture)
    {
        [outputFramebuffer lock];
    }
  • 绑定纹理
    glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
    绑定输入纹理,OpenGL ES才能确定要处理纹理数据

  • 绑定顶点和纹理坐标并绘制图元

    glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);
    glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

GL_TRIANGLE_STRIP模式用于绘制三角形带。这里有介绍

  • 纹理解锁
    [firstInputFramebuffer unlock]; 输入纹理使用完毕,解锁。在调用这个解锁之前必须确定之前已经调用加锁,否则会报错。
    GPUImageFramebuffer使用引用计数来管理缓存,当引用计数小于0的时候会回收缓存。

  • 信号量
    如果设置了usingNextFrameForImageCapture,则会通过GCD信号量来通知仍在等待绘制完成的函数。

    if (usingNextFrameForImageCapture)
    {
        dispatch_semaphore_signal(imageCaptureSemaphore);
    }
  • 通知targets
    - (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;
    当self的帧绘制完成后,通知自己的targets,并将自己的输出设置为targets的输入纹理:
    [self setInputFramebufferForTarget:currentTarget atIndex:textureIndex];
    然后解锁自己使用的输出缓冲区[[self framebufferForOutput] unlock];
    (在上一个函数已经lock了这个缓冲区,所以这里的unlock不会马上回收内存,等到targets使用完自己的纹理后调用unlock,缓存会被回收)
    在设置完缓冲区后,self会通知所有targets(除了设置忽略的)
    [currentTarget newFrameReadyAtTime:frameTime atIndex:textureIndex];
  • 等待渲染完成
    if (dispatch_semaphore_wait(imageCaptureSemaphore, convertedTimeout) != 0)
    {
        return NULL;
    }
  • 一系列setter
    - (void)setInteger:(GLint)newInteger forUniformName:(NSString *)uniformName;
    这些函数是设置GLSL里面的变量

GPUImageFramebuffer

管理纹理缓存格式、帧缓存的buffer。

  • 纹理格式
    默认的纹理格式defaultTextureOptions

  • 缓存创建
    generateTexture会创建对应的纹理缓存
    generateFramebuffer会创建对应的帧缓存
    注意:iOS5.0以上会使用CVOpenGLESTextureCache
    否则会使用glTexImage2D(),这个我们更熟悉的函数来传送CPU图像数据到GPU

  • 指定渲染目标
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture, 0);
    把渲染目标指定为图像

  • 调整视口大小
    先绑定自己的帧缓存,再调整视口大小。

- (void)activateFramebuffer;
{
    glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
    glViewport(0, 0, (int)_size.width, (int)_size.height);
}
  • 解锁
    当引用计数小于1的时候,会调用下面的函数把自己放回缓存管理cache。(注意这个和 destroyFramebuffer不一样,一个是回收再利用,一个是销毁)
[[GPUImageContext sharedFramebufferCache] returnFramebufferToCache:self];
  • 从帧缓存中读取图片
    newCGImageFromFramebufferContents函数获取图像数据。
    CVPixelBufferGetBaseAddressglReadPixels都可以获得图像数据,根据iOS版本不同调用不同函数。
    最后通过CGImageCreate,创建 CGImageRef,然后返回。

  • CVPixelBuffer
    CV像素缓存是一个主内存的图像缓存,应用在渲染帧、压缩解压视频、使用CoreImage都会用到CV像素缓存。
    在访问CPU的像素数据之前,必须调用CVPixelBufferLockBaseAddress,并在访问后调用CVPixelBufferUnlockBaseAddress。如果lockFLags带有kCVPixelBufferLock_ReadOnly参数,那么unlocking 的时候也需要。

A Core Video pixel buffer is an image buffer that holds pixels in main memory. Applications generating frames, compressing or decompressing video, or using Core Image can all make use of Core Video pixel buffers.

  • CVOpenGLESTextureCache
    缓存和管理CVOpenGLESTextureRef纹理,这些纹理缓存提供了一个直接读写多种颜色格式缓存的方式。

Core Video OpenGLES texture caches are used to cache and manage CVOpenGLESTextureRef textures. These texture caches provide you with a way to directly read and write buffers with various pixel formats, such as 420v or BGRA, from GLES.

  • CVOpenGLESTexture
    CV纹理是纹理图像缓存,提供OpenGL图像数据

Core Video OpenGLES textures are texture-based image buffers used for supplying source image data to OpenGL.

扩展

GPUImage的四大输入基础类,都可以作为响应链的起点。这些基础类会把图像作为纹理,传给OpenGL ES处理,然后把纹理传递给响应链的下一个对象。
GPUImageVideoCamera 摄像头-视频流
GPUImageStillCamera 摄像头-照相
GPUImagePicture 图片
GPUImageMovie 视频
响应链,先要理解帧缓存的概念,这在OpenGL ES教程-帧缓存有提到过。

总结

用一句话来解释GPUImageFilter就是用来接收源图像,通过自定义的顶点、片元着色器来渲染新的图像,并在绘制完成后通知响应链的下一个对象。
GPUImageFramebuffer就是用来管理纹理缓存的格式与读写帧缓存的buffer。

这里有个GPUImage的简单工程,可以看到GPUImage的源代码。

一个热血青年想在业余时间做更多的尝试,做一些能帮助别人也能受惠自己的事情。
思来想去,决定继续延续现在写文章的思路——用自己的经历和知识给职场填坑,让人少走弯路。
欢迎私信探讨,工作上的焦虑与迷茫。

相关文章

网友评论

  • 就叫K:大神,我想问一下比较简单的问题。。。就是为什么有的是用pod集成的,有的是自己把工程放进去编成静态库呢?有什么区别呢?
    落影loyinglin:@K_2ffd pod集成在于方便,版本更新只要update。静态库的话不用修改工程
  • 38841d8809d0:大神怎么把俩个filter 放到一个FBO中
    38841d8809d0:@落影loyinglin 大神 方便加一下QQ吗
    38841d8809d0:@落影loyinglin 大神 GPUImage 处理的都是全图 现在需要的是局部化妆的效果 列如画眉毛 这样的
    落影loyinglin:@枫林停 需要干嘛?
  • 38841d8809d0:大神 大神 怎么进行局部化妆开发啊
  • hj2136:有没有微信啊,关注一下!
  • c8af9990b6fc:非常感谢指明学习的方向。落影大神
  • devzhaoyou:看了好几遍,感觉还是没有入门,隔了好久了,再来看一回
    devzhaoyou:@落影loyinglin 是啊,之前一直处于了解阶段,现在公司准备做滤镜了,这回必须写写了
    落影loyinglin:@devzhaoyou 动手 写代码才行
  • 8771f590ecc5:大神你好 能用GPUimage完成类似逗拍那种模板素材替换的功能吗
    太阳和风与旅行者:你们做出来了吗
  • 小白学AI:感谢落影大神。
    落影大神关于GPUImage的博客以及github上面的项目,给了我很大的帮助。后来遇到一个问题,还加了大神的QQ,叨扰了好几次。最终把问题解决了。特地来评论感谢一下。
  • Zszen:作者写的很好,我想问下如果自己写滤镜或者把他原有的滤镜这个整一个,效果会不会更快,不再需要中间缓存了,我理解的对么
    落影loyinglin:@Zszen 会的
    Zszen:@落影loyinglin 比如我把亮度对比度饱和度曝光都放一起,会不会比叠加一堆滤镜省内存,让手机发热少一点
    落影loyinglin:@Zszen 可以对滤镜进行优化,但是能优化的程度不大。
    自己写滤镜包括流程和滤镜算法,流程本身优化的空间少,可以从算法去优化,
  • f7192cf849ce:哎,搞了半天原来是IOS的项目,请问有没有安卓的项目啊,不胜感激
    godLoveYao:开心的笑了
  • f7192cf849ce:你好,我怎么下载不了demo啊
    落影loyinglin:@武林中人9527 工程比较多,如果网络不好就会比较慢。试试下载个翻墙软件
    f7192cf849ce:@落影loyinglin 什么意思啊,怎么加vpn啊,本人新手!谢谢
    落影loyinglin:@蒲沿霖 github的问题 加个vpn试试
  • 碟枫:Framebuffer是帧缓冲,而非帧缓存,文章里所有的buffer都被写成了缓存。
  • 03278b74c4bd:大神你好,刚刚接触GPUImage,不太清楚怎样在GPUImage基础上写OpenGL ES的代码,在项目里添加OpenGL ES 代码 总会在glDrawElements的时候报错 EXC_BAD_ACCESS,还请指点一二 !谢谢
    落影loyinglin:@潘庆云 感谢支持。我建议你先看看我的OpenGL ES教程,熟悉下OpenGL ES的代码。
    落影loyinglin:@潘庆云 GPUImage封装OpenGL ES,就是为了避免开发者去写OpenGL ES。如果只是需要使用GPUImage,不建议去修改里面的代码。
  • 899e2d74bdeb:请问,为什么Gpuimg里没有使用到glGenBuffers,glBindBuffer,glBufferData这些函数的,那它是没有使用顶点缓存来绑定数据?这对性能影响不大,作者这么做是处于什么原因?
    落影loyinglin:@哎疯 你看搜索范围包括pod了吗
    899e2d74bdeb:@落影loyinglin 我全局搜索都搜不到的?
    落影loyinglin:@哎疯 有使用到呀。你仔细看看
  • 6e62803aebc1:楼主真身在哪里呢~~
    6e62803aebc1:响应链的翻译是出自哪里呢...这个操作流更多感觉是流水线。是不是用流水线更合理点。。
    6e62803aebc1:@落影loyinglin 不干...问个问题哈。如果我做个RealTime的视频通讯,能否通过GPUImage每一帧添加filter后上传服务器?
    落影loyinglin:@CruiseCo 有何贵干
  • 落影loyinglin:像GPUImage是滤镜链,你可以估计每个链的耗时,然后每渲染完一个filter就更新进度,我暂时没了解到关于实时获取GPU渲染进度的方法;取消操作的同样没了解。
  • YotrolZ:最近需要做滤镜的需求、请教楼主、如何获取图片渲染的进度、比如在添加滤镜的时候展示loading、还有一个问题、选择了另外一种滤镜、假如上一个滤镜还没结束、如何把之前的操作取消以提高效率
  • a02efb1fb47a:我们现在的采集端自己做的,我们现在只能给CMSampleBufferRef,我现在想拿着这个用gpuimage做美颜,但是我发现如果把CMSampleBufferRef转成uiimage之后做美颜这个办法行不通,求大神提供一个思路.
    落影loyinglin:@杨某某D 方法2,你拿到YUV的帧之后,用CV框架提供的方法创建色度和亮度纹理,自己转RGB颜色空间,然后用GPUimagetextureinput 传入响应链。这个需要你会opengles。 有教程,你看我opengl文集的摄像头采集渲染一文。
    落影loyinglin:@杨某某D 方法1,你更改AV的output设置,先拿到rgba的值,再用gpuimagedatainput传入响应链
    落影loyinglin:@杨某某D 你拿到的应该是YUV的视频吧
  • 我的大名叫小爱:没有基础完全看不懂啊 而且如果有demo的话就好了...
    落影loyinglin:@我的大名叫小爱 有的 你看看这个文集,都有demo和教程
  • 郑钦洪_:看到有个公众号没声明作者 就直接转发你的文章 https://mp.weixin.qq.com/s?__biz=MzIwOTQ3NzU0Mw==&mid=2247483837&idx=1&sn=8f009af2837531009ae89f141f15798a&scene=0&uin=MjcyNDkzNjgwNA%3D%3D&key=305bc10ec50ec19b4351dd580e5104a52ddc4949dc8e54e9aa342e7bf8d369590551056e9f4167ae589b5e205a5c3c95&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.11.6+build(15G31)&version=11020201&lang=zh_CN&pass_ticket=ZBRd2vhvAqJV2Ey1I0ODZt%2BIIDrjac3JIMmG6ydgRnejVnAoyHkVy4bQMytW%2B55J 不知道是不是你的公众号
    郑钦洪_:@落影loyinglin 不客气 :smile:
    落影loyinglin:@郑钦洪_ 谢谢举报 转载的过来道歉了
    落影loyinglin:@郑钦洪_ 不认识的,谢谢提醒!
  • 暴走大牙:很强!
  • 清溪丷:写的很详细,有没有具体使用的,和优化的方法
    清溪丷:@落影loyinglin 谢谢分享了。。唉,之前用coreImage添加滤镜,结果内存直接调了200+,这样必须限制图片的数量,太麻烦了,想试试这个GPUImage,不过这个底层的东西太多了,没接触过图片处理。
    落影loyinglin:@清溪丷 有的,你看后面的文集。
  • e1d94c4636d7:林大666:relieved::heart_eyes:
    落影loyinglin:@三次元长腿拯救世界 竟然看到了罗大

本文标题:GPUImage详细解析

本文链接:https://www.haomeiwen.com/subject/egemrttx.html