前端JS特效第11集：HTML5+WebGL酷炫粒子爆炸动画特效

HTML5+WebGL酷炫粒子爆炸动画特效，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

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.");
    return;
  }
  //    Set the viewport to the canvas width and height
  cw = window.innerWidth;
  ch = window.innerHeight;
  canvas.width = cw;
  canvas.height = ch;
  gl.viewport(0, 0, canvas.width, canvas.height);

  //    Load the vertex shader that's defined in a separate script
  //    block at the top of this page.
  //    More info about shaders: http://en.wikipedia.org/wiki/Shader_Model
  //    More info about GLSL: http://en.wikipedia.org/wiki/GLSL
  //    More info about vertex shaders: http://en.wikipedia.org/wiki/Vertex_shader

  //    Grab the script element
  var vertexShaderScript = document.getElementById("shader-vs");
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderScript.text);
  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    alert("Couldn't compile the vertex shader");
    gl.deleteShader(vertexShader);
    return;
  }

  //    Load the fragment shader that's defined in a separate script
  //    More info about fragment shaders: http://en.wikipedia.org/wiki/Fragment_shader
  var fragmentShaderScript = document.getElementById("shader-fs");
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderScript.text);
  gl.compileShader(fragmentShader);
  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    alert("Couldn't compile the fragment shader");
    gl.deleteShader(fragmentShader);
    return;
  }

  //    Create a shader program.
  gl.program = gl.createProgram();
  gl.attachShader(gl.program, vertexShader);
  gl.attachShader(gl.program, fragmentShader);
  gl.linkProgram(gl.program);
  if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {
    alert("Unable to initialise shaders");
    gl.deleteProgram(gl.program);
    gl.deleteProgram(vertexShader);
    gl.deleteProgram(fragmentShader);
    return;
  }
  //    Install the program as part of the current rendering state
  gl.useProgram(gl.program);
  //    Get the vertexPosition attribute from the linked shader program
  var vertexPosition = gl.getAttribLocation(gl.program, "vertexPosition&#