0018--OpenGL ES 滤镜进阶篇之缩放+灵魂出窍+抖动+闪白+毛刺+幻觉

前言

本篇主要是探讨滤镜处理中缩放+灵魂出窍+抖动+闪白+毛刺+幻觉处理.

几种不同的滤镜具体实现

1. 缩放滤镜

思路

在顶点着色器中修改顶点坐标和纹理坐标的映射关系

算法

设置一次缩放的最大时长

设置每次振幅的最大比例

通过mod运算计算缩放时间对应的progress(0-1之间)

将缩放时间通过sin函数转成对应值,通过abs使其在0-1范围

计算出最后坐标缩放的比例,并算出最后的顶点坐标

代码

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;
    //每次传进来的时间在0-0.6范围内
    //mod求模
    float time = mod(Time, duration);
    //PI / duration 一个单位时间点对应的角度
    //time * (PI / duration) 当前时间对应的角度
    //sin(time * (PI / duration))计算值这个角度对应的值 -1~1之间
    //abs(sin(time * (PI / duration))) 求出绝对值0-1之间
    //1.0 + maxAmplitude * abs(sin(time * (PI / duration))) 结果是:1.0~1.3之间的值
    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);
    //将纹理坐标传递给TextureCoordsVarying
    TextureCoordsVarying = TextureCoords;
}

效果图

缩放_1.gif

2. 灵魂出窍滤镜

思路:

通过在原图上叠加一个图层，将两个图层进行颜色混合实现，且上面的叠加的层随着时间推移逐渐放大且透明度降低至0，以此循环往复。需要在片元着色器中进行滤镜算法.

算法

设置一次动画时长,透明度,图片方法比例默认值

计算传入时间的进度百分比,并拿百分比计算对应的透明度和缩放比例
计算放大后的纹理坐标
拿到原纹理坐标和放大后的纹理坐标,进行颜色混合

代码

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~1
    //取反,透明度减小
    float alpha = maxAlpha * (1.0 - progress);
    //计算缩放比例
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //将顶点坐标对应的纹理坐标的x/y值到中心点的距离，缩小一定的比例，仅仅只是改变了纹理坐标，而保持顶点坐标不变，从而达到拉伸效果
    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;
}

效果图

灵魂出窍.gif

3. 抖音抖动滤镜

思路

颜色偏移 + 微弱的放大效果，即先将纹理放大，然后将放大后的纹理坐标的纹素进行颜色偏移

算法

抖动时长,图片放大比例,颜色偏移默认值

计算抖动时间对应的百分比

计算百分比颜色偏移

计算百分比对应的缩放比例

得到三组不同的纹理坐标进行混合

代码

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; // 0~1
   //颜色
    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);
}

效果图

抖音抖动.gif

4. 闪白滤镜

思路:

在原图上添加一个白色遮罩，且白色图层的透明度随着时间推移而变化，并与原图进行颜色混合

算法

根据时间计算在0-π周期内对应的值

设置一个白色遮罩

将原纹理的文素与白色遮罩进行混合

使用内置mix函数
返回x和y的线性混合,a从0-1变化

anyFloat mix(anyFloat x,anyFloat y,anyFloat a)

代码


precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    //时间周期
    float duration = 0.6;
    //计算0-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;
}

效果图

闪白.gif

5. 毛刺效果

思路

撕裂+微弱的颜色偏移，即设定一个阈值，当像素点的偏移值小于阈值时，才进行偏移，反之，则乘以一个缩小系数，最终的呈现效果就是绝大部分都会进行微小的偏移，只有少量的行会进行较大偏移.

算法

设置撕裂阈值,周期,红蓝颜色偏移值

计算像素随机范围,与阈值比较,是否需要大范围撕裂还是小范围撕裂

获取撕裂后的纹理坐标,进行红蓝偏移计算,得到两种坐标

混合

代码

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
//随机函数 获取n的小数位
float rand(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
    //阈值
    float maxJitter = 0.06;
    //周期
    float duration = 0.3;
    //红色偏移
    float colorROffset = 0.01;
    //蓝色偏移
    float colorBOffset = -0.025;
    
    //根据时间计算振幅 0-1
    float time = mod(Time, duration * 2.0);
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //jitter -1~1,*2-1 小数位是0.0-0.9
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    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);
}

效果图

毛刺.gif

image.png

幻觉滤镜

思路

残影+颜色偏移的叠加

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

设置时间周期,放大倍数,偏移值,放大后的纹理坐标

获取旋转过程像素点

通过for循环创建新的图层,幻觉图层.

幻觉图层与原始图层相机,计算最终颜色

代码

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
const float duration = 2.0;
//PI * 2.0 得到负值 translation 计算结果为[x:-1~1,y:-1~1]
//计算产生单个像素点的颜色值
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-0.2
    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.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;
        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;
       //累计每一层临时RGB * RGB的临时透明度
       //结果 += 临时颜色 * 透明度，即刚产生的图层的颜色
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        //透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    ///最终颜色 += 原始纹理的RGB * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
   //将最终颜色填充到像素点里
    gl_FragColor = resultMask;
}

参考:
动效滤镜