缩放滤镜

QQ20200823-091058-HD.gif

缩放滤镜是修改纹理坐标的值
原理：

1. 从客户端传入一个时间值Time到服务端，根据时间值周期性的缩放
2. 通过sin函数计算振幅
   顶点着色器代码，片元着色器正常输出

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//外部传入的时间
uniform float Time;

const float PI = 3.1415926;

void main(){
    //持续时间
    float duration = 0.6;
    //最大振幅
    float maxAmplitude = 0.3;
    //mod取余数
    float time = mod(Time,duration);
    //振幅，abs求绝对值， sin函数求振幅
    float amplitude = 1.0 + maxAmplitude * abs(sin(time* (PI/duration)));
    
    gl_Position = vec4(Position.x * amplitude, Position.y *amplitude,Position.zw);
    TextureCoordsVarying = TextureCoords;
}

灵魂出窍

QQ20200823-091804-HD.gif

灵魂出窍是由两层纹理叠加而成，保证一个纹理坐标不变，另个一个纹理坐标随着时间的推移，纹理坐标进行放大

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//客户端传入的时间
uniform float Time;

void main(){
    //时间周期
    float duration = 0.7;
    //最大透明度
    float maxAlpha = 0.4;
    //最大缩放比
    float maxScale = 1.8;
    //进度， 时间比
    float progress = mod(Time,duration) / duration;
    //根据进度计算透明度
    float alpha = maxAlpha * (1.0-progress);
    //根据进度计算放大比例
    float scale = 1.0 + (maxScale -1.0) * progress;
    
    //放大的纹理坐标
    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;
}

抖动

QQ20200823-091841-HD.gif

动图可见有再原图颜色的基础上，会有左边蓝色和右边黄色，三种颜色组成。因此抖动是有三个纹理组成，蓝色纹理有一个向左的偏移量，黄色纹理有一个向右的偏移量。同时纹理有一定缩放。所以需要计算偏移量和缩放比。最后取每个纹理的不同颜色值重新组成。

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;


void main(){
    float duration = 0.7;
    float maxScale = 1.1;
    //初始偏移量
    float offset = 0.02;
    
    float progress = mod(Time,duration) /duration;
    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);
}

毛刺

QQ20200823-091914-HD.gif

仔细观察动图，还是由三个纹理组，纹理的x坐标发生了不同的偏移量偏移。

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;
const float PI = 3.1415926;

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;
    
    float time = mod(Time, duration * 2.0);
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    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);
}

地址