用GPUImage给视频添加多个滤镜

最新推荐文章于 2020-04-14 23:06:18 发布

jeffasd

最新推荐文章于 2020-04-14 23:06:18 发布

阅读量2.8k

点赞数

分类专栏： OpenGL

OpenGL 专栏收录该内容

92 篇文章 11 订阅

订阅专栏

http://www.voidcn.com/blog/u1031/article/p-4178831.html

之前说过要写的博客。。关于使用GPUImage来做混合滤镜和水印等效果；

放了国庆假期之后。。终于想起来要填坑了。。。。于是现在来简单说一下GPUImage做混合滤镜的做法；

其实做混合滤镜，GPUImage一共有2种做法：一是使用GPUImageFilterGroup，二是用多个GPUImageFilter来叠合；

这里先讲第一种： GPUImageFilterGroup

GPUImageFilterGroup包括上面几个属性和方法;

其中initialFilters指的是数据源的传入Filter(比如GPUImageUIElement的target,GPUImagePicture的target等)

terminalFilter指的是最后的Filter,它的target就是数据的输出口;

具体可以看GPUImage的官方例子：FilterShowcase

第二种方法：

1. 最简单的Filter是这样用的：

2. 如果做滤镜的叠合，其实就是多个Filter串联在一起：

3. 如果这些滤镜中，要做混合效果(强光混合之类的，就是需要2个输入源的话)

这里给出简单代码：

 <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//输入的数据(image)</span>
    <span class="hljs-built_in" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 134, 179); background: transparent;">UIImage</span> *img = [<span class="hljs-built_in" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 134, 179); background: transparent;">UIImage</span> imageNamed:<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background: transparent;">@"secPersonDemo.png"</span>];
    _pic = [[GPUImagePicture alloc] initWithImage:img];
    
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//经过的渠道(filter)</span>
    _brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
    [_brightnessFilter setBrightness:<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">0</span>];
    
    _contrastFilter = [[GPUImageContrastFilter alloc] init];
    [_contrastFilter setContrast:<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">1.0</span>];
    
    _rgbFilter = [[GPUImageToneCurveFilter alloc] init];
    
    _blurFilter = [[GPUImageiOSBlurFilter alloc] init];
    [_blurFilter setBlurRadiusInPixels:-<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">12.0</span>f];
    
    _vignetteFilter = [[GPUImageVignetteFilter alloc] init];
    
    _bilateralFilter = [[GPUImageBilateralFilter alloc] init];
    [_bilateralFilter setFirstDistanceNormalizationFactorUniform:<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">15</span>];
    [_bilateralFilter setSecondDistanceNormalizationFactorUniform:<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">25</span>];
    
    _rgbOpeningFilter = [[GPUImageRGBOpeningFilter alloc] initWithRadius:<span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background: transparent;">0.2</span>];
    
    _saturationFilter = [[GPUImageSaturationFilter alloc] init];
    
    _softLightBlendFilter = [[GPUImageSoftLightBlendFilter alloc] init];
    
    _pict = [[GPUImagePicture alloc] initWithImage:[<span class="hljs-built_in" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 134, 179); background: transparent;">UIImage</span> imageNamed:<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background: transparent;">@"blend.png"</span>]];
    
    
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//设置连接(target)</span>
    [_pic addTarget:_rgbFilter];
    [_rgbFilter addTarget:_contrastFilter];
    [_contrastFilter addTarget:_brightnessFilter];
    [_brightnessFilter addTarget:_bilateralFilter];
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//[_blurFilter addTarget:_vignetteFilter];</span>
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//[_vignetteFilter addTarget:_imageview];</span>
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//[_vignetteFilter addTarget:_bilateralFilter];</span>
    [_bilateralFilter addTarget:_rgbOpeningFilter];
    [_rgbOpeningFilter addTarget:_saturationFilter];
    <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//[_saturationFilter addTarget:_imageview];</span>
    
    [_saturationFilter addTarget:_softLightBlendFilter];
    [_pict addTarget:_softLightBlendFilter];
    
    [_softLightBlendFilter addTarget:_imageview];<span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-weight: inherit; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background: transparent;">//_imageview是一个GPUImageView,用来显示结果的</span>
    
    [_pict processImage];
    [_pic processImage];