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 float k = sqrt(3.0);
    p.x = abs(p.x) - 1.0;
    p.y = p.y + 1.0/k;
    if( p.x+k*p.y>0.0 ) p = vec2(p.x-k*p.y,-k*p.x-p.y)/2.0;
    p.x -= clamp( p.x, -2.0, 0.0 );
    return -length(p)*sign(p.y);
  }
  
  vec2 fold(vec2 p, float ang){
    vec2 n=vec2(cos(-ang),sin(-ang));
    p-=2.*min(0.,dot(p,n))*n;
    return p;
  }
  
  mat2 rot(float x) {
    return mat2(cos(x), sin(x), -sin(x), cos(x));
  }
  vec2 foldRotate(in vec2 p, in float s) {
    float a = PI / s - atan(p.x, p.y);
    float n = PI * 2. / s;
    a = floor(a / n) * n;
    p *= rot(a);
    return p;
  }
  
  void main() {
    vec2 uv = getScreenSpace();
    
    uv *= 2.;
    
    const float sqrt3 = sqrt(3.0);
    
    float t = u_time - 187.5;
    float st = t * 5.;
    
    float field = ngon(rot(uv, PI/6.), 3.);
    float m;

    vec2 suv = gl_FragCoord.xy / u_resolution - .5;
   // uv = rot(uv, u_time);
    suv = rot(suv, -u_time);
    vec2 _suv = suv;
    
    
    const float angle = (1.0/6.0) * PI;
    
    // suv *= 1.1;
   .........完整代码请登录后点击上方下载按钮下载查看