星际闪耀动画粒子效果

代码语言:html

所属分类:粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  html {
  width: 100%;
  height: 100%;
}
  body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
body {
  width: 100%;
  height: 100%;
}

#wrapper {
  width: 100%;
  height: 100%;
}
</style>

</head>
<body>
<script type="type/shader" id="vertex">
    #version 300 es    
    layout (location=0) in vec2 point;
    void main() {
       gl_Position = vec4(point.x, point.y, 0.0, 1.0);
    }
  </script>
<script type="type/shader" id="fragment">
    #version 300 es    
    precision highp float;

   float N21(vec2 p) {
   p = fract(p * vec2(233.34, 851.73));
      p += dot(p, p + 23.45);
      return fract(p.x * p.y);
  }

  vec2 N22(vec2 p) {
   float n = N21(p);
      return vec2(n, N21(p + n));
  }

  vec2 getPos(vec2 id, vec2 offset, float iTime) {
   vec2 n = N22(id + offset);
      float x = cos(iTime * n.x);
      float y = sin(iTime * n.y);
      return vec2(x, y) * 0.4 + offset;
  }

  float distanceToLine(vec2 p, vec2 a, vec2 b) {
   vec2 pa = p - a;
      vec2 ba = b - a;
      float t = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
      return length(pa - t * ba);.........完整代码请登录后点击上方下载按钮下载查看

网友评论0