webgl波动的线条效果-html代码-BFW代码库

webgl波动的线条效果

代码语言：html

所属分类：背景

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

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

<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<script type='glsl/vertex'>
  attribute vec2 coords;
  void main(void) {
    gl_Position = vec4(coords.xy, 0.0, 1.0);
  }
</script>
<script type='glsl/fragment-lines'>precision highp float;
    #define PI 3.14159265359
    uniform float time; 
    uniform vec4 mr;

    vec3 hash(vec3 p) { 
        float n = sin(dot(p, vec3(7, 157, 113)));    
        return fract(vec3(2097152, 262144, 32768)*n)*2. - 1.;
    }

    float noised(in vec3 p){
        vec3 i = floor(p + dot(p, vec3(0.333333)) );  
        p -= i - dot(i, vec3(0.166666)) ;
        vec3 i1 = step(p.yzx, p), 
             i2 = max(i1, 1.0-i1.zxy); 
        i1 = min(i1, 1.0-i1.zxy);    
        vec3 p1 = p - i1 + 0.166666, 
             p2 = p - i2 + 0.333333, 
             p3 = p - 0.5;
        vec4 v = max(0.5 - vec4(dot(p,p),   dot(p1,p1), 
                                dot(p2,p2), dot(p3,p3)), 0.0);
        vec4 d = vec4(dot(p,  hash(i)),      dot(p1, hash(i + i1)), 
                      dot(p2, hash(i + i2)), dot(p3, hash(i + 1.)));
        return clamp(dot(d, v*v*v*8.)*1.732 + .5, 0., 1.);
    }


    vec2 smoothRepeatStart(float x, float size) {
      return vec2(mod(x - size / 2., size),  mod(x, size));
    }

    float smoothRepeatEnd(float a, float b, float x, float size) {
      float v = sin((x / size) * PI * 2. - PI * .5) * .5 + .5;
      return mix(a, b, smoothstep( 0., 1., v ) );
    }

   void main(void) {
    vec2 uv = gl_FragCoord.xy/mr.zw;
    float x = uv.x - time;
    vec2 ab = smoothRepeatStart(x, 2.);
    float noiseA = noised(vec3(vec2(ab.x, uv.x) * sin(time)*sin(0.1+mr.x/mr.z), 0.));
    float noiseB = noised(vec3(vec2(ab.y, uv.y) * sin(time)*sin(0.1+mr.y/mr.w), 0.));
    float noise = smoothRepeatEnd(noiseA, noiseB, x, 2.)* .2;
    noise = mix(noise, dot(uv, vec2(mr.x/mr.z-2., 1.)*.4), .6);
    float spacing = (1. + mr.y/mr.w)/ 44.;
    float lines = mod(noise, spacing) / spacing;
    lines = min(lines * 2., 1.) - max(lines * 2. - 1., 0.);
    gl_FragColor = vec4(vec3(clamp(lines, 0.0, 0.05))*20., 1.0);
   }
</script>

<script>
let started = new D.........完整代码请登录后点击上方下载按钮下载查看