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