10-OpenGL ES 缩放/灵魂出窍/抖动/闪白/毛刺效果滤镜

注：便于解读，以下代码均有注释，实际场景中运行失败去掉注释即可。

一、缩放效果滤镜

缩放效果

缩放效果滤镜，改变顶点坐标/纹理坐标映射关系，顶点着色器代码：

//顶点坐标/纹理坐标映射关系.放大?
//放大过程. 顶点着色器完成.

//顶点坐标
attribute vec4 Position;
//纹理坐标
attribute vec2 TextureCoords;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间戳(及时更新)
uniform float Time;
//PI
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;
}

二、灵魂出窍效果滤镜

灵魂出窍

灵魂出窍滤镜:
是两个层的叠加，并且上面的那层随着时间的推移，会逐渐放大且不透明度逐渐降低。这里也用到了放大的效果，用片段着色器来实现：

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;
    
    //1.放大纹理坐标
    //根据放大笔记.得到放大纹理坐标 [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;
//PI 常量
const float PI = 3.1415926;

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;
}

五、毛刺效果滤镜

毛刺效果

毛刺滤镜: 撕裂 + 微弱的颜色偏移
具体的思路是，我们让每一行像素随机偏移 -1 ~ 1 的距离（这里的 -1 ~ 1 是对于纹理坐标来说的），但是如果整个画面都偏移比较大的值，那我们可能都看不出原来图像的样子。所以我们的逻辑是，设定一个阈值，小于这个阈值才进行偏移，超过这个阈值则乘上一个缩小系数。则最终呈现的效果是：绝大部分的行都会进行微小的偏移，只有少量的行会进行较大偏移。
片元着色器代码：

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

//随机数
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);
}

代码下载👉https://github.com/SPIREJ/OpenGLES_GLSL

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354