three实现彩色时间涟漪动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three实现彩色时间涟漪动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

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

#container {
  position: fixed;
  touch-action: none;
}
</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 vec2 u_mouse;
    uniform float u_time;
    uniform vec3 u_colours[ 5 ];
  
    const float multiplier = 1.2;
  
    const float zoomSpeed = 4.;
    const int layers = 12;
  
    const int octaves = 1;
    const float seed = 43758.5453123;
    const float seed2 = 73156.8473192;
  
    float random(float val) {
      return fract(sin(val) * seed);
    }
  
    vec2 random2(vec2 st, float seed){
        st = vec2( dot(st,vec2(127.1,311.7)),
                  dot(st,vec2(269.5,183.3)) );
        return -1.0 + 2.0*fract(sin(st)*seed);
    }
  
    mat2 rotate2d(float _angle){
        return mat2(cos(_angle),sin(_angle),
                    -sin(_angle),cos(_angle));
    }
  
    // Value Noise by Inigo Quilez - iq/2013
    // https://www.shadertoy.com/view/lsf3WH
    float noise(vec2 st, float seed) {
        vec2 i = floor(st);
        vec2 f = fract(st);

        vec2 u = f*f*(3.0-2.0*f);

        return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ), 
                         dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),
                    mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ), 
                         dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);
    }
  
    float fbm(in vec2 st, float seed) {
      float value = 0.0;
      float amp = 0.5;
      vec2 shift = vec2(100);
      // Rotate to reduce axial bias
      mat2 rot = mat2(cos(1.5), sin(1.5), -sin(1.5), cos(1.50));
      for (int i = 0; i < octaves; ++i) {
        value += amp * abs(noise(st, seed));
        st = rot * st * 2.0 + shift;
        amp *= 0.5;
      }
      return value;
    }
  
    vec3 renderNoise(vec2 uv) {
      float r = fbm(uv, seed);
      return vec3(r * r * 10.);
    }
  
    vec3 renderRipples(vec2 uv, float multiplier, inout vec2 id) {
      vec2 _uv = uv;
      id = floor(uv);
      vec2 rand2 = random2(id, seed);
      // _uv.y += u_time * 1. * mod(id.x, 2.) - 1.;
      // uv = fract(_uv) - .5;
      uv = mod(uv, 1.) - .5;
      
      float len = length(uv);
      
      float field = len+0.05*(u_time*5.);
      // field = mod(field, 1.);
// 
      // float ripple = smoothstep(0., 0.5 - multiplier, sin(field*80.0 * length(rand2))) + smoothstep(0.5 + multiplier, 0., sin(field*80.0 * length(rand2)));
      float ripple = smoothstep(0.99, -.5, sin(field*80.0 * length(rand2)*length(rand2)));
      ripple *= smoothstep(0.4,.8,clamp(1. - len * 1.2,0.0,1.0));
      
      return vec3(ripple*ripple*ripple*2.);
    }
  
    // The render function is where we render the pattern to be added to the layer
    vec3 render(vec2 uv, float multiplier, inout vec2 id) {
      vec3 n = renderNoise(uv*.5);
      n *= n*8.;
      return renderRipples(uv, multiplier, id)*(.1+n);

    }
  
    vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, inout vec2 id) {
      // Scale
      // Generating a scale value between zero and 1 based on a mod of u_time
      // A frequency of 10 dixided by the layer index (10 / layers * layer)
      float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
      uv *= 8.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
      uv *= (1. + random(float(layer)));
      uv *= scale; // then modifying the overall scale by the generated amount
      // uv += .5*float(layer);
      uv = rotate2d(u_time / 10.) * uv; // rotarting
      uv += vec2(1.5) * float(layer) * random(float(layer+10)); // ofsetting the UV by an arbitrary amount to make the layer appear different
      
      // id = random2(floor(uv), seed);

      // render
      vec3 pass = render(uv * multiplier, multiplier, id); // render the pass

       // this is the opacity of the layer fading in from the "bottom"
      opacity = clamp(1. + scale * 1.1, 0., 1.);
      float _opacity = opacity;

      // This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
      float endOpacity = 1.;
      endOpacity = smoothstep(0., 0.05, scale * -1.);
      opacity += endOpacity;

      return cl.........完整代码请登录后点击上方下载按钮下载查看