OpenGL?Shader如何實現簡單轉場效果

這篇文章主要介紹了OpenGL Shader如何實現簡單轉場效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

漸變轉場

通過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如何實現簡單轉場效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!