OpenGLES(七)使用GLSL实现滤镜效果之动态滤镜

普通图片加载的顶点着色器和片元着色器代码如下：
顶点着色器：

//顶点坐标
attribute vec4 Position;
//纹理坐标
attribute vec2 TextureCoords;
//需要传入片元着色器的纹理坐标
varying vec2 TextureCoordsVarying;

void main (void) {
   
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

片元着色器：

//声明高精度float
precision highp float;
//纹理
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;

void main (void) {
   
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

1. 缩放效果

分析：图片有一个放大的过程，然后再回弹，那么就可以通过修改顶点坐标和纹理坐标的对应关系来实现。
修改顶点坐标和纹理坐标，既可以在顶点着色器实现，也可以在片元着色器上实现，此次效果在顶点着色器上实现。
顶点着色器：

//顶点坐标
 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;

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;
    
    //当前时间的进度 0-1
    float progress = mod(Time, d