webgl实现canvas时空穿梭隧道屏保动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现canvas时空穿梭隧道屏保动画效果代码
代码标签: webgl canvas 时空 穿梭 隧道 屏保 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script type="x-shader/x-fragment">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ precision highp float; out vec4 O; uniform float time; uniform vec2 resolution; #define FC gl_FragCoord.xy #define R resolution #define T (.5*time) #define S smoothstep #define rot(a) mat2(cos(a-vec4(0,11,33,0))) #define hue(a) (.6+.6*cos(6.3*(a)+vec3(0,83,21))) void main(void) { vec2 uv=(FC-.5*R)/min(R.x,R.y); uv*=rot(-.5*T); vec2 p=uv; vec3 col=vec3(0); float a=atan(p.x,p.y)/6.28318, b=.05/tan(length(p)); p=vec2(a*9.+b,a-b-T); for (float i=.0; i++<3.;) { p=fract(p)-.5; float d=mix( length(max(abs(p)-1.,.0))+min(.0,max(abs(p.x)-1.,abs(p.y)-1.)), length(p)-1., pow(sin(T)*.5+.5,2.) ); d=sin(d*14.); d=abs(d); d=pow(.05/d,1.3); col+=d*hue(dot(p,uv)+i*.25-T*.25); col=sqrt(S(.0, 1.,abs(col))); } col*=pow(.5/abs(sin((length(uv)+.05)*dot(col,co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0