webgl canvas实现线条发散动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：webgl canvas实现线条发散动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">





</head>

<body>






    <script id="fs" type="x-shader/x-fragment">
        precision mediump float;
        uniform float time;
        uniform vec2  mouse;
        uniform vec2  resolution;
        // window ratio
        float ratio = resolution.x / resolution.y;
        float PI = 3.1415926;

        vec2 tile(vec2 p, float zoom) {
            p *= zoom;
            return fract(p);
        }

        float box(vec2 p, vec2 size, float smoothEdges) {
            size = vec2(0.5) - size * 0.5;
            vec2 aa = vec2(smoothEdges * 0.5);
            vec2 uv = smoothstep(size, size + aa, p);
            uv *= smoothstep(size, size + aa, vec2(1.0) - p);
            return uv.x * uv.y;
        }

        float line(vec2 p, float pct, float i) {
            return smoothstep(pct - sin(time / i) * 0.06, pct, p.y) -
            smoothstep(pct, pct + sin(time / i) * 0.06, p.y);
        }

        vec2 rotate2d(vec2 p, float angle) {
            p = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * p;
            return p;
        }

        mat2 scale(vec2 scale) {
            return mat2(scale.x, 0.0, 0.0, scale.y);
        }

        void main(void) {
            // center center
            vec2 p = vec2(gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
            // left bottom
            //vec2 p = gl_FragCoord.xy / resolution.xy;
            float l = length(p);
            vec3 c = vec3(0.0);
            vec3 d = vec3(l, 1.0 - p.x, 1.0 - p.y);
            for (float i = 1.0; i <= 36.0; i++) {
                //p = scale(vec2(sin(time) * i)) * p;
                p = rotate2d(p, i * 10.0);
                float s = time / i;
                float y = sin(p.x + s) * 0.4 * l;
                float pct = line(p, y, i);
                c += pct;
            }
            gl_FragColor = vec4(c * d, 1.0);
        }
    </script>

    <script id="vs" type="x-shader/x-vertex">
        attribute vec3 position;

        void main(void) {
            gl_Position = vec4(position, 1.0);
        }
    </script>

    <script>
        /**
        * Referenced / https://wgld.org/d/glsl/g001.html
        * Referenced / https://thebookofshaders.com
        */

        // variable for global
        let c, // canvas
        cw, ch, // window size
        mx, my, // mouse
        gl, // context
        uniLocation, // for shader
        run, // not used
        eCheck, // not used
        startTime, time, tempTime; // times

        /**
        * Make canvas
        */
        const createCanvas = () => {
            const b = document.getElementsByTagName('body')[0];
            const c = document.createElement('canvas');
            c.setAttribute('id', 'canvas');
            c.style.position = 'fixed';
            c.style.display = 'block';
            c.style.zIndex = '-1';
            c.style.top = '0';
            c.style.left = '0';
            c.style.width = '100%';
            c.style.height = '100%';
            c.style.background = 'black';
            b.appendChild(c);
        };

        /**
        * Check event
        * @params {Object} e - check event
        */
        const checkChange = (e) => {
            run = e.currentTarget.checked;
            if (run) {
                startTime = new Date().getTime();
                render();
            } else {
                tempTime += time;
            }
        };

        /**
        * Mouse event
        * @params {Object} e - mouse event
        */
        const mouseMove = (e) => {
            mx = e.clientX / cw;
            my = e.clientY / ch;
        };

        /**
        * Resize window
        */
        const resizeWindow = () => {
            cw = c.width = window.innerWidth;
            ch = c.height = window.innerHeight;
            init();
        };

        /**
        * Rendering function
        */
        const render = () => {
            // run?
            if (!run) return;
            // time
            time = (new Date().getTime() - startTime) * 0.001;
            // clear color
            gl.clear(gl.COLOR_BUFFER_BIT);
            // uniforms
            gl.uniform1f(uniLocation[0], time);
            gl.uniform2fv(uniLocation[1], [mx, my]);
            gl.uniform2fv(uniLocation[2], [cw, ch]);
            // draw
            gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
            gl.flush();
            // recur
            requestAnimationFrame(render);
        };

        /**
        * Create shader
        * @params {String} id - element id
        * @return {Object} shader - shader object
        */
        const create_shader = (id) => {
            let shader;
            // get reference tag
            const scriptElement = document.getElementById(id);
            // if not exsist return
            if (!scriptElement) return;
            // check script attribute
            switch (scriptElement.type) {
                // vertex shader
                case 'x-shader/x-vertex':
                    shader = gl.createShader(gl.VERTEX_SHADER);
                    break;
                // fragment shader
                case 'x-shader/x-fragment':
                    shader = gl.createShader(gl.FRAGMENT_SHADER);
                    break;
                default:
                    return;
                }
   .........完整代码请登录后点击上方下载按钮下载查看