Shader特效——“帧动画效果”的实现 【GLSL】

发表于2018-02-07
评论0 979浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
本篇文章给大家介绍下如果使用GLSL代码实现一个帧动画效果的shader效果。

iChannel0是一幅由一系列连贯动作的彩虹猫组成的图像,如下图所示

ichannel1是任意一副背景图像

效果图

GLSL代码与算法注释如下:
uniform float iGlobalTime;  
uniform sampler2D iChannel0;  
uniform sampler2D iChannel1;  
vec2 iResolution = vec2(512., 512.);  
void main()  
{  
    vec2 p = vec2(gl_FragCoord.x/ iResolution.x,  gl_FragCoord.y/ iResolution.y) ;  
   // 背景滚动的uv  
   vec2 uv = vec2( p.x+mod(iGlobalTime,2.0), p.y );     
   vec3 bg = vec3(0.0,51.0/255.0,102.0/255.0);  
   float f = texture2D( iChannel1, uv ).x;  
   f = f*f;  
   bg = mix( bg, vec3(1.0), f );  
   float a = 0.01*sin(40.0*p.x + 40.0*iGlobalTime);  
   float h = (a+p.y-0.3)/(0.7-0.3);  
   // 彩虹的位置  
   if( p.x<0.6 && h>0.0 && h<1.0 )  
   {  
       // 彩虹的宽度  
       h = floor( h*6.0 );  
       // 在不同高度绘制彩虹  
       bg = mix( bg, vec3(1.0,0.0,0.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-5.0) ) );  
       bg = mix( bg, vec3(1.0,0.6,0.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-4.0) ) );  
       bg = mix( bg, vec3(1.0,1.0,0.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-3.0) ) );  
       bg = mix( bg, vec3(0.2,1.0,0.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-2.0) ) );  
       bg = mix( bg, vec3(0.0,0.6,1.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-1.0) ) );  
       bg = mix( bg, vec3(0.4,0.2,1.0), 1.0 - smoothstep( 0.0, 0.1, abs(h-0.0) ) );  
   }  
   // 重新计算uv,比例和位置的调整  
   uv = (p - vec2(0.33,0.15)) / (vec2(1.3, 1.) - vec2(0.33,0.15));    
   uv = clamp( uv, 0.0, 1.0 );  
   // 控制彩虹猫图像的偏移, floor很重要  
   float ofx = floor( mod( iGlobalTime*10.0*2.0, 6.0 ) );  
   // 单只彩虹猫的纹理大小 (uv offset)  
   float ww = 31.0/200.0;  
   // uv.y = 1.0-uv.y;  
   // 将偏移后的uv换算到单只彩虹猫的纹理大小,否则会把之后的彩虹猫一并显示出来  
   uv.x = clamp( ( uv.x + ofx)*ww, 0.0, 1.0 );  
   vec4 fg = texture2D( iChannel0, uv );  
   vec3 col = mix( bg, fg.xyz, .8 );  
    gl_FragColor = vec4( col, 1.0 );  
}  

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

标签:

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台