OpenGL Shader实现简单转场效果详解
程序员文章站
2022-10-30 19:18:12
目录转场介绍渐变转场切换转场x轴切换y轴切换对角线切换位移转场x轴位移y轴位移转场介绍转场效果常出现再视频剪辑当中,用于衔接两段视频片段切换的过渡效果。转场常常在两个场景切换中去使用达到酷炫特效的作用...
转场介绍
转场效果常出现再视频剪辑当中,用于衔接两段视频片段切换的过渡效果。转场常常在两个场景切换中去使用达到酷炫特效的作用。
那么如何在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转场效果内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!