OpenGL 12.2 - 案例：動態濾鏡效果

最終實現濾鏡效果：

詳細Demo文章見底部

一、縮放

1）實現思路：修改頂點坐標和紋理坐標的對應關系。紋理坐標不變的情況下，對頂點坐標進行放大.

縮放過程：

1、設置一次縮放效果的時長 duration 0.6

2、設置最大振幅 maxAmplitude 0.3 --> 放大程度 [1 ~ 1.3]

3、將時間控制在 縮放時長的范圍內變動 --> 通過mod(Time, duration)，計算當前時間Time 所處在[0 ~ 0.6]的時間位置 time

4、計算當前振幅 amplitude --> 通過 sin() 函數 --> sin()值的范圍是[-1 ~ 1]，取絕對值得范圍 [0 ~ 1] --> maxAmplitude *abs( sin(time*(PI/duration))) -->

例：當前時間 time = 0.3, sin(0.3*PI/0.6) = sin(PI/2) = 1, amplitude = 0.3*1 = 0.3

5、對頂點坐標的 x, y 進行放大

2）頂點着色器代碼

attribute vec4 Position;// 頂點坐標
attribute vec2 TextureCoords;// 紋理坐標
varying vec2 TextureCoordsVarying;// 紋理坐標 傳入片元着色器

uniform float Time;// 傳入的時間戳

const float PI = 3.1415926;

void main (void) {
    
    // 一次縮放的效果時長
    float duration = 0.6;
    // 最大發達幅度 - 振幅
    float maxAmplitude = 0.3;
    // 傳入的時間周期控制在 0~0.6，  mod 求模: mod(0.9，0.6)=0.3 
    float time = mod(Time, duration);
    // 求振幅 - sin值范圍-1~1, abs(sin())范圍0~1，* 0.3 即所要范圍 0~0.3
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    // 將頂點坐標的 x, y 分別乘放大系數，紋理坐標不變
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);

    TextureCoordsVarying = TextureCoords;
}

二、靈魂出竅

1）實現思路：兩個圖層疊加，使上面那層圖層隨時間推移放大，並降低不透明度。通過片元着色器完成。

--> 圖層的放大原理：頂點坐標不變，紋理坐標取值時向中心位置偏差

縮放消失過程：

坐標變換，不同位置時：

 

1、設置每次動畫時長 duration 0.7，范圍 [0 ~ 0.7]；

最大透明度 maxAlpha 0.4；

最大放大比例 maxScale 1.8；

2、當前放大的進度 progress = mod(Time, duration) / duration -->  0~0.7  / 0.7 ==> 0 ~ 1

3、設置當前的透明度 alpha = maxAlpha * (1.0 - progress) --> 0~0.4

4、計算縮放倍數 scale = 1.0 + (maxScale - 1.0) * progress --> 1.0 + 0.8 *[0~1] --> 1~1.8

5、上面圖層的縮放處理， x,y值 同理： 0.5 + (TextureCoordsVarying.x - 0.5) / scale --> 原理如上圖 --> 得到縮放后的紋理坐標

6、拿到原紋理坐標 和 縮放后紋理坐標對應的紋素：texture2D()

7、兩個圖層進行混合 混合方程式：mask * (1 - alpha) + weakMask * alpha --> OpenGL 顏色混合

2）片元着色器代碼

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;// 縮放最大系數
    
    float progress = mod(Time, duration) / duration;// mod(Time, duration)：0~0.7 --> 0~1
    float alpha = maxAlpha * (1.0 - progress);// 計算透明度
    float scale = 1.0 + (maxScale - 1.0) * progress;// 計算縮放倍數
    
    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個圖層 
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;// mix
}

三、抖動

1）實現原理：顏色偏移 + 放大效果

1、放大原理同 “二、靈魂出竅”

2、紋理左邊偏移也同理：

3、對 紅藍 RB 兩個顏色值進行偏移：maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);

2）片段着色器代碼

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    float duration = 0.7;
    float maxScale = 1.1;
    float offset = 0.02;
    
    float progress = mod(Time, duration) / duration; // 0~1
    vec2 offsetCoords = vec2(offset, offset) * progress;// 偏移量
    float scale = 1.0 + (maxScale - 1.0) * progress;// 縮放
    
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;// 紋理坐標縮放 - 向量的加減 例：向量 AB, A+B=(Ax+Bx, Ay+By)
    
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);// red
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);// blue
    vec4 mask = texture2D(Texture, ScaleTextureCoords);// 原紋素
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);// RGB 中 RB 取b偏移后的值
}

四、閃白

1）實現原理：添加一層透明度變化的白色圖層進行混合

1、動畫效果時長 0.6

2、白色圖層透明度范圍 0 ~ 1

2）片元着色器代碼

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;// 動畫時長
    
    float time = mod(Time, duration);// 當前時間 0 ~ 0.6
    
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);// 白色圖層
    float amplitude = abs(sin(time * (PI / duration)));// 透明度
    // 紋理坐標對應紋素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    // mix
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

五、毛刺 - 噪聲效果

1）實現原理：撕裂(x方向) + 顏色偏移

1、設置最大抖動值 maxJitter 0.06

一次濾鏡動畫時長 duration 0.3

顏色偏移colorROffset 0.01; colorBOffset -0.025

2、振幅 amplitude [1.0 ~ 1.3] 

3、偏移隨機值 jitter [-1 ~ 1]

4、判斷是否要偏移 jitter < maxJitter * amplitude

5、偏移紋理坐標的 X： x + jitter

6、設置顏色偏移

2）片元着色器代碼

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

// 獲取一個隨機值
float rand(float n) {
    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;// 藍色偏移
    
    float time = mod(Time, duration * 2.0);// 時間周期 0 ~ 0.6
    float amplitude = max(sin(time * (PI / duration)), 0.0);// 振幅
    
    float 0 = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // 向所偏移隨機值 -1 ~ 1
    bool needOffset = abs(jitter) < maxJitter * amplitude;// 是否需要偏移 --> yes:撕裂大  no:撕裂小
    
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));// 紋理坐標的 X 撕裂
    
    // 撕裂后紋理坐標
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.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));
    
    // 顏色 RB 
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

六、幻覺 - 綜合

1）實現原理：殘影效果 + 顏色偏移

這里：

殘影效果：在移動的過程中，每經過⼀段時間間隔，根據當前的位置去創建一個新圖層，並且新層的不透明度隨着時間逐漸減弱。於是在⼀個移動周期內，可以看到很多透明度不同的圖層疊加在一起，從⽽形成殘影的效果。殘影，讓圖⽚隨着時間做圓周運動。

顏色偏移：物體移動的過程是藍色在前面，紅⾊在后。整個過程可以理解成：在移動的過程中，每間隔一段時間，遺失了一部分紅色通道的值在原來的位置，並且這部分紅⾊通道的值，隨着時間偏移，會逐漸恢復。

2）片元着色器代碼

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);// 時間 [0 ~ 2.0]
    float scale = 1.2;// 放大倍數 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;// 時間間隔
    
    // 只保留了紅色的透明通道值，我們這里設置幻影效果紅色，可設其他色值
    // 新圖層的最大 RGB
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    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 ~ 2 秒內的， 運動后的 紋理坐標
        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;

        // 積累每一層 的 每個通道 乘以 透明度顏色值 
        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;
}     

Demo地址