OpenGL ES 常见滤镜处理
图片滤镜实现思路
前提条件：能够用GLSL显示普通图片
思路
初始化（上下文，顶点数组，顶点数据，顶点缓存区，CAEAGLayer,绑定渲染缓存区/帧缓存区，获取图片路径并将图片->纹理，设置视口，link默认着色器）
创建CADisplayLink刷新图片
图片缩放滤镜实现思路
缩放滤镜实际上基本的原理：可以通过修改顶点坐标和纹理坐标的对应关系来实现
缩放滤镜.vsh
//顶点坐标
attribute vec4 Position;
//纹理坐标
attribute vec2 TextureCoords;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮(及时更新)
uniform float Time;
//PI
const float PI = 3.1415926;
void main (void) {
//⼀次缩放效果时⻓ = 0.6ms
float duration = 0.6;
//最⼤缩放幅度
float maxAmplitude = 0.3;
//表示传⼊的时间周期.即time的范围被控制在[0.0~0.6];
//mod(a,b),求模运算. a%b
float time = mod(Time, duration);
//amplitude 表示振幅，引⼊ PI 的⽬的是为了使⽤ sin 函数，将 amplitude 的范围控制在 1.0 ~ 1.3
之间，并随着时间变化
float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
//放⼤关键: 将顶点坐标的 x 和 y 分别乘上⼀个放⼤系数，在纹理坐标不变的情况下，就达到了拉伸的
效果。
//x,y 放⼤; z和w保存不变
gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
////纹理坐标传递给TextureCoordsVarying
TextureCoordsVarying = TextureCoords;
}
灵魂出窍滤镜实现思路
灵魂出窍滤镜：是两个层的叠加，并且上面的那层随着时间的推移，会逐渐放大且不透明度逐渐降低，这里也用到了放大的效果，我们用片段着色器实现。
灵魂出窍滤镜. 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;
//进度(0~1)
float progress = mod(Time, duration) / duration; // 0~1
//透明度(0-0.4)
float alpha = maxAlpha * (1.0 - progress);
//缩放⽐例(1.0 - 1.8)
float scale = 1.0 + (maxScale - 1.0) * progress;
//放⼤纹理坐标
//将顶点坐标对应的纹理坐标的 x 值到纹理中点的距离，缩⼩⼀定的⽐例。这次我们是改变了纹理坐
标，⽽保持顶点坐标不变，同样达到了拉伸的效果
float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
//获取放⼤的纹理坐标
vec2 weakTextureCoords = vec2(weakX, weakY);
//通过上⾯的计算，我们得到了两个纹理颜⾊值 weakMask 和 mask， weakMask 是在 mask 的基
础上做了放⼤处理
4//读取到放⼤后的纹理坐标的纹素的颜⾊值
vec4 weakMask = texture2D(Texture, weakTextureCoords);
//读取原始的纹理坐标对应的纹素的颜⾊值
vec4 mask = texture2D(Texture, TextureCoordsVarying);
//在GLSL 实现颜⾊混合⽅程式.默认颜⾊混合⽅程式 = mask * (1.0 - alpha) + weakMask * alpha
//参考OpenGL 第⼆节课中的颜⾊混合
//计算最终的颜⾊赋值给⽚元着⾊器的内置变量: 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 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);
}
闪白滤镜实现思路
闪白滤镜：添加白色图层，白色图层的透明度随着时间变化
闪⽩滤镜.fsh
precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;
//PI 常量
const float PI = 3.1415926;
void main (void) {
//⼀次闪⽩滤镜的时⻓
float duration = 0.6;
//表示将传⼊的时间转换到⼀个周期内，即 time 的范围是 0 ~ 0.6
float time = mod(Time, duration);
//⽩⾊颜⾊遮罩
vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
//amplitude 表示振幅，引⼊ PI 的⽬的是为了使⽤ sin 函数，将 amplitude 的范围控制在 0.0 ~ 1.0
之间，并随着时间变化
float amplitude = abs(sin(time * (PI / duration)));
//获取纹理坐标对应的纹素颜⾊值
vec4 mask = texture2D(Texture, TextureCoordsVarying);
//利⽤混合⽅程式: 将纹理颜⾊与⽩⾊遮罩融合.
5//注意: ⽩⾊遮罩的透明度会随着时间变化做调整
//我们已经知道了如何实现两个层的叠加.当前的透明度来计算最终的颜⾊值即可。
gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}
毛刺滤镜实现思路
毛刺滤镜：撕裂+微弱的颜色偏移
具体的思路是，我们让每⼀⾏像素随机偏移 -1 ~ 1 的距离（这⾥的 -1 ~ 1 是对于纹理坐标来说的），但是如果整个画⾯都偏移⽐较⼤的值，那我们可能都看不出原来图像的样⼦。所以我们的逻辑是，设定⼀个阈值，⼩于这个阈值才进⾏偏移，超过这个阈值则乘上⼀个缩⼩系数。
则最终呈现的效果是：绝⼤部分的⾏都会进⾏微⼩的偏移，只有少量的⾏会进⾏较⼤偏移
⽑刺滤镜.fsh
precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;
//PI 常量
const float PI = 3.1415926;
//随机数
float rand(float n) {
//fract(x),返回x的⼩数部分
//返回: sin(n) * 43758.5453123
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;
//表示将传⼊的时间转换到⼀个周期内，即 time 的范围是 0 ~ 0.6
float time = mod(Time, duration * 2.0);
//amplitude 表示振幅，引⼊ PI 的⽬的是为了使⽤ sin 函数，将 amplitude 的范围控制在 1.0 ~ 1.3
之间，并随着时间变化
float amplitude = max(sin(time * (PI / duration)), 0.0);
6// -1~1 像素随机偏移范围(-1,1)
float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
//判断是否需要偏移,如果jtter范围< 最⼤抖动*振幅
bool needOffset = abs(jitter) < maxJitter * amplitude;
//获取纹理x 坐标,根据needOffset,来计算它的X撕裂,如果是needOffset = yes 则撕裂⼤;如果
needOffset = no 则撕裂⼩;
float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
//获取纹理撕裂后的x,y坐标
vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
//颜⾊偏移
//获取3组颜⾊: 根据撕裂计算后的纹理坐标,获取纹素的颜⾊
vec4 mask = texture2D(Texture, textureCoords);
//获取3组颜⾊: 根据撕裂计算后的纹理坐标,获取纹素的颜⾊
vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
//获取3组颜⾊: 根据撕裂技术后的纹理坐标,获取纹素颜⾊
vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
//颜⾊主要撕裂: 红⾊和蓝⾊部分.所以只调整红⾊
gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}
幻觉滤镜实现思路
幻觉滤镜：残影和颜色偏移的叠加
残影的效果: 是在移动的过程中，每经过⼀段时间间隔，根据当前的位置去创建⼀个新层，并且新层的不透明度随着时间逐渐减弱。于是在⼀个移动周期内，可以看到很多透明度不同的层叠加在⼀起，从⽽形成残影的效果。残影,让图⽚随着时间做圆周运动
颜⾊偏移: 物体移动的过程是蓝⾊在前⾯，红⾊在后⾯。所以整个过程可以理解成：在移动的过程中，每间隔⼀段时间，遗失了⼀部分红⾊通道的值在原来的位置，并且这部分红⾊通道的值，随着时间偏移，会逐渐恢复.
幻觉滤镜.fsh
precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;
//PI 常量
const float PI = 3.1415926;
//⼀次幻觉滤镜的时⻓
const float duration = 2.0;
7//这个函数可以计算出，在某个时刻图⽚的具体位置。通过它我们可以每经过⼀段时间，去⽣成⼀个新的
层
vec4 getMask(float time, vec2 textureCoords, float padding) {
//圆周坐标
vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),
cos(time * (PI * 2.0 / duration)));
//纹理坐标 = 纹理坐标+偏离量 * 圆周坐标
vec2 translationTextureCoords = textureCoords + padding * translation;
//根据这个坐标获取新图层的坐标
vec4 mask = texture2D(Texture, translationTextureCoords);
return mask;
}
//这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度。
float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
//duration+currentTime-startTime % duration
float time = mod(duration + currentTime - startTime, duration);
return min(time, hideTime);
}
void main (void) {
//表示将传⼊的时间转换到⼀个周期内，即 time 的范围是 0 ~ 2.0
float time = mod(Time, duration);
//放⼤倍数
float scale = 1.2;
//偏移量
float padding = 0.5 * (1.0 - 1.0 / scale);
//放⼤后的纹理坐标
vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
//隐藏时间
float hideTime = 0.9;
//时间间隔
8float timeGap = 0.2;
//注意: 只保留了红⾊的透明的通道值,因为幻觉效果残留红⾊.
//新图层的-R⾊透明度 0.5
float maxAlphaR = 0.5; // max R
//新图层的-G⾊透明度 0.05
float maxAlphaG = 0.05; // max G
//新图层的-B⾊透明度 0.05
float maxAlphaB = 0.05; // max B
//获得新的图层坐标!
vec4 mask = getMask(time, textureCoords, padding);
float alphaR = 1.0; // R
float alphaG = 1.0; // G
float alphaB = 1.0; // B
//最终图层颜⾊
vec4 resultMask = vec4(0, 0, 0, 0);
//循环
for (float f = 0.0; f < duration; f += timeGap) {
float tmpTime = f;
//获取到0-2.0秒内所获取的运动后的纹理坐标
vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
//某个时刻创建的层，在当前时刻的红绿蓝的透明度
float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime,
tmpTime) / hideTime;
float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime,
tmpTime) / hideTime;
float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime,
tmpTime) / hideTime;
//累积每⼀层每个通道乘以透明度颜⾊通道
resultMask += vec4(tmpMask.r * tmpAlphaR,
tmpMask.g * tmpAlphaG,
tmpMask.b * tmpAlphaB,
1.0);
//透明度递减
9alphaR -= tmpAlphaR;
alphaG -= tmpAlphaG;
alphaB -= tmpAlphaB;
}
//最终颜⾊ += 红绿蓝 * 透明度
resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
//将最终颜⾊填充到像素点⾥.
gl_FragColor = resultMask;
}
