OpenGL ES: 滤镜篇2 -GLSL 缩放,灵魂出窍,闪白,毛刺

OpenGL ES 系列

1. 缩放滤镜

原理: 就是基本原理,通过修改顶点坐标和纹理坐标的对应关系来实现.

片元着色器代码实现:

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 maxAmplitude = 0.3;
    //缩放中心点
    vec2 anchorPoint = vec2(0.5, 0.5);
    //根据当前时间进度计算缩放幅度
    float time = mod(Time, duration);
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    //转化纹理坐标变化
    vec2 textCoords = TextureCoordsVarying;
    textCoords = vec2(anchorPoint.x + (textCoords.x - anchorPoint.x) / amplitude, anchorPoint.y + (textCoords.y - anchorPoint.y) / amplitude);
    //
    vec4 mask = texture2D(Texture, textCoords);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

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;
    //灵魂层变化中心点
    vec2 anchorPoint = vec2(0.5, 0.5);
    //进度
    float progress = mod(Time, duration) / duration; // 0~1
    //灵魂层透明的变化值
    float alpha = maxAlpha * (1.0 - progress);
    //灵魂层缩放的变化值
    float scale = 1.0 + (maxScale - 1.0) * progress;
    //灵魂层纹理坐标变化
    float weakX = anchorPoint.x + (TextureCoordsVarying.x - anchorPoint.x) / scale;
    float weakY = anchorPoint.y + (TextureCoordsVarying.y - anchorPoint.y) / 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;
const float PI = 3.1415926;

void main (void) {
    //周期时间
    float duration = 0.6;
    //进度
    float progress = mod(Time, duration);
    //白色层
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    //混合因子
    float amplitude = abs(sin(progress * (PI / duration)));
    //原图层
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //混合
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}
}

4. 毛刺滤镜

原理: 撕裂 + 微弱的颜⾊色偏移. 思路: 我们让每一⾏像素随机偏移 -1 ~ 1 的距离(这⾥的 -1 ~ 1 是对于纹理坐标来说的)，但是如果整个画⾯都偏移比较⼤的值，那我们可能都看不出原来图像的样⼦。所以我们的逻辑是，设定⼀一个阈值，小于这个阈值才进行偏移，超过这个阈值则乘上⼀个缩⼩系数。则最终呈现的效果是:绝⼤部分的⾏都会进微⼩的偏移，只有少量量的行会进行较⼤大偏移

片元着色器代码实现:

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);
    //像素随机偏移[-1,1]
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; 
    //是否要做偏移.
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    //获取纹理X值.根据needOffset,来计算它X撕裂.
    //needOffset = YES ,撕裂较大;
    //needOffset = NO,撕裂较小.
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    //撕裂后的纹理坐标
    vec2 textureCoords = vec2(TextureCoordsVarying.x,textureY);
    //根据撕裂后获取的纹理颜色值
    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);
}