当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

实例详解jQuery和HTML5实现WebGL高性能烟花绽放动画效果

  • 发布时间:
  • 作者:码农之家
  • 点击:192

这篇文章主要知识点是关于jQuery、HTML5、WebGL、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

Tags:jQuery HTML5 WebGL 

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

本文实例讲述了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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.792150

jQuery+HTML5实现弹出创意搜索框层

效果体验:http://demo.jb51.net/js/2016/sousuokuang_jb51/ 本效果适用于移动设备,可以使用手机等浏览效果。 代码下载:http://xiazai.jb51.net/201612/yuanma/sousuokuang_jb51.rar HTML代码如下: !doctype htmlhtml lang="zh"headmeta charset="UTF-8"meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /titlejQuery+CSS3创意搜索框特效 - 何问起/titlelink rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/default.css" /!--必要样式--link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/search-form.css" //headbodydiva href="http://hovertree.com/"首页/a a href="http://hovertree.com/texiao/"特效/a a href="http://hovertree.com/h/bjaf/sousuokuang.htm"原文/a/divform onSubmit="submitFn(this, event);" name="yestop"div class="search-wrapper"div class="input-holder"input type="text" ……

网友NO.317541

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

弹出层用来向用户展示详细的信息,交互性非常强。弹出层有对话框、模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。 效果展示源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC端和移动端都可以很好展示的弹出层,并且是兼容现代浏览器的。在demo中,我使用了Bootstrap样式,当然你也可以自己写个样式来完成页面布局。 一个基本的弹出层应该满足以下需求: 1、点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层; 2、点击弹出层的关闭……

网友NO.770708

jQuery(非HTML5)可编辑表格实现代码

功能 : 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容。 主要实现思路 : 选中,移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据 源代码 : HTML代码: table class="editableTable" thead tr thItem1/th thItem2/th thItem3/th /tr /thead tbody tr td class="editable simpleInput"arthinking/td td class="editable simpleInput"Jason/td td class="editable simpleInput"itzhai/td /tr tr td class="editable simpleInput"arthinking/td td class="editable simpleInput"Jason/td td class="editable simpleInput"itzhai/td /tr tr td class="editable simpleInput"arthinking/td td class="editable simpleInput"Jason/td td class="editable simpleInput"itzhai/td /tr /tbody /table CSS代码: body{ text-sh……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757