这篇文章主要介绍了OpenGL Shader如何实现简单转场效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。渐变转场通过mix函数混合两个纹理图像,使用time在
这篇文章主要介绍了OpenGL Shader如何实现简单转场效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
通过mix
函数混合两个纹理图像,使用time
在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变化从而实现渐变效果。
#define time iTimevoid 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
判断语句。
#define time iTimevoid 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));}
#define time iTimevoid 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 iTimevoid 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
的值来分配第一个纹理和第二个纹理的占比。
#define time iTimevoid 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;}
#define time iTimevoid 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如何实现简单转场效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!
--结束END--
本文标题: OpenGL Shader如何实现简单转场效果
本文链接: https://www.lsjlt.com/news/322843.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0