webgl实现canvas三维多彩方形碎片粒子飞舞动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：webgl实现canvas三维多彩方形碎片粒子飞舞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
        body {
            background: #66f;
            margin: 0;
            overflow: hidden;
        }
        canvas {
            height: 100vh;
            width: 100vw;
            touch-action: none;
        }
        .osc {
            left: 0px;
            position: fixed;
            top: 0px;
        }

        .button {
            position: fixed;
            z-index: 10;
            right: 0;
            bottom: 0;
        }
        .controls {
            position: fixed;
            z-index: 10;
            left: 0;
            bottom: 0;
        }
        .playpause {
            background: #AAB;
            padding: 10px;
        }
        .playpause label {
            display: block;
            box-sizing: border-box;

            width: 0;
            height: 20px;

            cursor: pointer;

            border-color: transparent transparent transparent #202020;
            transition: 100ms all ease;
            will-change: border-width;

            border-style: double;
            border-width: 0px 0 0px 20px;
        }
        .playpause input[type='checkbox'] {
            visibility: hidden;
        }
        .playpause.checked label {
            border-style: double;
            border-width: 0px 0 0px 20px;
        }
        .playpause label {
            border-style: solid;
            border-width: 10px 0 10px 20px;
        }
        /* } */
    </style>



</head>

<body>
    <script id="vertexShader_particle" type="x-shader/x-vertex">
        attribute vec3 a_position;
        attribute vec3 a_particle;
        attribute vec2 a_reference;

        uniform float u_time;
        uniform mat4 u_m_model;
        uniform mat4 u_m_view;
        uniform mat4 u_m_MVP;
        uniform mat4 u_m_proj;

        uniform sampler2D b_position;
        uniform sampler2D b_velocity;

        varying vec3 v_colour;
        varying float v_fogDepth;
        varying float v_opacity;

        float random(vec2 st) {
            return fract(sin(dot(st,
                vec2(12.9898, 78.233)))*
                43758.5453123);
        }

        vec3 hsv2rgb(vec3 c) {
            vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
            vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
            return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
        }
        float hash21(vec2 p) {
            p = fract(p * vec2(233.34, 851.74));
            p += dot(p, p + 23.45);
            return fract(p.x * p.y);
        }

        mat3 fromQuat(vec4 q) {
            float x = q.x;
            float y = q.y;
            float z = q.z;
            float w = q.w;
            float x2 = q.x*2.;
            float y2 = q.y*2.;
            float z2 = q.z*2.;

            float xx = x * x2;
            float yx = y * x2;
            float yy = y * y2;
            float zx = z * x2;
            float zy = z * y2;
            float zz = z * z2;
            float wx = w * x2;
            float wy = w * y2;
            float wz = w * z2;

            return mat3(
                1. - yy -zz, yx -wz, zx + wy,
                yx + wz, 1. - xx - zz, zy - wx,
                zx - wy, zy + wx, 1. - xx - yy
            );
        }

        /**
        * Generates a look-at matrix with the given eye position, focal point, and up axis.
        * If you want a matrix that actually makes an object look at another object, you should use targetTo instead.
        *
        * @param {mat4} out mat4 frustum matrix will be written into
        * @param {vec3} eye Position of the viewer
        * @param {vec3} center Point the viewer is looking at
        * @param {vec3} up vec3 pointing up
        * @returns {mat4} out
        */
        mat4 lookAt(vec3 e, vec3 c, vec3 u) {

            // if (Math.abs(e.x - c.x) < EPSILON &&
            //     Math.abs(e.y - c.y) < EPSILON &&
            //     Math.abs(e.z - c.z) < EPSILON) {
            //   return new Mat4();
            // }

            vec3 off = normalize(e - c);

            vec3 or = vec3(
                u.y * off.z - u.z * off.y,
                u.z * off.x - u.x * off.z,
                u.x * off.y - u.y * off.x
            );
            or = normalize(or);

            vec3 tn = vec3(
                off.y * or.z - off.z * or.y,
                off.z * or.x - off.x * or.z,
                off.x * or.y - off.y * or.x
            );
            tn = normalize(tn);

            return mat4(
                or.x,
                tn.x,
                off.x,
                0,

                or.y,
                tn.y,
                off.y,
                0,

                or.z,
                tn.z,
                off.z,
                0,

                -(or.x * e.x + or.y * e.y + or.z * e.z),
                -(tn.x * e.x + tn.y * e.y + tn.z * e.z),
                -(off.x * e.x + off.y * e.y + off.z * e.z),
                1
            );
        }
        vec3 palette(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) {
            return a + b*cos(6.28318*(c*t+d));
        }

        void main() {
            // vec4 pos = vec4(a_particle, 1.);
            // vec4 mvPos = u_m_view * u_m_model * pos;
            // gl_Position = u_m_proj * mvPos;
            // float isq = ( 1. / -mvPos.z );
            // gl_PointSize = (100.) * isq;

            vec3 position = texture2D(b_position, a_reference).xyz;
            vec3 velocity = texture2D(b_velocity, a_reference).xyz;

            // vec4 quat = vec4(normalize(velocity), 0.);
            // mat3 mat = fromQuat(quat);
            // vec3 particle = a_particle * vec3(1, 1.+length(velocity*velocity*.05), 1) * .1 * mat;

            float vl = min(length(velocity*velocity)*.01, 5.);
            vec3 p = a_particle * vec3(1.-vl*.2, 1, 1.+vl);
            float vl1 = smoothstep(0., 20., length(velocity));
            p *= (.3 + vl1);

            mat4 look = lookAt(
                normalize(position),
                normalize(position+velocity),
                normalize(position)
            );
            vec3 particle = (vec4(p  * .2, 1) * look).xyz;
            // vec3 particle = (vec4(a_particle.yzx*vec3(1,1,1.+length(velocity*velocity)*.01), 1) * .2 * look).xyz;

            position += particle;

            vec4 pos = vec4(position, 1.);
            float l = length(pos);

            vec4 mvPos = u_m_view * u_m_model * pos;

            v_fogDepth = mvPos.z;

            float isq = (1. / -mvPos.z);

            float b = smoothstep(0., 80., l);
            float s = clamp(b*6., 0.1, 1.);
            v_opacity = b;

            gl_Position = u_m_proj * mvPos;
            float hash = hash21(a_reference);
            v_colour = palette(
                hash*.5+.3,
                vec3(0.5, 0.5, 0.5),
                vec3(0.5, 0.5, 0.5),
                vec3(1.0, 1.0, 1.0),
                vec3(0.5, 0.3, 0.2)
            );
            // v_colour = hsv2rgb(vec3(.6 + hash * .3 + vl1 * .1, 1., hash * .5 + .3));
            // if(length(a_reference) == 0.) v_colour = vec3(1,0,0);
        }
    </script>
    <script id="vertexShader_buffer" type="x-shader/x-vertex">
        attribute vec4 a_position;

        uniform mat4 u_modelViewMatrix;
        uniform mat4 u_projectionMatrix;

        void main() {
            gl_Position = a_position;
        }
    </script>
    <script id="fragmentShader_velocity" type="x-shader/x-fragment">
        #extension GL_OES_standard_derivatives: enable
        precision highp float;

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;
        uniform sampler2D s_noise;
        uniform int u_frame;
        uniform float u_nsize;
        uniform float u_seed;

        uniform sampler2D b_velocity;
        uniform sampler2D b_position;

        #define PI 3.141592653589793
        #define HPI 1.5707963267948966
        #define TAU 6.283185307179586
        #define G 0.67408
        mat4 rotationMatrix(vec3 axis, float angle) {
            axis = normalize(axis);
            float s = sin(angle);
            float c = cos(angle);
            float oc = 1.0 - c;

            return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,
                oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,
                oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,
                0.0, 0.0, 0.0, 1.0);
        }

        vec3 hash33(vec3 p) {
            return fract(vec3(
                sin(p.x) * 43543.454354,
                sin(p.y) * 7531.154354,
                sin(p.z) * 10053.75315
            ));
        }

        void main() {
            vec2 uv = gl_FragCoord.xy / u_resolution.xy;
            vec3 position = texture2D(b_position, uv).xyz;
            vec3 velocity = texture2D(b_velocity, uv).xyz;
            vec3 acceleration = vec3(position);
            vec3 f = position;

            float tm = u_time;

            float l = length(position);
            position = (vec4(position, 1.) * rotationMatrix(vec3(sin(tm * 25.), cos(tm * 10.), sin(tm) * cos(tm * 5.)), .5 + 10. / l)).xyz;

            vec3 spherical = vec3(1./max(l, .1), atan(position.y, position.x), acos(position.z / l));

            float a = sin(length(spherical.yz) * 5. + tm) * 5.;

            acceleration.x = spherical.x * sin(spherical.z) * cos(spherical.y) * a;
            acceleration.y = spherical.x * sin(spherical.z) * sin(spherical.y) * a;
            acceleration.z = spherical.x * cos(spherical.z) * a;

            f = normalize(f - acceleration) * -1.;
            f *= smoothstep(10., 40., l) * 2.;

            vec3 vel = velocity * .99 + (acceleration + f) * .5;

            gl_FragColor = vec4(vel, 1.0);
        }
    </script>
    <script id="fragmentShader_position" type="x-shader/x-fragment">
        #extension GL_OES_standard_derivatives: enable
        precision highp float;

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;
        uniform float u_delta;
        uniform sampler2D s_noise;
        uniform bool u_nreset;

        uniform sampler2D b_prime;
        uniform sampler2D b_velocity;
        uniform sampler2D b_position;
        uniform sampler2D b_origin;

        vec2 getScreenSpace() {
            vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_.........完整代码请登录后点击上方下载按钮下载查看