<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.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;
  
  
    /*
      Bumpy 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 the previous bump algorithm over a tri-noise.
      Simple and elegant.
      
      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.

  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);

  }

// ------------------------------
  
    float bumpMap(vec2 uv, inout vec2 q, inout vec2 r) {
      float t = sin(u_time / 50.);
      mat2 rotation = mat2(
        cos(t), -sin(t),
        sin(t), cos(t)
      );
      uv.x -= .2 * u_time;
      uv *= rotation;
      uv *= 1.;
      
      // float colour = triSmoothNoise2D(uv);
      q = vec2(triSmoothNoise2D(uv, u_time * .2), triNoise2D(uv));
      
      // colour = smoothstep(0., 1., colour);
      
      return q.x * 3.;
    }

    vec4 renderPass(vec2 uv, vec2 uvoffset) {
      vec3 surfacePos = vec3(uv, 0.0);
      vec3 ray = normalize(vec3(uv, 1.));
      vec3 lightPos = vec3(cos(u_time / 2.) * 2., sin(u_time / 2.) * 2., -3.);
      vec3 normal = vec3(0., 0., -1);

      vec2 sampleDistance = vec2(1. / u_resolution.x, 0.);
      
      vec2 q = vec2(0.,0.);
      vec2 r = vec2(0.,0.);

      float fx = bumpMap(surfacePos.xy-sampleDistance.xy + uvoffset, q, r);
      float fy = bumpMap(surfacePos.xy-sampleDistance.yx + uvoffset, q, r);
      float f = bumpMap(surfacePos.xy + uvoffset, q, r);
      fx = (fx-f)/sampleDistance.x;
      fy = (fy-f)/sampleDistance.x;
      normal = normalize( normal + vec3(fx, fy, 0) * 0.2 );           

      vec3 lightV = lightPos - surfacePos;
      float lightDist = max(length(lightV), 0.001);
      lightV /= lightDist;
      
      vec3 lightColour = vec3(.5, .8, 1.);
      
      float shininess = 0.1;
      float brightness = 10.;

      float falloff = 0.5;
      float attenuation = 1./(1.0 + lightDist*lightDist*falloff);

      float diffuse = max(dot(normal, lightV), 0.);
      float specular = pow(max(dot( reflect(-lightV, normal), -ray), 0.), 52.) * shininess; 

      vec3 texCol = (vec3(q.x / 8. + .5) - .5) * brightness;
      
      vec3 colour = (texCol * (diffuse*vec3(1, .97, .92)*2. + 0.5) + lightColour*specular * f * 2.)*attenuation;
      // colour = texCol;
      
      return vec4(colour, 1.);
    }
  
  void main() {
    
    vec2 fragCoord = gl_FragCoord.xy;
      // Screen coordinates.
    vec2 uv = (fragCoord - u_resolution.xy*.5)/u_resolution.y;
    
    uv *= 5.;
    
    vec4 render = renderPass(uv, vec2(1.));
    
    gl_FragColor = render;
  }

</script>


<div id="container"></div>

body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;
}

/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw 
the shader. The only thing to see here really is the uniforms sent to 
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/

let container;
let camera, scene, renderer;
let uniforms;

function init() {
  container = document.getElementById( 'container' );

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

  uniforms = {
    u_time: { type: "f", value: 1.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    u_mouse: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );

  container.appendChild( renderer.domElement );

  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );

  document.onmousemove = function(e){
    uniforms.u_mouse.value.x = e.pageX
    uniforms.u_mouse.value.y = e.pageY
  }
}

function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  uniforms.u_time.value += 0.05;
  renderer.render( scene, camera );
}



init();
animate();