快捷導(dǎo)航

OpenGL Shader實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)場(chǎng)效果詳解

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

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

轉(zhuǎn)場(chǎng)介紹

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

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

漸變轉(zhuǎn)場(chǎng)

通過(guò)mix函數(shù)混合兩個(gè)紋理圖像，使用time在[0,1]之間不停變化來(lái)控制第二個(gè)圖片紋理混合的強(qiáng)弱變化從而實(shí)現(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)場(chǎng)

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

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

對(duì)角線(xiàn)切換

對(duì)角線(xiàn)切換實(shí)現(xiàn)同樣也是mix和step函數(shù)相結(jié)合，利用對(duì)角線(xiàn)對(duì)齊特性x-y=0的特點(diǎn)，當(dāng)progress值到達(dá)0則切換到第二個(gè)紋理圖像。

#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)場(chǎng)

切換轉(zhuǎn)場(chǎng)效果是底部紋理位置不動(dòng)，上層紋理做覆蓋來(lái)實(shí)現(xiàn)的。位移轉(zhuǎn)場(chǎng)是兩個(gè)紋理對(duì)象不重疊，像是類(lèi)似輪播圖的效果，實(shí)現(xiàn)效果是同時(shí)向著一個(gè)方向移動(dòng)。位移動(dòng)畫(huà)對(duì)整體紋理做偏移處理，通過(guò)progress的值來(lái)分配第一個(gè)紋理和第二個(gè)紋理的占比。

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

到此這篇關(guān)于OpenGL Shader實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)場(chǎng)效果詳解的文章就介紹到這了,更多相關(guān)OpenGL Shader轉(zhuǎn)場(chǎng)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: