上文OpenGL ES之滤镜处理(2)_灰度滤镜与马赛克滤镜 - 简书讲述了灰度滤镜与马赛克滤镜，本文介绍关于动效滤镜的处理。
缩放滤镜
通过修改顶点坐标与纹理坐标的对应关系实现图片缩放的效果。
原理
根据每一次缩放效果的时长duration，以及顶点放大的倍数maxAmplitude，获取当前缩放进度time以及振幅amplitude，计算出新的顶点坐标。
顶点着色器代码
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;
}
灵魂出窍滤镜
是两个层的叠加，并且上⾯的那层随着时间的推移，会逐渐放⼤且不透明度逐渐降低。
原理
根据每一次效果的时长duration、透明度的上限值maxAlpha、图片放大的比例maxScale，获取当前进度progress、透明度alpha以及放大比例scale，计算出放大的纹理坐标weakTextureCoords与当前纹理坐标进行颜色混合。
片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
uniform float Time;
void main (void) {
float duration = 0.6;
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;
}
抖动滤镜
颜⾊偏移 + 微弱的放⼤效果
原理
根据每一次效果的时长duration、图片放大的比例maxScale，颜色的偏移大小offset，获取当前进度progress、偏移offsetCoords，以及放大比例scale，计算出放大的纹理坐标ScaleTextureCoords，获取放大后的纹理坐标的偏移颜色。
片元着色器代码
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);
}
闪白滤镜
添加⽩⾊图层 ,⽩⾊图层的透明度随着时间变化
片元着色器代码
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);
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;
}
毛刺滤镜
撕裂 + 微弱的颜⾊偏移
原理
让每⼀⾏像素随机偏移 -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);
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);
}
幻觉滤镜
残影和颜⾊偏移的叠加
原理
-
残影的效果
是在移动的过程中，每经过⼀段时间间隔，根据当前的位置去创建⼀个新层，并且新层的不透明度随着时间逐渐减弱。于是在⼀个移动周期内，可以看到很多透明度不同的层叠加在⼀起，从⽽形成残影的效果。残影,让图⽚随着时间做圆周运动。
-
颜⾊偏移
物体移动的过程是蓝⾊在前⾯，红⾊在后⾯。所以整个过程可以理解成：在移动的过程中，每间隔⼀段时间，遗失了⼀部分红⾊通道的值在原来的位置，并且这部分红⾊通道的值，随着时间偏移，会逐渐恢复。
片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
uniform float Time;
const float PI = 3.1415926;
const float duration = 2.0;
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) {
float time = mod(duration + currentTime - startTime, duration);
return min(time, hideTime);
}
void main (void) {
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;
float timeGap = 0.2;
float maxAlphaR = 0.5; // max R
float maxAlphaG = 0.05; // max G
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;
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);
alphaR -= tmpAlphaR;
alphaG -= tmpAlphaG;
alphaB -= tmpAlphaB;
}
resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
gl_FragColor = resultMask;
}
网友评论