index.html

<html>
  <head>
    <title>Some shader experiments</title>
    <style></style>
    <link rel='stylesheet' href='css/style.css' type='text/css' media='all'/>
    <script id="cubeVertexShader" type="x-shader/x-vertex">
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
      }
    </script>
    <script id="cubeFragmentShader" type="x-shader/x-fragment">
      uniform sampler2D texture1;
      uniform sampler2D texture2;
      uniform float time;
      uniform float fog_density;
      uniform vec3 fog_color;
      varying vec2 vUv;

      void main() {
        vec4 noise = texture2D( texture1, vUv );
        vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time  *0.02;
        vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01;

        T1.x += noise.x * 2.0;
        T1.y += noise.y * 2.0;
        T2.x -= noise.y * 0.2;
        T2.y += noise.z * 0.2;

        float p = texture2D(texture2, T1*2.0).a;
        vec4 color = texture2D( texture1, T2 * 2.0 );
        vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );

        if( temp.r > 1.0 ){ temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
        if( temp.g > 1.0 ){ temp.rb += temp.g - 1.0; }
        if( temp.b > 1.0 ){ temp.rg += temp.b - 1.0; }
       
        gl_FragColor = temp;

        float depth = gl_FragCoord.z / gl_FragCoord.w;
        const float LOG2 = 1.442695;
        float fog_factor = exp2( - fog_density * fog_density * depth * depth * LOG2 );
        fog_factor = 1.0 - clamp( fog_factor, 0.0, 1.0 );
        gl_FragColor = mix(temp, vec4(1, 1, 0, 1), fog_density);
      }
    </script>
  </head>
  <body>
    <div id="stats"></div>
<<<<<<< HEAD
=======
    <div id="warning">
      Dude! You browser does not support WebGL or it is disabled! Go fix it and check on <a href="http://get.webgl.org/">http://get.webgl.org/</a>
    </div>
>>>>>>> gh-pages
    <script src="js/vendors/threejs/three.min.js"></script>
    <script src="js/vendors/threejs/stats.js"></script>
    <script src="js/vendors/dat.gui.min.js"></script>

    <script src="js/app/app.js"></script>
    <script defer="defer" src="js/app/main.js"></script>
  </body>
</html>