<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>基于HTML5 WebGL的3D星云动画特效DEMO演示</title>
<meta charset="utf-8">
<meta name="description" content="WebGL galaxy with shaders" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script id='vShader' type='x-vertex/x-shader'>
uniform float size;
uniform float t;
uniform float z;
uniform float pixelRatio;
varying vec3 vPosition;
varying vec3 mPosition;//modified position
varying float gas;
float a,b=0.;
void main(){
vPosition=position;
a=length(position);
if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);
if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));
mPosition=position*(1.+b*4.);
vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);
gl_Position=mvPosition*projectionMatrix;
gas=max(.0,sin(-a/20.));
gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);
}
</script>
<script id='fShader' type='x-fragment/x-shader'>
uniform float z;
varying vec3 vPosition;
varying vec3 mPosition;
varying float gas;
void main(){
float a=distance(mPosition,vPosition);
if(a>0.)a=1.;
float b=max(.32,.0065*length(vPosition));
float c=distance(gl_PointCoord,vec2(.5));
float starlook=-(c-.5)*1.2*gas;
float gaslook=(1.-gas)/(c*10.);
float texture=starlook+gaslook;
gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);
if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));
}
</script>
<button style='position:absolute;width:100%;text-align:center;border-radius:5px;right:10px;font-family:Arial;color:#33c;outline:none;background:none;border:none;text-decoration:underline;font-size:16px;cursor:pointer;'></button>
<script src="js/stat.js" defer="defer" async="async"></script>
<script src='js/three.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
HTML5 WebGL酷炫3D旋转星云动画特效
需积分: 50 92 浏览量
2018-08-12
11:09:36
上传
评论 1
收藏 163KB ZIP 举报
HTML5 WebGL酷炫3D旋转星云动画特效.zip （6个子文件） 
js 
stat.js 12KB TweenMax.min.js 107KB index.js 26KB three.min.js 496KB css style.css 232B
index.html 2KB资源评论
