GLSL实现滤镜特效算法思维导图

GLSL实现滤镜特效.png

滤镜实现算法汇总

缩放滤镜

实现原理：在顶点着色器修改顶点和纹理坐标的映射关系

算法

1.设置参数:duration 缩放时长,maxAmplitude 最大缩放幅度

float duration = 0.6;
float maxAmplitude = 0.3;

2.计算时间周期。通过mod函数，duration，maxAmplitude

float time = mod(Time, duration)

3.计算振幅-顶点放大倍数，范围[1.0,1.3]

float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));

4.计算gl_Position.

gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);

5.纹理坐标传递给TextureCoordsVarying

TextureCoordsVarying = TextureCoords;

缩放滤镜 .vsh

attribute vec4 Position;

attributevec2TextureCoords;

varyingvec2TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

voidmain (void) {

    floatduration =0.6;

    floatmaxAmplitude =0.3;

    floattime =mod(Time, duration);

    floatamplitude =1.0+ maxAmplitude *abs(sin(time * (PI / duration)));

    gl_Position=vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);

    TextureCoordsVarying = TextureCoords;

}

灵魂出窍滤镜

实现原理：两个层叠加，上层随时间逐渐放大且透明度降至0,循环执行.

算法

1.设置参数:duration 效果时间，maxAlpha 透明度上限，maxScale 图片缩放上限.
2.计算-放大后的纹理坐标
progress-进度百分比(0~1)

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

alpha-透明度(0-0.4)

float alpha = maxAlpha * (1.0 - progress);

scale-缩放比率(1.0 - 1.8)

float scale = 1.0 + (maxScale - 1.0) * progress;

weakTextureCoords-放大后的纹理坐标

放⼤纹理坐标

float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;

获取放⼤的纹理坐标

vec2 weakTextureCoords = vec2(weakX, weakY);

3.获取两个纹理的颜色值

读取到放⼤后的纹理坐标的纹素的颜⾊值

vec4 weakMask = texture2D(Texture, weakTextureCoords);

读取原始的纹理坐标对应的纹素的颜⾊值

vec4 mask = texture2D(Texture, TextureCoordsVarying);

4.gl_FragColor-混合颜色到片原着色器内建变量

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

灵魂出窍滤镜.fsh

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

抖动滤镜

实现原理:颜色偏移+微弱放大

算法:

1.设置参数:duration-一次抖动时长，maxScale-图片放大倍数，offset偏移步长.

//⼀次抖动滤镜的时⻓
float duration = 0.7;
//放⼤图⽚上限
float maxScale = 1.1;
//颜⾊偏移步⻓
float offset = 0.02;

2.计算-放大后的纹理坐标.
progress-进度百分比

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

offsetCoords-当前进度颜色偏移值

//颜⾊偏移值(0-0.02)
vec2 offsetCoords = vec2(offset, offset) * progress;

scale-当前进度缩放比例

//缩放⽐例(1.0 - 1.1)
float scale = 1.0 + (maxScale - 1.0) * progress;

ScaleTextureCoords-放大后的纹理坐标

//放⼤后的纹理坐标
vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) /
scale;

3.计算3组颜色.

//获取3组颜⾊
//原始颜⾊ + offsetCoords
vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
//原始颜⾊ - offsetCoords
vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
//原始颜⾊
vec4 mask = texture2D(Texture, ScaleTextureCoords);

4.gl_FragColor.

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

抖动滤镜vsh

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

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