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

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

代码语言：html

所属分类：三维

代码描述：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);
      vec2 p=uv;
      float d=1.;
    
      for (float i=.0; i<3.; i++) {
        p = vec2(cos(.125*sin(uv.x)),sin(uv.y)*.25);
        float
        a = fbm(-T*.25+120.*uv*length(p)*d),
        b = fbm(-T*.25+vec2(0,1.25)+8.*uv*length(p)*d);
        d = mix(a,b,pow(fract(T),.25));
        uv *= .25;
        col += palette(d)*.5;
      }
    
      col = mix(col, vec3(.5),.5);
      col = mix(col, col*col*col*col, col);
      col = S(.0, 1., col);
      col = pow(col, vec3(.4545));
    
      return col;
    }
    
    vec3 pattern2(vec2 uv) {
    	vec3 col = vec3(0);
    	vec2 p=uv;
    	float d=1.;
    
    	for (float i=.0; i<3.; i++) {
    		p = vec2(cos(.25*sin(uv.x)),cos(uv.y)*.25);
    		float a=fbm(2.*uv*length(p)*d);
    		d = a;
    		uv *= .25;
    		col += palette(d)*.5;
    	}
    
    	col = mix(col, vec3(.5),.5);
      col = mix(col, col*col*col*col, col);
      col = S(.0, 1., col);
      col = pow(col, vec3(.4545));
    
    	return col;
    }
    
    void main(void) {
      vec2 uv = (FC-.5*R)/min(R.x,R.y);
      vec3 p1 = pattern1(uv), p2 = pattern2(uv),
      col = mix(p1, p2, .65);
      O = vec4(col,1);
.........完整代码请登录后点击上方下载按钮下载查看