OpenGL Shader实现简单转场效果详解

转场介绍

转场效果常出现再视频剪辑当中，用于衔接两段视频片段切换的过渡效果。转场常常在两个场景切换中去使用达到酷炫特效的作用。

那么如何在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;
}

频道导航