OpenGL ES案例-抖音系滤镜实现

作者: Sheisone | 来源:发表于2020-08-14 15:00 被阅读0次

这篇文章我们继续研究滤镜实现，主要实现的滤镜大家应该在抖音系中有见到过，ok，话不多说，直接开始吧！

一、缩放滤镜

1、效果：

缩放滤镜.gif

2、着色器代码

这里我们的缩放采用的是在顶点着色器里面实现的，当然也可以在片源着色器中实现，并且我们也推荐在片源着色器中实现，这里我们只是为了展示在顶点着色器中也是可以做到的。

1)顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//时间戳（随着定时器的方法调用及时更新）:从0开始一直递增
uniform float Time;
const float PI = 3.1415926;

void main(){
    //一次缩放效果的时长
    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);
    
    //纹理坐标传递给TextureCoordsVarying
    TextureCoordsVarying = TextureCoords;
}

重点说一下float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
sin(time * (PI / duration))就相关于sin(time /duration*PI)，假设角度α = time /duration*PI先算出当前时间占整个动画时间的比例再得乘以π得到相应的角度，最后得到sin(α)的值；
sin(α)的结果范围是【-1，1】,abs()就是去绝对值，保证得到的范围是正数。

2)片源着色器

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

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

二、灵魂出窍滤镜

灵魂出窍实际上两个纹理的混合，因为使用的都是同一个纹理，所以我们并不需要传2个纹理，只需要同时计算原纹理和放大纹理的坐标，取得对应的纹理再混合即可。
大概过程就是：

在动画时间内纹理从1.0放大到1.8并且透明度从0.4减低到0.0，并重复以上过程。

1、效果：

灵魂出窍.gif

2、着色器代码

1)顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

1)片源着色器

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
    //根据进度算出透明度，因为透明度是从0.4开始递减的，所以是最大值乘以剩余进度
    float alpha = maxAlpha * (1.0 - progress);
    //根据进度算出放大大小，因为放大是【1，1.8】，所以是最大值减1乘以进度再加1.0
    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;
}

获取的进度方式，我们用使用了取模的方式:

时间戳与时长使用mod取模）,再除以时长得到【0， 1】，即百分比

float progress = mod(Time, duration) / duration; // 0~1

这里纹理的放大我就放在片源着色器中了：

//获取放大后的纹理坐标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);

至于最后一句代码：

 gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;

这里其实是用到OpenGL中的颜色混合方程式，有兴趣可以去看下我之前的文章中有讲到颜色混合。

三、抖动滤镜

抖动滤镜放大效果和颜色偏移的共同结果。即放大的过程中，对纹理进行颜色的偏移。

1、效果：

屏幕录制2020-08-14 上午11.gif

2、着色器代码：

这里顶点着色器不需要修改，我们可以直接使用灵魂出窍的代码，所以我们这里只看片源着色器的代码：

void main(){
    //一次抖动效果的时长
    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;
    
    //放大后的纹理坐标 
    //下面这种向量相加减的方式 等价于 灵魂出窍滤镜中的单个计算x、y坐标再组合的为纹理坐标的方式
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //获取三组颜色：颜色偏移计算可以随意，只要偏移量很小即可
    //原始颜色 + offset
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    //原始颜色 - offset
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    //原始颜色
    vec4 mask = texture2D(Texture, ScaleTextureCoords);

    //从3组颜色中分别取出 红色R，绿色G，蓝色B，透明度A填充到内置变量gl_FragColor内
    gl_FragColor = vec4(maskR.r, maskB.g, mask.b, mask.a);
}

四、闪白滤镜

闪白滤镜就是在图片纹理上面加入了一个白色的图层，图层的透明度是先从0增加到1，再从1减少到0，并不断重复这个过程。

1、效果

闪白滤镜.gif

2、着色器代码

同样的，我们只修改片元着色器代码就可以了。

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

这里白色图层的透明度是先从0增加到1，再从1减少到0，所以进度计算我们采用sin的算方式。

五、毛刺滤镜

毛刺滤镜实际上是图片撕裂加上颜色偏移。图片撕裂只能撕裂一小部分，否则图片可能都没办法分辨出来了。
我们让每⼀⾏像素随机偏移 -1 ~ 1 的距离（这⾥的 -1 ~ 1 是对于纹理坐标来说的），又因为只让一小部分撕裂，所以我们的逻辑是，设定⼀个阈值，⼩于这个阈值才进⾏偏移，超过这个阈值则乘上⼀个缩⼩系数。保证图像的比较正常的显示。
所以最终的效果是：绝⼤部分的⾏都会进⾏微⼩的偏移，只有少量的⾏会进⾏较⼤偏移。

1、效果：

毛刺滤镜.gif

2、着色器代码：

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI常量
const float PI = 3.1415926;
//随机数
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(){
    //最大抖动上限
    float maxJitter = 0.06;
    //一次毛刺效果的时长
    float duration = 0.3;
    //红色颜色偏移
    float colorROffset = 0.01;
    //绿色颜色偏移
    float colorBOffset = -0.025;
    
    //表示将传入的事件转换到一个周期内，范围是 0 ~ 0.6，抖动时长变成0.6
    float time = mod(Time, duration * 2.0);
    //振幅，随着时间变化，范围是[0, 1]                                                                             
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //像素随机偏移范围 -1 ~ 1，* 2.0 - 1.0是为了得到【-1，1】范围内的随机值
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;
    //判断是否需要偏移，如果jitter范围 < 最大范围*振幅
    // abs(jitter) 范围【0，1】
    // maxJitter * amplitude 范围【0， 0.06】
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
    //获取纹理x坐标，根据needOffset来计算它的x撕裂
    //needOffset = YES，则撕裂大
    //needOffset = NO，则撕裂小，需要降低撕裂 = *振幅*非常细微的数
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    //获取纹理撕裂后的x、y坐标
    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);
}

这里我们定义了一个函数：float rand(float n)，在着色器文件里，我们不是只能使用main函数，也可以自定义其它函数来帮助我们处理一些逻辑，保证main代码足够的清爽和整洁。

六、幻觉滤镜

幻觉滤镜实际就是残影结合颜色偏移

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

1、效果：

幻觉滤镜.gif

2、代码：

precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI 常量
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) {
    //duration+currentTime-startTime % duration
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}
void main (void) {
    //表示将传⼊的时间转换到⼀个周期内，即 time 的范围是 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;
    //时间间隔 8
    float timeGap = 0.2;
    //注意: 只保留了红⾊的透明的通道值,因为幻觉效果残留红⾊.
    //新图层的-R⾊透明度 0.5
    float maxAlphaR = 0.5;
    // max R
    //新图层的-G⾊透明度 0.05
    float maxAlphaG = 0.05;
    // max G
    //新图层的-B⾊透明度 0.05
    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);
        //透明度递减 9
        alphaR -= tmpAlphaR; alphaG -= tmpAlphaG; alphaB -= tmpAlphaB;
    }
    //最终颜⾊ += 红绿蓝 * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
    //将最终颜⾊填充到像素点⾥.
    gl_FragColor = resultMask;
    
}

这里面我们也像毛刺滤镜那样，定义了两个函数，帮助我们完成计算：

vec4 getMask(float time, vec2 textureCoords, float padding):这个函数可以计算出，在某个时刻图⽚的具体位置。通过它我们可以每经过⼀段时间，去⽣成⼀个新的层
float maskAlphaProgress(float currentTime, float hideTime, float startTime):这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度。

之前的demo效果都是在模拟器完成的，也包括今天的前五个滤镜效果，但是第六个真的跑不起了，或许是我的电脑也上了年纪吧！哈哈，其实是因为模拟器是靠CPU模拟的，之前的效果都比较简单，让CPU来代替GPU完成的时候还是可以的，但是幻觉滤镜中图层太多了，计算量一下增加很多，CPU再也抗不动了，所以只能用真机，让GPU来做它该做的事了。还是一句话，谁的事谁来做是最好的！

觉得不错记得点赞哦！听说看完点赞的人逢考必过，逢奖必中。ღ( ´･ᴗ･` )比心

OpenGL ES案例-抖音系滤镜实现

一、缩放滤镜

1、效果：

2、着色器代码

1)顶点着色器

2)片源着色器

二、灵魂出窍滤镜

1、效果：

2、着色器代码

1)顶点着色器

1)片源着色器

三、抖动滤镜

1、效果：

2、着色器代码：

四、闪白滤镜

1、效果

2、着色器代码

五、毛刺滤镜

1、效果：

2、着色器代码：

六、幻觉滤镜

1、效果：

2、代码：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

OpenGL

OpenGL ES 学习和探索