音视频开发 - 抖音中放大/灵魂出窍/抖动/闪白/毛刺滤镜

1、缩放滤镜

基本原理：修改顶点坐标和纹理坐标的对应关系来实现。
先看效果

整张图片放大了

放大的过程可以在顶点着色器完成，也可以在片元着色器完成，所以这次直接修改了顶点着色器的代码逻辑。
片元着色器代码部分其实没有变化，就是最基本的纹理像素值的配置。

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

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

顶点着色器代码部分

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);
   //根据周期中的位置，获取当前的放大值
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    //当前顶点转化到屏幕坐标的位置
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    TextureCoordsVarying = TextureCoords;
}

2、灵魂出窍

基本原理：两个层的叠加，上边的层随着时间的推移，会逐渐放大并且不透明度逐渐降低。也用到了放到的效果。底层图层不用改变。
先看效果

灵魂出窍

只修改片元着色器中的代码，顶点着色器的代码维持原来基本配置即可。

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
    //当前的透明度
    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;
}

该算法中可以根据需要将设置的某些变量通过外部传递进来，获得实时的缩放或者透明度的调节。

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;
    
    //当前时间在整个周期中的进度,在0~1
    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;
    
    //设置缩放之后的纹理坐标和经过具体的颜色偏移坐标
   //三组分别代表RGB不同方向的纹理像素值
    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);
}

该部分主要是设置缩放比例，获得缩放后的纹理坐标；然后再根据颜色偏移坐标和纹理偏移坐标获取不同的纹理像素值；最后根据不同纹理像素值的不同颜色分量，获得具体的颜色值。

4、闪白滤镜

原理：添加白色图层，白色图层的透明度随着时间变化

看具体的效果，这个图其实是当白色图层透明度逐渐变小，下部分的任务图像逐渐变模糊的一帧图片 闪白

添加白色图层还是比较简单的，看代码实现

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);
    //这部分其实是添加了一个白色的纹理像素值，透明度为1.0
    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;
}

整体理解起来还是比较简单的。

5、毛刺滤镜

实现原理：撕裂+微弱的颜色偏移；我们让每一行像素都随机偏移-1~1的纹理像素值，如果整个画面偏移比较大，那么画面就会明显的失真，看不出原来的样子。所以可以设置一个阈值，小于这个阈值才进行编码，超过这个阈值进行相应的缩放。
效果，可以看到在x轴方向有部分被撕裂了，并且颜色发生了细微的偏移

毛刺

看代码部分，还是稍微有点复杂的

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

//这个函数式c中获取随机数的
float rand(float n) {
    //返回fract(x)的x小数部分
    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;
    
    //当前周期的时间
    float time = mod(Time, duration * 2.0);
    //当前振幅0.0 ~ 1.0
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    // 当前坐标的y值获取随机偏移值  -1~1
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; 
    //判断当前的坐标是否需要偏移
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
    //获取纹理x值，根据是否大于某一个阀值来判断到底在x方向应该偏移多少
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
   //x轴方向进行撕裂之后的纹理坐标
    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);
}

看了代码之后代码中的主要思路是：第一设置一个y方向的最大抖动以及最大振幅，并设置一个y方向的振幅阀值，根据y方向的振幅确定最终x方向的最终坐标偏移量；第二个就是纹理颜色的偏移