canvas实现webgl三维魔方裂变动画旋转效果代码-html代码-BFW代码库

canvas实现webgl三维魔方裂变动画旋转效果代码

代码语言：html

所属分类：三维

代码描述：canvas实现webgl三维魔方裂变动画旋转效果代码

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

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

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

  
  
</head>

<body >

      <script >
/*********
 * made by Matthias Hurrle (@atzedent) 
 */
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2");

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

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
   /*********
    * made by Matthias Hurrle (@atzedent)
    */
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif

    out vec4 fragColor;

    uniform vec2 resolution;
    uniform float time;
    uniform vec2 touch;
    uniform int pointerCount;
    uniform vec2 pointers[10];

    #define mouse (touch/resolution)
    #define P pointerCount
    #define T time
    #define S smoothstep

    #define TAU 6.2831853
    #define ESN 1.5707963
    #define PI 3.14159265

    #define hue(a) (.24+.4*cos(10.3*(a)+vec3(0,83,21)))

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

      return mat2(c,-s,s,c);
    }

    float rnd(vec2 p) {
      return fract(sin(dot(p, vec2(234, 543)))*345678.);
    }

    vec3 threads(vec2 uv) {
      float
      distort = mix(.75,1.,rnd(uv));
      uv *= distort;

      vec3 col = vec3(0);

      for (float i=.0; i<3.; i++) {
        uv.x += sin((i+3.)*T+uv.y*1.5)*.2;
        col += abs(.075/uv.x*.5)*.9;
      }

      col *= hue(T*.25);

      float tr = T*3.-(uv.x+.5)*1.5;
      col.yz *= rot(tr);
      col.xz *= rot(tr*.7);
      col = abs(col);

      col -= dot(uv,uv)*.25;
      col = max(col,.0);
      col = 1.-1./col;

      col = max(col,.0);

      return col;
    }

    vec3 pattern(vec2 uv) {
      float t=8.9,
      a=1., b=1., c=1., d=.0;

      for (int i=0; i<10; i++) {
        vec2 p = vec2(
          cos(uv.y*a-d+t/b),
          sin(uv.x*a-d+t/b)
        ) / c;
        p += vec2(-p.y,p.x)*.3;
        uv.xy += p;

        a *= 2.;
        b *= 1.5;
        c *= 1.75;

        d += .05+.1*t*b;
      }

      return vec3(
        sin(uv.x-t)*.5+.5,
        sin(uv.y+t)*.5+.5,
        sin((uv.x+uv.y+sin(t*.5))*.5)*.5+.5
      );
    }

    vec3 shade(float a) {
      return step(vec3(a), vec3(.5));
    }

    vec3 grid(vec2 uv) {
      const float z = 6., n = 4.;

      uv *= z;
      vec2 g = abs((fract(uv/n-.5)-.5)*n),
      id = floor(uv/n+.5);
      id = P>0?id:mix(id, abs(id), step(sin(T*.33333),.0));

      return mix(
        vec3(0),
        shade(
          rnd(
            vec2(log(length(vec2(234, 654)+id*100.)),atan(id.y, id.x))
            +floor(10.*fract(-T*(floor(mod(T*4.,24.))==.0?(P>0?.4:4.):.4)))
          )
        ),
        S(1.5,1.45,max(g.x, g.y))
      );
    }

    float box(vec3 p, vec3 s, float r) {
      p = abs(p)-s;

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

    float map(vec3 p) {
      float anim = T*4.,
      prog = mod(anim,24.),
      scene = floor(prog),
      n = 2.;
      if (scene <= 4.) n = 2.;
      else if (scene == 5.) n = 2.66666;
      else if (scene >= 6. && scene <= 22.) n = 3.33333;
      else n = 2.66666;

      n = P > 0 ? 3.33333 : n;

      p.y -= n*clamp(floor(p.y/n+.5),-1.,1.);
      p.xz -= n*clamp(floor(p.xz/n+.5),-1.,1.);
      return box(p,vec3(1),5e-3);
    }

    vec3 norm(vec3 p) {
      vec2 e = vec2(1e-3,0);
      float d = map(p);
      vec3 n = d-vec3(
        map(p-e.xyy),
        map(p-e.yxy),
        map(p-e.yyx)
      );

      return normalize(n);
    }

    void cam(inout vec3 p) {
      if (P > 0) {
        p.yz *= rot(-mo.........完整代码请登录后点击上方下载按钮下载查看