webgl实现canvas粒子风暴爆炸动画效果代码-html代码-BFW代码库

webgl实现canvas粒子风暴爆炸动画效果代码

代码语言：html

所属分类：粒子

代码描述：webgl实现canvas粒子风暴爆炸动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">

  <style>

body {
    padding: 0;
  margin:0;
}



  </style>
</head>

<body>
  
<canvas id="c"></canvas>

<script id="shader-fs" type="x-shader/x-fragment">
				#ifdef GL_ES
				  precision highp float;
				  #endif
    		void main(void) {
    		 gl_FragColor = vec4(0.2, 0.3, 0.4, 1.0);
    		}
		</script>

  <script id="shader-vs" type="x-shader/x-vertex">
    	attribute vec3 vertexPosition;

  	uniform mat4 modelViewMatrix;
  	uniform mat4 perspectiveMatrix;

   	void main(void) {
  		gl_Position = perspectiveMatrix * modelViewMatrix * vec4(  vertexPosition, 1.0);
  	}
  </script>
  
    <script>
        window.onload = loadScene;

var canvas, gl,
  ratio,
  vertices,
  velocities,
  freqArr,
  cw,
  ch,
  colorLoc,
  thetaArr,
  velThetaArr,
  velRadArr,
  boldRateArr,
  drawType,
  numLines = 40000;
var target = [];
var randomTargetXArr = [], randomTargetYArr = [];
drawType = 2;


/**
 * Initialises WebGL and creates the 3D scene.
 */
function loadScene() {
  //    Get the canvas element
  canvas = document.getElementById("c");
  //    Get the WebGL context
  gl = canvas.getContext("experimental-webgl");
  //    Check whether the WebGL context is available or not
  //    if it's not available exit
  if (!gl) {
    alert("There's no WebGL context available.");
    re.........完整代码请登录后点击上方下载按钮下载查看