OpenGL ES之放大幻影等6种滤镜

  这篇文章我们继续讲述OpenGL ES案例，更加深入的了解GSLS语言自定义着色器。基础框架的搭建可以参考之前的文章OpenGL ES 案例之马赛克滤镜。然后我们自定义6种着色器，来实现缩放+灵魂出窍+抖动+闪白+毛刺+幻觉效果。

缩放滤镜

原理：通过修改顶点坐标和纹理坐标的对应关系来实现。

  • 通过mod取模函数计算当前时间戳对应的时间周期
  • 通过sin函数来计算顶点的放大倍数，来控制振幅的范围是[1.0, 1.3]
  • 计算顶点坐标按照振幅缩放后的坐标
    顶点着色器 
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//时间戳（随着定时器的方法调用及时更新）:从0开始一直递增
uniform float Time;
const float PI = 3.1415926;

void main(){
    //一次缩放效果的时长
    float duration = 0.6;
    //最大缩放幅度
    float maxAmplitude = 0.3;
    
    //表示传入的事件周期，即time的范围被控制在0.0~0.6
    //mod(a, b)，求模运算 等价于 a%b，GLSL中不支持%求模
    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分别乘以一个放大系数，即振幅，在纹理坐标不变的情况下，就达到了拉伸的效果
    //xy放大，zw保持不变
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    
    //纹理坐标传递给TextureCoordsVarying，传入片元着色器
    TextureCoordsVarying = TextureCoords;
}

注：我们在这里修改的是图片的顶点映射关系来实现缩放的效果，同样的我们也可以在片元着色器中来实现相同的效果。

灵魂出窍滤镜
灵魂出窍.gif

原理：灵魂出窍是两个图层的叠加，我们控制一个图层的变化放大，且透明度逐渐降低。

  • 根据当前时间戳计算当前周期在一个周期时长中的百分比，即进度
  • 计算当前进度对应的透明度
  • 计算当前进度对应的缩放比例
  • 获取放大后的纹理坐标
  • 将当前纹理和放大后的纹理进行颜色混合
    片元着色器 
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;
    
    //当前进度（时间戳与时长使用mod取模）,再除以时长 得到【0， 1】，即百分比
    float progress = mod(Time, duration) / duration; // 0~1
    //当前透明度 【0.4， 0】
    float alpha = maxAlpha * (1.0 - progress);
    //当前缩放比例 【1.0， 1.8】
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //获取放大后的纹理坐标
    //将顶点坐标对应的纹理坐标的x/y值到中心点的距离，缩小一定的比例，仅仅只是改变了纹理坐标
    //而保持顶点坐标不变，从而达到拉伸效果
    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);
    //2、颜色混合 内建函数mix / 混合方程式
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}
抖动滤镜
抖动.gif

原理：纹理放大+颜色偏移。

  • 根据当前时间戳计算当前进度的百分比
  • 计算当前进度对应的颜色偏移
  • 计算当前进度对应的缩放比例
  • 获取放大后的纹理坐标
  • 将放大后的纹理纹素进行颜色偏移，获得3组颜色
  • 从3组颜色中分别获取RGBA的值
片元着色器代码
precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;
void main(){
    //一次抖动效果的时长
    float duration = 0.7;
    //放大图片的上限
    float maxScale = 1.1;
    //颜色偏移的步长
    float offset = 0.02;
    
    //进度 0 ~ 1
    float progress = mod(Time, duration) / duration;
    //颜色偏移值0 ~ 0.02
    vec2 offsetCoords = vec2(offset, offset) * progress;
    //缩放比例 1.0 ~ 1.1
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //放大后的纹理坐标 
    //下面这种向量相加减的方式 等价于 灵魂出窍滤镜中的单个计算x、y坐标再组合的为纹理坐标的方式
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //获取三组颜色：颜色偏移计算可以随意，只要偏移量很小即可
    //原始颜色 + offset
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    //原始颜色 - offset
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    //原始颜色
    vec4 mask = texture2D(Texture, ScaleTextureCoords);

    //从3组颜色中分别取出 红色R，绿色G，蓝色B，透明度A填充到内置变量gl_FragColor内
    gl_FragColor = vec4(maskR.r, maskB.g, mask.b, mask.a);
}
闪白滤镜
闪白.gif

原理：添加一个白色的图层，然后让白色的图层随着时间的变化透明度发生变化。

  • 通过mod函数计算当前时间戳对应的时间周期
  • 设置一个白色遮罩
  • 计算白色遮罩的振幅，振幅范围是[0,0, 1.0]
  • 获取原图纹理的纹素，并与白色遮罩颜色混合
  • 颜色混合的方式有多种，常用的一般是mix函数或者默认的混合方程式：mask(1-alpha + weakMaskalpha
片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//时间戳
uniform float Time;
//PI常量
const float PI = 3.1415926;

void main(){
    //一次闪白的时长
    float duration = 0.6;
    //将时间戳转换到一个周期内，范围是0 ~ 0.6
    float time = mod(Time, duration);
    //白色遮罩
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    // 振幅，范围是0 ~ 1
//    float amplitude = abs(sin(time * (PI / duration)));
    float amplitude = sin(time * (PI / duration));
    
   //获取纹理坐标对应的纹素颜色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //利用mix内置函数进行颜色混合，属于线性混合
    gl_FragColor = mix(mask, whiteMask, amplitude);
}
毛刺滤镜
毛刺.gif

原理：具体的思路是，我们让每⼀⾏像素随机偏移 （-1~1） 的距离（这⾥的 -1 ~ 1 是对于纹理坐标来说的），但是如果整个画⾯都偏移⽐较⼤的值，那我们可能都看不出原来图像的样⼦。所以我们的逻辑是，设定⼀个阈值，⼩于这个阈值才进⾏偏移，超过这个阈值则乘上⼀个缩⼩系数。则最终呈现的效果是：绝⼤部分的⾏都会进⾏微⼩的偏移，只有少量的⾏会进⾏较⼤偏移。

  • mod函数计算时间周期
  • 计算振幅，范围是[0, 1]
  • 获取像素点随机偏移值，范围是[-1,1]，判断是否需要偏移 & 计算纹理的x坐标，需要偏移，撕裂较大，即x的颜色偏移较大
  • 不需要，撕裂较小，即x的颜色偏移值很微小
  • 获取撕裂后的纹理坐标
  • 计算撕裂后的3组纹素，并获取不同组中的RGBA值
    片元着色器代码 
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的小数部分
    //返回 sin(n) * 43758.564236482638
    //sin(n) * 极大值，带小数点，想要随机数算的比较低，乘的数就必须较大，噪声随机
    //如果想得到【0，1】范围的小数值，可以将sin * 1
    //如果只保留小数部分，乘以一个极大值
    return fract(sin(n) * 43758.5453123);
}

void main(){
    //最大抖动上限
    float maxJitter = 0.06;
    //一次毛刺效果的时长
    float duration = 0.3;
    //红色颜色偏移
    float colorROffset = 0.01;
    //绿色颜色偏移
    float colorBOffset = -0.025;
    
    //表示将传入的事件转换到一个周期内，范围是 0 ~ 0.6，抖动时长变成0.6
    float time = mod(Time, duration * 2.0);
    //振幅，随着时间变化，范围是[0, 1]                                                                             
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //像素随机偏移范围 -1 ~ 1，* 2.0 - 1.0是为了得到【-1，1】范围内的随机值
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;
    //判断是否需要偏移，如果jitter范围 < 最大范围*振幅
    // abs(jitter) 范围【0，1】
    // maxJitter * amplitude 范围【0， 0.06】
    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);
}
幻觉滤镜
幻觉.gif

原理：残影和颜色偏移的叠加
残影的效果: 是在移动的过程中，每经过⼀段时间间隔，根据当前的位置去创建⼀个新层，并且新层的不透明度随着时间逐渐减弱。于是在⼀个移动周期内，可以看到很多透明度不同的层叠加在⼀起，从⽽形成残影的效果。残影,让图⽚随着时间做圆周运动
颜⾊偏移: 物体移动的过程是蓝⾊在前⾯，红⾊在后⾯。所以整个过程可以理解成：在移动的过程中，每间隔⼀段时间，遗失了⼀部分红⾊通道的值在原来的位置，并且这部分红⾊通道的值，随着时间偏移，会逐渐恢复

  • 通过mod函数计算当前时间周期
  • 设置放大倍数
  • 计算放大后的纹理坐标
  • 获取转全过程中像素点的纹素
  • 通过for循环来新建图层，即幻影颜色
  • 获取由原始图层和新建层叠加的颜色
片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
//一次幻觉效果的时长，即周期
const float duration = 2.0;

//这个函数可以计算出，在某个时刻图片的具体位置，通过它可以每经过一段时间，去生成一个新的mask
//转圈产生幻影的单个像素点的颜色值
vec4 getMask(float time, vec2 textureCoords, float padding) {
   //圆心坐标
    vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),cos(time * (PI * 2.0 / duration)));
    
    //新的纹理坐标 = 原始纹理坐标 + 偏移量 * 圆周坐标（新的图层与图层之间是有间距的，所以需要偏移）
    vec2 translationTextureCoords = textureCoords + padding * translation;
    
    //根据新的纹理坐标获取新图层的纹素
    vec4 mask = texture2D(Texture, translationTextureCoords);
    
    return mask;
}

//这个函数可以计算出，某个时刻创建的层，在当前时刻的透明度
//进度：
float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
//mod（时长+持续时间 - 开始时间，时长）得到一个周期内的time
    float time = mod(duration + currentTime - startTime, duration);
    //如果小于0.9，返回time，反之，返回0.9
    return min(time, hideTime);
}

void main(){
    //将传入的时间戳转换到一个周期内，time的范围是【0，2】
    //获得时间周期
    float time = mod(Time, duration);
    //放大后的倍数
    float scale = 1.2;
    //偏移量 = 0.083
    float padding = 0.5 * (1.0 - 1.0 / scale);
    //放大后的纹理坐标
    vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //新建层的隐藏时间 即新建层什么时候隐藏 
    float hideTime = 0.9;
    //时间间隔：隔0.2s创建一个新层
    float timeGap = 0.2;
    
    //注意：只保留了红色的透明的通道值，因为幻觉效果残留红色
    //幻影残留数据
    //max RGB alpha
    //新图层的 R透明度
    float maxAlphaR = 0.5;
    //新图层的 G透明度
    float maxAlphaG = 0.05;
    //新图层的 B透明度
    float maxAlphaB = 0.05;
    
    //获取新的图层的坐标，需要传入时间、纹理坐标、偏移量
    vec4 mask = getMask(time, textureCoords, padding);
    //RGB ：for循环中使用
    float alphaR = 1.0;
    float alphaG = 1.0;
    float alphaB = 1.0;
    
    //最终图层颜色：初始化
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    //循环：每一层循环都会得到新的图层的颜色，即幻影颜色
    //一次循环只是计算一个像素点的纹素，需要在真机运行。模拟器会卡，主要是模拟器上是CPU模拟GPU的
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        //获取到【0，2】s内所获取的运动后的纹理坐标
        //获得幻影当前时间的颜色值
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //某个时刻创建的层，在当前时刻的红绿蓝的透明度
        //临时的透明度 = 根据时间推移RGB的透明度发生变化
        //获得临时的红绿蓝透明度
        float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        
        //累计每一层临时RGB * RGB的临时透明度
        //结果 += 临时颜色 * 透明度，即刚产生的图层的颜色
        resultMask += vec4(tmpMask.r * tmpAlphaR,tmpMask.g * tmpAlphaG,tmpMask.b * tmpAlphaB,1.0);
                           
        //透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    
    //最终颜色 += 原始纹理的RGB * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
    
    //将最终颜色填充到像素点里
    gl_FragColor = resultMask;
}

完整Demo

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