canvas丝绸织物布料上下波动起伏动画效果代码-html代码-BFW代码库

canvas丝绸织物布料上下波动起伏动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas丝绸织物布料上下波动起伏动画效果代码

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

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

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


  
  
</head>

<body>
  
  
      <script>
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2");

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

const dpr = window.devicePixelRatio;

function resize() {
  const {
    innerWidth: width,
    innerHeight: height } =
  window;

  canvas.width = width * dpr;
  canvas.height = height * dpr;

  gl.viewport(0, 0, width * dpr, height * dpr);
}

window.onresize = resize;

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
  #ifdef GL_FRAGMENT_PRECISION_HIGH
  precision highp float;
  #else
  precision mediump float;
  #endif

  out vec4 fragColor;

  uniform vec2 resolution;
  uniform float time;

  #define T time
  #define S smoothstep

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

  float smin(float a, float b, float k) {
      float h = clamp(
          .5+.5*(b-a)/k,
          .0,
          1.
      );

      return mix(b,a,h)-k*h*(1.-h);
  }

  float sabs(float a, float s) {
      return sqrt(a*a+s);
  }


  float disc(vec3 p, vec2 s, float r) {
      vec2 e = vec2(
        length(abs(p.xz)),
        abs(p.y)
      ) - s;

      return length(max(e, .0)) +
          min(.0, max(e.x, e.y)) - r;
  }

  float map(vec3 p) {
      p.x -= 3.*T;
      p.y += exp(1.+sin(p.x+T*5.2)*.1)*1.4;
      p.y -= sin(p.x*.8)*.8;
      p.y -= cos(.5*p.z)*.4;
      p.x = sabs(p.z, 1.);

      float d = disc(p, vec2(10, .25), .0);

      return smin(d, -(length(p)-1.5), -.5);
  }

  void cam(inout vec3 p) {
      p.yz *= rot(.35);
      p.xz *= rot(.5);
  }

  void main(void) {
      vec2 uv = (
          gl_FragCoord.xy -.5 * resolution
      ) / min(resolution.x,.........完整代码请登录后点击上方下载按钮下载查看