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

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

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