实现抖音特效滤镜

本文将通过 GLSL 来模仿抖音中几种特效的实现。

动画

抖音上的特效都是动态的，那么要怎么把动态的效果，加到一个静态的图片上呢？

在 UIKit 中实现动画，我们是通过使用 CoreAnimation来高效、方便地实现动画，而 CoreAnimation 的职责就是尽可能快地组合屏幕上不同的可视内容，逐帧计算当前显示的内容。

逐帧计算

在 OpenGL ES 中，我们实现动画的方式，就是计算每一帧应该显示的图像，然后在屏幕刷新的时候，重新渲染。

这个计算过程，我们是放在 Shader 中进行的。

通过一个表示时间的参数，在重新渲染的时候，传入当前的时间，让 Shader 计算当前动画的进度。

重新渲染，则依赖 CADisplayLink来实现。

缩放

原理

通过修改顶点坐标和纹理坐标的映射关系来实现

着色器代码

缩放的关键点是在于计算振幅

duration表示一次缩放周期的时长
mod(Time, duration)表示传入的时间转换到一个周期内，即 time 的范围是 0~0.6
amplitude表示振幅，这里使用 sin 函数，将振幅范围控制在 1.0~1.3 之间
将顶点坐标的 x 和 y 分别乘以振幅，在纹理坐标不变的情况下，就可以达到缩放效果

attribute vec4 position;
attribute vec2 inputTextureCoordinate;
varying vec2 textureCoordinate;

// 时间戳（随着定时器的方法调用及时更新）:从0开始一直递增
uniform float Time;

const float PI = 3.1415926;

void main (void) {
    // 一次动画周期时长
    float duration = 0.6;
  	// 最大缩放量
    float maxAmplitude = 0.3;
  	// 表示传入的事件周期，即time的范围被控制在0.0~0.6
  	// mod(a, b)，求模运算 等价于 a%b，GLSL中不支持%求模
    float time = mod(Time, duration);
    // amplitude表示振幅，引入PI的目的是为了使用sin函数，将amplitude的范围控制在1.0 ~ 1.3之间，并随着时间变化
    // 这里可以不用取绝对值，因为角度的范围是【0，π】，不会出现负数的情况
    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);
    // 纹理坐标传递给textureCoordinate
    textureCoordinate = inputTextureCoordinate;
}

灵魂出窍

原理

两个层的叠加，并且上面的那层随着时间的推移，会逐渐放大且透明度逐渐降低。

着色器代码

放大的关键点是 weakX 和 weakY 的计算，

比如0.5 + (textureCoordinate.x - 0.5) / scale，即将顶点坐标对应的纹理坐标的 x 值到纹理中点的距离，缩小一定的比例

两层叠加的效果，我们通过得到两个纹理颜色值 weakMask 和 mask，

根据混合模式中的正常混合公式：最终色 = 基色 * a% + 混合色 * (1 - a%)

也可以使用 mix 内置函数进行线性混合

关键点分析

计算当前动画进度的百分比
计算透明度、缩放因子
颜色混合

precision highp float;

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;
// 时间戳
uniform float Time;

void main (void) {
    // 一次动画周期时长
    float duration = 0.7;
  	// 最大透明度
    float maxAlpha = 0.4;
  	// 最大缩放值
    float maxScale = 1.8;
    // 当前动画进度(时间戳与时长使用mod取模), 再除以时长 得到[0,1]
    float progress = mod(Time, duration) / duration;
    // 当前透明度[0.4, 0]
    float alpha = maxAlpha * (1.0 - progress);
    // 当前缩放因子[1.0, 1.8]
    float scale = 1.0 + (maxScale - 1.0) * progress;
    // 将顶点坐标对应的纹理坐标的x/y值到中心点的距离，缩小一定的比例
    float weakX = 0.5 + (textureCoordinate.x - 0.5) / scale;
    float weakY = 0.5 + (textureCoordinate.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);
    // 获取当前像素点纹理坐标，放大后的纹理坐标  
    vec4 weakMask = texture2D(inputImageTexture, weakTextureCoords);
    // 获取原始像素点纹素
    vec4 mask = texture2D(inputImageTexture, textureCoordinate);
    // 颜色混合 内建函数mix / 混合方程式
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

抖动

原理

颜色偏移+微弱的放大效果

着色器代码

颜色偏移是对三个颜色通道进行分离，并且给红色通道和蓝色通道添加了不同的位置偏移

precision highp float;

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

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
    // 颜色偏移值[0, 0.02]
    vec2 offsetCoords = vec2(offset, offset) * progress;
    // 缩放因子[1.0, 1.1]
    float scale = 1.0 + (maxScale - 1.0) * progress;
    // 放大后的纹理坐标 
    // 向量与向量的加减乘除，结果返回的是向量
  	// vec2(x, y) + vec2(a, b) = vec2(x + a, y + b);
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (textureCoordinate - vec2(0.5, 0.5)) / scale;
    
  	// 计算颜色偏移
    vec4 maskR = texture2D(inputImageTexture, ScaleTextureCoords + offsetCoords);
    vec4 maskB = texture2D(inputImageTexture, ScaleTextureCoords - offsetCoords);
    vec4 mask = texture2D(inputImageTexture, ScaleTextureCoords);
    // 分别提前 3 个偏移后的颜色
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

闪白

原理

叠加一个白色层，然后白色层的透明度随着时间不断地变化

着色器代码

参考「灵魂出窍」的列子，对两个层实现叠加，这里无非是创建了一个白色层 whiteMask，再根据混合方程式进行混合

precision highp float;

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

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(inputImageTexture, textureCoordinate);
    
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

毛刺

原理

撕裂 + 微弱的颜色偏移。

撕裂

让每一行像素随机偏移[-1, 1]的距离（这里的 -1 ~ 1 是对于纹理坐标来说的），但是如果整个画面都偏移比较大的值，那可能都看不出原来图像的样子。

设定一个阈值，小于这个阈值才进行偏移，超过这个阈值则乘上一个缩小系数

着色器代码

像素随机偏移值
纹理坐标 X 的偏移

precision highp float;

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

uniform float Time;

const float PI = 3.1415926;
// 噪声函数，伪随机函数，本质是一个 Hash 函数
float rand(float n) {
    // fract(x)返回x的小数部分
    // 返回 sin(n) * 43758.5453123
    // sin(n) * 极大值，带小数点，想要随机数算的比较低，乘的数就必须较大
    // 如果想得到【0，1】范围的小数值，可以将sin * 1
    // 如果只保留小数部分，乘以一个极大值
    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);
  	// 当前的振幅
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    // 像素随机偏移范围[-1,1]
    float jitter = rand(textureCoordinate.y) * 2.0 - 1.0; // -1~1
  	// 判断是否需要偏移，（jitter < 最大撕裂值 * 当前振幅)
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    // 根据 needOffset 来计算纹理坐标 x
  	// needOffset = YES，则撕裂大
    // needOffset = NO，则撕裂小，需要降低撕裂 = *振幅*非常细微的数
    float textureX = textureCoordinate.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    vec2 textureCoords = vec2(textureX, textureCoordinate.y);
  	
  	// 撕裂后的颜色
    vec4 mask = texture2D(inputImageTexture, textureCoords);
    // 颜色偏移：分别获取 R、B 偏移后的颜色值
    vec4 maskR = texture2D(inputImageTexture, textureCoords + vec2(colorROffset * amplitude, 0.0));
    vec4 maskB = texture2D(inputImageTexture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

像素随机偏移需要用到随机数，可惜 GLSL 中并没有内置的随机函数。

这个 float rand(float n) 的实现看上去很神奇，它其实是来自这里，江湖人称「噪声函数」。

它其实是一个伪随机函数，本质上是一个 Hash 函数。但在这里我们可以把它当成随机函数来使用，它的返回值范围是 0 ~ 1。如果你对这个函数想了解更多的话可以看这里。

幻觉

原理

残影+颜色偏移

残影

在移动的过程中，每经过一段时间间隔，根据当前的位置去创建一个新层，并且新层的不透明度随着时间逐渐减弱

颜色偏移

图片在移动的过程中是蓝色在前，红色在后，即在移动的过程中，每间隔一段时间，遗失了一部分红色通道的值在原来的位置，并且这部分红色通道的值，随着时间偏移，会逐渐恢复

着色器代码

getMask 函数，计算在某个时刻图片的具体位置。通过它我们可以每经过一段时间，去生成一个新的层。
for循环来累加每一层的每个通道乘上自身的透明度的值，算出最终的颜色值 resultMask 。

precision highp float;

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

uniform float Time;

const float PI = 3.1415926;
// 一次动画周期时长
const float duration = 2.0;

// 这个函数可以计算出，在某个时刻图片的具体位置，通过它可以每经过一段时间，去生成一个新的mask
// 转圈产生幻影的单个像素点的颜色值
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(inputImageTexture, translationTextureCoords);
    return mask;
}

// 这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度
float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
  	// mod（时长+持续时间 - 开始时间，时长）得到一个周期内的time
    float time = mod(duration + currentTime - startTime, duration);
    // 如果小于0.9，返回time，反之，返回0.9
    return min(time, hideTime);
}

void main (void) {
    // 将传入的时间戳转换到一个周期内，time的范围是【0，2】
    // 获得时间周期
    float time = mod(Time, duration);
    // 放大后的倍数
    float scale = 1.2;
    // 偏移量 = 0.083
    float padding = 0.5 * (1.0 - 1.0 / scale);
    // 放大后的纹理坐标
    vec2 textureCoords = vec2(0.5, 0.5) + (textureCoordinate - vec2(0.5, 0.5)) / scale;
    // 新建层的隐藏时间 即新建层什么时候隐藏 
    float hideTime = 0.9;
    // 时间间隔：隔0.2s创建一个新层
    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);
    
   	// 循环：每一层循环都会得到新的图层的颜色，即幻影颜色
    // 一次循环只是计算一个像素点的纹素，需要在真机运行。模拟器会卡，主要是模拟器上是CPU模拟GPU的
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        // 获取到【0，2】s内所获取的运动后的纹理坐标
        // 获得幻影当前时间的颜色值
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
      
        // 某个时刻创建的层，在当前时刻的红绿蓝的透明度
        // 临时的透明度 = 根据时间推移RGB的透明度发生变化
        // 获得临时的红绿蓝透明度
        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;
}

注：在 iOS 的模拟器上，只能用 CPU 来模拟 GPU 的功能。所以在模拟器上运行上面的代码时，可能会十分卡顿。尤其是最后这个效果，由于计算量太大，亲测模拟器显示不出来。因此如果要跑代码，最好使用真机运行。

文中着色器代码获取

参考

在 iOS 中使用 GLSL 实现抖音特效

当一个 Android 开发玩抖音玩疯了之后(二)

动效滤镜