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

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

运行效果：

完整代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery动画和停止动画实例代码

    JQuery动画和停止动画实例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • jQuery下的动画处理总结

    queue()/ dequeue()这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知.这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码 复制代码 代码如下: $('#test').animate({            "width": "300px",            "height": "300px",            "opacity":&qu

  • 基于Jquery和html5实现炫酷的3D焦点图动画

    基于Jquery和html5实现炫酷的3D焦点图动画

    这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便.如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你. 在线演示源码下载 HTML代码 <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"><img src=&quo

  • Jquery中使用show()与hide()方法动画显示和隐藏图片

    Jquery中使用show()与hide()方法动画显示和隐藏图片

    (1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

  • CSS+jQuery实现的一个放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus

  • jQuery实现图像旋转动画效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • jQuery实现加入购物车飞入动画效果

    jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码 代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码 代码如下: <

  • jQuery结合HTML5制作的爱心树表白动画

    HTML代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http

  • 基于jquery的direction图片渐变动画效果

    还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv

  • jquery+html5烂漫爱心表白动画代码分享

    jquery+html5烂漫爱心表白动画代码分享

    本文实例讲述了jquery+html5烂漫爱心表白动画代码.分享给大家供大家参考.具体如下: jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+html5烂漫爱心表白动画代码如下 <!DOC

随机推荐