GPUImage源码阅读（七）

概述

GPUImage是一个著名的图像处理开源库，它让你能够在图片、视频、相机上使用GPU加速的滤镜和其它特效。与CoreImage框架相比，可以根据GPUImage提供的接口，使用自定义的滤镜。项目地址：https://github.com/BradLarson/GPUImage
这篇文章主要是阅读GPUImage框架中的 GPUImageFilterPipeline、GPUImageFilterGroup 这几个类的源码。这两个类都和组合滤镜相关，但是它们又有不同的地方。GPUImageFilterPipeline 继承自NSObject，也没有实现其它协议，而GPUImageFilterGroup继承自GPUImageOutput 实现了GPUImageInput协议。因此，最大的区别就是GPUImageFilterGroup自身可以作为响应链的一员，而GPUImageFilterPipeline则不能。以下是源码内容：
GPUImageFilterPipeline
GPUImageFilterGroup

实现效果

从文件中读取滤镜配置。

filterConfig.png
直接配置滤镜。

filter.png
自定义组合滤镜。

GPUImageFilterGroup.png

GPUImageFilterPipeline

GPUImageFilterPipeline 继承自NSObject，它的主要作用是管理滤镜链，自身不能参与响应链中。可以用来构建简单的滤镜组合。如果滤镜比较复杂或是涉及到多个纹理的处理，GPUImageFilterGroup则是更好的选择。

属性。

// filter数组
@property (strong) NSMutableArray *filters;
// 输入对象
@property (strong) GPUImageOutput *input;
// 输出对象
@property (strong) id <GPUImageInput> output;

构造方法。可以通过指定filter数组以及配置字典、文件来构造GPUImageFilterPipeline。

- (id) initWithOrderedFilters:(NSArray*) filters input:(GPUImageOutput*)input output:(id <GPUImageInput>)output;
- (id) initWithConfiguration:(NSDictionary*) configuration input:(GPUImageOutput*)input output:(id <GPUImageInput>)output;
- (id) initWithConfigurationFile:(NSURL*) configuration input:(GPUImageOutput*)input output:(id <GPUImageInput>)output;

// 根据输入的filter数组、GPUImageOutput、GPUImageInput构建GPUImageFilterPipeline
- (id)initWithOrderedFilters:(NSArray *)filters input:(GPUImageOutput *)input output:(id <GPUImageInput>)output {
    self = [super init];
    if (self) {
        self.input = input;
        self.output = output;
        self.filters = [NSMutableArray arrayWithArray:filters];
        [self _refreshFilters];
    }
    return self;
}

// 根据filter配置字典、GPUImageOutput、GPUImageInput构建GPUImageFilterPipeline
- (id)initWithConfiguration:(NSDictionary *)configuration input:(GPUImageOutput *)input output:(id <GPUImageInput>)output {
    self = [super init];
    if (self) {
        self.input = input;
        self.output = output;
        if (![self _parseConfiguration:configuration]) {
            NSLog(@"Sorry, a parsing error occurred.");
            abort();
        }
        [self _refreshFilters];
    }
    return self;
}

// 根据filter配置文件的URL、GPUImageOutput、GPUImageInput构建GPUImageFilterPipeline
- (id)initWithConfigurationFile:(NSURL *)configuration input:(GPUImageOutput *)input output:(id <GPUImageInput>)output {
    return [self initWithConfiguration:[NSDictionary dictionaryWithContentsOfURL:configuration] input:input output:output];
}

// 解析配置文件
- (BOOL)_parseConfiguration:(NSDictionary *)configuration {
    NSArray *filters = [configuration objectForKey:@"Filters"];
    if (!filters) {
        return NO;
    }
    
    NSError *regexError = nil;
    // 匹配配置文件参数如：float(1.0), CGPoint(1.0, 2.0) 等类型
    NSRegularExpression *parsingRegex = [NSRegularExpression regularExpressionWithPattern:@"(float|CGPoint|NSString)\\((.*?)(?:,\\s*(.*?))*\\)"
                                                                                  options:0
                                                                                    error:&regexError];
    
    // It's faster to put them into an array and then pass it to the filters property than it is to call [self addFilter:] every time
    NSMutableArray *orderedFilters = [NSMutableArray arrayWithCapacity:[filters count]];
    for (NSDictionary *filter in filters) {
        // 由FilterName生成相应的实例对象
        NSString *filterName = [filter objectForKey:@"FilterName"];
        Class theClass = NSClassFromString(filterName);
        GPUImageOutput<GPUImageInput> *genericFilter = [[theClass alloc] init];
        // Set up the properties
        NSDictionary *filterAttributes;
        // 解析Attributes，并传递参数
        if ((filterAttributes = [filter objectForKey:@"Attributes"])) {
            for (NSString *propertyKey in filterAttributes) {
                // Set up the selector
                SEL theSelector = NSSelectorFromString(propertyKey);
                NSInvocation *inv = [NSInvocation invocationWithMethodSignature:[theClass instanceMethodSignatureForSelector:theSelector]];
                [inv setSelector:theSelector];
                [inv setTarget:genericFilter];
                
                // check selector given with parameter
                if ([propertyKey hasSuffix:@":"]) {
                    
                    stringValue = nil;
                    
                    // Then parse the arguments
                    NSMutableArray *parsedArray;
                    if ([[filterAttributes objectForKey:propertyKey] isKindOfClass:[NSArray class]]) {
                        NSArray *array = [filterAttributes objectForKey:propertyKey];
                        parsedArray = [NSMutableArray arrayWithCapacity:[array count]];
                        for (NSString *string in array) {
                            NSTextCheckingResult *parse = [parsingRegex firstMatchInString:string
                                                                                   options:0
                                                                                     range:NSMakeRange(0, [string length])];

                            NSString *modifier = [string substringWithRange:[parse rangeAtIndex:1]];
                            if ([modifier isEqualToString:@"float"]) {
                                // Float modifier, one argument
                                CGFloat value = [[string substringWithRange:[parse rangeAtIndex:2]] floatValue];
                                [parsedArray addObject:[NSNumber numberWithFloat:value]];
                                [inv setArgument:&value atIndex:2];
                            } else if ([modifier isEqualToString:@"CGPoint"]) {
                                // CGPoint modifier, two float arguments
                                CGFloat x = [[string substringWithRange:[parse rangeAtIndex:2]] floatValue];
                                CGFloat y = [[string substringWithRange:[parse rangeAtIndex:3]] floatValue];
                                CGPoint value = CGPointMake(x, y);
                                [parsedArray addObject:[NSValue valueWithCGPoint:value]];
                            } else if ([modifier isEqualToString:@"NSString"]) {
                                // NSString modifier, one string argument
                                stringValue = [[string substringWithRange:[parse rangeAtIndex:2]] copy];
                                [inv setArgument:&stringValue atIndex:2];
                                
                            } else {
                                return NO;
                            }
                        }
                        [inv setArgument:&parsedArray atIndex:2];
                    } else {
                        NSString *string = [filterAttributes objectForKey:propertyKey];
                        NSTextCheckingResult *parse = [parsingRegex firstMatchInString:string
                                                                               options:0
                                                                                 range:NSMakeRange(0, [string length])];
                        
                        NSString *modifier = [string substringWithRange:[parse rangeAtIndex:1]];
                        if ([modifier isEqualToString:@"float"]) {
                            // Float modifier, one argument
                            CGFloat value = [[string substringWithRange:[parse rangeAtIndex:2]] floatValue];
                            [inv setArgument:&value atIndex:2];
                        } else if ([modifier isEqualToString:@"CGPoint"]) {
                            // CGPoint modifier, two float arguments
                            CGFloat x = [[string substringWithRange:[parse rangeAtIndex:2]] floatValue];
                            CGFloat y = [[string substringWithRange:[parse rangeAtIndex:3]] floatValue];
                            CGPoint value = CGPointMake(x, y);
                            [inv setArgument:&value atIndex:2];
                        } else if ([modifier isEqualToString:@"NSString"]) {
                            // NSString modifier, one string argument
                            stringValue = [[string substringWithRange:[parse rangeAtIndex:2]] copy];
                            [inv setArgument:&stringValue atIndex:2];
                            
                        } else {
                            return NO;
                        }
                    }
                }
                

                [inv invoke];
            }
        }
        [orderedFilters addObject:genericFilter];
    }
    self.filters = orderedFilters;
    
    return YES;
}

配置文件示例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Filters</key>
    <array>
        <dict>
            <key>FilterName</key>
            <string>GPUImageGammaFilter</string>
            <key>Attributes</key>
            <dict>
                <key>setGamma:</key>
                <string>float(1.0)</string>
            </dict>
        </dict>
        <dict>
            <key>FilterName</key>
            <string>GPUImageBrightnessFilter</string>
            <key>Attributes</key>
            <dict>
                <key>setBrightness:</key>
                <string>float(0.2)</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>

其它方法

// filter的增加、删除、替换
- (void) addFilter:(GPUImageOutput<GPUImageInput> *)filter;
- (void) addFilter:(GPUImageOutput<GPUImageInput> *)filter atIndex:(NSUInteger)insertIndex;
- (void) replaceFilterAtIndex:(NSUInteger)index withFilter:(GPUImageOutput<GPUImageInput> *)filter;
- (void) replaceAllFilters:(NSArray *) newFilters;
- (void) removeFilter:(GPUImageOutput<GPUImageInput> *)filter;
- (void) removeFilterAtIndex:(NSUInteger)index;
- (void) removeAllFilters;

// 由final filter生成图片
- (UIImage *) currentFilteredFrame;
- (UIImage *) currentFilteredFrameWithOrientation:(UIImageOrientation)imageOrientation;
- (CGImageRef) newCGImageFromCurrentFilteredFrame;

// 在特定位置增加filter
- (void)addFilter:(GPUImageOutput<GPUImageInput> *)filter atIndex:(NSUInteger)insertIndex {
    [self.filters insertObject:filter atIndex:insertIndex];
    [self _refreshFilters];
}

// 在末尾增加filter
- (void)addFilter:(GPUImageOutput<GPUImageInput> *)filter {
    [self.filters addObject:filter];
    [self _refreshFilters];
}

// 替换filter
- (void)replaceFilterAtIndex:(NSUInteger)index withFilter:(GPUImageOutput<GPUImageInput> *)filter {
    [self.filters replaceObjectAtIndex:index withObject:filter];
    [self _refreshFilters];
}

// 删除filter
- (void) removeFilter:(GPUImageOutput<GPUImageInput> *)filter;
{
    [self.filters removeObject:filter];
    [self _refreshFilters];
}

// 删除特定索引的filter
- (void)removeFilterAtIndex:(NSUInteger)index {
    [self.filters removeObjectAtIndex:index];
    [self _refreshFilters];
}

// 删除所有filter
- (void)removeAllFilters {
    [self.filters removeAllObjects];
    [self _refreshFilters];
}

// 替换所有filter
- (void)replaceAllFilters:(NSArray *)newFilters {
    self.filters = [NSMutableArray arrayWithArray:newFilters];
    [self _refreshFilters];
}

// 更新响应链
- (void)_refreshFilters {
    // 将input作为响应链源
    id prevFilter = self.input;
    GPUImageOutput<GPUImageInput> *theFilter = nil;
    
    // 循环添加
    for (int i = 0; i < [self.filters count]; i++) {
        theFilter = [self.filters objectAtIndex:i];
        [prevFilter removeAllTargets];
        [prevFilter addTarget:theFilter];
        prevFilter = theFilter;
    }
    
    [prevFilter removeAllTargets];
    
    // 最后将output加入响应链  
    if (self.output != nil) {
        [prevFilter addTarget:self.output];
    }
}

// 由final filter生成图像
- (UIImage *)currentFilteredFrame {
    return [(GPUImageOutput<GPUImageInput> *)[_filters lastObject] imageFromCurrentFramebuffer];
}

// 根据imageOrientation生成图像
- (UIImage *)currentFilteredFrameWithOrientation:(UIImageOrientation)imageOrientation {
  return [(GPUImageOutput<GPUImageInput> *)[_filters lastObject] imageFromCurrentFramebufferWithOrientation:imageOrientation];
}

// 由final filter生成图像
- (CGImageRef)newCGImageFromCurrentFilteredFrame {
    return [(GPUImageOutput<GPUImageInput> *)[_filters lastObject] newCGImageFromCurrentlyProcessedOutput];
}

GPUImageFilterGroup

GPUImageFilterGroup继承自GPUImageOutput ，实现了GPUImageInput协议。因此，可以自身可以作为独立的滤镜参与响应链中。相比GPUImageFilterPipeline，GPUImageFilterGroup功能更强大。

属性

@property(readwrite, nonatomic, strong) GPUImageOutput<GPUImageInput> *terminalFilter;
@property(readwrite, nonatomic, strong) NSArray *initialFilters;
@property(readwrite, nonatomic, strong) GPUImageOutput<GPUImageInput> *inputFilterToIgnoreForUpdates;

方法

// 增加滤镜
- (void)addFilter:(GPUImageOutput<GPUImageInput> *)newFilter;
- (GPUImageOutput<GPUImageInput> *)filterAtIndex:(NSUInteger)filterIndex;
- (NSUInteger)filterCount;

// 增加滤镜
- (void)addFilter:(GPUImageOutput<GPUImageInput> *)newFilter;
{
    [filters addObject:newFilter];
}

// 获取滤镜
- (GPUImageOutput<GPUImageInput> *)filterAtIndex:(NSUInteger)filterIndex;
{
    return [filters objectAtIndex:filterIndex];
}

// 滤镜数量
- (NSUInteger)filterCount;
{
    return [filters count];
}

// 
- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;
{
    for (GPUImageOutput<GPUImageInput> *currentFilter in _initialFilters)
    {
        if (currentFilter != self.inputFilterToIgnoreForUpdates)
        {
            [currentFilter newFrameReadyAtTime:frameTime atIndex:textureIndex];
        }
    }
}

// 设置帧缓存对象
- (void)setInputFramebuffer:(GPUImageFramebuffer *)newInputFramebuffer atIndex:(NSInteger)textureIndex;
{
    for (GPUImageOutput<GPUImageInput> *currentFilter in _initialFilters)
    {
        [currentFilter setInputFramebuffer:newInputFramebuffer atIndex:textureIndex];
    }
}

实现过程

从文件中读取滤镜配置。

// 加载图片
GPUImagePicture *picture = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];

// 配置文件
NSURL *file = [[NSBundle mainBundle] URLForResource:@"filterConfig" withExtension:@"plist"];

// 滤镜组合
_pipleLine = [[GPUImageFilterPipeline alloc] initWithConfigurationFile:file input:picture output:_imageView];

[picture processImage];

直接配置滤镜。

// 加载图片
GPUImagePicture *picture = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"2.jpg"]];

// filters
GPUImageRGBFilter *rgbFilter = [[GPUImageRGBFilter alloc] init];
GPUImagePerlinNoiseFilter *noiseFilter = [[GPUImagePerlinNoiseFilter alloc] init];

// 配置文件
NSArray *filters = @[rgbFilter, noiseFilter];

// 滤镜组合
_pipleLine = [[GPUImageFilterPipeline alloc] initWithOrderedFilters:filters input:picture output:_imageView];

[picture processImage];

自定义组合滤镜。

#import "QMGrayBilateralBlendFilter.h"

NSString *const kGrayBilateralBlendFragmentShaderString = SHADER_STRING
(
 varying highp vec2 textureCoordinate;
 varying highp vec2 textureCoordinate2;
 
 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2;
 
 void main()
 {
     highp vec4 gray = texture2D(inputImageTexture, textureCoordinate);
     highp vec4 bilateral = texture2D(inputImageTexture2, textureCoordinate2);
     
     highp float range = distance(textureCoordinate, vec2(0.5, 0.5));
     
     highp vec4 dstClor = bilateral;
     if (range < 0.4) {
         dstClor = gray;
     }
     
     gl_FragColor = dstClor;
     
     //gl_FragColor = vec4(vec3(mix(gray, bilateral, 0.6)), 1.0);
 }
 );

@implementation QMGrayBilateralBlendFilter

- (instancetype)init
{
    if (self = [super init])
    {
        // GrayscaleFilter
        GPUImageGrayscaleFilter *grayFilter = [[GPUImageGrayscaleFilter alloc] init];
        [self addFilter:grayFilter];
        
        // BilateralFilter
        GPUImageBilateralFilter *bilateralFilter = [[GPUImageBilateralFilter alloc] init];
        bilateralFilter.distanceNormalizationFactor = 16.0;
        [self addFilter:bilateralFilter];
        
        // GPUImageTwoPassFilter
        GPUImageTwoInputFilter *twoPassFilter = [[GPUImageTwoInputFilter alloc] initWithFragmentShaderFromString:kGrayBilateralBlendFragmentShaderString];
        
        // GPUImageHSBFilter
        GPUImageHSBFilter *hsbFilter = [[GPUImageHSBFilter alloc] init];
        
        [grayFilter addTarget:twoPassFilter];
        [bilateralFilter addTarget:twoPassFilter];
        [twoPassFilter addTarget:hsbFilter];
        
        self.initialFilters = @[grayFilter, bilateralFilter];
        self.terminalFilter = hsbFilter;
        
    }
    return self;
}
@end

总结

GPUImageFilterPipeline、GPUImageFilterGroup 都可用于组合滤镜，GPUImageFilterPipeline相对比较简单，可定制程度较低，而GPUImageFilterGroup则功能比较强大，可定制程度高。在选用的时候可以根据自己的需求，选用不同的滤镜组合。

源码地址：GPUImage源码阅读系列 https://github.com/QinminiOS/GPUImage
系列文章地址：GPUImage源码阅读 http://www.jianshu.com/nb/11749791

最后编辑于：2017.12.07 04:49:27

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342

GPUImage源码阅读（七）

概述

实现效果

GPUImageFilterPipeline

GPUImageFilterGroup

实现过程

总结

推荐阅读更多精彩内容