GPUImage源码解读之GPUImageFilter

作为一个图片处理和滤镜添加的框架,GPUImage最核心的类自然是GPUImageFilter,基本上所有的具体的滤镜都继承于它。GPUImageFilter提供了一个滤镜所需要的基本功能,并且提供了一些hook给子类进行覆盖,来实现具体的图片处理。

GPUImageFilter的主要功能包括了:

  1. GPUImageFilter是一个GPUImageOutput的子类,但是同时它也实现了GPUImageInput协议。因此,它包含了一个Input和Output的所有功能。
  2. 渲染过程:所有的Filter进行的渲染效果的区别是因为他们有不同的VertexShader和FragmentShader。但是整个渲染过程是一样的,因此这个过程都被封装到了基类中;
  3. GLProgram的管理和交互。因为不同的Shader自然会对应不同的Attributes和Uniforms,因此Filter需要跟GLProgram进行交互。
  4. 提供子类进行初始化或者覆盖的hook。

Initialize

GPUImageFilter实现不同效果的渲染就是基于不同的Shader的,因此初始化过程都需要提供不同的Shader来创建Program。GPUImageFilter一共提供了三个初始化方法:

- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString fragmentShaderFromString:(NSString *)fragmentShaderString;
- (id)initWithFragmentShaderFromString:(NSString *)fragmentShaderString;
- (id)initWithFragmentShaderFromFile:(NSString *)fragmentShaderFilename;

第二个和第三个初始化方法最终都调用了第一个初始化方法,而使用的VertexShader就是上一篇文章中提到的默认VertexShader。在初始化方法中,主要做的事情有:

  1. 设置默认属性:
    _preventRendering = NO;
    currentlyReceivingMonochromeInput = NO;
    inputRotation = kGPUImageNoRotation;
    backgroundColorRed = 0.0;
    backgroundColorGreen = 0.0;
    backgroundColorBlue = 0.0;
    backgroundColorAlpha = 0.0;

  1. 使用Shader创建Program,并且进行初始化:
filterProgram = [[GPUImageContext sharedImageProcessingContext] programForVertexShaderString:vertexShaderString fragmentShaderString:fragmentShaderString];
        
        if (!filterProgram.initialized)
        {
            [self initializeAttributes];
            
            if (![filterProgram link])
            {
                NSString *progLog = [filterProgram programLog];
                NSLog(@"Program link log: %@", progLog);
                NSString *fragLog = [filterProgram fragmentShaderLog];
                NSLog(@"Fragment shader compile log: %@", fragLog);
                NSString *vertLog = [filterProgram vertexShaderLog];
                NSLog(@"Vertex shader compile log: %@", vertLog);
                filterProgram = nil;
                NSAssert(NO, @"Filter shader link failed");
            }
        }
        
        filterPositionAttribute = [filterProgram attributeIndex:@"position"];
        filterTextureCoordinateAttribute = [filterProgram attributeIndex:@"inputTextureCoordinate"];
        filterInputTextureUniform = [filterProgram uniformIndex:@"inputImageTexture"]; 
        
        [GPUImageContext setActiveShaderProgram:filterProgram];
        
        glEnableVertexAttribArray(filterPositionAttribute);
        glEnableVertexAttribArray(filterTextureCoordinateAttribute);

GPUImage在将OpenGL ES命令面向对象化的过程中,其实是有很多默认的命名的,比如顶点位置的attribute name就是position;顶点纹理坐标的位置的attribute name就是inputTextureCoordinate;而第一个sampler的uniform的位置就是inputImageTexture

其中initializeAttributes就给子类提供了一个添加更多Attributes的Hook。如果你的shader有更多的属性的话,那么就在覆盖这个方法,并且调用super的实现,然后添加上自己的Attributes。默认的实现是:

- (void)initializeAttributes;
{
    [filterProgram addAttribute:@"position"];
    [filterProgram addAttribute:@"inputTextureCoordinate"];
}

glEnableVertexAttribArray命令是告诉Program我们将会使用这些attribute index的attribute,并给他们传值。

GPUImageOutput

GPUImageFilter中,使用的多数GPUImageOutput的功能都直接继承自父类;有进行覆盖的主要是两个方法:

- (void)useNextFrameForImageCapture;
{
    usingNextFrameForImageCapture = YES;

    // Set the semaphore high, if it isn't already
    if (dispatch_semaphore_wait(imageCaptureSemaphore, DISPATCH_TIME_NOW) != 0)
    {
        return;
    }
}

- (CGImageRef)newCGImageFromCurrentlyProcessedOutput
{
    double timeoutForImageCapture = 3.0;
    dispatch_time_t convertedTimeout = dispatch_time(DISPATCH_TIME_NOW, timeoutForImageCapture * NSEC_PER_SEC);

    if (dispatch_semaphore_wait(imageCaptureSemaphore, convertedTimeout) != 0)
    {
        return NULL;
    }

    GPUImageFramebuffer* framebuffer = [self framebufferForOutput];
    
    usingNextFrameForImageCapture = NO;
    dispatch_semaphore_signal(imageCaptureSemaphore);
    
    CGImageRef image = [framebuffer newCGImageFromFramebufferContents];
    return image;
}

这两个方法主要都用来进行静态图片的处理,并且返回处理的结果。代码实现并不难,useNextFrameForImageCapture方法在之前的GPUImageOutput中已经详细介绍过,主要是为了防止FrameBuffer被过度释放。
newCGImageFromCurrentlyProcessedOutput则是调用了当前Filter的outputFrameBuffernewCGImageFromFramebufferContents方法获取处理过的图片。

GPUImageInput

GPUImageInput协议是GPUImageFilter实现的重点。理解了这一块的代码对整个FilterChain的渲染流程非常有帮助。因此我们重点看一下这一块的代码:

newFrameReadyAtTime:atIndex:

这个方法会在上一个方法渲染完成后的informTargetsAboutNewFrameAtTime:中被调用。主要由两个部分组成:

  1. 渲染
  2. 渲染完成后通知target当前filter已经渲染完成。
- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;
{
    [self renderToTextureWithVertices:imageVertices textureCoordinates:[[self class] textureCoordinatesForRotation:inputRotation]];

    [self informTargetsAboutNewFrameAtTime:frameTime];
}

具体的渲染过程我们会在接下来单独解析。因此我们首先看一下informTargetsAboutNewFrameAtTime:方法:

- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;
{
    if (self.frameProcessingCompletionBlock != NULL)
    {
        self.frameProcessingCompletionBlock(self, frameTime);
    }
    
    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];
        }
    }
    
    [[self framebufferForOutput] unlock];
    
    if (usingNextFrameForImageCapture){}
    else{
        [self removeOutputFramebuffer];
    }    
    
    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];
        }
    }
}

这个方法分为几个重要功能:

  1. 调用frameProcessingCompletionBlock。因为这个时候,一个Frame已经渲染完毕了,因此可以调用Output中的frameProcessingCompletionBlock来进行相应的后续处理;
  2. 给所有的target进行内容传递,主要的代码是:
[self setInputFramebufferForTarget:currentTarget atIndex:textureIndex];
[currentTarget setInputSize:[self outputFrameSize] atIndex:textureIndex];

首先是将frameBuffer传递给所有的target以及对应的textureIndex。然后将当前FrameBuffer的size也传递给所有的target。因为target需要根据这个size来从FrameBufferCache中获取FrameBuffer。

  1. 将当前的outputFrameBuffer 进行unlock操作。因为每个target在setInputFrameBufferForTarget的时候都会对这个frameBuffer进行一次lock操作,因此在这个时候,当前的output对这个frameBuffer的使用已经结束。如果调用过useNextFrameForImageCapture方法来截图的话,则不能讲这个outputFrameBuffer给remove掉,因为还要进行截图操作。
  2. 调用所有target的newFrameReadyAtTime:frameTime :atIndex:方法,告诉所有的target进行他们该做的事情。

nextAvailableTextureIndex

由于默认的Filter只有一个输入的frameBuffer,因此下一个可用的textureIndex为0.

- (NSInteger)nextAvailableTextureIndex;
{
    return 0;
}

setInputFramebuffer:atIndex

informTargetsAboutNewFrameAtTime中,会对每个target都调用这个方法。这个方法做的最重要的事情就是保留住这个frameBuffer,让它不会被归还到FrameBufferCache中,从而能够使用这个frameBuffer的结果进行渲染。

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

其他属性的传递:

除了FrameBuffer之外,Filter之间还需要传递其他的属性,包括inputSize以及inputRotation。inputSize是用来从FrameBufferCache中获取frameBuffer的,而inputRotation则是用来计算真正进行渲染的size以及textureCoordinate的。

渲染过程

GPUImageFilter最重要的任务就是进行渲染,因此我们将着重解析一下渲染模块的代码。
在OpenGL ES Program创建好并且link成功了之后,我们就可以使用这个Program进行渲染了。整个渲染的过程发生在- (void)renderToTextureWithVertices:textureCoordinates:中。我们也借着解析这个方法来熟悉一下OpenGL ES的渲染过程:

  1. 第一步是将当前program所在的context设置为默认context;
  2. 第二步是将当前的program设置为active,然后才能使用:
[GPUImageContext setActiveShaderProgram:filterProgram];

这两部都发生在GPUImageContext中的setActiveShaderProgram:filterProgram方法中:

+ (void)setActiveShaderProgram:(GLProgram *)shaderProgram;
{
    GPUImageContext *sharedContext = [GPUImageContext sharedImageProcessingContext];
    [sharedContext setContextShaderProgram:shaderProgram];
}
  1. 第三步是获得一个渲染的标的物,即GPUImageFrameBuffer,并且将其设置为active。根据之前的介绍,我们是从GPUImageFrameBufferCache中获得这个frameBuffer的。如果需要获得当前filter的处理结果的话,那么久需要再次将这个frameBuffer进行lock。
    outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:[self sizeOfFBO] textureOptions:self.outputTextureOptions onlyTexture:NO];
    [outputFramebuffer activateFramebuffer];
    if (usingNextFrameForImageCapture)
    {
        [outputFramebuffer lock];
    }
  1. 将整个FrameBuffer的数据使用backgroundColor进行清空:
glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha);
glClear(GL_COLOR_BUFFER_BIT);
  1. 将上一个Output传递过来的FrameBuffer作为texture用来渲染:
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
glUniform1i(filterInputTextureUniform, 2);
  1. 将顶点的位置信息以及顶点的纹理坐标信息作为attribute传递给GPU:
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);
glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);
  1. 进行渲染:
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  1. 释放上一个output传过来的frameBuffer。因为在当前的Filter中,这个FrameBuffer的任务已经完成,应该让它尽快回到Cache中进行重用。
[firstInputFramebuffer unlock];

至此,整个渲染过程就结束了。

GLProgram的交互

在不同的Filter中,渲染的不同效果主要是在FragmentShader中造成的。因此为了实现不同的效果,FragmentShader中会有很多不一样的uniform。因此,GPUImageFilter提供了一些通用的方法,让子类可以轻松的进行设置。这些方法只是简单的对OpenGL ES命令进行面向对象包装,并且提供了一个恢复机制。以float型的uniform为例:

- (void)setFloat:(GLfloat)floatValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
{
    runAsynchronouslyOnVideoProcessingQueue(^{
        [GPUImageContext setActiveShaderProgram:shaderProgram];
        [self setAndExecuteUniformStateCallbackAtIndex:uniform forProgram:shaderProgram toBlock:^{
            glUniform1f(uniform, floatValue);
        }];
    });
}

其他的所有类型的uniform可以同理而论。

总结

GPUImageFilter是整个框架的核心,它实现了很多的基础功能,也提供了很多可供子类覆盖和调用的方法。作者通过良好的设计,使得整个Filter的使用和继承非常方便,有很多值得学习的设计思路。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容