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
 .........完整代码请登录后点击上方下载按钮下载查看