iOS基于GPUImage的图像形变设计（简单形变部分）

GPUImage是iOS平台主流的GPU图像处理框架，能够非常方便地使用GPU对图像进行处理，包括：滤镜、分布统计等。

我们知道，如果需要对一个图像进行滤镜处理，一般而言只需要设计FragmentShader即可以达到目的。比如：需要对图像进行亮度调节，仅需要FragmentShader中对像素点的颜色值进行修改即可，并不需要自定义VertexShader。

那么，能否基于GPUImage进行一定的形变处理呢？答案是肯定的。对于形变的处理，可以是基于FragmentShader的，也可以是基于VertexShader的，也可以通过自定义顶点vertices和textureCoordinates来实现。下面会分别介绍一下如何通过设计来实现基于GPUImage的图像形变。

Part1：基于FragmentShader的图像形变设计

其实，有一部分形变是可以基于FragmentShader去实现的。直观的比如：翻转、旋转、压缩等。下面举几个具体的示例和相应FragmentShader的实现。

1. 翻转

为了实现翻转，只需要简单的将textureCoordinate的x、y值进行相应的改变即可：

vec2 newTex = vec2(1.0 – textureCoordinate.x, textureCoordinate.y); //代表水平翻转vec2 newTex = vec2(textureCoordinate.x, 1.0 – textureCoordinate.y); //代表垂直翻转vec2 newTex = vec2(1.0 – textureCoordinate.x, 1.0 - textureCoordinate.y); //代表水平+垂直翻转

2. 旋转

vec2 newTex = vec2(textureCoordinate.y, 1.0 - textureCoordinate.x);  //代表向右旋转90度

3. 压缩

vec2 newTex = vec2(textureCoordinate.x * 2.0 – 0.5, textureCoordinate.y * 2.0 – 0.5);

代表将图像缩小到原来的1/2长和宽，并居住

4. 变平行四边形

vec2 newTex = vec2(textureCoordinate.x * 2.0 + textureCoordinate.y – 1.0, textureCoordinate.y);

5. 大眼

相比于之前的几种形变，大眼的操作就相对比较复杂了。这里假设奥巴马右眼（图中左眼）中心的坐标是(x0, y0)，放大范围的半径为r，则：

vec2 center = vec2(x0, y0);vec2 newTex = textureCoordinate.xy;float dist = sqrt((center.x – newTex.x)* (center.x – newTex.x) + (center.y – newTex.y)* (center.y – newTex.y));if (dist < r){
         float ratio = sqrt(dist / r);
         float x1 = center.x – (center.x – newTex.x) * ratio;
         float y1 = center.y – (center.y – newTex.y) * ratio;
         newTex = vec2(x1, y1);
}

具体思想是：对于中心(x0,y0)半径r中的点，做一个偏移的调整，使得整体偏移值更大（ratio<1，所以相比正常情况，会取离(x0,y0)点更近的图中的点，从而实现眼睛的“放大”）

需要特别注意的一点是，对于通过FragmentShader进行形变处理时，如果形变后的图像有像素缺失（即：形变后图像小于旧的图像），需要对多出来的点有一个特殊赋值，否则就会出现下面的情况：

如上图所示，如果不设置超出画面像素的填充颜色，则会将最外层的像素重复填充（主观感受是线条拉伸），当然，也可以设置Texture Wrapping Mode为GL_REPEAT来平铺填充（重复画面）。不过，一般而言，还是设置超出屏幕部分为纯色底图（纯白、纯黑）比较合适~

小结一下：

基于FragmentShader的图像形变设计，主要是基于坐标点的x,y的简单变换得到的，适合于旋转、翻转、缩放、一些规则四边形变形等情况。对与复杂的形变，比如大眼，就需要设计较为复杂的Shader来实现。由于每个像素点都需要进行一次FragmentShader的计算，因此复杂形变处理时，需要的GPU计算量更大。

Part2：基于自定义vertices的图像形变设计

对于Part1中举例的简单形变而言，通过巧妙的传递顶点坐标，可以实现在使用默认Shader的情况下的图像形变。具体示例如下：

对于GPUImage而言，默认的顶点如左上角的A、B、C、D点所示。我们只需要调整这4个实际渲染顶点的位置（vertices），即可以轻松实现简单形变。代码如下：

在- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates函数中，修改如下：

//不使用默认的顶点//默认的vertices: {-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0}//glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);       GLfloat meshVertices[8] = {1.0, -1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0};
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, &meshVertices[0]);

这样就实现了水平翻转。同理可以实现旋转、压缩等。

小结一下：

通过自定义顶点的方式，可以在不改变默认fragmentShader和vertexShader的情况下，轻松实现简单的形变。然而，对于局部形变（比如大眼），就没有这么轻松了。

那么，如何实现复杂形变呢？我们会在“基于GPUImage的图像形变设计（复杂形变部分）”再做介绍~

作者简介：dreamqian(钱梦仁)，外号"大魔王"，天天P图iOS工程师