OpenGL ES入门：滤镜篇 - 缩放、灵魂出窍、抖动等

系列推荐文章（基础篇）：
OpenGL/OpenGL ES入门：图形API以及专业名词解析
OpenGL/OpenGL ES入门：渲染流程以及固定存储着色器
OpenGL/OpenGL ES入门：图像渲染实现以及渲染问题
OpenGL/OpenGL ES入门：基础变换 - 初识向量/矩阵
OpenGL/OpenGL ES入门：纹理初探 - 常用API解析
OpenGL/OpenGL ES入门： 纹理应用 - 纹理坐标及案例解析(金字塔)
OpenGL/OpenGL ES入门： 顶点着色器与片元着色器（OpenGL过渡OpenGL ES）
OpenGL/OpenGL ES入门： GLKit以及API简介
OpenGL/OpenGL ES入门： GLKit使用以及案例
OpenGL/OpenGL ES入门： 使用OpenGL ES 渲染图片
OpenGL/OpenGL ES入门：iOS纹理翻转策略解析
OpenGL ES入门： 渲染金字塔 - 颜色、纹理、纹理与颜色混合填充以及GLKit实现
OpenGL ES入门： 滤镜篇 - 分屏滤镜
OpenGL ES入门：滤镜篇 - 漩涡、马赛克

相对上一篇OpenGL ES入门：滤镜篇 - 漩涡、马赛克的滤镜来说，这篇文章中的滤镜的实现要简单很多，因为没有了那么多要计算的，而且效果也比较酷炫一点，进入正题。

缩放滤镜

效果图：

顶点着色器代码：

// 顶点坐标
attribute vec4 Position;
// 纹理坐标
attribute vec2 TextureCoords;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间撮(及时更新)
uniform float Time;
const float PI = 3.1415926;

void main (void) {
   
    // 一次缩放效果时长 0.6
    float duration = 0.6;
    // 最大缩放幅度
    float maxAmplitude = 0.3;
    
    // 表示时间周期.范围[0.0~0.6];
    float time = mod(Time, duration);
    
    // amplitude [1.0,1.3]
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    // 顶点坐标x/y 分别乘以放大系数[1.0,1.3]
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
   
    // 纹理坐标
    TextureCoordsVarying = TextureCoords;
}
复制代码

前面两篇文章的滤镜都是通过自定义片元着色器来实现的，而这里使用的是顶点着色器。 实现的原理就是通过顶点坐标和纹理坐标的映射关系完成。

上面代码中，通过uniform传入一个时间Time，来改变放大系数。

灵魂出窍滤镜

效果图：

片元着色器代码：

precision highp float;
// 纹理采样器
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间撮
uniform float Time;

void main (void) {
    // 一次灵魂出窍效果的时长 0.7
    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;
    
    // 放大纹理坐标
    // 根据放大比例，得到放大纹理坐标 [0,0],[0,1],[1,1],[1,0]
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    // 放大纹理坐标
    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    // 获取对应放大纹理坐标下的纹素(颜色值rgba)
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
   
    // 原始的纹理坐标下的纹素(颜色值rgba)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    // 颜色混合 默认颜色混合方程式 = mask * (1.0-alpha) + weakMask * alpha;
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}
复制代码

解析：
灵魂出窍的效果，是通过两个图层叠加实现的，下面那层显示原图，上面的那层随着时间的推动，会逐渐放大且不透明度逐渐降低，运用到了上面的放大滤镜效果。这里使用片元着色器实现。

抖动滤镜

效果图：

片元着色器代码：

precision highp float;
// 纹理
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间撮
uniform float Time;

void main (void) {
    // 一次抖动滤镜的时长 0.7
    float duration = 0.7;
    // 放大图片上限
    float maxScale = 1.1;
    // 颜色偏移步长
    float offset = 0.02;
    
    // 进度[0,1]
    float progress = mod(Time, duration) / duration; // 0~1
    // 颜色偏移值范围[0,0.02]
    vec2 offsetCoords = vec2(offset, offset) * progress;
    // 缩放范围[1.0-1.1];
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    // 放大纹理坐标.
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    // 获取3组颜色rgb
    // 原始颜色+offsetCoords
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    // 原始颜色-offsetCoords
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    // 原始颜色
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    // 从3组来获取颜色:
    // maskR.r,mask.g,maskB.b 注意这3种颜色取值可以打乱或者随意发挥.不一定写死.只是效果会有不一样.大家可以试试.
    // mask.a 获取原图的透明度
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}
复制代码

实现原理也很简单：颜色偏移 + 微弱的放大效果

闪白滤镜

效果图：

片元着色器代码：

precision highp float;
// 纹理采样器
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间撮
uniform float Time;

void main (void) {
    // 一次闪白滤镜的时长 0.6
    float duration = 0.6;
    // 表示时间周期[0.0,0.6]
    float time = mod(Time, duration);
    // 白色颜色遮罩层
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    // 振幅: (0.0,1.0)
    float amplitude = abs(sin(time * (PI / duration)));
    // 纹理坐标对应的纹素(RGBA)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    // 利用混合方程式; 白色图层 + 原始纹理图片颜色 来进行混合
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}
复制代码

实现原理：添加白色图层，白色图层的透明度随着时间变化

毛刺滤镜

效果图：

片元着色器代码：

precision highp float;
// 纹理
uniform sampler2D Texture;
// 纹理坐标
varying vec2 TextureCoordsVarying;
// 时间撮
uniform float Time;
// 随机数
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;
    
    // 时间周期[0.0,0.6];
    float time = mod(Time, duration * 2.0);
    // 振幅:[0,1];
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    // 像素随机偏移[-1,1]
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    
    // 是否要做偏移.
    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);
    // 撕裂后的纹理颜色偏移
    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);
}
复制代码

解析：
让每一行/列像素随机偏移-1～1的距离，这里设定一个阈值，繁殖整个画面都偏移，导致看不出原图的样子，当偏移小于这个阈值才进行偏移，超过这个阈值则乘上一个缩小系数。 最终的呈现效果便如上面效果图所示。

这几种滤镜比较简单，可以通过uniform传值，来控制上面的效果，有兴趣的小伙伴可自行尝试

转载于:https://juejin.im/post/5d186dbc6fb9a07f04205dd9