canvas+webgl实现无数个三维小虫子排列整齐蠕动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：canvas+webgl实现无数个三维小虫子排列整齐蠕动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

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



  
  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
  
      <script >
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl2');

const vertexShaderSource = `#version 300 es

in vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es

precision highp float;

uniform vec2 iResolution; // Declare as vec2 (canvas width and height)
uniform vec2 iMouse;
uniform float iTime;

out vec4 fragColor;

// Shadertoy code here

#define PI 3.14159265359
#define RES iResolution
#define PT iMouse
#define smin smoothmin
#define smax smoothmax

float sdSeg(in vec3 p, in vec3 a, in vec3 b) {
  vec3 pa = p - a, ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
  return length(pa - ba * h);
}

float sdSphere(in vec3 p, in vec3 center, float radius) {
  return length(p - center) - radius;
}

float whiteNoise2x1(vec2 p) {
  float random = dot(p, vec2(12.235, 78.37283));
  random = sin(random);
  random *= 4358.4346;
  random = fract(random);
  return random;
}

float valueNoise(vec2 uv) {
  uv *= 4.0;
  vec2 gridUV = fract(uv);
  vec2 gridId = floor(uv);

  gridUV = smoothstep(0.0, 1.0, gridUV);

  float bL = whiteNoise2x1(gridId);
  float bR = whiteNoise2x1(gridId + vec2(1.0, 0.0));
  float b = mix(bL, bR, gridUV.x);

  float tL = whiteNoise2x1(gridId + vec2(0.0, 1.0));
  float tR = whiteNoise2x1(gridId + vec2(1.0));
  float t = mix(tL, tR, gridUV.x);
  float noise = mix(b, t, gridUV.y);

  return noise;
}

float sdPlane(vec3 p, vec3 n, float h) {
  float noiseValue = valueNoise(p.xz*10.);
  float heightAdjustment = 0.05 * noiseValue;
  return dot(p, n) + h + heightAdjustment;
}

float smoothmin(float d1, float d2, float k) {
  float h = max(k - abs(d1 - d2), 0.) / k;
  return min(d1, d2) - h * h * k * (1. / 4.);
}

float smoothmax(float d1, float d2, float k) {
    float h = max(k - abs(d1 - d2), 0.) / k;
    return max(d1, d2) + h * h * k * (1. / 4.);
}

int partID = 1;

float map(vec3 p) {
  
  vec3 g = p;
  float mx = .33, mz = 1.05;
  p.x = mod(p.x - mx,2.*mx) - mx;
  p.z = mod((p.z + iTime/4.) - mz,2.*mz) - mz;

  float m = .05*p.y*(-1. + cos(iTime*5.));

  p.x/=1.5;
  vec3 n = vec3(0,.25,0.);
  float off = n.z;
  n.z+=m;
  float nose = sdSphere(p,n,.125);

  p.x*=1.5;

  float tR = .125;
  vec3 ta = vec3(0,.5,.2+m),
       tb = ta;
       tb.y = - ta.y;
       tb.z = off + .2;
  float torso = sdSeg(p, ta, tb) - tR;

  vec3 tc = vec3(0,-.5,.35),
       td = tb;
  td.z = 0.95 - m*4.;

  float tail = sdSeg(p, tc, td) - tR;

  vec3 h = abs(p), z = abs(p);
  h.y = (mod(h.y - .05,.1));
  float cutY = h.y;
  z.z = (mod(z.z - .05+.005*cos(-iTime*5.),.1+.01*cos(-iTime*5.)));
  float cutZ = z.z;

  float body = smin(smin(
                smax(torso,-cutY,.03),
                smax(tail,-cutZ,.03),.1),
                nose,.025);

  vec3 eA = vec3(.075,.4,.1+m),
       eB = eA;
  eB.x = -eA.x;

  float eye1 = sdSphere(p,eA,.1),
        eye2 = sdSphere(p,eB,.09),
        eyes = min(eye1,eye2);

  vec3 pA = vec3(.075,.4,.045+m),
       pB = pA;
  pB.x = -pA.x;

  float p1 = sdSphere(p,pA,.048),
        p2 = sdSphere(p,pB,.041),
        pupils = min(p1,p2);

  
  p.z-=iTime*.5;
  float ground = sdPlane(g, vec3(0.,1.,0.), .6);

  float result = min(min(body, min(eyes,pupils)),ground);

  if (result == body) {
    partID = 1;
  } else if (result == eyes) {
    partID = 2;
  } else if (result == pupils) {
    partID = 3;
  }
  else {
    partID = 4;
  }

  return result;
}

vec3 norm(vec3 p) {
  float h = 1e-3;
  vec2 k = vec2(-1, 1);
  return normalize(
    k.xyy * map(p + k.xyy * h) +
    k.yxy.........完整代码请登录后点击上方下载按钮下载查看