webgl实现canvas空间折叠动画效果代码-html代码-BFW代码库

webgl实现canvas空间折叠动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现canvas空间折叠动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: #333;
  color: #fff;
  font-family: sans-serif;
}
body,
html {
  margin: 0;
  overflow: hidden;
  padding: 0;
}
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.container {
}
canvas{
  max-width:1024px;
  max-height:1024px;
  height: 100vh;
  width: 100%;
  object-fit: contain;
}
</style>


</head>

<body >
  <div class="container">
</div>
<script type="text/fragment" id="fragShader">
  precision highp float;

  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec4 u_mouse;
  uniform float u_iMouselength;
  uniform sampler2D s_noise;

  uniform sampler2D b_noise;
  uniform sampler2D b_render;

  varying vec2 v_uv;
  
  const float layers = 10.;
  float depth = 20.;
  float t;
  
  #define PI 3.14159265359
  #define TAU PI * 2.

  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

    return uv;
  }
  vec2 rot(vec2 p, float a) {
    float c = cos(a);
    float s = sin(a);
    return p * mat2(c, -s, s, c);
  }
  float ngon(vec2 uv, float sides) {
    float split = TAU / sides;
    vec2 polar = vec2( length(uv), atan(uv.y, uv.x) / split );
    
    return polar.x * cos(fract(polar.y) * split - split * .5);
  }
  float sdEquilateralTriangle( in vec2 p ) {
    const.........完整代码请登录后点击上方下载按钮下载查看