HTML5+WebGL实现的3D星云动画特效

HTML5 herman 71浏览 0评论

这是一款基于HTML5WebGL实现的3D星云动画特效案例。3D星云的效果类似星球爆炸。本文介绍它的实现和制作代码。

本文用到了HTML5CanvasWebGLCSS3等知识点。整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

整个运行效果如下所示:

html5-webgl-Canvas

主要实现代码如下:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>业余草:www.xttblog.com</title>
  <meta charset="utf-8">
 <link rel="stylesheet" href="css/style.css">
 <style type="text/css">
	.btn_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;
	}
 </style>
</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;
  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 Class="btn_style"></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>

相关CSS代码和JavaScript 代码我就不贴了,需要源码的可以到我共享的百度网盘下载链接:https://pan.baidu.com/s/1mhRqzI4 密码:70yu。本文借助了three.min.jsTweenMax.min.js等相关js库。

本文原文出处:业余草: » HTML5+WebGL实现的3D星云动画特效