1、缩放滤镜
基本原理：修改顶点坐标和纹理坐标的对应关系来实现。
先看效果
整张图片放大了
放大的过程可以在顶点着色器完成，也可以在片元着色器完成，所以这次直接修改了顶点着色器的代码逻辑。
片元着色器代码部分其实没有变化，就是最基本的纹理像素值的配置。
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
顶点着色器代码部分
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//当前的时间
uniform float Time;
const float PI = 3.1415926;
void main (void) {
//周期
float duration = 0.6;
//缩放的最大值
float maxAmplitude = 0.3;
//类似取余，表示当前周期中的时间值
float time = mod(Time, duration);
//根据周期中的位置，获取当前的放大值
float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
//当前顶点转化到屏幕坐标的位置
gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
TextureCoordsVarying = TextureCoords;
}
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;
//进度
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 + (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;
}
该算法中可以根据需要将设置的某些变量通过外部传递进来，获得实时的缩放或者透明度的调节。
3、抖动滤镜
原理：颜色偏移+微弱的放大效果
看效果
抖动
代码如下：
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;
//当前时间在整个周期中的进度,在0~1
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;
//设置缩放之后的纹理坐标和经过具体的颜色偏移坐标
//三组分别代表RGB不同方向的纹理像素值
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);
}
该部分主要是设置缩放比例，获得缩放后的纹理坐标；然后再根据颜色偏移坐标和纹理偏移坐标获取不同的纹理像素值；最后根据不同纹理像素值的不同颜色分量，获得具体的颜色值。
4、闪白滤镜
原理：添加白色图层，白色图层的透明度随着时间变化
看具体的效果，这个图其实是当白色图层透明度逐渐变小，下部分的任务图像逐渐变模糊的一帧图片
闪白
添加白色图层还是比较简单的，看代码实现
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);
//这部分其实是添加了一个白色的纹理像素值，透明度为1.0
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;
}
整体理解起来还是比较简单的。
5、毛刺滤镜
实现原理：撕裂+微弱的颜色偏移；我们让每一行像素都随机偏移-1~1的纹理像素值，如果整个画面偏移比较大，那么画面就会明显的失真，看不出原来的样子。所以可以设置一个阈值，小于这个阈值才进行编码，超过这个阈值进行相应的缩放。
效果，可以看到在x轴方向有部分被撕裂了，并且颜色发生了细微的偏移
毛刺
看代码部分，还是稍微有点复杂的
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
uniform float Time;
const float PI = 3.1415926;
//这个函数式c中获取随机数的
float rand(float n) {
//返回fract(x)的x小数部分
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);
//当前振幅0.0 ~ 1.0
float amplitude = max(sin(time * (PI / duration)), 0.0);
// 当前坐标的y值获取随机偏移值 -1~1
float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;
//判断当前的坐标是否需要偏移
bool needOffset = abs(jitter) < maxJitter * amplitude;
//获取纹理x值，根据是否大于某一个阀值来判断到底在x方向应该偏移多少
float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
//x轴方向进行撕裂之后的纹理坐标
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);
}
看了代码之后代码中的主要思路是：第一设置一个y方向的最大抖动以及最大振幅，并设置一个y方向的振幅阀值，根据y方向的振幅确定最终x方向的最终坐标偏移量；第二个就是纹理颜色的偏移
网友评论