webgl实现三维空间可拖动鸟儿飞翔动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：webgl实现三维空间可拖动鸟儿飞翔动画效果代码

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

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

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

  
  
  
<style>
body {
  margin: 0;
  display: grid;
}

label {
  font-family: courier;
  font-size: 25px;
  font-weight: bold;
  position: absolute;
  align-self: end;
  margin: 10px;
}
</style>


  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
<label>CLICK & DRAG to look around</label>
  
      <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
#define rot(a) mat2(cos(a-vec4(0,11,33,0)))


int partID = 0;

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.);
}

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);
}

// Signed distance function for a 3D line segment
float map(vec3 p) {

  p.x+=1.; // centering the eagle

  vec3 p0 = p; // coordinates

  float beak = (length(p) - .5 + abs(p.z)*.75)/2.; // a sphere that has its radius limited in the z axis, resulting in a bifocal lens' shape 

  float bCut = beak; // saving the above for later

  beak = max(beak,-beak) - .01; // the solid is hollowed out, then thickened

  p.x-=.0;
  p.y+=.7;

  beak = max(beak, -(length(p.xy) - .9)); // the solid is carved using a cylinder; this creates the shape of the beak

  p = p0; // reset to base coordinas
  p.x-=.5;
  p.y-=.17;
  p.y/=1.25;

  float LBeak = length(abs(p.yz) + (p.y - .1)*(p.x + .2) + abs(p.z))/2.44948974278 - .125 - p.x/10.; // forming the lower half of the beak - which narrows towards the tip and has some curvature to its side view
  LBeak = max(LBeak, -LBeak); // hollowing it out
  LBeak = max(LBeak, p.y) - .01; // trimming it in the Y

  beak = min(beak, LBeak); // joing the two parts together
  beak = max(beak, p.x - p.y/2. + .1)/1.41421356237; //sqrt(2.); // cutting off the excess that would stick out from the head

  float result = 0.; // establishing the variable for the final whole object

  result = beak; // adding beak to it
  if (result == beak) { partID = 1; } // adding a color to it

  p = p0; // resetting the coordinates
  p.x-=.656;
  p.x/=1.25;
  p.y-=.1;
  p.y*=1.1;
  p.z*=2.; // moving and stretching coordinates for the head

  float head = length(p) - .45; // basic sphere/ovoid forming the head
  head = smax(head,
                 smin(-p.x + p.y/3. - .3, -p.x - p.y/3. - .2, .1),
                 .1)/2.; // slicing off the part where the beak will be

  p = p0;
  p.x-=.65;
  p.y-=.5;

  vec3 b = vec3(-p.x - .4, abs(p.y), abs(p.z) - .1 + p.x/6.); // formula for the brow ridge in the form of a rounded cuboid
  float brow = length(max(b,0.)) - .1; // the brow ridge

  p.y-=.4;
  brow = smax(brow, -max(abs(p.z), abs(p.y - p.x/2.) - .2), .125); // cutting a groove into the front of the brow ridge, to give the eagle a stern look

  head = smin(head, brow, .1);

  p = p0;
  p.x-=1.4;

  float sk = 1.5;
  p.y*=sk; // shrinking the y axis
  head = smin(head, -p.x, .15); // melting the head's ovoid into a vertical wall, to create a smooth elongation
  p.y/=sk; // "soft reset" of the coordinates as modified two lines above

  p.y-=.2;
  
  head = smin(head, length(p) - .5, .3); // adding some girth to the elongation by melting a small sphere into it

  p.y+=.2;

  head = max(head, -head - .02); // hollowing out the head

  p.x+=.3;
  p.y-=.2;
  p.z*=3.; // squishing the z axis by a factor of 3.;

  float neckFeathers = p.x; // variable for neck feather cutout

  int fCount = 6;
  for (int nf = 0; nf < fCount; nf++) {
    p.yz*=rot(PI/float(fCount));
    neckFeathers = smax(neckFeathers, -max(abs(p.y), -p.x - .2), .2);
  } // adding a series of incrementally rotated flat surfaces that will cut into the neck

  p.yz*=rot(PI/9.);
  neckFeathers = smax(neckFeathers, -max(abs(p.y), -p.x - .2), .2);
  
  p.yz*=rot(PI/-5.);
  neckFeathers = smax(neckFeathers, -max(abs(p.y), -p.x - .2), .2);

  // adding two more cutsom ones outside the loop for a better, more uniform look

  head = max(head, neckFeathers); // cutting off the smoothmin connecting the head to the vertical wall
  
  p = p0;
  float mouth = max(bCut, -p.y + .15); // shape analogous to the upper beak that will cut off the part of the head that sticks out inside the beak

  result = min(result, max(head, -mouth));
  if (result == head) { partID = 2; } // adding the white color to the beak

  p = p0;
  p.x-=.35;
  p.y-=.4;
  p.z*=2.;

  vec2 e = vec2(length(p.xy), abs(p.z) - .25); // basic formula for the eyes: two spheres
  float eyes = length(e) - .125;

  result = min(result, eyes);
  if (result == eyes) {
     p.x+=.05;
     p.y+=.02;
     if (length(p.xy) < .03 ) { partID = 4; } // the pupil, ergo the inner part of the eye
     else { partID = 3; } // the eye-white, which will be yellow
     }

  p = p0;

  p.x-=1.25;
  p.y-=.19;

  float torTrim = -p.x - .34;
  float torTrim2 = p.y - .6 + p.x/4.; // surfaces to shave excess bits from the torso
  p.xy*=rot(PI/-36.);

  p.x/=1.2;
  p.y*=1.7;
  p.z*=2.75;

  float torso = max(length(p) - .8, torTrim); // an ovoid with its front part cut off where it meets the neck
  torso = smax(torso, torTrim2, .3); // a smoothing of the back

  p = p0;
  p.x-=2.1;
  p.y-=.34;
  p.xy*=rot(PI/-9.); // rotating the coordinate system slightly upwards so that the tail points up
  p.yz*=1.5; // scaling down the y and z

  float butt = length(p) - .15; // a little bum to place the tail on
  torso = smin(torso, butt, .1);

  p.yz/1.5; // undoing the the scaling down of y and z;
  p.x-=.1;
  p.y*=3.;
  p.x*=1.5;

  p.xz*=rot(PI/-2. - PI/32.); // rotating the coordinate system to place the first feather at a sharp angle
  vec3 tA = vec3(0); // start of the line segment (a single feather)
  vec3 tB = tA; // end of the line segment, set to a placeholder default
  float tail = 1.; // variable for the tail

  for (int tf = 0; tf<8; tf++) {
    p.xz*=rot(PI/8.); // turn
    tB.x = 1.; // the deather will be 1 unit long
    tail = min(tail, sdSeg(p,tA,tB) - .1 - p.x/15.); // adding feathers to the tail
  }

  p.xz*=rot(PI/16.); // when the first row of feathers is created, a second one will start, offset sligthl.........完整代码请登录后点击上方下载按钮下载查看