效果图
流程逻辑
详细解析参照 ：OpenGL 分屏滤镜
滤镜算法
缩放
-
原理 ：随着时间戳改变放大顶点坐标的倍率
-
顶点着色器算法流程：
- 定义缩放效果的周期0.6ms和最大放大幅度1.3倍
- 用当前时间戳对周期取模，计算当前时间处于效果周期的哪个阶段
- 计算振幅倍率amplitude
- 将顶点x,y乘以放大倍率amplitude作为新顶点
-
振幅计算 用sin函数控制变化曲线, sin(time/ duration * PI )
amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)))的变化曲线如下：
- 缩放原理
正常显示对应关系如下
放大1.3倍后显示的对应关系为：
- 顶点着色Scale.vsh
灵魂出窍
-
原理 片元着色器中实现算法：两个层的叠加，并且上面的那层随着时间的推移，会逐渐放大且不透明度逐渐降低
-
片元色器算法流程：
- 定义一次效果时长0.7，叠加层最大透明度，叠加层最大的放大倍率
- 计算叠加层当前时间下在周期变化的进度 progress = mod(Time, duration) / duration
- 计算当前时间下的叠加层的透明度、放大倍率
- 计算缩小后的纹理坐标
- 获取叠加层的纹素和原纹素
- 将原纹理和放大后的纹理进行颜色混合
-
放大原理 将顶点坐标对应的纹理往中心位置靠拢 不放大时纹理映射关系如下：
放大1.3倍时的纹理映射关系如下：
-
片元着色器 SoulOut.fsh
抖动
-
原理 片元着色器中 颜⾊偏移 + 微弱的放大效果
-
片元着色器算法：
- 根据当前时间戳计算当前进度的百分比
- 计算当前进度对应的颜色偏移
- 计算当前进度对应的缩放比例
- 获取放大后的纹理坐标
- 将放大后的纹理纹素进行颜色偏移，获得3组颜色
- 从3组颜色中分别获取RGBA的值
-
片元着色器 Shake.fsh
闪白
- 原理
片元着色器 ：添加⽩色图层 ,⽩色图层的透明度随着时间变化
-
片元着色器算法
-
通过mod函数计算当前时间戳对应的时间周期
-
设置一个白色遮罩
-
计算白色遮罩的振幅，振幅范围是[0,0, 1.0]
-
获取原图纹理的纹素，并与白色遮罩颜色混合
-
颜色混合的方式有多种，常用的一般是mix函数或者默认的混合方程式：mask*(1-alpha) + weakMask*alpha
-
-
片元着色器 ShineWhite.fsh
毛刺
-
原理 : 撕裂 + 微弱的颜⾊偏移
每⼀行像素随机偏移 -1 ~ 1 的距离(这⾥的 -1 ~ 1 是对于纹理坐标来说的)，但是如果整个画面都偏移⽐较⼤的值，那我们可能都看不出原来图像的样子。所以我们的逻辑是，设定一个阈值，小于这个阈值才进行偏移，超过这个阈值则乘上一个缩小系数。
最终呈现的效果是:绝大部分的⾏都会进⾏行微⼩的偏移，只有少量的行会进行较大偏移
-
片元着色器算法步骤
- mod函数计算时间周期
- 计算振幅，范围是「0, 1]
- 获取像素点随机偏移值，范围是[-1,1]
- 判断是否需要偏移 & 计算纹理的x坐标
- 需要偏移，撕裂较大，即x的颜色偏移较大
- 不需要，撕裂较小，即x的颜色偏移值很微小
- 获取撕裂后的纹理坐标
- 计算撕裂后的3组纹素，并获取不同组中的RGBA值
-
片元着色器 Glitch.fsh
幻觉
-
原理 :残影和颜⾊色偏移的叠加
残影的效果: 是在移动的过程中，每经过一段时间间隔，根据当前的位置去创建⼀个新层，并且新层的不透明度随着时间逐渐减弱。于是在一个移动周期内，可以看到很多透明度不同的层叠加在一起，从⽽形成残影的效果。残影,让图片随着时间做圆周运动
颜⾊偏移: 物体移动的过程是蓝⾊在前面，红色在后面。所以整个过程可以理解成:在移动的过程中，每间隔一段时间，遗失了一部分红⾊通道的值在原来的位置，并且这部分红⾊通道的值，随着时间偏移，会逐渐恢复.
-
片元着色器算法
- 通过mod函数计算当前时间周期
- 设置放大倍数
- 计算放大后的纹理坐标
- 获取转全过程中像素点的纹素
- 通过for循环来新建图层，即幻影颜色
- 获取由原始图层和新建层叠加的颜色
-
片元着色器 Vertigo.fsh