OpenGL ES案例-抖音系滤镜实现

一、缩放滤镜

1、效果：

缩放滤镜.gif

2、着色器代码

这里我们的缩放采用的是在顶点着色器里面实现的，当然也可以在片源着色器中实现，并且我们也推荐在片源着色器中实现，这里我们只是为了展示在顶点着色器中也是可以做到的。

1)顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//时间戳（随着定时器的方法调用及时更新）:从0开始一直递增
uniform float Time;
const float PI = 3.1415926;void main(){//一次缩放效果的时长float duration = 0.6;//最大缩放幅度float maxAmplitude = 0.3;//表示传入的事件周期，即time的范围被控制在0.0~0.6//mod(a, b)，求模运算 等价于 a%b，GLSL中不支持%求模float time = mod(Time,duration);//amplitude表示振幅，引入PI的目的是为了使用sin函数，将amplitude的范围控制在1.0 ~ 1.3之间，并随着时间变化//这里可以不用取绝对值，因为角度的范围是【0，π】，不会出现负数的情况float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));//放大关键代码：将顶点坐标的x和y分别乘以一个放大系数，即振幅，在纹理坐标不变的情况下，就达到了拉伸的效果//xy放大，zw保持不变gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);//纹理坐标传递给TextureCoordsVaryingTextureCoordsVarying = TextureCoords;
}

重点说一下float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
sin(time * (PI / duration))就相关于sin(time /duration*PI)，假设角度α = time /duration*PI先算出当前时间占整个动画时间的比例再得乘以π得到相应的角度，最后得到sin(α)的值；
sin(α)的结果范围是【-1，1】,abs()就是去绝对值，保证得到的范围是正数。

2)片源着色器

precision highp float;uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;void main (void) {vec4 mask = texture2D(Texture, TextureCoordsVarying);gl_FragColor = vec4(mask.rgb, 1.0);
}

二、灵魂出窍滤镜

灵魂出窍实际上两个纹理的混合，因为使用的都是同一个纹理，所以我们并不需要传2个纹理，只需要同时计算原纹理和放大纹理的坐标，取得对应的纹理再混合即可。
大概过程就是：

在动画时间内纹理从1.0放大到1.8并且透明度从0.4减低到0.0，并重复以上过程。

1、效果：

灵魂出窍.gif

2、着色器代码

1)顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;void main (void) {gl_Position = Position;TextureCoordsVarying = TextureCoords;
}

1)片源着色器

precision highp float;uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//当前时间
uniform float Time;void main (void) {//动画总时间float duration = 0.7;//最大的透明度float maxAlpha = 0.4;//最大放大大小float maxScale = 1.8;//整个动画进度float progress = mod(Time, duration) / duration; // 0~1//根据进度算出透明度，因为透明度是从0.4开始递减的，所以是最大值乘以剩余进度float alpha = maxAlpha * (1.0 - progress);//根据进度算出放大大小，因为放大是【1，1.8】，所以是最大值减1乘以进度再加1.0float scale = 1.0 + (maxScale - 1.0) * progress;//获取放大后的纹理坐标X和Yfloat weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;vec2 weakTextureCoords = vec2(weakX, weakY);//获取放大纹理vec4 weakMask = texture2D(Texture, weakTextureCoords);//获取原纹理vec4 mask = texture2D(Texture, TextureCoordsVarying);//将原纹理和放大纹理进行混合gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

获取的进度方式，我们用使用了取模的方式:

时间戳与时长使用mod取模）,再除以时长得到【0， 1】，即百分比

float progress = mod(Time, duration) / duration; // 0~1

这里纹理的放大我就放在片源着色器中了：

//获取放大后的纹理坐标X和Yfloat weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;vec2 weakTextureCoords = vec2(weakX, weakY);

至于最后一句代码：

 gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;

这里其实是用到OpenGL中的颜色混合方程式，有兴趣可以去看下我之前的文章中有讲到颜色混合。

三、抖动滤镜

抖动滤镜放大效果和颜色偏移的共同结果。即放大的过程中，对纹理进行颜色的偏移。

1、效果：

屏幕录制2020-08-14 上午11.gif

2、着色器代码：

这里顶点着色器不需要修改，我们可以直接使用灵魂出窍的代码，所以我们这里只看片源着色器的代码：

void main(){//一次抖动效果的时长float duration = 0.7;//放大图片的上限float maxScale = 1.1;//颜色偏移的步长float offset = 0.02;//进度 0 ~ 1float progress = mod(Time, duration) / duration;//颜色偏移值0 ~ 0.02vec2 offsetCoords = vec2(offset, offset) * progress;//缩放比例 1.0 ~ 1.1float scale = 1.0 + (maxScale - 1.0) * progress;//放大后的纹理坐标 //下面这种向量相加减的方式 等价于 灵魂出窍滤镜中的单个计算x、y坐标再组合的为纹理坐标的方式vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;//获取三组颜色：颜色偏移计算可以随意，只要偏移量很小即可//原始颜色 + offsetvec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);//原始颜色 - offsetvec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);//原始颜色vec4 mask = texture2D(Texture, ScaleTextureCoords);//从3组颜色中分别取出 红色R，绿色G，蓝色B，透明度A填充到内置变量gl_FragColor内gl_FragColor = vec4(maskR.r, maskB.g, mask.b, mask.a);
}

四、闪白滤镜

闪白滤镜就是在图片纹理上面加入了一个白色的图层，图层的透明度是先从0增加到1，再从1减少到0，并不断重复这个过程。

1、效果

闪白滤镜.gif

2、着色器代码

同样的，我们只修改片元着色器代码就可以了。

precision highp float;uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;uniform float Time;const float PI = 3.1415926;void main (void) {float duration = 0.6;float time = mod(Time, duration);//白色图层vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);//计算进度float amplitude = abs(sin(time * (PI / duration)));vec4 mask = texture2D(Texture, TextureCoordsVarying);gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

这里白色图层的透明度是先从0增加到1，再从1减少到0，所以进度计算我们采用sin的算方式。

五、毛刺滤镜

毛刺滤镜实际上是图片撕裂加上颜色偏移。图片撕裂只能撕裂一小部分，否则图片可能都没办法分辨出来了。
我们让每⼀⾏像素随机偏移 -1 ~ 1 的距离（这⾥的 -1 ~ 1 是对于纹理坐标来说的），又因为只让一小部分撕裂，所以我们的逻辑是，设定⼀个阈值，⼩于这个阈值才进⾏偏移，超过这个阈值则乘上⼀个缩⼩系数。保证图像的比较正常的显示。
所以最终的效果是：绝⼤部分的⾏都会进⾏微⼩的偏移，只有少量的⾏会进⾏较⼤偏移。

1、效果：

毛刺滤镜.gif

2、着色器代码：

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI常量
const float PI = 3.1415926;
//随机数
float rand(float n){//fract(x)返回x的小数部分//返回 sin(n) * 43758.5453123//sin(n) * 极大值，带小数点，想要随机数算的比较低，乘的数就必须较大，噪声随机//如果想得到【0，1】范围的小数值，可以将sin * 1//如果只保留小数部分，乘以一个极大值return fract(sin(n) * 43758.5453123);
}void main(){//最大抖动上限float maxJitter = 0.06;//一次毛刺效果的时长float duration = 0.3;//红色颜色偏移float colorROffset = 0.01;//绿色颜色偏移float colorBOffset = -0.025;//表示将传入的事件转换到一个周期内，范围是 0 ~ 0.6，抖动时长变成0.6float time = mod(Time, duration * 2.0);//振幅，随着时间变化，范围是[0, 1]                                                                             float amplitude = max(sin(time * (PI / duration)), 0.0);//像素随机偏移范围 -1 ~ 1，* 2.0 - 1.0是为了得到【-1，1】范围内的随机值float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;//判断是否需要偏移，如果jitter范围 < 最大范围*振幅// abs(jitter) 范围【0，1】// maxJitter * amplitude 范围【0， 0.06】bool needOffset = abs(jitter) < maxJitter * amplitude;//获取纹理x坐标，根据needOffset来计算它的x撕裂//needOffset = YES，则撕裂大//needOffset = NO，则撕裂小，需要降低撕裂 = *振幅*非常细微的数float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));//获取纹理撕裂后的x、y坐标vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);//颜色偏移：获取3组颜色//撕裂后的原图颜色vec4 mask = texture2D(Texture, textureCoords);//根据撕裂计算后的纹理坐标，获取纹素vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));//根据撕裂计算后的纹理坐标，获取纹素vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));//颜色主要撕裂，红色和蓝色部分，所以只保留绿色gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

这里我们定义了一个函数：float rand(float n)，在着色器文件里，我们不是只能使用main函数，也可以自定义其它函数来帮助我们处理一些逻辑，保证main代码足够的清爽和整洁。

六、幻觉滤镜

幻觉滤镜实际就是残影结合颜色偏移

残影：是每隔一段时间，就会新建一个图层，且该图层以红色为主，随着时间推移透明度逐渐降低，于是可以在一个周期时长内看到很多不同透明度的层叠加在一起，从而形成残影，让图片随着时间做圆周运动
颜色偏移：图片在移动的过程中是蓝色在前，红色在后，即在移动的过程中，每间隔一段时间，遗失了一部分红色通道的值在原来的位置，并且这部分红色通道的值，随着时间偏移，会逐渐恢复。

1、效果：

幻觉滤镜.gif

2、代码：

precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI 常量
const float PI = 3.1415926;
//⼀次幻觉滤镜的时⻓
const float duration = 2.0;//这个函数可以计算出，在某个时刻图⽚的具体位置。通过它我们可以每经过⼀段时间，去⽣成⼀个新的 层
vec4 getMask(float time, vec2 textureCoords, float padding)
{//圆周坐标vec2 translation = vec2(sin(time * (PI * 2.0 / duration)), cos(time * (PI * 2.0 / duration)));//纹理坐标 = 纹理坐标+偏离量 * 圆周坐标vec2 translationTextureCoords = textureCoords + padding * translation;//根据这个坐标获取新图层的坐标vec4 mask = texture2D(Texture, translationTextureCoords); return mask;
}
//这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度。
float maskAlphaProgress(float currentTime, float hideTime, float startTime) {//duration+currentTime-startTime % durationfloat time = mod(duration + currentTime - startTime, duration);return min(time, hideTime);
}
void main (void) {//表示将传⼊的时间转换到⼀个周期内，即 time 的范围是 0 ~ 2.0float time = mod(Time, duration);//放⼤倍数float scale = 1.2;//偏移量float padding = 0.5 * (1.0 - 1.0 / scale);//放⼤后的纹理坐标vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;//隐藏时间float hideTime = 0.9;//时间间隔 8float timeGap = 0.2;//注意: 只保留了红⾊的透明的通道值,因为幻觉效果残留红⾊.//新图层的-R⾊透明度 0.5float maxAlphaR = 0.5;// max R//新图层的-G⾊透明度 0.05float maxAlphaG = 0.05;// max G//新图层的-B⾊透明度 0.05float maxAlphaB = 0.05;// max B//获得新的图层坐标!vec4 mask = getMask(time, textureCoords, padding);float alphaR = 1.0;// Rfloat alphaG = 1.0;// Gfloat alphaB = 1.0;// B//最终图层颜⾊vec4 resultMask = vec4(0, 0, 0, 0);//循环for (float f = 0.0; f < duration; f += timeGap){float tmpTime = f;//获取到0-2.0秒内所获取的运动后的纹理坐标vec4 tmpMask = getMask(tmpTime, textureCoords, padding);//某个时刻创建的层，在当前时刻的红绿蓝的透明度float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;//累积每⼀层每个通道乘以透明度颜⾊通道resultMask += vec4(tmpMask.r * tmpAlphaR, tmpMask.g * tmpAlphaG, tmpMask.b * tmpAlphaB, 1.0);//透明度递减 9alphaR -= tmpAlphaR; alphaG -= tmpAlphaG; alphaB -= tmpAlphaB;}//最终颜⾊ += 红绿蓝 * 透明度resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);//将最终颜⾊填充到像素点⾥.gl_FragColor = resultMask;}

这里面我们也像毛刺滤镜那样，定义了两个函数，帮助我们完成计算：

vec4 getMask(float time, vec2 textureCoords, float padding):这个函数可以计算出，在某个时刻图⽚的具体位置。通过它我们可以每经过⼀段时间，去⽣成⼀个新的层
float maskAlphaProgress(float currentTime, float hideTime, float startTime):这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度。

之前的demo效果都是在模拟器完成的，也包括今天的前五个滤镜效果，但是第六个真的跑不起了，或许是我的电脑也上了年纪吧！哈哈，其实是因为模拟器是靠CPU模拟的，之前的效果都比较简单，让CPU来代替GPU完成的时候还是可以的，但是幻觉滤镜中图层太多了，计算量一下增加很多，CPU再也抗不动了，所以只能用真机，让GPU来做它该做的事了。还是一句话，谁的事谁来做是最好的！