webgl实现三维Polar Inversion和Truchet效果动画代码-html代码-BFW代码库

webgl实现三维Polar Inversion和Truchet效果动画代码

代码语言：html

所属分类：三维

代码描述：webgl实现三维Polar Inversion和Truchet效果动画代码

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

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

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

  
  
<style>
html {
  height: 100%;
}
body {
  background: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
canvas {
  height: 100%;
  width: 100%;
}
</style>

  
  
</head>

<body>
  <canvas id="canvas"></canvas>
<!-- VertexShader code here -->
<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
precision highp float;
  in vec4 position;

  void main() {
    gl_Position = vec4( position );
  }
</script>

<!-- FragmentShader code here -->
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
uniform float u_time;

#define R           u_resolution
#define T           u_time
#define PI          3.14159265358
#define PI2         6.28318530718

#define MIN_DIST    1e-4
#define MAX_DIST    35.

// globals & const
mat2 r90,spin;
const vec3 size = vec3(1.);
const vec3 sz2 = size*2.;
const vec3 hlf =  size/2.;
const float thick = .0275;

mat2 rot(float a){return mat2(cos(a),sin(a),-sin(a),cos(a)); }
float hash21(vec2 p){return fract(sin(dot(p,vec2(23.73,59.71)))*4832.3234); }

float box(vec3 p,vec3 b){
    vec3 q = abs(p)-b;
    return length(max(q,0.))+min(max(q.x,max(q.y,q.z)),0.);
}

float cap(vec3 p,float r,float h){
    vec2 d = abs(vec2(length(p.xy),p.z))-vec2(h,r);
    return min(max(d.x,d.y),0.)+length(max(d,0.));
}
 
float trs( vec3 p,vec2 t){
    vec2 q = vec2(length(p.zx)-t.x,p.y);
    return length(q)-t.y;
}
vec3 hp,hit;
vec2 map(vec3 p){
    vec2 res = vec2(1e5,0.);
    //@mla inversion
    float k = 5.0/dot(p,p); 
    p *= k;
    p +=vec3(hlf.xy,T*.3);

    vec3 q = p;
    vec3 id = floor((q + hlf)/size);
    q = mod(q+hlf,size)-hlf;
    
    //3D every other
    float chk = mod(id.y+mod(id.z+id.x,2.),2.)*2.-1.;

    float hs = hash21(id.xz+id.y);
    if(hs>.85) { q.yz*=r90; } else if(hs>.65) { q.xz*=r90; } else if(hs>.45) { q.xy*=r90; }

    vec2 d2 = vec2(length(q.xz-hlf.xz), length(q.xz+hlf.xz));
    vec2 gx = d2.x<d2.y ? vec2(q.xz-hlf.xz) : vec2(q.xz+hlf.xz);
    vec3 tq = vec3(gx.x,q.y,gx.y);

    vec2 d3 = vec2(length(q.xy-hlf.xy), length(q.xy+hlf.xy));
    vec2 gy = d3.x<d3.y ? vec2(q.xy-hlf.xy) : vec2(q.xy+hlf.xy);
    vec3 tz = vec3(gy.xy,q.z);
    
    float xhs = fract(2.31*hs+id.y);
    float trh = 1e5, trx = 1e5, srh = 1e5, dre = 1e5, jre=1e5;

    if(chk>.5){
        trh = min(cap(q.zyx,hlf.z,thick),cap(q,hlf.x,thick));
        trh = max(trh,-(length(q)-(hlf.x*.45)));
        trh = min(trs(q,vec2(hlf.x*.45,thick)),trh);
        dre = length(q.xz)-thick;
        trx = min(dre,trh);
    } else{
       jre = trs(tz.yzx,vec2(hlf.x,thick));
       dre = length(q.xy)-thick;
       srh = min(dre,jre);
    }

    if(trx<res.x ) {
        float mt = xhs>.725?5.:xhs>.61?4.:xhs>.25?2.:3.;
        hp = tq;
        if(dre<trh) { mt = mt+5.; hp = q;}
        res = vec2(trx,mt);
        
    } 
    
    if(srh<res.x ) {
        float mt = xhs>.725?5.:xhs>.61?4.:xhs>.25?2.:3.;
        hp = tz;
        if(dre<jre){ mt = mt+5.; hp = q.xzy;}
        res = vec2(srh,mt);
    } 

    float crt = cap(vec3(q.xy,abs(q.z))-vec3(0,0,hlf),thick*.65,thick*2.);  
    crt = min(cap(vec3(q.zy,abs(q.x))-vec3(0,0,hlf),thick*.65,thick*2.),crt);
    crt = min(cap(vec3(q.xz,abs(q.y))-vec3(0,0,hlf),thick*.65,thick*2.),crt);

    if(crt<res.x) {
       res = vec2(crt,1.);
    } 

    // compensate for the scaling that&.........完整代码请登录后点击上方下载按钮下载查看