OpenGL ES动效滤镜：缩放、灵魂出窍、抖动、闪白、毛刺、幻觉

原图如下：

新垣结衣.png

这篇博客是在OpenGL ES滤镜：分屏滤镜和OpenGL ES滤镜：灰度、颠倒、马赛克的基础上进行讲解的。下面我们来看一下不同滤镜效果的着色器代码。

缩放滤镜

缩放滤镜实际上基本的原理是可以通过修改顶点坐标和纹理坐标的对应关系来实现放大缩小效果。

缩放滤镜顶点着色器代码Scale.vsh

//顶点坐标
attribute vec4 Position;
//纹理坐标
attribute vec2 TextureCoords;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI
const float PI = 3.1415926;

void main (void) {
    // 一次缩放效果时长
    float duration = 0.6;
    // 最大缩放幅度
    float maxAmplitude = 0.3;
    // 表示传入的时间周期 即time的范围被控制在[0.0~0.6]
    float time = mod(Time, duration);
    // amplitude表示振幅，引入 PI 的目的是为了使用 sin 函数，将amplitude的范围控制在1.0 ~ 1.3之间，并随着时间变化
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    // 放大关键：将顶点坐标的x和y分别乘以一个放大系数，在纹理坐标不变的情况下，就达到了拉伸的效果。x，y 放大；z，w保持不变
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    // 纹理坐标传递给TextureCoordsVarying桥接属性
    TextureCoordsVarying = TextureCoords;
}

缩放滤镜片元着色器代码Scale.fsh

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

实现效果：

缩放滤镜.gif

灵魂出窍滤镜

灵魂出窍滤镜的原理: 是两个图层的纹素进行混合，并且上面的那层随着时间的推移，会逐渐放大且不透明度逐渐降低。这里也⽤到了缩放滤镜的效果，我们这次用片元着⾊器来实现该效果。

灵魂出窍滤镜SoulOut.fsh

precision highp float;
// 纹理采样器
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间(通过uniform传入一个时间Time)
uniform float Time;

void main (void) {
    // 一次灵魂出窍效果的时长 1.0
    float duration = 1.0;
    // 透明度上限
    float maxAlpha = 0.5;
    // 放大图片上限
    float maxScale = 1.8;
    
    // 进度值[0,1]
    float progress = mod(Time, duration) / duration; // 0~1
    // 透明度范围[0,0.5]
    float alpha = maxAlpha * (1.0 - progress);
    // 缩放比例[1.0,1.8]
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    // 放大纹理坐标
    // 根据放大比例，得到放大纹理坐标 [0,0],[0,1],[1,1],[1,0]
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;

    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    // 放大纹理坐标
    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    // 获取对应放大纹理坐标下的纹素(颜色值rgba)
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
   
    // 原始的纹理坐标下的纹素(颜色值rgba)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    // 颜色混合 默认颜色混合方程式 = mask * (1.0-alpha) + weakMask * alpha;
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

实现效果：

灵魂出窍.gif

抖动滤镜

抖动的过程中也是基于缩放的原理，而且它的颜色值产生一定的偏差。抖动效果: 颜⾊偏移 + 微弱的放大效果

抖动滤镜Shake.fsh

precision highp float;
// 纹理
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间(通过uniform传入一个时间Time)
uniform float Time;

void main (void) {
    // 一次抖动滤镜的时长
    float duration = 1.0;
    // 放大图片上限
    float maxScale = 1.2;
    // 颜色偏移步长
    float offset = 0.02;
    
    // 进度[0,1]
    float progress = mod(Time, duration) / duration; 
    // 颜色偏移值范围[0,0.02]
    vec2 offsetCoords = vec2(offset, offset) * progress;
    // 缩放范围[1.0-1.2];
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    // 放大纹理坐标.
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    // 获取3组颜色rgb
    // 原始颜色+offsetCoords
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    // 原始颜色-offsetCoords
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    // 原始颜色
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    // 从3组来获取颜色:
    // maskR.r,mask.g,maskB.b 注意这3种颜色取值可以打乱或者随意发挥.只是效果会有不一样.
    // mask.a 获取原图的透明度
     gl_FragColor = vec4(mask.r, maskR.g, maskB.b, mask.a);

}

实现效果：

抖动滤镜.gif

闪白滤镜

闪白滤镜的原理: 在上层添加⽩色图层 ,⽩色图层的透明度随着时间的变化而变化。白色图层和原图层进行混合。

闪白滤镜ShineWhite.fsh

precision highp float;
// 纹理采样器
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间(通过uniform传入一个时间Time)
uniform float Time;

void main (void) {
    // 一次闪白滤镜的时长
    float duration = 0.5;
    // 表示时间周期[0.0,0.5]
    float time = mod(Time, duration);
    // 白色颜色遮罩层
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    // 振幅: (0.0,1.0)
    float amplitude = abs(sin(time * (PI / duration)));
    // 纹理坐标对应的纹素(RGBA)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    // 利用混合方程式; 白色图层 + 原始纹理图片颜色 来进行混合
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

实现效果：

闪白滤镜.gif

毛刺滤镜

⽑刺滤镜的原理: 撕裂 + 微弱的颜⾊偏移。

我们让每一行像素随机偏移 -1 ~ 1 的距离(这里的 -1 ~ 1 是对于纹理坐标来说的)，如果整个画面都偏移⽐较大的值，那我们可能都看不出原来图像的样子。所以，设定⼀个阈值(最大抖动maxJitter * 振幅amplitude)，⼩于这个阈值才进行偏移，超过这个阈值则乘上⼀个缩小系数(本例：0.06)。
则最终呈现的效果是:绝⼤部分的行都会进行微小的偏移，只有少量的行会进行较⼤偏移。

毛刺滤镜Glitch.fsh

precision highp float;
// 纹理
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间(通过uniform传入一个时间Time)
uniform float Time;
// 随机数
float rand(float n) {
    //fract(x),返回x的小数部分数据
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
    // 最大抖动
    float maxJitter = 0.06;
    // 一次毛刺滤镜的时长
    float duration = 0.5;
    // 红色颜色偏移量
    float colorROffset = 0.01;
    //绿色颜色偏移量
    float colorGOffset = -0.02;
    // 蓝色颜色偏移量
    float colorBOffset = -0.035;
    
    // 时间周期[0.0,1.0];
    float time = mod(Time, duration * 2.0);
    // 振幅:[0,1];
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    // 像素随机偏移[-1,1]
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    
    // 是否要做偏移.
    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 maskG = texture2D(Texture, textureCoords + vec2(colorGOffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    
    // 颜色部分发生撕裂.
    gl_FragColor = vec4(maskR.r, maskG.g, maskB.b, mask.a);
}

实现效果：

毛刺滤镜.gif

幻觉滤镜

1.首先获得放大后的纹理坐标

将放大后的纹理坐标随着圆周坐标进行偏移

产生幻觉的颜色一般为红色，所以将新图层红色透明度设为0.5，绿色、蓝色设为0.05

根据时间计算新图层透明度，每个颜色乘以其透明度，获得新图层

透明度依时间递减获得新图层

放大后的纹理坐标和新产生图层纹理坐标依次累加获得最终颜色

幻觉滤镜Vertigo.fsh

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) {
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}

void main (void) {
    // 表示将传入的时间转换到一个周期内，即 time 的范围是 0 ~ 2.0
    float 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;
    // 时间间隔
    float timeGap = 0.2;
    // 注意：只保留了红色的透明通道值，因为幻觉效果残留红色
    // 新图层的-R色透明度 0.5
    float maxAlphaR = 0.5; // max R
    // 新图层的-G色透明度 0.05
    float maxAlphaG = 0.05; // max G
    // 新图层的-B色透明度 0.05
    float maxAlphaB = 0.05; // max B
    // 获得新的图层坐标
    vec4 mask = getMask(time, textureCoords, padding);
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float 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);
        // 透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    // 最终颜色 += 红绿蓝 * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
    // 将最终颜色填充到像素点里
    gl_FragColor = resultMask;
}

实现效果：

幻觉滤镜.gif

Demo:
DynamicFilter