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

代码语言:html

所属分类:三维

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

代码标签: 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 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0