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

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

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