three实现噪点岩浆熔岩液态流动动画效果代码-html代码-BFW代码库

three实现噪点岩浆熔岩液态流动动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现噪点岩浆熔岩液态流动动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
}
</style>



</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 u_resolution;
    uniform float u_time;
  
    const int octaves = 1;
    const float seed2 = 73156.8473192;
    const float seed = 43758.5453123;
  
    float time;
  
    /*
      Tri-Noise Texture
      Liam Egan - 2018
      ----------------------

      Tri-noise is my new love, I think. It's cheap, slightly regular and slightly chaotic. 
      Here I'm just using layering 3 of them together in a distortion matrix.
      
      Many many thanks to Inigo Quilez, Patricio Gonzalez Vivo, 
      Gary Warne, Nimitz, and many many others.
      "Nanos gigantum humeris insidentes"

    */
  

// ------------------------------
  // Credit: Nimitz (ShaderToy.com, Stormoid.com), who came up with the clever idea to use overlapping triangle functions to create cheap noise.
  // Also to Gary "Shane" Warne at Shader Toy for the full implementation used here.

  const mat2 m2 = mat2(0.75, 1.2990381, -1.2990381, 0.75);

  float tri(float x){ return abs(fract(x)-0.5); }
  float triXY(vec2 p){ return tri(p.x+tri((p.y-0.25)*1.5)) + tri(p.y-tri((p.x+0.5)*1.5)); }
  float tri2(vec2 p){
      // return tri(p.x + 0.25 + tri(p.y*1.5))+tri(p.y - 0.25 + tri(p.x*1.5));
      // return tri(p.x + 0.25 + tri(p.y*0.5))+tri(p.y - 0.25 + tri(p.x*0.5));
      // float t = sin(u_time * .1);
      return tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666));

  }

  float triNoise2D(vec2 p){
    
    // mat2 m2 = m2 * sin(u_time);

      float n = tri2(p);//(tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666)));//tri2(p);//
      p *= m2;
      n += tri2(p)*0.7071;//(tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666)))*0.7071;
      p *= m2;
      n += tri2(p)*0.5;//(tri(p.x + tri(p.y*0.5 + 0.3333)) + tri(p.y + tri(p.x*0.5 - 0.1666)))*0.5;   
      return n/(2.2071);

  }

  // This is the smooth version of the tri function above. Sometimes, it's preferrable. Other times, not so much.
  float triSmooth(in float x){return 0.25+0.25*cos((x)*6.2831853);}
  float triSmooth2(float x){ x = abs(fract(x)-0.5); return x*x*(6.-8.*x); }
  float triSmoothXY(vec2 p){ return triSmooth(p.x+triSmooth((p.y-0.25)*1.5)) + triSmooth(p.y-triSmooth((p.x+0.5)*1.5)); }
  float triSmoothNoise2D(vec2 p, float ani_seed){
    
    // mat2 m2 = m2 * (sin(u_time / 20.) + .5;
    float t = ani_seed * .3333;
    float t1 = ani_seed * .15;

      float n = (triSmooth(p.x + triSmooth(p.y*0.5 + t)) + triSmooth(p.y + triSmooth(p.x*0.5 - t1)));
      p *= m2;
      n += (triSmooth(p.x + triSmooth(p.y*0.5 + t)) + triSmooth(p.y + triSmooth(p.x*0.5 - t1)))*0.7071;
      p *= m2;
      n += (triSmooth(p.x + triSmooth(p.y*0.5 + t)) + triSmooth(p.y + triSmooth(p.x*0.5 - t1)))*0.5;   
      return n/(2.2071) * .5 + .5;

  }

  // ------------------------------
  
  float patte.........完整代码请登录后点击上方下载按钮下载查看