jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
59 浏览量
2020-10-19
08:52:11
上传
评论
收藏 45KB PDF 举报
jQuery+HTML5实现实现WebGL高性能烟花绽放动画效果【附高性能烟花绽放动画效果【附demo源码下载】源码下载】
主要介绍了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 = [],
weixin_38655780
- 粉丝: 3
- 资源: 954
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序，冒泡排序，直接选择排序.zip
- 在排序2的基础上，再次对快排进行优化，其次增加快排非递归，归并排序，归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序（堆排序，归并排序，快速排序）一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序，并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0