OpenGL Shader如何实现简单转场效果

魁首哥

作者

OpenGL Shader如何实现简单转场效果

这篇文章主要介绍了OpenGLShader如何实现简单转场效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

渐变转场

通过mix函数混合两个纹理图像，使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变化从而实现渐变效果。

#definetimeiTimevoidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;vec4texture1=texture(iChannel1,uv);vec4texture2=texture(iChannel2,uv);floatprogress=abs(sin(time));gl_FragColor=mix(texture1,texture2,progress);}

切换转场

切换动画和渐变动画同样是使用mix函数来实现效果的。同时结合step函数来判断当前的progress值是否大于uv.x来控制当前绘制纹理是第一个还是第二个从而实现纹理卷帘位移效果。这里是采用了mix和step两个函数相结合来实现动画效果，同样的采用if-else也能够达到相同目的但是之前有提到过在glsl中最好优先考虑使用内置函数来实现效果，减少使用if-else判断语句。

x轴切换

y轴切换

对角线切换

对角线切换实现同样也是mix和step函数相结合，利用对角线对齐特性x-y=0的特点，当progress值到达0则切换到第二个纹理图像。

#definetimeiTimevoidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;vec4texture1=texture(iChannel1,uv);vec4texture2=texture(iChannel2,uv);floatprogress=sin(time);gl_FragColor=mix(texture1,texture2,step(uv.x-uv.y,-progress));}

位移转场

切换转场效果是底部纹理位置不动，上层纹理做覆盖来实现的。位移转场是两个纹理对象不重叠，像是类似轮播图的效果，实现效果是同时向着一个方向移动。位移动画对整体纹理做偏移处理，通过progress的值来分配第一个纹理和第二个纹理的占比。

x轴位移

#definetimeiTimevoidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;vec2newUv=uv;floatprogress=abs(sin(time));vec4texture3;newUv.x-=progress;if(uv.x>=progress){texture3=texture(iChannel1,newUv);}else{texture3=texture(iChannel2,newUv);}gl_FragColor=texture3;}

y轴位移

#definetimeiTimevoidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;vec2newUv=uv;floatprogress=abs(sin(time));vec4texture3;newUv.y-=progress;if(uv.y>=progress){texture3=texture(iChannel1,newUv);}else{texture3=texture(iChannel2,newUv);}gl_FragColor=texture3;}