OpenGL ES实现动效滤镜

本文通过自定义着色器的方式实现缩放、灵魂出窍、闪烁、闪白、毛刺、幻觉等滤镜效果。由于主要的代码逻辑在着色器这块，客户端代码就不再赘述。

缩放滤镜

scale.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;
    // 得到当前时间处于单个周期哪个段
    float time = mod(Time, duration);
    // 也可以不取绝对值，因为只在0～pi之间变化
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    
    TextureCoordsVarying = TextureCoords;
}

灵魂出窍

soulout.gif

实现思路

这个效果除了底下的原图外，还有一个放大且透明度逐渐降低的图层，所以我们可以用一个透明放大的图层与原图进行颜色混合实现这个效果

实现代码

因为涉及到颜色混色，所以我们需要在片元着色器中实现这个效果。

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

uniform float Time;

void main (void) {
    // 动画时长
    float duration = 0.7;
    // 最大缩放比例
    float maxScale = 1.8;
    // 最大透明度
    float maxAlpha = 0.4;
    // 通过时间和动画时长计算当前进度
    float progress = mod(Time, duration) / duration;
    // 通过进度计算当前透明度
    float alpha = maxAlpha * (1.0 - progress);
    // 当前缩放比例
    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 wekTextureCoords = vec2(weakX, weakY);
    // 得到放大后的纹素
    vec4 weakMask = texture2D(Texture, wekTextureCoords);
    // 放大后的纹素和原纹素混合
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

闪烁滤镜

shake.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;
    // 当前进度
    float progress = mod(Time, duration) / duration;
    // 颜色偏移向量
    vec2 offsetCoords = vec2(offset, offset) * progress;
    // 放大比例
    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);
}

闪白滤镜

shakewhite.gif

实现思路

这个效果比较简单，是一个纹理图层和一个白色透明度渐变的图层混合的结果。

时间思路

同样需要片元着色器中实现。

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

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    
    // 动画周期
    float duration = 0.7;
    // 当前处于周期哪个阶段
    float time = mod(Time, duration);
    // 当前透明度
    float alpha = abs(sin(PI * time/duration));
    // 白色图层纹素
    vec4 whiteMask = vec4(vec3(1.0), alpha);
    // 原图层纹素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    // 混合
    gl_FragColor = mask * (1.0 - alpha) + whiteMask * alpha;
}

毛刺滤镜

glitch.gif

实现思路

这个效果是两个效果组成而成的，一个是细微的颜色偏移，一个随机的x轴方向的较大的偏移，由于GLSL没有随机数函数，所以需要自己实现一个随机数函数。

实现代码

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.3842949);
}

void main (void) {
    // 动画时长
    float duration = 0.3;
    // 最大抖动
    float maxJitter = 0.06;
    // 红色偏移
    float rOffset = 0.01;
    // 蓝色偏移
    float bOffset = -0.025;
    // 当前周期时间段
    float time = mod(Time, duration*2.0);
    // 当前进度 （0～1）
    float amplitude = max(sin(PI * (time / duration)), 0.0);
    // 随机抖动
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;
    // 通过是否大于最大都懂判断是否需要偏移
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    // 发生抖动的纹理x坐标
    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(rOffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(bOffset * amplitude, 0.0));
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

幻觉滤镜

huanjue.gif

实现思路

这个效果比较复杂，首先，最明显是一个放大的、周期性旋转的图层，另外，有各个不同偏移值、不同透明度的图层混合而成。

实现代码

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) {
    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;
    // 红绿蓝的最大透明度，用于颜色混合
    float maxAlphaR = 0.05; // max R
    float maxAlphaG = 0.5; // 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;
        // 图层
        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;
}