本文将详细讲解如何使用OpenGL ES实现缩放，灵魂出窍，抖动，闪白，毛刺，幻觉等动态滤镜实现
其实动态滤镜是在加载图片的基础上增加定时器，修改顶点着色器或片元着色器来实现的
使用OpenGL ES加载图片请移步juejin.cn/post/701290…
1.缩放效果
可以使用顶点着色器也可以使用片元着色器实现，在这里我们使用顶点着色器实现，缩放效果本质就是随着时间不停修改顶点的位置坐标来实现的（相对坐标）
**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.5;
**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;
}
3.抖动效果，抖动效果是在原纹理的基础上进行位移及颜色值的混合来实现的，所以需要修改片元着色器
**precision** **highp** **float**;
**uniform** **sampler2D** Texture;
**varying** **vec2** TextureCoordsVarying;
**uniform** **float** Time;
**void** main (**void**) {
**float** duration = 0.6;
**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);
}
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);
**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;
}
更多效果请下载源码查看
