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如何实现简单转场效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!