webgl实现三维立方体镜面反射折射动画效果代码

代码语言:html

所属分类:三维

代码描述:webgl实现三维立方体镜面反射折射动画效果代码

代码标签: webgl 三维 立方体 镜面 反射 折射 动画

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
  margin: 0;
  touch-action: none;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
}
</style>

  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
  <script type="x-shader/x-fragment" id="rusty">#version 300 es
    /*********
    * made by Matthias Hurrle (@atzedent)
    */
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    out vec4 O;
    uniform vec2 resolution;
    uniform float time;
    #define FC gl_FragCoord.xy
    #define R resolution
    #define T mod(time*.25,60.)
    #define S smoothstep
    
    vec3 palette(float t) {
      vec3
      a=vec3(.5),
      b=vec3(.5),
      c=vec3(1),
      d=vec3(.2,.3,.4);
    
      return a+b*cos(6.3*(c*d+t));
    }
    
    float rnd(vec2 p) {
      return fract(sin(dot(p,vec2(12.9898,78.233))+floor(T))*345678.);
    }
    
    float noise(vec2 p) {
      vec2 i=floor(p), f=fract(p), u=S(.0,1.,f);
    
      float
      a=rnd(i),
      b=rnd(i+vec2(1,0)),
      c=rnd(i+vec2(0,1)),
      d=rnd(i+1.);
    
      return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
    }
    
    float fbm(vec2 p) {
      float t=.0, a=1.;
    
      for (int i=0; i<5; i++) {
        t += a*noise(p);
        p *= 2.;
        a *= .5;
      }
    
      return t;
    }
    
    vec3 pattern1(vec2 uv) {
      vec3 col = vec3(0);.........完整代码请登录后点击上方下载按钮下载查看

网友评论0