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 p.........完整代码请登录后点击上方下载按钮下载查看