canvas+webgl实现炫酷三维彩色体积灯光晕玻璃折射立体效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：canvas+webgl实现炫酷三维彩色体积灯光晕玻璃折射立体效果代码

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

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

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

  
  

  
</head>

<body >
  
  
      <script>
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2");

document.title = "🤖";
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 = Math.max(1, .5 * 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;

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

    #define syl(p,s) (length(p)-s)

    mat2 rot(float a) {
      float c = cos(a),
      s = sin(a);
      return mat2(c, -s, s, c);
    }
    
    float smin(float a, float b, float k) {
      float h = clamp(
        .5+.5*(b-a)/k,
        .0,
        1.
      );
      return mix(b,a,h)-k*h*(1.-h);
    }
    
    vec2 smax(vec2 a, vec2 b, float k) {
      a.x = smin(a.x, -b.x, k);
      
      return a;
    }
    
    float rnd(vec2 p) {
      return fract(sin(dot(p.xy,p.yx+vec2(234, 543)))*345678.);
    }
    
    float rnd(float a) {
      return fract(sin(a*12.599)*78.233);
    }
    
    float curve(float t) {
      t /= .5;
      
      return mix(
        rnd(floor(t)),
        rnd(floor(t)+1.),
        pow(S(.0, 1., fract(t)), 4.)
      );
    }
    
    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;
    }
    
    vec2 map(vec3 p) {
      vec2 flr = vec2(-box((p-.2)-vec3(0,4,0), vec3(10,5,10), .2), 0),
      sph = vec2(syl(p, 1.), 1),
      cyl = vec2(-syl(abs(p.xy)-vec2(.25), .18), -1),
      lgt = vec2(syl(abs(p)-vec3(.25,.25,0), .1), 2),
      a = smax(sph, -cyl, -.055);
      a = a.x < flr.x ? a: flr;
      a = a.x < lgt.x ? a: lgt;
      
      return a;
    }
    
    float pattern(vec3 p) {
      vec2 uv = p.xy;
      
      return step(length(abs(uv)-vec2(.25))-.2, .0);
    }
    
    vec3 tiles(vec3 p) {
      if (p.y > 5. || p.x > 9.9 || p.z > 9.9) return vec3(0);
      
      vec2 uv = p.xz;
      vec3 col = vec3(0);
      vec2 grid = S(.31,.3,abs(fract(uv)-.5));
      vec2 cell = floor(uv);
      
      col += min(grid.x, grid.y);
      col *= vec3(rnd(cell), rnd(cell + 12.23), rnd(cell + 78.59));
      col *= curve(T*4.+rnd(cell)*99.33);
      
      return col;
    }
    
    vec3 wallart(vec3 p) {
      vec3 col = vec3(0);
      vec2 uv = vec2(0);
      
      p.y -= 4.;
      
      if (abs(p.x) > 9.8 || abs(p.z) > 9.8) {
        p.y = abs(p.y) - .75;
        uv = p.yz;
        for (float i = .0; i < 4.; i++) {
          uv.x += sin((i+3.)*T*1.5+uv.y*1.2)*.6;
          col += abs(.057/uv.x*.65)*1.618;
        }
    
        col *= .3*pow(.6+.6*cos(6.3*(T*.25)+vec3(0,23,21)), vec3(.5));
      }
    
      return col;
    }
    
    vec3 vol(vec3 p, vec3 rd, vec3 ro, float maxd) {
      const float s = .2;
      
      float distort = rnd(p.xz),
      d = s * distort;
      
      vec3 col = vec3(0);
      vec3 vr = rd * s,
      vp = ro + vr * distort;
      
      for (float i = .0; i < 50.; i++) {
        if (d > maxd) break;
        
        float fadep = 1.-clamp(abs(.5+vp.z*vp.z)*.02, .0, 1.),
        fadet = 1.-clamp(vp.y*vp.y*vp.y, .0, 1.);
        
        col += pattern(vp)*.01 * fadep*fadep;
        col += tiles(vp)*.02 * fadet*fadet;
        
        v.........完整代码请登录后点击上方下载按钮下载查看