OpenGLES 缩放、幻觉、毛刺滤镜效果

滤镜效果.gif

案例demo

1、缩放效果

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

实现原理

  • 设定缩放的时间周期。float duration = 0.6
    由于传入的时间参数是时间戳，一直增长。通过mod求余函数，对duration求余。可以将时间限制在0.6以内不断循环的时间周期时间周期图1。

    时间周期图1

  • 设定缩放的振幅(最大放大多少，最小缩小多少)
    这里使用正弦函数sin的值域在[-1,1]范围内周期变化的特性。来设置纹理振幅的周期性变化


    振幅
  • 纹理坐标乘以设置的振幅，实现纹理坐标的放大和缩小
    顶点着色器代码实现
attribute vec4 position;
attribute vec2 textureCoord;
varying lowp vec2 textureCoordVarying;

uniform float Time;//时间参数
const float PI = 3.1415926;

void main(){
    
    float duration = 0.6;//时间周期(一次缩放效果的时长)
    float maxAmplitude = 0.3;最大缩放幅度(振幅)
    
    //mod 求余函数 将时间对duration取余。
   //将时间变换成0.6以内循环的时间周期[0,0.6)
    float time = mod(Time,duration);

    //amplitude振幅
   // 引入sin函数为了得到[0,1]循环变化的值域。将的到循环变化的振幅值
   // sin函数值域[-1,1],abs 取绝对值将值域变成[0,1]
  //振幅范围[1, 1+ maxAmplitude];
    float amplitude = maxAmplitude * abs(sin(time * (PI / duration))) + 1.0;
    
    textureCoordVarying = textureCoord;
   // 将顶点坐标xy乘以放大系数(振幅)，在纹理坐标不变的情况。就达到了缩放效果
    //将顶点坐标x，y进行缩放变化，zw保持不变
    gl_Position = vec4(position.x * amplitude,position.y * amplitude,position.zw);
}

2、灵魂出窍

实现原理：两个层叠加。并且上面一层随时间逐渐放大、透明度逐渐降低。

灵魂出窍

实现步骤

  • 设置时间周期duration，mod求余将时间戳变换值duration内的循环的时间周期time = mod(Time,duration)。
  • 获取当前时间时时间周期内进度(占比)。progress =time/duration
  • 透明度岁进度降低alpha = 1 - progress,可以设置透明度变换的上限值alpha = (1 - progress) * maxAlpha
  • 纹理坐标的放大
    设置图片放大的上限 maxScale = 1.8
    设置缩放比例scale = 1.0 +(maxScale - 1) * progress
  • 获取放大后的纹理坐标、放大后纹理坐标的纹素
  • 原纹理和放大后的纹理进行颜色混合，赋值gl_FragColor
    放大后的纹理weakMask(在mask的基础上做了放大处理) ,原纹理mask
    GLSL颜色混合方程式=mask * (1- alpha) + weakMask * alpha
alpha、scale变换

纹理坐标的变换

片元着色器中实现

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
void main(){
    
    float duration = 0.7;//时间周期
    float maxAlpha = 0.4;//透明度上限
    float maxScale = 1.8;//放大倍数上限
    
   //时间周期内的进度
    float progress = mod(Time, duration) / duration; // 0~1
    //该时间进度下的透明度
    float alpha = maxAlpha * (1.0 - progress);
    //该时间进度下的缩放比例
    float scale = 1.0 + (maxScale - 1.0) * progress;
    //纹理缩放变换后的纹理坐标
   // 将像素点的纹理坐标x、y到纹理中点的距离进行缩放(放大)，保持顶点坐标不变，达到向四周拉伸的效果
    float weakX = 0.5 + (textureCoordVarying.x - 0.5) / scale;
    float weakY = 0.5 + (textureCoordVarying.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);
    //纹理缩放变换的纹素
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    //原纹理的纹素
    vec4 mask = texture2D(Texture, textureCoordVarying);
    //颜色混合
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

3、抖动滤镜

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

抖动滤镜

实现步骤

  • 设置时间周期、进度、缩放比例
  • 计算当前进度下颜色偏移、缩放比例
  • 获取放大后的纹理坐标的纹素、放大后的纹理颜色偏移后的纹素
  • 从放大的纹素、偏移的纹素获取RGBA，赋值gl_FragColor
precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
void main(){
    float duration = 0.7;
    float maxScale = 1.1;
   //颜色偏移步长
    float offset = 0.02;
    
    float progress = mod(Time, duration) / duration; // 0~1

    //颜色偏移值(0,0.02)
    vec2 offsetCoords = vec2(offset, offset) * progress;

    float scale = 1.0 + (maxScale - 1.0) * progress;
    //放大后的纹理坐标
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (textureCoordVarying - vec2(0.5, 0.5)) / scale;
 
    //放大后的纹理纹素进行颜色偏移 + offsetCoords
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
   //放大后的纹理纹素进行颜色偏移 - offsetCoords
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
   // 放大后纹理坐标的纹素
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
   
    // 从3组颜色中取出RGBA颜色值，赋值gl_FragColor 
   // 也可以值取一个纹素偏移值和不发生偏移的纹素。方便观察纹素偏移现象。
   //  gl_FragColor = vec4(maskR.r, mask.g, maskR.b, mask.a);
   //  gl_FragColor = vec4(maskB.r, mask.g, maskB.b, mask.a);
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

4、闪白滤镜

实现原理:添加白色图层，白色图层随时间透明度进行变化。

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
const float PI = 3.1415926;
void main(){
   //时间周期
    float duration = 0.6;
    
    float time = mod(Time, duration);
    
   //定义白色颜色遮照
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
   //振幅(缩放滤镜相同)
    float amplitude = abs(sin(time * (PI / duration)));
    //纹理坐标纹素
    vec4 mask = texture2D(Texture, textureCoordVarying);
    //颜色混合。白色遮照的透明度时间变化
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

5、毛刺滤镜

实现原理:撕裂 + 微弱的颜色偏移。让每一行像素随机偏移-1~1的距离（相对纹理坐标而言)。但是如果正画面都偏移比较大的值，可能看不出原图片的样子。所以设定一个阀值，小于阀值的进行偏移，大于的乘上一个缩小系数。最终绝大部分行都会进行微小偏移，只有少量的行进行较大偏移。

毛刺滤镜

片元着色器

precision highp float;

varying lowp vec2 textureCoordVarying;
uniform sampler2D Texture;
uniform float Time;
const float PI = 3.1415926;

float rand(float n) {
    //fract(x)返回x的小数部分
    //返回 sin(n) * 43758.5453123
    return fract(sin(n) * 43758.5453123);
}
void main(){
    float maxJitter = 0.06;//最大抖动
    float duration = 0.3;//时间周期(一次毛刺滤镜的时长)
    float colorROffset = 0.01;//红色颜色偏移
    float colorBOffset = -0.025;//绿色颜色偏移
    
    //将传入的时间转换成周期
    float time = mod(Time, duration * 2.0);
   //amplitude 振幅。引入PI是为了使用sin函数。将amplitude 限制在1.0 ～1.3之间，随时间变化
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    //像素随机偏移范围(-1,1)
    float jitter = rand(textureCoordVarying.y) * 2.0 - 1.0; // -1~1
   //判断是否需要偏移，如果jitter范围< 最大抖动 *振幅
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
   //获取纹理坐标x，根据needOffset 计算x的撕裂，yes，撕裂大，no撕裂小
    float textureX = textureCoordVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
  
    //获取撕裂后的纹理坐标
    vec2 textureCoords = vec2(textureX, textureCoordVarying.y);
    //颜色偏移
    //撕裂后纹素
    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);
}

6、幻觉滤镜

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

幻觉滤镜

片元着色器

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
const float duration = 2.0;

//计算某时刻图片的具体位置，每经过一段时间，生成新的图层
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) {
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}

void main (void) {
   //获取时间周期
    float time = mod(Time, duration);
   //放大倍数
    float scale = 1.2;
   //偏移量
    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;
   //时间间隔
    float timeGap = 0.2;
    //注意：只保留了红色的透明的通道值。幻觉效果残留红色

    //新图层 -- R色透明度
    float maxAlphaR = 0.5; // max R
    //新图层 -- G色透明度
    float maxAlphaG = 0.05; // max G
    //新图层 -- B色透明度
    float maxAlphaB = 0.05; // max B
    
    //获取新的图层坐标
    vec4 mask = getMask(time, textureCoords, padding);
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    //最终图层颜色
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
       //获取0～2s内所获取的运动后的纹理坐标
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //某时刻创建的层。在当前时刻红绿蓝的透明度
        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;
     //累计每一层每个通道乘以透明度颜色通道
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        //透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }

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