webgl+canvas实现三维布料棉被随风摆动褶皱动画效果代码-html代码-BFW代码库

webgl+canvas实现三维布料棉被随风摆动褶皱动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl+canvas实现三维布料棉被随风摆动褶皱动画效果代码

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

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

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



  
  
</head>

<body translate="no">
  
  
      <script >
const dpr = Math.max(1, .5 * window.devicePixelRatio);
const canvas = document.createElement("canvas");

document.body.innerHTML = "";
document.body.appendChild(canvas);
document.body.style = "margin:0;overflow:hidden;";
canvas.style.width = "100%";
canvas.style.height = "auto";
canvas.style.objectFit = "contain";

const vertexSource = `#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

in vec4 position;

void main(void) {
    gl_Position = position;
}
`;
const fragmentSource = `#version 300 es
/*********
 * made by Matthias Hurrle (@atzedent) 
 */
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 fragColor;

uniform vec2 resolution;
uniform float time;

#define T mod(2.*time, 180.)
#define S smoothstep

float rnd(float a) {
	return fract(sin(a*12.233)*78.599);
}

float rnd(vec2 p) {
	return fract(sin(dot(p,p.yx+vec2(234,543)))*345678.);
}

float curve(float a, float b) {
	a /= b;

	return mix(
		rnd(floor(a)),
		rnd(floor(a)+1.),
		pow(S(.0,1.,fract(a)),10.)
	);
}

mat2 rot(float a) {
	float s=sin(a), c=cos(a);
	return mat2(c,-s,s,c);
}

float map(vec3 p) {
	float d=p.y+(1.-cos(sin(T+6.3*p.x)))*.1;
	d += 1.-pow(cos(.75*sin(T+curve(T*.5,8.)+2.*(1.+curve(T*2.5,14.4))*(p.xz*rot(.125)).x)),2.);
	d += 1.-cos(curve(T*.2,8.)+sin(T+.8*(p.xz*rot(.38)).x))*.1;
	d += 1.2*sin(p.z*.4+sin(p.x*.6+1.2));
	
	d = m.........完整代码请登录后点击上方下载按钮下载查看