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.00.5, textureCoordinate.y * 2.00.5);

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

4. 变平行四边形

vec2 newTex = vec2(textureCoordinate.x * 2.0 + textureCoordinate.y1.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的图像形变设计(复杂形变部分)”再做介绍~

展开阅读全文

没有更多推荐了,返回首页