three+dat.gui实现水波纹可调节参数效果代码-html代码-BFW代码库

three+dat.gui实现水波纹可调节参数效果代码

代码语言：html

所属分类：动画

代码描述：three+dat.gui实现水波纹可调节参数效果代码

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

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

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


  
  
  
    <style>
      body { margin: 0; overflow: hidden; user-select: none; background: #000000; }
      canvas { display: block; }
    </style>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.139.js"></script>
</head>

  <body>
    <script type="module">
    
      import { GUI } from '//repo.bfw.wiki/bfwrepo/js/module/dat.gui.js';

      const vertexShader = `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `;

      const fragmentShader = `
        uniform float time;
        uniform float speed;
        uniform float intensity;
        uniform float xIntensity;
        uniform float yIntensity;
        uniform vec3 color;
        uniform vec2 iResolution;
        uniform float iTime;
        uniform float noiseScale;
        uniform vec3 color_01;
        uniform vec3 color_02;
        uniform vec3 color_03;
        uniform vec3 color_04;
        uniform float m00;
        uniform float m01;
        uniform float m10;
        uniform float m11;
        varying vec2 vUv;

        float hash( float n ) {
          return fract(sin(n)*75728.5453123); 
        }

        float noise( in vec2 x ) {
          vec2 p = floor(x);
          vec2 f = fract(x);
          f = f*f*(3.0-2.0*f);
          float n = p.x + p.y*57.0;
          return mix(mix( hash(n + 0.0), hash(n + 1.0), f.x), mix(hash(n + 57.0), hash(n + 58.0), f.x), f.y);
        }

        float fbm(vec2 p){
          mat2 m = mat2(m00, m01, m10, m11);
          float f = 0.0;
          f += 0.5000 * noise(p); p *= m * 2.02;
          f += 0.2500 * noise(p); p *= m * 2.03;
          f += 0.1250 * noise(p); p *= m * 2.01;
          f += 0.0625 * noise(p); p *= m * 2.04;
          f /= 0.9375;
          return f;
        }

        void mainImage(out vec4 fragColor, in vec2 fragCoord){
          vec2 uv = fragCoord.xy / iResolution.xy ;  
          vec2 p = - 1. + 2. * uv;
          p.x *= iResolution.x / iResolution.y;

          float r = sqrt(dot(p,p)); 
          float a = cos(p.y * p.x);  

          float f = fbm(noiseScale * p);
          a += fbm(vec2(1.9 - p.x, speed * iTime + p.y));
          a += fbm(0.4 * p);
          r += fbm(2.9 * p);

          vec3 col = color_01;

          float ff = 1.0 - smoothstep(-0.4, 1.1, noise(vec2(0.5 * a, 3.3 * a)) );        
         .........完整代码请登录后点击上方下载按钮下载查看