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
















网友评论0