webgl悬浮点阵图效果代码-html代码-BFW代码库

webgl悬浮点阵图效果代码

代码语言：html

所属分类：悬停

代码描述：webgl悬浮点阵图效果代码

代码标签：图效果

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
body { 
  margin: 0; 
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

particle-art {
  display: block;
  width: 90vmin;
  height: 90vmin;
  border: 2px solid #fff;
  touch-action: none;
}

particle-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>



</head>

<body  >
  <particle-art>
  <script type="buffer" name="position" data-size="2">
    const W = (WIDTH / 40)|0;
    const H = (HEIGHT / 40)|0;
    Array.from({length: W*H}).map((_, i) => {
      const x = i % W;
      const y = (i / W)|0;
      return [-1 + x * 2 / (W - 1), -1 + y * 2 / (H - 1)]
    }).flat();
  </script>
  <script type="vert">
    precision highp float;
    attribute vec4 position;
    varying vec4 vPos;
    uniform vec2 resolution;
    uniform float time;
    uniform vec2 pointer;
    
    void main() { 
      gl_Position = position;
      vPos = position;
      float maxSize = 6. * resolution.x / 20.;
      gl_PointSize = max(.2, 1. - distance(position.xy, pointer)) * maxSize;
    }
  </script>
  <script type="frag">
    precision highp float;
    varying vec4 vPos;
    uniform float time;
    void main() {
      // Light point
      float strength = distance(gl_PointCoord, vec2(0.5));
      strength = 1.0 - strength;
      strength = pow(strength, 10.0);
      float sx = vPos.y * vPos.x * 2. + time;
      vec3 color = vec3(.7 + .3 * sin(sx + 1.), .9 + .5 * sin(sx + 2.), 1.);
      color = mix(vec3(0.0), color, strength);
      gl_FragColor = vec4(color, strength);
    }
  </script>
</particle-art>
 
  
      <script type="module">
import Stats f.........完整代码请登录后点击上方下载按钮下载查看