iOS 图像处理系列 - 基于GPUImage的滤镜实现及优化

作者简介：dreamqian(钱梦仁), 天天P图iOS工程师

Part0：图片滤镜简介

GPUImage作为一个开源的iOS GPU处理库，提供了相当便捷的使用GPU来进行图像处理的方法。

我们知道，对于图像处理中，滤镜效果是一种最普遍也最有效的图像优化方式。通过对图像进行不同的滤镜效果的处理，可以得到各种绚丽的图片。

对于图片进行滤镜处理，大致包含以下几种不同的模式：

1）  对图像的单像素值进行调整，包括：增加亮度、对比度；色调、饱和度调整；颜色映射等。这类调整基于的是当前像素的像素值，与其所处的画面位置无关。

2）  对图像的整体格局进行调整，比如：增加暗角、渐变等。这类调整对于当前像素所处的位置有关。

3）  对图像进行叠加，比如：叠加光晕效果，叠加水印等。与位置相关。

4）  对图像的多像素进行调整，比如：虚化、模糊等。这类调整对于当前像素的位置无关，但是与周围像素有关。

下面，针对上述4种常用模式的滤镜，分别介绍一下在GPUImage中该如何实现。

Part1：图像单像素值调整滤镜实现

对图像的单像素值进行调整，是最简单也是最有效的一种滤镜的实现方法，一般包含亮度、对比度、色调、饱和度等的调整，也可以实现特定颜色的映射（比如红色改成蓝色）。这种滤镜一般可以通过自定义GPUImage的FragmentShader即可以快速实现，下面是一个具体的实现示例。

在示例中，我们实现了对像素值的亮度、对比度调整，也实现了对色调、饱和度的调整（通过转化到HSV颜色空间）。

对单像素值进行调整的另外一个常见的操作是进行曲线调整，即调整某一种颜色（或者属性）的分布情况，使得整体更突出或者更弱化。下面是一个曲线调整的具体示例。

由于曲线调整需要传入较多的参数，而OpenGL中uniform变量的整体数量是有限的，所以，一般可以通过将参数转化成图像的方法进行传入。通过将参数转化成纹理图像，可以实现传入较多的参数而不影响uniform变量的开销，缺点是纹理图像的取值操作性能较直接取uniform的数据稍慢（因为OpenGL会自动进行纹理插值计算）。

Part2：图像整体格局调整滤镜实现

GPUImage的相关源码中，自带了一个暗角滤镜的实现（GPUImageVignetteFilter）。具体的实现方式是：通过判断当前像素距离图像中心的距离（归一化到0~1的范围内），来判断当前像素需要叠加的暗角的深浅。具体代码如下：

我们可以模仿相关的算法，在特定位置进行特殊处理，比如，在图像上绘制一个圆形，可以通过以下的代码来实现。

Part3：叠加效果滤镜实现

在《图像叠加模式的Shader实现》中，我们介绍了两个像素进行叠加时在OpenGL的计算方法。那么，在OpenGL中，我们应该如何实现两张图片的叠加效果呢？下面是具体的例子。

可以看到，通过使用两个输入纹理，可以很方便的实现两张图片的叠加。同时，通过设置不同的顶点坐标，可以很方便的实现局部的图像叠加（比如水印logo）。

Part4：图像多像素值调整滤镜实现

对于图像的多像素值进行调整是另一类常用的滤镜实现方式，包括但不限于：虚化、模糊、膨胀、腐蚀等操作。GPUImage中自带了部分滤镜的实现，例如：GPUImageGaussianBlurFilter（高斯模糊滤镜），GPUImageMediumBlurFilter（均值模糊），GPUImageDilationFilter/GPUImageErosionFilter（膨胀腐蚀）等。

下面，我们举一个例子，来看看如何巧妙的实现一个3*3核的均值滤镜和高斯模糊滤镜。

之所以可以将9个值的均值或者加权平均通过4次取值操作来实现，是因为我们巧妙的利用了OpenGL中texture2D操作的插值。下面是具体插值权重的说明，从而说明为何上述操作是正确的。

最后：基于LUT的滤镜实现及原理分析

GPUImage提供了LookupTable（LUT）方法的滤镜实现（GPUImageLookupFilter），可以简单的实现很多滤镜效果，有兴趣的朋友们也可以自己去探索一下哈~

作者简介：dreamqian(钱梦仁)，天天P图 iOS 工程师

文章后记： 天天P图是由腾讯公司开发的业内领先的图像处理，相机美拍的APP。欢迎扫码或搜索关注我们的微信公众号：“天天P图攻城狮”，那上面将陆续公开分享我们的技术实践，期待一起交流学习！ 加入我们： 天天P图技术团队长期招聘：(1) 图像处理算法工程师，(2) Android / iOS 开发工程师，期待对我们感兴趣或者有推荐的技术牛人加入我们（base 上海）！联系方式：ttpic_dev@qq.com