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

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

代码语言：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;
  .........完整代码请登录后点击上方下载按钮下载查看