OpenGL Shader實現簡單轉場效果詳解

Posted on by

轉場介紹

轉場效果常出現再視頻剪輯當中，用於銜接兩段視頻片段切換的過渡效果。轉場常常在兩個場景切換中去使用達到酷炫特效的作用。

那麼如何在glsl中去實現轉場效果？其實轉場效果可以理解成兩個紋理對象切換的過程。首先提前條件需要兩個紋理對象，然後在這兩個紋理對象上去實現紋理和紋理之間的切換。

漸變轉場

通過mix函數混合兩個紋理圖像，使用time在[0,1]之間不停變化來控制第二個圖片紋理混合的強弱變化從而實現漸變效果。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,progress);
}

切換轉場

切換動畫和漸變動畫同樣是使用mix函數來實現效果的。同時結合step函數來判斷當前的progress值是否大於uv.x來控制當前繪制紋理是第一個還是第二個從而實現紋理卷簾位移效果。這裡是采用瞭mix和step兩個函數相結合來實現動畫效果，同樣的采用if-else也能夠達到相同目的但是之前有提到過在glsl中最好優先考慮使用內置函數來實現效果，減少使用if-else判斷語句。

x軸切換

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,step(uv.x,progress));
}

y軸切換

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,step(uv.y,progress));
}

對角線切換

對角線切換實現同樣也是mix和step函數相結合，利用對角線對齊特性x-y=0的特點，當progress值到達0則切換到第二個紋理圖像。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = sin(time);
    gl_FragColor = mix(texture1,texture2,step(uv.x - uv.y, - progress));
}

位移轉場

切換轉場效果是底部紋理位置不動，上層紋理做覆蓋來實現的。位移轉場是兩個紋理對象不重疊，像是類似輪播圖的效果，實現效果是同時向著一個方向移動。位移動畫對整體紋理做偏移處理，通過progress的值來分配第一個紋理和第二個紋理的占比。

x軸位移

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec2 newUv = uv;
    float progress = abs(sin(time));
    vec4 texture3;
    newUv.x -= progress;
    if(uv.x >= progress){
        texture3 = texture(iChannel1,newUv);
    }else{
        texture3 = texture(iChannel2,newUv);
    }
     gl_FragColor = texture3;
}

y軸位移

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec2 newUv = uv;
    float progress = abs(sin(time));
    vec4 texture3;
    newUv.y -= progress;
    if(uv.y >= progress){
        texture3 = texture(iChannel1,newUv);
    }else{
        texture3 = texture(iChannel2,newUv);
    }
     gl_FragColor = texture3;
}

到此這篇關於OpenGL Shader實現簡單轉場效果詳解的文章就介紹到這瞭,更多相關OpenGL Shader轉場效果內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：