webgl实现蚂蚁粘液动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：webgl实现蚂蚁粘液动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
/*   height: 100vh;
  width: 100vw; */
  touch-action: none;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */
</style>



</head>

<body >
  <script id="vertexShader_particle" type="x-shader/x-vertex">
  attribute vec4 a_position;
  attribute vec3 a_colour;
  attribute vec2 a_reference;
  
  uniform vec2 u_resolution;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  
  vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }
  
  void main() {
    vec2 position = texture2D(b_position, a_reference).xy;
    vec2 velocity = texture2D(b_velocity, a_reference).xy;
    float size = texture2D(b_blur, position).r;
    
    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
    
    gl_Position = pos;
    gl_PointSize = 1.;
    v_colour = vec3(0);
  }
</script>
<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader_velocity" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  #define PI 3.141592653589793
  #define HPI 1.5707963267948966
  #define TAU 6.283185307179586
  #define G 0.67408
  
  uniform vec2 u_resolution;
  uniform vec3 u_mouse;
  uniform float u_time;
  uniform vec2 u_screen;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  uniform sampler2D b_species;
  uniform sampler2D b_blur;
  /*
  1. move speed
  2. turn speed
  3. sensor angle
  4. sensor size
  */
  
  struct Settings {
    float moveSpeed;
    float turnSpeed;
    float sensorAngle;
    float sensorOffsetDst;
  };
  
  float sense(vec4 creature, Settings settings, float direction) {
    float a = creature.z + settings.sensorAngle * direction;
    vec2 dir = vec2(cos(a), sin(a));

    vec2 pos = creature.xy + dir * settings.sensorOffsetDst;

    float p = 0.;
    
    const float s = 2.;

    for (float x = -s; x <= s; x ++) {
      for (float y = -s; y <= s; y ++) {
        vec2 s = (pos + vec2(x, y))/u_screen;
        p += texture2D(b_blur, s).x;
      }
    }

    return p;
    // return smoothstep(0., 100., sum);
  }
  
  float rand(float n){return fract(sin(n) * 43758.5453123);}
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  
  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 position = texture2D(b_position, uv).xy;
    vec4 velocity = texture2D(b_velocity, uv);
    vec4 settingsA = texture2D(b_species, uv);
    
    Settings settings = Settings(settingsA.x, settingsA.y, settingsA.z, settingsA.w);
    
    vec4 creature = vec4(position.xy, velocity.zw);
    
    vec3 w = vec3(
      sense(creature, settings, 0.),   // forward
      sense(creature, settings, -1.),  // left
      sense(creature, settings, 1.)    // right
    );
    
    float r = abs(rand(length(creature.xy)))*.05;
    r = rand(creature.xy+u_time);
    float turnSpeed = settings.turnSpeed * 2. * 3.1415;
    if(w.x > w.y && w.x > w.z) { }
    else if(w.x < w.y && w.x < w.z) {
      creature.z += (r-.5) * 2. * turnSpeed;
    }
    else if(w.z > w.y) {
      creature.z -= r * turnSpeed;
    }
    else if(w.z < w.y) {
      creature.z += r * turnSpeed;
    }
    
    velocity.zw = creature.zw;
    
    
    velocity.xy = vec2( cos(creature.z) * settings.moveSpeed, sin(creature.z) * settings.moveSpeed );
    
    if(u_mouse.z == 1.) {
      vec2 m = position - u_mouse.xy;
      float d = dot((position), (u_mouse.xy));
      float a = atan(m.y, m.x);
      velocity.z = mix(velocity.z, a, smoothstep(200., 100., length(m)));
      float l = 1. / length(m*.001);
      velocity.xy += vec2( cos(a)*l, sin(a)*l ) * smoothstep(100., 10., length(m));
    }
    
    // if(position.x > u_screen.x) velocity.z = rand(agent.xy+u_time) * 2. * 3.14159;
    // else if(position.x < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    // if(position.y > u_screen.y) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    // else if(position.y < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    
    gl_FragColor = velocity;
  }
</script>
<script id="fragmentShader_position" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  uniform vec2 u_screen;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;

  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 position = texture2D(b_position, uv).xy;
    vec2 velocity = texture2D(b_velocity, uv).xy;
    
    vec2 pos = position+velocity*.99;
    if(pos.x > u_screen.x + 20.) pos.x = -10.;
    else if(pos.x < -20.) pos.x = u_screen.x + 10.;
    if(pos.y > u_screen.y + 20.) pos.y = -10.;
    else if(pos.y < -20.) pos.y = u_screen.y + 10.;
    
    // if(pos.x > u_screen.x) pos.x = u_screen.x - .1;
    // else if(pos.x < 0.) pos.x = 0.;
    // if(pos.y > u_screen.y) pos.y = u_screen.y - .1;
    // else if(pos.y < 0.) pos.y = 0.;
    
    gl_FragColor = vec4(pos, 0., 1.0);
  }
</script>
<script id="fragmentShader_particle" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_position;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }

  void main() {
    vec2 uv = gl_PointCoord.xy - .5;
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
    gl_FragColor = vec4(0, 0, 0, 1);
    
    float l = length(uv);
    float c = smoothstep(.5, 0., l);
    float fog = smoothstep(-200., -1., v_fogDepth);
    float opacity = c * fog;
    
    gl_FragColor = vec4(.2);
  }
  
</script>
<script id="fragmentShader_blur" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec3 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  
  const float diffuseSpeed = .1;
  const float fadeSpeed = .002;
  
  #define PI 3.141592653589793
  #define TAU 6.283185307179586
  #define pow2(x) (x * x)
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  vec4 blur(sampler2D sampler, vec2 p, vec2 ps) {
    vec4 v;
    for(float x = -1.; x <= 1.; x++) {
      for(float y = -1.; y <= 1.; y++) {
        vec2 s = p+vec2(x * ps.x, y * ps.y);
        v += texture2D(sampler, s);
      }
    }
    return v /= 9.;
  }

  void main() {
    vec2 s = gl_FragCoord.xy / u_resolution;
    
    vec2 ps = vec2(1.0) / u_resolution.xy;
    
    vec4 p = texture2D(b_prime, s);
    vec4 bo = texture2D(b_blur, s);
    vec4 b = blur(b_blur, s, ps);
    
    float d = mix(bo.x, b.x, diffuseSpeed);
    
    float opt = mix(d*(1.-fadeSpeed), 1., p.a);
    opt = d*(1.-fadeSpeed) + (p.a);
    
    if(u_mouse.z == 1.) {
      vec2 m = gl_FragCoord.xy - u_mouse.xy;
      float d = dot(gl_FragCoord.xy, (u_mouse.xy));
      float a = atan(m.y, m.x);
      opt = mix(opt, opt*.9, smoothstep(200., 10., length(m)));
    }

    gl_FragColor = vec4(vec3(opt), 1.);
  }
  
</script>
<script id="fragmentShader_output" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  unif.........完整代码请登录后点击上方下载按钮下载查看