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