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

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

转场效果常出现再视频剪辑当中，用于衔接两段视频片段切换的过渡效果。本文将介绍如何利用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;
}

到此这篇关于OpenGL Shader实现简单转场效果详解的文章就介绍到这了,更多相关OpenGL Shader转场效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Android UI仿QQ好友列表分组悬浮效果
这篇文章主要为大家详细介绍了Android UI仿QQ好友列表分组悬浮效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
Android滑动事件冲突详解（一）
这篇文章主要为大家详细介绍了Android滑动事件冲突，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03
Android 调用WCF实例详解
这篇文章主要介绍了Android 调用WCF实例详解的相关资料,这里提供了实例代码及实现效果图，需要的朋友可以参考下
2016-11-11
Android基于zxing的二维码（网格）扫描仿支付宝网格扫描
这篇文章主要为大家详细介绍了Android基于zxing的二维码网格扫描，仿支付宝网格扫描，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Android实现页面跳转
这篇文章主要为大家详细介绍了Android实现页面跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
性能分析工具Systrace的使用及说明
这篇文章主要介绍了性能分析工具Systrace的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Android 列表形式的切换的示例代码
本篇文章主要介绍了Android 列表形式的切换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例
这篇文章主要介绍了Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例,这两个子控件一般被用作添加标题,在实际效果上并不是那么好控制,使用的时候需要谨慎,需要的朋友可以参考下
2016-06-06
Android自定义滚动选择器实例代码
本篇文章主要介绍了Android自定义滚动选择器实例代码，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
Android 屏幕横竖切换详解
这篇文章主要介绍了android 屏幕横竖切换详解的相关资料,需要的朋友可以参考下
2016-11-11