欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

程序员文章站 2022-04-29 08:06:31
本文实例讲述了jquery+html5实现webgl高性能烟花绽放动画效果。分享给大家供大家参考，具体如下： 运行效果： 完整代码如下：

本文实例讲述了jquery+html5实现webgl高性能烟花绽放动画效果。分享给大家供大家参考，具体如下：

运行效果：

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

完整代码如下：

<!doctype html>
<html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head>
<meta charset="utf-8">
<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>html5/webgl高性能烟花绽放动画</title>
<meta name="description" content="html5/webgl高性能烟花绽放动画">
<meta name="keywords" content="html5/webgl高性能烟花绽放动画">
<style>
canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #111;
}
</style>
</head>
<body>
<script src="jquery-1.11.1.min.js"></script>
<canvas id="c" width="1440" height="304"></canvas><script src="prefixfree.min.js"></script><script src="modernizr.js"></script><script>var gl = c.getcontext('webgl', {
    preservedrawingbuffer: true
  }),
  w = c.width = window.innerwidth,
  h = c.height = window.innerheight
, webgl = {}, opts = {
  projectilealpha: .8,
  projectilelinewidth: 1.3,
  fireworkanglespan: .5,
  basefireworkvel: 3,
  addedfireworkvel: 3,
  gravity: .03,
  lowvelboundary: -.2,
  xfriction: .995,
  baseshardvel: 1,
  addedshardvel: .2,
  fireworks: 1000,
  baseshardsparfirework: 10,
  addedshardsparfirework: 10,
  shardfireworkvelmultiplier: .3,
  inithuemultiplier: 1 / 360,
  runhueadder: .1 / 360
}
webgl.vertexshadersource = `
uniform int u_mode;
uniform vec2 u_res;
attribute vec4 a_data;
varying vec4 v_color;
vec3 h2rgb( float h ){
 return clamp( abs( mod( h * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. );
}
void clear(){
 gl_position = vec4( a_data.xy, 0, 1 );
 v_color = vec4( 0, 0, 0, a_data.w );
}
void draw(){
 gl_position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 );
 v_color = vec4( h2rgb( a_data.z ), a_data.w );
}
void main(){
 if( u_mode == 0 )
 draw();
 else
 clear();
}
`;
webgl.fragmentshadersource = `
precision mediump float;
varying vec4 v_color;
void main(){
 gl_fragcolor = v_color;
}
`;
webgl.vertexshader = gl.createshader(gl.vertex_shader);
gl.shadersource(webgl.vertexshader, webgl.vertexshadersource);
gl.compileshader(webgl.vertexshader);
webgl.fragmentshader = gl.createshader(gl.fragment_shader);
gl.shadersource(webgl.fragmentshader, webgl.fragmentshadersource);
gl.compileshader(webgl.fragmentshader);
webgl.shaderprogram = gl.createprogram();
gl.attachshader(webgl.shaderprogram, webgl.vertexshader);
gl.attachshader(webgl.shaderprogram, webgl.fragmentshader);
gl.linkprogram(webgl.shaderprogram);
gl.useprogram(webgl.shaderprogram);
webgl.dataattribloc = gl.getattriblocation(webgl.shaderprogram, 'a_data');
webgl.databuffer = gl.createbuffer();
gl.enablevertexattribarray(webgl.dataattribloc);
gl.bindbuffer(gl.array_buffer, webgl.databuffer);
gl.vertexattribpointer(webgl.dataattribloc, 4, gl.float, false, 0, 0);
webgl.resuniformloc = gl.getuniformlocation(webgl.shaderprogram, 'u_res');
webgl.modeuniformloc = gl.getuniformlocation(webgl.shaderprogram, 'u_mode');
gl.viewport(0, 0, w, h);
gl.uniform2f(webgl.resuniformloc, w, h);
gl.blendfunc(gl.src_alpha, gl.one_minus_src_alpha);
gl.enable(gl.blend);
gl.linewidth(opts.projectilelinewidth);
webgl.data = [];
webgl.clear = function() {
  gl.uniform1i(webgl.modeuniformloc, 1);
  var a = .1;
  webgl.data = [-1, -1, 0, a,
    1, -1, 0, a, -1, 1, 0, a, -1, 1, 0, a,
    1, -1, 0, a,
    1, 1, 0, a
  ];
  webgl.draw(gl.triangles);
  gl.uniform1i(webgl.modeuniformloc, 0);
  webgl.data.length = 0;
}
webgl.draw = function(gltype) {
  gl.bufferdata(gl.array_buffer, new float32array(webgl.data), gl.static_draw);
  gl.drawarrays(gltype, 0, webgl.data.length / 4);
}
var fireworks = [],
  tick = 0,
  sins = [],
  coss = [],
  maxshardsparfirework = opts.baseshardsparfirework + opts.addedshardsparfirework,
  tau = 6.283185307179586476925286766559;
for (var i = 0; i < maxshardsparfirework; ++i) {
  sins[i] = math.sin(tau * i / maxshardsparfirework);
  coss[i] = math.cos(tau * i / maxshardsparfirework);
}
function firework() {
  this.reset();
  this.shards = [];
  for (var i = 0; i < maxshardsparfirework; ++i)
    this.shards.push(new shard(this));
}
firework.prototype.reset = function() {
  var angle = -math.pi / 2 + (math.random() - .5) * opts.fireworkanglespan,
    vel = opts.basefireworkvel + opts.addedfireworkvel * math.random();
  this.mode = 0;
  this.vx = vel * math.cos(angle);
  this.vy = vel * math.sin(angle);
  this.x = math.random() * w;
  this.y = h;
  this.hue = tick * opts.inithuemultiplier;
}
firework.prototype.step = function() {
  if (this.mode === 0) {
    var ph = this.hue,
      px = this.x,
      py = this.y;
    this.hue += opts.runhueadder;
    this.x += this.vx *= opts.xfriction;
    this.y += this.vy += opts.gravity;
    webgl.data.push(
      px, py, ph, opts.projectilealpha * .2,
      this.x, this.y, this.hue, opts.projectilealpha * .2);
    if (this.vy >= opts.lowvelboundary) {
      this.mode = 1;
      this.shardamount = opts.baseshardsparfirework + opts.addedshardsparfirework * math.random() | 0;
      var baseangle = math.random() * tau,
        x = math.cos(baseangle),
        y = math.sin(baseangle),
        sin = sins[this.shardamount],
        cos = coss[this.shardamount];
      for (var i = 0; i < this.shardamount; ++i) {
        var vel = opts.baseshardvel + opts.addedshardvel * math.random();
        this.shards[i].reset(x * vel, y * vel)
        var x = x;
        x = x * cos - y * sin;
        y = y * cos + x * sin;
      }
    }
  } else if (this.mode === 1) {
    this.ph = this.hue
    this.hue += opts.runhueadder;
    var alldead = true;
    for (var i = 0; i < this.shardamount; ++i) {
      var shard = this.shards[i];
      if (!shard.dead) {
        shard.step();
        alldead = false;
      }
    }
    if (alldead)
      this.reset();
  }
}
function shard(parent) {
  this.parent = parent;
}
shard.prototype.reset = function(vx, vy) {
  this.x = this.parent.x;
  this.y = this.parent.y;
  this.vx = this.parent.vx * opts.shardfireworkvelmultiplier + vx;
  this.vy = this.parent.vy * opts.shardfireworkvelmultiplier + vy;
  this.starty = this.y;
  this.dead = false;
  this.tick = 1;
}
shard.prototype.step = function() {
  this.tick += .05;
  var px = this.x,
    py = this.y;
  this.x += this.vx *= opts.xfriction;
  this.y += this.vy += opts.gravity;
  var proportion = 1 - (this.y - this.starty) / (h - this.starty);
  webgl.data.push(
    px, py, this.parent.ph, opts.projectilealpha / this.tick,
    this.x, this.y, this.parent.hue, opts.projectilealpha / this.tick);
  if (this.y > h)
    this.dead = true;
}
function anim() {
  window.requestanimationframe(anim)
  webgl.clear();
  ++tick;
  if (fireworks.length < opts.fireworks)
    fireworks.push(new firework);
  fireworks.map(function(firework) {
    firework.step();
  });
  webgl.draw(gl.lines);
}
anim();
window.addeventlistener('resize', function() {
  w = c.width = window.innerwidth;
  h = c.height = window.innerheight;
  gl.viewport(0, 0, w, h);
  gl.uniform2f(webgl.resuniformloc, w, h);
})
window.addeventlistener('click', function(e) {
  var firework = new firework();
  firework.x = e.clientx;
  firework.y = e.clienty;
  firework.vx = 0;
  firework.vy = 0;
  fireworks.push(firework);
});
</script>
</body>
</html>

附：完整实例代码点击此处。

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery常用插件及用法总结》、《jquery扩展技巧总结》、《jquery拖拽特效与技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： 使用MUI框架模拟手机端的下拉刷新和上拉加载功能

下一篇： 史上最全JavaScript数组去重的十种方法（推荐）

推荐阅读