OpenGL ES 动效滤镜算法

这篇文章主要讲述使用GLSL来自定义着色器来实现各种有趣的滤镜效果。

各种效果的案例我只贴出片元着色器的代码，如果需要完整代码，可在文章末尾来下载demo。

缩放滤镜：

缩放滤镜效果示意图如下所示：

QQ20200815-125045-HD.gif

缩放滤镜实际上基本的原理理:可以通过修改顶点坐标和纹理坐标的对应关系来实现。我们使用的做法是放大顶点坐标和缩放顶点坐标来实现效果：
具体细节看着色器代码：
下面的代码是顶点着色器上的代码。

//顶点坐标
attribute vec4 position;
//纹理坐标
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

//时间戳
uniform float Time;

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在1.0-1.3之间
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    //放大坐标。
    gl_Position = vec4(position.x * amplitude,position.y * amplitude,position.zw);
    /纹理坐标传递
    TextureCoordsVarying = TextureCoords;
}

灵魂出窍

效果图如下：

QQ20200815-125121-HD.gif

灵魂出窍滤镜: 是两个层的叠加，并且上⾯的那层随着时间的推移，会逐渐放⼤且 不透明度逐渐降低。这⾥也用到了放大的效果，我们这次⽤片段着色器来实现

这个效果的关键点在于它使用了两个纹理层，对第二个纹理图实现图片的放大和透明度的降低，循环往复。下面代码是片元着色器代码。

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;
    
    //进度0~1
    float progress = mod(Time,duration)/duration;
    透明度0-0.4
    float alpha = maxAlpha * (1.0 - progress);
    //缩放比例1.0-1.8
    float scale = 1.0 + (maxScale - 1.0) * progress;
    放大的纹理坐标
    float 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;
}

抖动滤镜

这个滤镜效果的实现是将放大的纹理进行颜色混合。将放大的纹理坐标，获取放大的纹理坐标的颜色等于偏移值位置的颜色。颜⾊偏移 + 微弱的放大效果

效果示意图如下：

QQ20200815-125154-HD.gif

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main(void){
    //周期
    float duration = 0.7;
    //放大图片上限
    float maxScale = 1.1;
    //偏移步长
    float offset = 0.02;
    
    //进度0-1
    float progress = mod(Time,duration)/duration;
    //颜色偏移值0-0.02
    vec2 offsetCoords = vec2(offset,offset)*progress;
    //缩放比例1.0-1.1
    float scale = 1.0+(maxScale - 1.0)*progress;
    //放大后的纹理坐标
    vec2 scaleTextureCoords = vec2(0.5,0.5)+(TextureCoordsVarying-vec2(0.5,0.5))/scale;
    
    //获取三组颜色
    vec4 maskR = texture2D(Texture,scaleTextureCoords+offsetCoords);
    vec4 maskB = texture2D(Texture,scaleTextureCoords-offsetCoords);
    
    vec4 mask = texture2D(Texture,scaleTextureCoords);
    //颜色填充   
    gl_FragColor = vec4(maskR.r,mask.g,maskB.b,mask.a);
}

闪白滤镜

闪白滤镜的实现效果相对来说比较简单，就是在原纹理图层上添加一层白色的画布，让画布随着周期改变而实现透明度的改变。

效果图如下：

QQ20200815-125223-HD.gif

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;
}

毛刺滤镜

效果图如下：

QQ20200815-125309-HD.gif

这个效果的实现，比较复杂，通过获取每个点的纹理坐标，根据定义的偏移值，计算抖动振幅，设置当前纹理坐标与抖动振幅相加，对新的纹理坐标进行颜色偏移。

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

float rand(float n){
    return fract(sin(n) * 43758.541234);
}


void main(void){
    
    float maxJitter = 0.06;
    //一次毛刺时间
    float duration = 0.3;
    //红色偏移
    float colorRoffset = 0.01;
    //绿色偏移
    float colorBoffset = -0.025;
    
    //范围0.0-0.6
    float time = mod(Time,duration * 2.0);
    振幅
    float amplitude = max(sin(time*(PI/duration)),0.0);
    
    //随机偏移范围-1 ，1
    float jitter = rand(TextureCoordsVarying.y)*2.0;
    //计算是否需要偏移，jitter<最大抖动*振幅
    bool needOffset = abs(jitter)<maxJitter * amplitude;
    
    //设置撕裂的纹理坐标
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude*0.006));
    
    //获取新的纹理坐标
    vec2 textureCoords = vec2(textureX,TextureCoordsVarying.y);
    
    //颜色偏移
    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);
}

幻觉滤镜

效果示意图如下：

QQ20200815-125440-HD.gif

这个滤镜效果在模拟器上比较难显示，原因是模拟器的GPU是由cpu模拟的，而这个效果计算很复杂，需要GPU运算实现，因此最好通过真机来运行这个效果。

残影和颜⾊偏移的叠加

残影效果：是在移动的过程中，每经过⼀段时间隔，根据当前的位置去创建⼀个新层，并且新层的不透明度随着时间逐 渐减弱。于是在一个移动周期内，可以看到很多透明度不同的层叠加在一起，从而形成残影的效果。残影,让图片随着时间 做圆周运动

颜色偏移：物体移动的过程是蓝色在前面，红色在后面。所以整个过程可以理解成:在移动的过程中，每间隔⼀段时间，遗失了一部分红色通道的值在原来的位置，并且这部分红色通道的值，随着时间偏移，会逐渐恢复.

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

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) {
//周期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、G、B色透明度 0.5，0.05，0.05
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    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;
}

完整demo