OpenGLES 缩放、幻觉、毛刺滤镜效果

2020-08-20 本文已影响0人 windy_3c22

滤镜效果.gif
案例demo

1、缩放效果

实现原理：通过修改顶点坐标和纹理坐标的对应关系来实现。
实现步骤

实现原理

设定缩放的时间周期。float duration = 0.6
由于传入的时间参数是时间戳，一直增长。通过mod求余函数，对duration求余。可以将时间限制在0.6以内不断循环的时间周期时间周期图1。

时间周期图1
设定缩放的振幅(最大放大多少，最小缩小多少)
这里使用正弦函数sin的值域在[-1,1]范围内周期变化的特性。来设置纹理振幅的周期性变化

振幅

纹理坐标乘以设置的振幅，实现纹理坐标的放大和缩小
顶点着色器代码实现

attribute vec4 position;
attribute vec2 textureCoord;
varying lowp vec2 textureCoordVarying;

uniform float Time;//时间参数
const float PI = 3.1415926;

void main(){
    
    float duration = 0.6;//时间周期(一次缩放效果的时长)
    float maxAmplitude = 0.3;最大缩放幅度(振幅)
    
    //mod 求余函数 将时间对duration取余。
   //将时间变换成0.6以内循环的时间周期[0,0.6)
    float time = mod(Time,duration);

    //amplitude振幅
   // 引入sin函数为了得到[0,1]循环变化的值域。将的到循环变化的振幅值
   // sin函数值域[-1,1],abs 取绝对值将值域变成[0,1]
  //振幅范围[1, 1+ maxAmplitude];
    float amplitude = maxAmplitude * abs(sin(time * (PI / duration))) + 1.0;
    
    textureCoordVarying = textureCoord;
   // 将顶点坐标xy乘以放大系数(振幅)，在纹理坐标不变的情况。就达到了缩放效果
    //将顶点坐标x，y进行缩放变化，zw保持不变
    gl_Position = vec4(position.x * amplitude,position.y * amplitude,position.zw);
}

2、灵魂出窍

实现原理：两个层叠加。并且上面一层随时间逐渐放大、透明度逐渐降低。

灵魂出窍

实现步骤

设置时间周期duration，mod求余将时间戳变换值duration内的循环的时间周期time = mod(Time,duration)。
获取当前时间时时间周期内进度(占比)。progress =time/duration
透明度岁进度降低alpha = 1 - progress,可以设置透明度变换的上限值alpha = (1 - progress) * maxAlpha
纹理坐标的放大
设置图片放大的上限 maxScale = 1.8
设置缩放比例scale = 1.0 +(maxScale - 1) * progress
获取放大后的纹理坐标、放大后纹理坐标的纹素
原纹理和放大后的纹理进行颜色混合，赋值gl_FragColor
放大后的纹理weakMask(在mask的基础上做了放大处理) ,原纹理mask
GLSL颜色混合方程式=mask * (1- alpha) + weakMask * alpha

alpha、scale变换

纹理坐标的变换

片元着色器中实现

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
void main(){
    
    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 + (textureCoordVarying.x - 0.5) / scale;
    float weakY = 0.5 + (textureCoordVarying.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);
    //纹理缩放变换的纹素
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    //原纹理的纹素
    vec4 mask = texture2D(Texture, textureCoordVarying);
    //颜色混合
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

3、抖动滤镜

实现原理：颜色偏移 + 微弱的放大效果

抖动滤镜

实现步骤

设置时间周期、进度、缩放比例
计算当前进度下颜色偏移、缩放比例
获取放大后的纹理坐标的纹素、放大后的纹理颜色偏移后的纹素
从放大的纹素、偏移的纹素获取RGBA，赋值gl_FragColor

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
void main(){
    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;

    float scale = 1.0 + (maxScale - 1.0) * progress;
    //放大后的纹理坐标
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (textureCoordVarying - vec2(0.5, 0.5)) / scale;
 
    //放大后的纹理纹素进行颜色偏移 + offsetCoords
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
   //放大后的纹理纹素进行颜色偏移 - offsetCoords
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
   // 放大后纹理坐标的纹素
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
   
    // 从3组颜色中取出RGBA颜色值，赋值gl_FragColor 
   // 也可以值取一个纹素偏移值和不发生偏移的纹素。方便观察纹素偏移现象。
   //  gl_FragColor = vec4(maskR.r, mask.g, maskR.b, mask.a);
   //  gl_FragColor = vec4(maskB.r, mask.g, maskB.b, mask.a);
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

4、闪白滤镜

实现原理:添加白色图层，白色图层随时间透明度进行变化。

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
const float PI = 3.1415926;
void main(){
   //时间周期
    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, textureCoordVarying);
    //颜色混合。白色遮照的透明度时间变化
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

5、毛刺滤镜

实现原理:撕裂 + 微弱的颜色偏移。让每一行像素随机偏移-1~1的距离（相对纹理坐标而言)。但是如果正画面都偏移比较大的值，可能看不出原图片的样子。所以设定一个阀值，小于阀值的进行偏移，大于的乘上一个缩小系数。最终绝大部分行都会进行微小偏移，只有少量的行进行较大偏移。

毛刺滤镜

片元着色器

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
const float PI = 3.1415926;

float rand(float n) {
    //fract(x)返回x的小数部分
    //返回 sin(n) * 43758.5453123
    return fract(sin(n) * 43758.5453123);
}
void main(){
    float maxJitter = 0.06;//最大抖动
    float duration = 0.3;//时间周期(一次毛刺滤镜的时长)
    float colorROffset = 0.01;//红色颜色偏移
    float colorBOffset = -0.025;//绿色颜色偏移
    
    //将传入的时间转换成周期
    float time = mod(Time, duration * 2.0);
   //amplitude 振幅。引入PI是为了使用sin函数。将amplitude 限制在1.0 ～1.3之间，随时间变化
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    //像素随机偏移范围(-1,1)
    float jitter = rand(textureCoordVarying.y) * 2.0 - 1.0; // -1~1
   //判断是否需要偏移，如果jitter范围< 最大抖动 *振幅
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
   //获取纹理坐标x，根据needOffset 计算x的撕裂，yes，撕裂大，no撕裂小
    float textureX = textureCoordVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
  
    //获取撕裂后的纹理坐标
    vec2 textureCoords = vec2(textureX, textureCoordVarying.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);
}

6、幻觉滤镜

实现原理：残影效果 + 颜色偏移
残影效果：在移动过程中，每经过一段时间间隔，根据当前的位置去创建一个新层，并且的不透明度随时间逐渐减弱。在一个移动周期内。可以看到很多透明度不同的层叠加在一起，从而形成残影的效果，残影，让图片时间做圆周运动。
颜色偏移：物体移动的过程是蓝色在前面，红色在后面。搜一整个过程可以理解成：在移动的过程中，每隔一段时间，遗失了一部分红色通道的值在原来的位置。并且这部分红色通道的值，随着时间偏移，会逐渐恢复。

幻觉滤镜