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