iOS GPUImage源码解读(一)

导语:最近在不断学习、使用的过程中,有了更深刻的理解,特来写一篇源码解读的文章详细介绍下核心代码的具体实现。至于括号里的“一”,主要是觉得GPUImage还有很多值得深入学习和分享的内容,后续的学习和使用过程中有新的心得体会还会继续给大家分享。

前言

GPUImage是iOS上一个基于OpenGL进行图像处理的开源框架,内置大量滤镜,架构灵活,可以在其基础上很轻松地实现各种图像处理功能。本文主要向大家分享一下项目的核心架构、源码解读及使用心得。

GPUImage有哪些特性

  1. 丰富的输入组件
    摄像头、图片、视频、OpenGL纹理、二进制数据、UIElement(UIView, CALayer)
  2. 大量现成的内置滤镜(4大类)
    1). 颜色类(亮度、色度、饱和度、对比度、曲线、白平衡...)
    2). 图像类(仿射变换、裁剪、高斯模糊、毛玻璃效果...)
    3). 颜色混合类(差异混合、alpha混合、遮罩混合...)
    4). 效果类(像素化、素描效果、压花效果、球形玻璃效果...)
  3. 丰富的输出组件
    UIView、视频文件、GPU纹理、二进制数据
  4. 灵活的滤镜链
    滤镜效果之间可以相互串联、并联,调用管理相当灵活。
  5. 接口易用
    滤镜和OpenGL资源的创建及使用都做了统一的封装,简单易用,并且内置了一个cache模块实现了framebuffer的复用。
  6. 线程管理
    OpenGLContext不是多线程安全的,GPUImage创建了专门的contextQueue,所有的滤镜都会扔到统一的线程中处理。
  7. 轻松实现自定义滤镜效果
    继承GPUImageFilter自动获得上面全部特性,无需关注上下文的环境搭建,专注于效果的核心算法实现即可。

基本用法

// 获取一张图片
UIImage *inputImage = [UIImage imageNamed:@"sample.jpg"];
// 创建图片输入组件GPUImagePicture *sourcePicture = [[GPUImagePicture alloc] initWithImage:inputImage smoothlyScaleOutput:YES]; 
// 创建素描滤镜
GPUImageSketchFilter *customFilter = [[GPUImageSketchFilter alloc] init]; 
// 把素描滤镜串联在图片输入组件之后
[sourcePicture addTarget:customFilter];
// 创建ImageView输出组件GPUImageView *imageView = [[GPUImageView alloc] initWithFrame:mainScreenFrame];
[self.view addSubView:imageView];
// 把ImageView输出组件串在滤镜链末尾[customFilter addTarget:imageView];
// 调用图片输入组件的process方法,渲染结果就会绘制到imageView上[sourcePicture processImage];

效果如图:

整个框架的目录结构

核心架构

基本上每个滤镜都继承自GPUImageFilter;
而GPUImageFilter作为整套框架的核心;
接收一个GPUImageFrameBuffer输入;
调用GLProgram渲染处理;
输出一个GPUImageFrameBuffer;
把输出的GPUImageFrameBuffer传给通过targets属性关联的下级滤镜;
直到传递至最终的输出组件;

核心架构可以整体划分为三块:输入、滤镜处理、输出
接下来我们就深入源码,看看GPUImage是如何获取数据、传递数据、处理数据和输出数据的

获取数据

GPUImage提供了多种不同的输入组件,但是无论是哪种输入源,获取数据的本质都是把图像数据转换成OpenGL纹理。这里就以视频拍摄组件(GPUImageVideoCamera)为例,来讲讲GPUImage是如何把每帧采样数据传入到GPU的。

GPUImageVideoCamera里大部分代码都是对摄像头的调用管理,不了解的同学可以去学习一下AVFoundation(传送门)。摄像头拍摄过程中每一帧都会有一个数据回调,在GPUImageVideoCamera中对应的处理回调的方法为:

- (void)processVideoSampleBuffer:(CMSampleBufferRef)sampleBuffer;

iOS的每一帧摄像头采样数据都会封装成CMSampleBufferRef;
CMSampleBufferRef除了包含图像数据、还包含一些格式信息、图像宽高、时间戳等额外属性;
摄像头默认的采样格式为YUV420,关于YUV格式大家可以自行搜索学习一下(传送门):

YUV420按照数据的存储方式又可以细分成若干种格式,这里主要是kCVPixelFormatType_420YpCbCr8BiPlanarFullRange和kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange两种;

两种格式都是planar类型的存储方式,y数据和uv数据分开放在两个plane中;
这样的数据没法直接传给GPU去用,GPUImageVideoCamera把两个plane的数据分别取出:

- (void)processVideoSampleBuffer:(CMSampleBufferRef)sampleBuffer {    // 一大坨的代码用于获取采样数据的基本属性(宽、高、格式等等)
    ......    if ([GPUImageContext supportsFastTextureUpload] && captureAsYUV) {
        CVOpenGLESTextureRef luminanceTextureRef = NULL;
        CVOpenGLESTextureRef chrominanceTextureRef = NULL;        if (CVPixelBufferGetPlaneCount(cameraFrame) > 0) // Check for YUV planar inputs to do RGB conversion
        {
            ......
// 从cameraFrame的plane-0提取y通道的数据,填充到luminanceTextureRef
            glActiveTexture(GL_TEXTURE4);
            err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, [[GPUImageContext sharedImageProcessingContext] coreVideoTextureCache], cameraFrame, NULL, GL_TEXTURE_2D, GL_LUMINANCE, bufferWidth, bufferHeight, GL_LUMINANCE, GL_UNSIGNED_BYTE, 0, &luminanceTextureRef);
            ......            
            // 从cameraFrame的plane-1提取uv通道的数据,填充到chrominanceTextureRef
            glActiveTexture(GL_TEXTURE5);
            err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, [[GPUImageContext sharedImageProcessingContext] coreVideoTextureCache], cameraFrame, NULL, GL_TEXTURE_2D, GL_LUMINANCE_ALPHA, bufferWidth/2, bufferHeight/2, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, 1, &chrominanceTextureRef);
            ......            
            // 把luminance和chrominance作为2个独立的纹理传入GPU
            [self convertYUVToRGBOutput];

            ......
        }
    } else {
        ......
    }  
}

注意CVOpenGLESTextureCacheCreateTextureFromImage中对于internalFormat的设置;
通常我们创建一般纹理的时候都会设成GL_RGBA,传入的图像数据也会是rgba格式的;
而这里y数据因为只包含一个通道,所以设成了GL_LUMINANCE(灰度图);
uv数据则包含2个通道,所以设成了GL_LUMINANCE_ALPHA(带alpha的灰度图);
另外uv纹理的宽高只设成了图像宽高的一半,这是因为yuv420中,每个相邻的2x2格子共用一份uv数据;
数据传到GPU纹理后,再通过一个颜色转换(yuv->rgb)的shader(shader是OpenGL可编程着色器,可以理解为GPU侧的代码,关于shader需要一些OpenGL编程基础(传送门)),绘制到目标纹理:

 // fullrange
 varying highp vec2 textureCoordinate;
 uniform sampler2D luminanceTexture;
 uniform sampler2D chrominanceTexture;
 uniform mediump mat3 colorConversionMatrix; 
 void main() {
     mediump vec3 yuv;
     lowp vec3 rgb;
     yuv.x = texture2D(luminanceTexture, textureCoordinate).r;
     yuv.yz = texture2D(chrominanceTexture, textureCoordinate).ra - vec2(0.5, 0.5);
     rgb = colorConversionMatrix * yuv;
     gl_FragColor = vec4(rgb, 1);
 }
 // videorange
 varying highp vec2 textureCoordinate;
 uniform sampler2D luminanceTexture;
 uniform sampler2D chrominanceTexture;
 uniform mediump mat3 colorConversionMatrix; void main() {
     mediump vec3 yuv;
     lowp vec3 rgb;
     yuv.x = texture2D(luminanceTexture, textureCoordinate).r - (16.0/255.0);
     yuv.yz = texture2D(chrominanceTexture, textureCoordinate).ra - vec2(0.5, 0.5);
     rgb = colorConversionMatrix * yuv;
     gl_FragColor = vec4(rgb, 1);
 }

注意yuv420fullrange和yuv420videorange的数值范围是不同的,因此转换公式也不同,这里会有2个颜色转换shader,根据实际的采样格式选择正确的shader;
渲染输出到目标纹理后就得到一个转换成rgb格式的GPU纹理,完成了获取输入数据的工作;

传递数据

GPUImage的图像处理过程,被设计成了滤镜链的形式;输入组件、效果滤镜、输出组件串联在一起,每次推动渲染的时候,输入数据就会按顺序传递,经过处理,最终输出。

GPUImage设计了一个GPUImageInput协议,定义了GPUImageFilter之间传入数据的方法:

- (void)setInputFramebuffer:(GPUImageFramebuffer *)newInputFramebuffer atIndex:(NSInteger)textureIndex {
    firstInputFramebuffer = newInputFramebuffer;
    [firstInputFramebuffer lock];
}

firstInputFramebuffer属性用来保存输入纹理;
GPUImageFilter作为单输入滤镜基类遵守了GPUImageInput协议,GPUImage还提供了GPUImageTwoInputFilter, GPUImageThreeInputFilter等多输入filter的基类。

这里还有一个很重要的入口方法用于推动数据流转:

- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex {
    ......

    [self renderToTextureWithVertices:imageVertices textureCoordinates:[[self class] textureCoordinatesForRotation:inputRotation]];

    [self informTargetsAboutNewFrameAtTime:frameTime];
}

每个滤镜都是由这个入口方法开始启动,这个方法包含2个调用
1). 首先调用render方法进行效果渲染
2). 调用informTargets方法将渲染结果推到下级滤镜

GPUImageFilter继承自GPUImageOutput,定义了输出数据,向后传递的方法:

- (void)notifyTargetsAboutNewOutputTexture;

但是这里比较奇怪的是滤镜链的传递实际并没有用notifyTargets方法,而是用了前面提到的informTargets方法:

- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime {
    ......    
    // Get all targets the framebuffer so they can grab a lock on it
    for (id<GPUImageInput> currentTarget in targets) {        if (currentTarget != self.targetToIgnoreForUpdates) {            NSInteger indexOfObject = [targets indexOfObject:currentTarget];            NSInteger textureIndex = [[targetTextureIndices objectAtIndex:indexOfObject] integerValue];
            [self setInputFramebufferForTarget:currentTarget atIndex:textureIndex];
            [currentTarget setInputSize:[self outputFrameSize] atIndex:textureIndex];
        }
    }

    ......    
    // Trigger processing last, so that our unlock comes first in serial execution, avoiding the need for a callback
    for (id<GPUImageInput> currentTarget in targets) {        if (currentTarget != self.targetToIgnoreForUpdates) {            NSInteger indexOfObject = [targets indexOfObject:currentTarget];            NSInteger textureIndex = [[targetTextureIndices objectAtIndex:indexOfObject] integerValue];
            [currentTarget newFrameReadyAtTime:frameTime atIndex:textureIndex];
        }
    }
}

GPUImageOutput定义了一个targets属性来保存下一级滤镜,这里可以注意到targets是个数组,因此滤镜链也支持并联结构。可以看到这个方法主要做了2件事情:
1). 对每个target调用setInputFramebuffer方法把自己的渲染结果传给下级滤镜作为输入
2). 对每个target调用newFrameReadyAtTime方法推动下级滤镜启动渲染
滤镜之间通过targets属性相互衔接串在一起,完成了数据传递工作。

处理数据

前面提到的renderToTextureWithVertices:方法便是每个滤镜必经的渲染入口。
每个滤镜都可以设置自己的shader,重写该渲染方法,实现自己的效果:

- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates {
    ......

    [GPUImageContext setActiveShaderProgram:filterProgram];

    outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:[self sizeOfFBO] textureOptions:self.outputTextureOptions onlyTexture:NO];
    [outputFramebuffer activateFramebuffer];
    ......

    [self setUniformsForProgramAtIndex:0];

    glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha);
    glClear(GL_COLOR_BUFFER_BIT);

    glActiveTexture(GL_TEXTURE2);
    glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
    glUniform1i(filterInputTextureUniform, 2);  

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

    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    ......
}

上面这个是GPUImageFilter的默认方法,大致做了这么几件事情:
1). 向frameBufferCache申请一个outputFrameBuffer
2). 将申请得到的outputFrameBuffer激活并设为渲染对象
3). glClear清除画布
4). 设置输入纹理
5). 传入顶点
6). 传入纹理坐标
7). 调用绘制方法

再来看看GPUImageFilter使用的默认shader:

 // vertex shader
 attribute vec4 position;
 attribute vec4 inputTextureCoordinate;
 varying vec2 textureCoordinate; void main() {
     gl_Position = position;
     textureCoordinate = inputTextureCoordinate.xy;
 }
 // fragment shader
 varying highp vec2 textureCoordinate;
 uniform sampler2D inputImageTexture; void main() {
     gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
 }

这个shader实际上啥也没做,VertexShader(顶点着色器)就是把传入的顶点坐标和纹理坐标原样传给FragmentShader,FragmentShader(片段着色器)就是从纹理取出原始色值直接输出,最终效果就是把图片原样渲染到画面。

输出数据

比较常用的主要是GPUImageView和GPUImageMovieWriter。

GPUImageView继承自UIView,用于实时预览,用法非常简单
1). 创建GPUImageView
2). 串入滤镜链
3). 插到视图里去
UIView的contentMode、hidden、backgroundColor等属性都可以正常使用
里面比较关键的方法主要有这么2个:

// 申明自己的CALayer为CAEAGLLayer+ (Class)layerClass  {    return [CAEAGLLayer class];
}
- (void)createDisplayFramebuffer {
    [GPUImageContext useImageProcessingContext];

    glGenFramebuffers(1, &displayFramebuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, displayFramebuffer);

    glGenRenderbuffers(1, &displayRenderbuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, displayRenderbuffer);

    [[[GPUImageContext sharedImageProcessingContext] context] renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer*)self.layer];

    GLint backingWidth, backingHeight;

    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth);
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight);

    ......

    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, displayRenderbuffer);

    ......
}

创建frameBuffer和renderBuffer时把renderBuffer和CALayer关联在一起;
这是iOS内建的一种GPU渲染输出的联动方法;
这样newFrameReadyAtTime渲染过后画面就会输出到CALayer。

GPUImageMovieWriter主要用于将视频输出到磁盘;
里面大量的代码都是在设置和使用AVAssetWriter,不了解的同学还是得去看AVFoundation;
这里主要是重写了newFrameReadyAtTime:方法:

- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex {
    ......

    GPUImageFramebuffer *inputFramebufferForBlock = firstInputFramebuffer;
    glFinish();

    runAsynchronouslyOnContextQueue(_movieWriterContext, ^{
        ......        
        // Render the frame with swizzled colors, so that they can be uploaded quickly as BGRA frames
        [_movieWriterContext useAsCurrentContext];
        [self renderAtInternalSizeUsingFramebuffer:inputFramebufferForBlock];

        CVPixelBufferRef pixel_buffer = NULL;        
        if ([GPUImageContext supportsFastTextureUpload]) {
            pixel_buffer = renderTarget;
            CVPixelBufferLockBaseAddress(pixel_buffer, 0);
        } else {
            CVReturn status = CVPixelBufferPoolCreatePixelBuffer (NULL, [assetWriterPixelBufferInput pixelBufferPool], &pixel_buffer);            if ((pixel_buffer == NULL) || (status != kCVReturnSuccess)) {
                CVPixelBufferRelease(pixel_buffer);                return;
            } else {
                CVPixelBufferLockBaseAddress(pixel_buffer, 0);

                GLubyte *pixelBufferData = (GLubyte *)CVPixelBufferGetBaseAddress(pixel_buffer);
                glReadPixels(0, 0, videoSize.width, videoSize.height, GL_RGBA, GL_UNSIGNED_BYTE, pixelBufferData);
            }
        }

        ......
        [assetWriterPixelBufferInput appendPixelBuffer:pixel_buffer];
        ......
    });
}

这里有几个地方值得注意:
1). 在取数据之前先调了一下glFinish,CPU和GPU之间是类似于client-server的关系,CPU侧调用OpenGL命令后并不是同步等待OpenGL完成渲染再继续执行的,而glFinish命令可以确保OpenGL把队列中的命令都渲染完再继续执行,这样可以保证后面取到的数据是正确的当次渲染结果。
2). 取数据时用了supportsFastTextureUpload判断,这是个从iOS5开始支持的一种CVOpenGLESTextureCacheRef和CVImageBufferRef的映射(映射的创建可以参看获取数据中的CVOpenGLESTextureCacheCreateTextureFromImage),通过这个映射可以直接拿到CVPixelBufferRef而不需要再用glReadPixel来读取数据,这样性能更好。

最后归纳一下本文涉及到的知识点

1. AVFoundation
摄像头调用、输出视频都会用到AVFoundation
2. YUV420
视频采集的数据格式
3. OpenGL shader
GPU的可编程着色器
4. CAEAGLLayer
iOS内建的GPU到屏幕的联动方法
5. fastTextureUpload
iOS5开始支持的一种CVOpenGLESTextureCacheRef和CVImageBufferRef的映射


作者简介:billzbwang(王志斌),天天P图iOS工程师

iOS 隐形水印之 LSB 实现

在音视频的领域里,其涵盖的知识点繁多,学习方向也很多。而本篇就是一篇比较入门的文章它简单地介绍如何在 iOS 上读取图片 RGB 数据,并通过修改最后一位 bit 来记录数字水印的信息下面就介绍《隐形水印之 iOS 实现》

发布于:25天以前  |  86次阅读  |  详细内容 »

声明式 UIKit 在有赞美业的实践

随着 Flutter 的出现,UI 开发形式也越来越趋向相同,Flutter,SwiftUI,RN,Weex 等新兴UI框架无一意外都使用了声明式的 UI 开发模式,和支持了FlexBox的布局系统。

发布于:25天以前  |  86次阅读  |  详细内容 »

iOS 架构谈:剖析 Uber 的 RIB 架构

加入 UBER 是我的 iOS 工程师职业的新篇章,所有这一切都始于称为 RIB 的新架构。该架构背后的主要思想是,应用程序应由业务逻辑而不是视图驱动。展示 RIB 的最佳方法是一棵树:每个 RIB 都是一个节点,并且它可以不包含子节点,也可以包括一个或多个子节点。

发布于:26天以前  |  90次阅读  |  详细内容 »

如何调试支付宝(iOS)

最近在做的一件事情,从代码层面分析下各家小程序(微信、头条、支付宝、百度)的启动性能,探究各家小程序的实现细节和差异。

发布于:28天以前  |  138次阅读  |  详细内容 »

iOS GPUImage源码解读(一)

最近在不断学习、使用的过程中,有了更深刻的理解,特来写一篇源码解读的文章详细介绍下核心代码的具体实现。至于括号里的“一”,主要是觉得GPUImage还有很多值得深入学习和分享的内容,后续的学习和使用过程中有新的心得体会还会继续给大家分享。

发布于:1月以前  |  111次阅读  |  详细内容 »

iOS开发之Masonry框架源码解析

Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式,让我们可以以链式的方式为我们的控件指定约束。本篇博客的主题不是教你如何去使用Masonry框架的,而是对Masonry框架的源码进行解析,让你明白Masonry是如何对NSLayoutConstraint进行封装的,以及Masonry框架中的各个部分所扮演的角色是什么样的。在Masonry框架中,仔细的品味干货还是很多的。Masonry框架是Objective-C版本的,如果你的项目是Swift语言的,那么就得使用SnapKit布局框架了。SnapKit其实就是Masonry的Swift版本,两者虽然实现语言不同,但是实现思路大体一致。

发布于:1月以前  |  111次阅读  |  详细内容 »

iOS 验证码输入一种实现思路

如图所示,现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式:

发布于:1月以前  |  119次阅读  |  详细内容 »

最多阅读

快速配置 Sign In with Apple 11月以前  |  2397次阅读
给数组NSMutableArray排序 1年以前  |  2109次阅读
开篇 关于iOS越狱开发 1年以前  |  1958次阅读
UITableViewCell高亮效果实现 1年以前  |  1945次阅读
在越狱的iPhone设置上使用lldb调试 1年以前  |  1938次阅读
APP适配iOS11 1年以前  |  1859次阅读
关于Xcode不能打印崩溃日志 1年以前  |  1648次阅读
App Store 审核指南[2017年最新版本] 1年以前  |  1645次阅读
所有iPhone设备尺寸汇总 1年以前  |  1622次阅读
使用ssh访问越狱iPhone的两种方式 1年以前  |  1570次阅读
使用 GPUImage 实现一个简单相机 1年以前  |  1531次阅读
使用ssh 访问越狱iPhone的两种方式 1年以前  |  1512次阅读
UIDevice的简单使用 1年以前  |  1454次阅读
为对象添加一个释放时触发的block 1年以前  |  1379次阅读
使用最高权限操作iPhone手机 1年以前  |  1307次阅读