webgl实现三维立体环环相扣动画效果代码-html代码-BFW代码库

webgl实现三维立体环环相扣动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl实现三维立体环环相扣动画效果代码，配合了wtc-gl一起实现。

下面为部分代码预览，完整代码请点击下载或在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;
}
canvas { width:100%; height: 100%; }
</style>


  
  
</head>

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

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

uniform sampler2D b_noise;

varying vec2 v_uv;
  
  /* Raymarching constants */
  /* --------------------- */
  const float MAX_TRACE_DISTANCE = 10.;             // max trace distance
  const float INTERSECTION_PRECISION = 0.0001;       // precision of the intersection
  const int NUM_OF_TRACE_STEPS = 256;               // max number of trace steps
  const float STEP_MULTIPLIER = .6;                 // the step mutliplier - ie, how much further to progress on each step
  
  /* Structures */
  /* ---------- */
  struct Camera {
    vec3 ro;
    vec3 rd;
    vec3 forward;
    vec3 right;
    vec3 up;
    float FOV;
  };
  struct Surface {
    float len;
    vec3 position;
    vec3 colour;
    float id;
    float steps;
    float AO;
  };
  struct Model {
    float dist;
    vec3 colour;
    float id;
  };
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  //--------------------------------
  // Modelling
  //--------------------------------
  float don(float x,float y,float z,float a,float b) {
    return length(vec2(length(vec2(x,y))-a,z))-b;
  }
  const float d = 2.;
  const float id = 1./2.;
  Model model(vec3 p) {
    
    float t = u_time*3.;
    
    float r = length(p);
    float u = log(r)-t;
    float v = acos(p.z/r);
    float v0 = v;
    float w = atan(p.x, p.y);
    
    float sc = floor(u*d)+t*d;
    u = mod(u,id);
    float e = exp(u);
    float st = sin(v);
    
    u = e*st*cos(w);
    v = e*st*sin(w);
    w = e*cos(v0);
    float l = sc * .2;
    
    float ls = sin(l);
    float lc = cos(l);
    float ov = v;
    float ow = w;
    v = lc*ov+ls*ow;
    w = lc*ow-ls*ov;
    ov = v;
    ow = u;
    v = lc*ov+ls*ow;
    u = lc*ow-ls*ov;
    
    
    float nd = min( don(w,u,v,1.2,.02),don(u,v,w,1.2,.05) ) * exp(sc*id);
    // float nd = don(u,v,w,1.2,.05) * exp(sc*id);
    
    nd = min(nd, length(p)-.005);
    
    vec3 colour = vec3(.8, .9, 1);
    return Model(nd, colour, 1.);
  }
  Model map( vec3 p ){
    return model(p);
  }
  
  Surface calcIntersection( in Camera cam ){
    float h =  INTERSECTION_PRECISION*2.0;
    float rayDepth = 0.0;
    float hitDepth = -1.0;
    float id = -1.;
    float steps = 0.;
    float ao = 0.;
    vec3 position;
    vec3 colour;

    for( int i=0; i< NUM_OF_TRACE_STEPS ; i++ ) {
      if( abs(h) < INTERSECTION_PRECISION || rayDepth > MAX_TRACE_DISTANCE ) break;
      position = cam.ro+cam.rd*rayDepth;
      Model m = map( position );
      h = m.dist;
      rayDepth += h * STEP_MULTIPLIER;
      id = m.id;
      steps += 1.;
      ao += max(h, 0.);
      colour = m.colour;
    }

    if( rayDepth < MAX_TRACE_DISTANCE ) hitDepth = rayDepth;
    if( rayDepth >= MAX_TRACE_DISTANCE ) id = -1.0;

    return Surface( hitDepth, position, colour, id, steps, ao );
  }
  Camera getCamera(in vec2 uv, in vec3 pos, in vec3 target) {
    vec3 forward = normalize(target - pos);
    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
    vec3 up = normalize(cross(forward, right));
    
    float FOV = .6;
    
    return Camera(
      pos,
      normalize(forward + FOV * uv.x * right + FOV * uv.y * up),
      forward,
      right,
      up,
      FOV
    );
  }
  
  
  float softshadow( in vec3 .........完整代码请登录后点击上方下载按钮下载查看