canvas+webgl实现多彩粒子烟花绽放动画效果代码-html代码-BFW代码库

canvas+webgl实现多彩粒子烟花绽放动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas+webgl实现多彩粒子烟花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <style>
        canvas{position:absolute;top:0;left:0;background-color:#111;}
    </style>
</head>

<body>
    <canvas id=c></canvas>
    <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 < maxShar.........完整代码请登录后点击上方下载按钮下载查看