OpenGL Shader實現(xiàn)簡單轉(zhuǎn)場效果詳解

更新時間：2022年02月18日 09:10:33 作者：JulyYu

轉(zhuǎn)場效果常出現(xiàn)再視頻剪輯當中，用于銜接兩段視頻片段切換的過渡效果。本文將介紹如何利用OpenGL Shader實現(xiàn)簡單的轉(zhuǎn)場效果，需要的小伙伴可以參考一下

轉(zhuǎn)場介紹

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

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

漸變轉(zhuǎn)場

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

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

切換轉(zhuǎn)場

切換動畫和漸變動畫同樣是使用mix函數(shù)來實現(xiàn)效果的。同時結(jié)合step函數(shù)來判斷當前的progress值是否大于uv.x來控制當前繪制紋理是第一個還是第二個從而實現(xiàn)紋理卷簾位移效果。這里是采用了mix和step兩個函數(shù)相結(jié)合來實現(xiàn)動畫效果，同樣的采用if-else也能夠達到相同目的但是之前有提到過在glsl中最好優(yōu)先考慮使用內(nèi)置函數(shù)來實現(xiàn)效果，減少使用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));
}

對角線切換

對角線切換實現(xiàn)同樣也是mix和step函數(shù)相結(jié)合，利用對角線對齊特性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));
}

位移轉(zhuǎn)場

切換轉(zhuǎn)場效果是底部紋理位置不動，上層紋理做覆蓋來實現(xiàn)的。位移轉(zhuǎn)場是兩個紋理對象不重疊，像是類似輪播圖的效果，實現(xiàn)效果是同時向著一個方向移動。位移動畫對整體紋理做偏移處理，通過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;
}