canvas/webglshaders/lightbox.html

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Point Lighting</title>
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/page.css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
</head>

<body onload="init()">
   <canvas id="canvas" width="800" height="540"></canvas>
   <a href="#" id="fullscreen">Toggle Full Screen</a>

</body>
<script src="js/dat.gui.min.js"></script>
<script src="js/stats.min.js"></script>
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;

void main()
{
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif

uniform float time;
uniform vec2 resolution;
uniform vec3 cameraPos;
uniform vec3 cameraLookat;
uniform vec3 lightPosition;
uniform vec3 lightColour;
uniform float specular;
uniform float specularHardness;
uniform float lightAttenuation;
uniform float ambientFactor;
uniform bool rotateWorld;
uniform float param;
uniform float fog;
uniform float noise1;
uniform float noise2;
uniform sampler2D ntexture;

#define PI 3.14159265
#define AO_SAMPLES 4

#define RAY_DEPTH 175
#define MAX_DEPTH 20.0
#define DISTANCE_MIN 0.001
#define PI 3.14159265

#define MATERIAL_SKY 0.0
#define MATERIAL_FLOOR 1.0
#define MATERIAL_METAL 2.0
#define MATERIAL_LIGHT 3.0

const vec2 delta = vec2(DISTANCE_MIN, 0.);

#define TEXTURESIZE 512.0

float TNoiseL(in vec2 x) 
{
return texture2D(ntexture,(x+vec2(0.5,0.5))/TEXTURESIZE,-100.0).x;
}

float TNoise(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;
float res = mix(mix( texture2D(ntexture,(n+vec2(0.5,0.5))/TEXTURESIZE,-100.0).x, texture2D(ntexture,(n+1.0+vec2(0.5,0.5))/TEXTURESIZE,-100.0).x,f.x),
             mix( texture2D(ntexture,(n+57.0+vec2(0.5,0.5))/TEXTURESIZE,-100.0).x, texture2D(ntexture,(n+58.0+vec2(0.5,0.5))/TEXTURESIZE,-100.0).x,f.x),f.y);
return res;
}

float Hash(in float n)
{
return fract(sin(n)*43758.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;
float res = 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);
return res;
}

mat2 octave_m = mat2(2.2,1.6,-1.6,2.2);
float fbm(in vec2 xy)
{
float w = 1.0;
float f = 0.0;
for (int i = 0; i < 6; i++)
{
f += Noise(xy) * w;
w *= 0.5;
xy *= octave_m;//2.333;
}
return f;
}

vec3 RotateY(vec3 p, float a)
{
float c,s;
vec3 q=p;
c = cos(a);
s = sin(a);
p.x = c * q.x + s * q.z;
p.z = -s * q.x + c * q.z;
return p;
}

vec3 ReplicateXZ(vec3 p, vec3 c)
{
return vec3(mod(p.x, c.x) - 0.5 * c.x, p.y, mod(p.z, c.z) - 0.5 * c.z);
}

const float rr = 1.0/sqrt(3.0);
float CubeFrame(vec3 p, vec3 c, float r)
{
r = r*mix(1.0,rr,.5);
p -= c;
p = abs(p);
float rr = r * .10;   // edge
p -= vec3(r-rr);
// whichever axis is most negative should be clamped to 0
if ( p.x < p.z ) p = p.zyx;
if ( p.y < p.z ) p = p.xzy;
p.z = max(0.0,p.z);
return length(p)-rr;
}

float RoundBox( vec3 p, vec3 b, float r )
{
return length(max(abs(p)-b,0.0))-r;
}

vec2 MetalFrame(vec3 p)
{
float yoffset = cos(time*0.5)*0.5;

vec3 q = RotateY(vec3(p.x,p.y-yoffset,p.z), sin(time*0.05)*2.0*PI);

// frame
float d = min(
CubeFrame(vec3(q.x,q.y,q.z), vec3(0.0, 1.5 ,0.0), 0.6),
CubeFrame(RotateY(vec3(q.x,q.y,q.z),PI/4.0), vec3(0.0, 1.5, 0.0), 0.6)
);
// top panels
//d = min(d, RoundBox(vec3(q.x, q.y-2.0, q.z), vec3(0.5-0.015,0.015,0.5-0.015), 0.005));
//d = min(d, RoundBox(RotateY(vec3(q.x, q.y-2.0, q.z),PI/4.0), vec3(0.5-0.015,0.015,0.5-0.015), 0.005));
// hole
//d = max(-(length(vec3(q.x, q.y-2.0, q.z)) - 0.333), d);
// bottom panels
//d = min(d, RoundBox(vec3(q.x, q.y-1.0, q.z), vec3(0.5-0.015,0.015,0.5-0.015), 0.005));
//d = min(d, RoundBox(RotateY(vec3(q.x, q.y-1.0, q.z),PI/4.0), vec3(0.5-0.015,0.015,0.5-0.015), 0.005));
// TODO: candle container, wax (SSS) candle, visible candle flame - flicker...

return vec2(d, MATERIAL_METAL);
}

vec2 Floor(vec3 pos)
{
vec3 q = ReplicateXZ(pos, vec3(2.0,0.,2.0));    // domain size tied to Marble() check size below!
// TODO: skip fbm (or lower fbm?) based on distance from camera
return vec2(RoundBox(vec3(q.x, q.y+fbm(q.zx*noise1)*noise2, q.z), vec3(0.965,0.1,0.965), 0.04), MATERIAL_FLOOR);
}

vec3 LightPosition()
{
float yoffset = cos(time);
return RotateY(vec3(lightPosition.x, lightPosition.y-yoffset, lightPosition.z), sin(time*0.333)*2.0*PI);
}

vec2 DistLight(vec3 pos)
{
return vec2(length(pos-LightPosition()) - 0.02, MATERIAL_LIGHT);
}

vec2 min2(vec2 a, vec2 b) { return a.x < b.x ? a : b; }
vec2 Map(vec3 pos)
{
return min2(MetalFrame(pos), Floor(pos));
}

vec2 MapAll(vec3 pos)
{
vec2 dm = min2(MetalFrame(pos), Floor(pos));
return min2(dm, DistLight(pos));
}

float CalcAO(vec3 p, vec3 n)
{
float r = 0.0;
float w = 1.0;
for (int i=1; i<=AO_SAMPLES; i++)
{
float d0 = float(i) * ambientFactor;   // NOTE: factor controls the 'spread' of the AO test and therefore overlap into domain cells
r += w * (d0 - abs(Map(p + n * d0).x));
normalize(n + vec3(0.0,0.5,0.0));      // NOTE: see http://www2.compute.dtu.dk/pubdb/views/edoc_download.php/6392/pdf/imm6392.pdf p42
w *= 0.5;
}
return 1.0 - r;
}

float SoftShadow(vec3 ro, vec3 rd, float lightDistance)
{
float ph = 1e20; // big, such that y = 0 on the first iteration

float k = 24.0;             // softness
float res = 1.0;
float t = 0.01;             // min-t see http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm
for (int i=0; i<48; i++)
{
float h = Map(ro + rd * t).x;

// Improved shadows see https://www.shadertoy.com/view/lsKcDD - by Sebastian Aaltonen
// ideal for this scene due to the extended length and spread of the point light shadows
// res = min(res, k*h/t); << old way
float y = h*h / (2.0*ph);
float d = sqrt(h*h-y*y);
res = min(res, k*d/max(0.0,t-y));
ph = h;

t += h;
if (res < 0.0001 || t > lightDistance) break;    // max-t
}
return clamp(res, 0.0, 1.0);
}

vec3 GetNormal(vec3 pos)
{
// TODO: try other normal calcs e.g. tetrhedral
vec3 n;
n.x = Map( pos + delta.xyy ).x - Map( pos - delta.xyy ).x;
n.y = Map( pos + delta.yxy ).x - Map( pos - delta.yxy ).x;
n.z = Map( pos + delta.yyx ).x - Map( pos - delta.yyx ).x;
return normalize(n);
}

const vec3 sunPosition = vec3(-7.5, 7.0, 0.0);
const vec3 sunColour = vec3(1.0,0.6,0.3);
vec3 Sky(vec3 rd)
{
vec3 sky = mix( vec3(0.75,0.78,0.90), vec3(0.0), exp2(-(1.0/max(rd.y, 0.25))*vec3(0.6,0.8,1.0)) );
float sunAmount = max(dot(rd, normalize(sunPosition)), 0.0);
sky += sunColour * sunAmount * 0.5 + sunColour * min(pow(sunAmount, 800.0), .3);
// darken sky to give dark underside for gaps in floor
sky *= max(vec3(smoothstep(0.0,1.0,(rd.y+0.2)*10.0)), 0.25);
return sky;
}

const vec3 check1 = vec3(0.6,0.25,0.2);
const vec3 check2 = vec3(0.8,0.83,0.81);
const float checkSize = 1.0/4.0;
// marble (from 'the surface king' TekF https://www.shadertoy.com/view/MdXSzX)
vec4 Marble(vec3 pos)
{
vec3 p = pos;

// checkboard
vec3 marbleAxis;
vec3 board;
vec3 vein;
if (fract(p.x*checkSize)>.5)
{
if (fract(p.z*checkSize)>.5)
{
   board = check1;
   vein = vec3(1,.8,.5);
   marbleAxis = normalize(vec3(1,-3,2));  // move normalize out
}
else
{
   board = check2;
   vein = vec3(.1,0,0);
   marbleAxis = normalize(vec3(1,2,3));
}
}
else
{
if (fract(p.z*checkSize)>.5)
{
   board = check2;
   vein = vec3(.1,0,0);
   vein = normalize(vec3(1,2,3));
}
else
{
   board = check1;
   vein = vec3(1,.8,.5);
   marbleAxis = normalize(vec3(1,-3,2));
}
}
vec3 mfp = (p + dot(p,marbleAxis)*marbleAxis*2.0)*2.0;
float marble = 0.0;
marble += abs(Noise(mfp.xz)-.5);
marble += abs(Noise(mfp.xz*2.0)-.5)/2.0;
marble += abs(Noise(mfp.xz*4.0)-.5)/4.0;
marble += abs(Noise(mfp.xz*8.0)-.5)/8.0;
marble /= 1.0-1.0/8.0;
marble = pow(1.0-clamp(marble,0.0,1.0),10.0); // curve to thin the veins
return vec4(mix( board, vein, marble ), marble);
}

const float metalDiffuse = 0.05;
const float metalSpecular = 16.0;
const float metalSpecularHardness = 32.0;
const float floorDiffuse = 0.4;
const float floorSpecular = 2.0;
const float floorSpecularHardness = 256.0;
const float floorReflect = 0.2;
const float skyBounceAmbient = 0.15;
vec4 Shading(vec3 pos, vec3 ro, vec3 rd, vec3 norm, float mat)
{
// simple materials
if (mat == MATERIAL_SKY) return vec4(Sky(rd), 0.0);
if (mat == MATERIAL_LIGHT) return vec4(1.0,1.0,0.0, 0.0);

// shaded materials
vec3 light = vec3(0.0);
vec3 shadow = vec3(1.0);

float occlusion = CalcAO(pos, norm);

// point light calculation
vec3 lightPos = LightPosition();
vec3 toLight = lightPos - pos;                     // vector to the point light
float distance = length(toLight);                  // distance to light position
vec3 toLightDir = toLight / distance;              // normalised direction to the point light
float dotVP = dot(norm, toLightDir);               // shading angle from point light 
float attenuation = 1.0 / (distance * distance * lightAttenuation);     // distance squared attenuation
//if (dotVP > 0.0)	// TODO: seems to make no difference
{
light = lightColour * occlusion * max(0.0, dotVP) * attenuation;    // phong shade with occlusion
// Cast colorized shadow penumbra from point light (original colorized shadow technique by IQ)
// Note that for point light shadows the max distance should not exceed the distance from the surface
// to the light to avoid the 'double shadow' that will otherwise occur by marching through the light
shadow = pow(vec3(SoftShadow(pos, toLightDir, distance)), vec3(1.0, 1.2, 1.5));
}

// TODO: fresnel reflection?
float reflection = 0.0;
vec3 halfV = normalize(toLightDir - rd);		// blinn specular highlight calculation
if (mat == MATERIAL_FLOOR)
{
float spec = pow(max(0.0, dot(norm, halfV)), specularHardness) * attenuation;
vec4 marble = Marble(pos);
// fudging the shadow intensity a bit on the floor - but still occluding the specular fully
light = (floorDiffuse * marble.rgb * light * clamp(shadow,0.2,1.0)) + (spec * (max(specular - marble.w, 0.0)) * shadow);

// simple reflect of sky for floor (energy conserving)
// can reflect entire scene - but very SLOW due to noise on floor stones... :(
light *= (1.0 - floorReflect);
light += Sky(reflect(rd, norm)) * floorReflect;
}
if (mat == MATERIAL_METAL)
{
// TODO: rough metal e.g. anodized steel?
float spec = pow(max(0.0, dot(norm, halfV)), metalSpecularHardness) * attenuation;
light = (metalDiffuse * light) + (spec * metalSpecular) * shadow;

// metal surface reflection coefficient
reflection = 0.4;
}

// sky light with occlusion
float sky = clamp(0.5 + 0.5 * norm.y, 0.0, 1.0);
light += sky * vec3(0.24, 0.20, 0.24) * skyBounceAmbient * occlusion * occlusion;

// indirect light bounce with occlusion
float ind = clamp(dot(norm, normalize(sunPosition * vec3(-1.0,0.0,-1.0))), 0.0, 1.0);
light += ind * sunColour * skyBounceAmbient * occlusion * occlusion;

return vec4(light, reflection);
}

// Camera function by TekF
// Compute ray fro8m camera parameters
vec3 GetRay(vec3 dir, vec2 pos)
{
pos = pos - 0.5;
pos.x *= resolution.x/resolution.y;

dir = normalize(dir);
vec3 right = normalize(cross(vec3(0.,1.,0.),dir));
vec3 up = normalize(cross(dir,right));

return dir + right*pos.x + up*pos.y;
}

vec2 March(vec3 ro, vec3 rd, inout vec3 p)
{
float t = 0.0;
float d = 0.0;
for (int i=0; i<RAY_DEPTH; i++)
{
p = ro + rd * t;
vec2 dm = MapAll(p);
if (dm.x < DISTANCE_MIN)
{
   return dm;
}
t += dm.x;
if (t >= MAX_DEPTH) break;
}
return vec2(0.0, MATERIAL_SKY);
}

vec2 MarchReflect(vec3 ro, vec3 rd, inout vec3 p)
{
float t = 0.0;
float d = 0.0;
for (int i=0; i<RAY_DEPTH/2; i++)
{
p = ro + rd * t;
vec2 dm = MapAll(p);
if (dm.x < DISTANCE_MIN)
{
   return dm;
}
t += dm.x;
if (t >= MAX_DEPTH) break;
}
return vec2(0.0, MATERIAL_SKY);
}

// Original method by David Hoskins
#define GAMMA 0.8
#define CONTRAST 1.1
#define SATURATION 1.2
#define BRIGHTNESS 1.1
vec3 PostEffects(vec3 rgb, vec2 xy)
{
rgb = pow(rgb, vec3(GAMMA));
rgb = mix(vec3(.5), mix(vec3(dot(vec3(.2125, .7154, .0721), rgb*BRIGHTNESS)), rgb*BRIGHTNESS, SATURATION), CONTRAST);
rgb *= .4+0.5*pow(40.0*xy.x*xy.y*(1.0-xy.x)*(1.0-xy.y), 0.2 );	
return rgb;
}

vec3 Fog(vec3 rgb, vec3 rd, float distance)
{
const float start = 5.0;  // start offset
float fogAmount = clamp(1.0 - exp((-distance+start)*fog), 0.0, 1.0);
vec3 fogColor = Sky(rd);
return mix(rgb, fogColor, fogAmount);
}

void main()
{
const int ANTIALIAS_SAMPLES = 1;

vec3 cpos = cameraPos;
vec3 lookAt = cameraLookat;
if (rotateWorld)
{
cpos.y = sin(time*0.05)*2.0 + 3.0;
cpos.x = cos(time*.25)*4.0 + 2.0;
lookAt.y = sin(time*0.5)*2.0 - 1.5;
lookAt.z = -3.0;
}

vec4 res = vec4(0.0);
vec2 p;
float d_ang = 2.*PI / float(ANTIALIAS_SAMPLES);
float ang = d_ang * 0.33333;
float r = 0.5;
for (int i = 0; i < ANTIALIAS_SAMPLES; i++)
{
p = vec2((gl_FragCoord.x + cos(ang)*r) / resolution.x, (gl_FragCoord.y + sin(ang)*r) / resolution.y);
vec3 ro = cpos;
vec3 rd = normalize(GetRay(lookAt-cpos, p));
vec3 hit;

vec2 dm = March(ro, rd, hit);
float fogDistance = length(ro - hit);
vec3 fogRd = rd;
vec3 norm = GetNormal(hit);
vec4 shade = Shading(hit, ro, rd, norm, dm.y);
shade.rgb *= 1.0 - shade.a;
if (shade.a != 0.0) 
{
   // ray reflection - shift out again so not immediately hit same point
   rd = reflect(rd, norm);
   ro = hit + rd * DISTANCE_MIN;
   dm = MarchReflect(ro, rd, hit);
   norm = GetNormal(hit);
   vec4 shade1 = Shading(hit, ro, rd, norm, dm.y);
   shade.rgb += Fog(shade1.rgb, rd, length(ro - hit)) * shade.a;
}
res.rgb += Fog(shade.rgb, fogRd, fogDistance);
ang += d_ang;
}
res.rgb /= float(ANTIALIAS_SAMPLES);

gl_FragColor = vec4(PostEffects(res.rgb, p), 1.0);
}
</script>

<script type="text/javascript">
   var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
      function (c) { window.setTimeout(c, 15) };
   var config = {
      /*camera: {
      x: 0.0, y: 2.5, z: 3.0
      },
      lookat: {
      x: 0.0, y: -5.0, z: -15.0
      },*/
      camera: {
         x: 1.0, y: 4.4, z: 3.0
      },
      lookat: {
         x: -3.0, y: -12.0, z: -12.0
      },
      lightPosition: {
         x: 0.85, y: 2.0, z: 0.0
      },
      lightColour: {
         r: 0.6, g: 0.45, b: 0.3
      },
      surface: {
         specular: 1.0,
         specularHardness: 512.0,
         lightAttenuation: 0.025,
         ambientFactor: 0.20,
         noise1: 0.65,
         noise2: 0.01
      },
      global: {
         rotateWorld: false,
         fog: 0.05,
         param: 0.5
      }
   };

   function init() {
      var img = new Image();
      img.onload = function () {
         loaded([img]);
      };
      img.src = "./ggreynoise512.png";
   }

   var _images;
   var aspect, gl;
   function loaded(images) {
      _images = images;
      var pause = false;
      document.addEventListener('keydown', function (e) {
         switch (e.keyCode) {
            case 32: // SPACE
            case 27: // ESC
               pause = !pause;
               break;
         }
      }, false);

      // add GUI controls
      var mobile = (navigator.userAgent.indexOf("Android") !== -1);
      var gui = new dat.GUI();
      var panel = gui.addFolder('Camera Position');
      panel.add(config.camera, "x").min(-160.0).max(160.0).step(0.1);
      panel.add(config.camera, "y").min(-16.0).max(16.0).step(0.1);
      panel.add(config.camera, "z").min(-160.0).max(160.0).step(0.1);
      //panel.open();
      panel = gui.addFolder('Camera LookAt');
      panel.add(config.lookat, "x").min(-160.0).max(160.0).step(0.1);
      panel.add(config.lookat, "y").min(-16.0).max(16.0).step(0.1);
      panel.add(config.lookat, "z").min(-160.0).max(160.0).step(0.1);
      //if (!mobile) panel.open();
      panel = gui.addFolder('Light Position');
      panel.add(config.lightPosition, "x").min(-2.0).max(2.0).step(0.01);
      panel.add(config.lightPosition, "y").min(0.4).max(24.0).step(0.01);
      panel.add(config.lightPosition, "z").min(-2.0).max(2.0).step(0.01);
      if (!mobile) panel.open();
      panel = gui.addFolder('Light Colour');
      panel.add(config.lightColour, "r").min(0.0).max(3.0).step(0.1);
      panel.add(config.lightColour, "g").min(0.0).max(3.0).step(0.1);
      panel.add(config.lightColour, "b").min(0.0).max(3.0).step(0.1);
      //if (!mobile) panel.open();
      panel = gui.addFolder('Surface');
      panel.add(config.surface, "specular").min(0).max(16).step(0.01);
      panel.add(config.surface, "specularHardness").min(4).max(1024).step(4);
      panel.add(config.surface, "lightAttenuation").min(0.001).max(0.25).step(0.001);
      panel.add(config.surface, "ambientFactor").min(0).max(1).step(0.05);
      panel.add(config.surface, "noise1").min(0.01).max(4.0).step(0.01);
      panel.add(config.surface, "noise2").min(0.01).max(1.0).step(0.01);
      panel.open();
      panel = gui.addFolder('Global');
      panel.add(config.global, "fog").min(0).max(0.5).step(0.01);
      panel.add(config.global, "rotateWorld").name("Rotate World");
      panel.add(config.global, "param").min(0.01).max(1.0).step(0.01);
      if (!mobile) panel.open();

      var stats = new Stats();
      document.body.appendChild(stats.domElement);

      // create webgl context on the canvas element
      var canvas = document.getElementById("canvas");
      aspect = canvas.width / canvas.height;
      try {
         gl = canvas.getContext("experimental-webgl");
      }
      catch (e) {
         document.write("Whoops! No useful WEB-GL impl available. Shame on you and your browser vendor.<br>" + e.message);
         return;
      }
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // textures
      var noiseTexture = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, _images[0]);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
      gl.generateMipmap(gl.TEXTURE_2D);
      gl.bindTexture(gl.TEXTURE_2D, null);

      // get the vertex and fragment shader source
      var v = document.getElementById("vertex").firstChild.nodeValue;
      var f = document.getElementById("fragment").firstChild.nodeValue;

      // compile and link the shaders
      var vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, v);
      gl.compileShader(vs);

      var fs = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fs, f);
      gl.compileShader(fs);

      var program = gl.createProgram();
      gl.attachShader(program, vs);
      gl.attachShader(program, fs);
      gl.linkProgram(program);

      // debug shader compile status
      var error = false;
      if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
         error = true;
         console.log(gl.getShaderInfoLog(vs));
      }

      if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
         error = true;
         console.log(gl.getShaderInfoLog(fs));
      }

      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
         error = true;
         console.log(gl.getProgramInfoLog(program));
      }
      if (error) return;

      var firstTime = Date.now();
      (f = function () {
         if (!pause) {
            stats.begin();

            // create vertices to fill the canvas with a single quad 
            var vertices = new Float32Array(
               [
                  -1, 1 * aspect, 1, 1 * aspect, 1, -1 * aspect,
                  -1, 1 * aspect, 1, -1 * aspect, -1, -1 * aspect
               ]);

            var vbuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            var triCount = 2,
               numItems = vertices.length / triCount;

            gl.useProgram(program);

            var time = (Date.now() - firstTime) / 1000.0;
            program.time = gl.getUniformLocation(program, "time");
            gl.uniform1f(program.time, time);

            program.resolution = gl.getUniformLocation(program, "resolution");
            gl.uniform2f(program.resolution, canvas.width, canvas.height);

            program.cameraPos = gl.getUniformLocation(program, "cameraPos");
            gl.uniform3f(program.cameraPos, config.camera.x, config.camera.y, config.camera.z);

            program.cameraLookat = gl.getUniformLocation(program, "cameraLookat");
            gl.uniform3f(program.cameraLookat, config.lookat.x, config.lookat.y, config.lookat.z);

            program.lightPosition = gl.getUniformLocation(program, "lightPosition");
            gl.uniform3f(program.lightPosition, config.lightPosition.x, config.lightPosition.y, config.lightPosition.z);

            program.lightColour = gl.getUniformLocation(program, "lightColour");
            gl.uniform3f(program.lightColour, config.lightColour.r, config.lightColour.g, config.lightColour.b);

            program.specular = gl.getUniformLocation(program, "specular");
            gl.uniform1f(program.specular, config.surface.specular);

            program.specularHardness = gl.getUniformLocation(program, "specularHardness");
            gl.uniform1f(program.specularHardness, config.surface.specularHardness);

            program.lightAttenuation = gl.getUniformLocation(program, "lightAttenuation");
            gl.uniform1f(program.lightAttenuation, config.surface.lightAttenuation);

            program.ambientFactor = gl.getUniformLocation(program, "ambientFactor");
            gl.uniform1f(program.ambientFactor, config.surface.ambientFactor);

            program.noise1 = gl.getUniformLocation(program, "noise1");
            gl.uniform1f(program.noise1, config.surface.noise1);

            program.noise2 = gl.getUniformLocation(program, "noise2");
            gl.uniform1f(program.noise2, config.surface.noise2);

            program.rotateWorld = gl.getUniformLocation(program, "rotateWorld");
            gl.uniform1f(program.rotateWorld, config.global.rotateWorld);

            program.fog = gl.getUniformLocation(program, "fog");
            gl.uniform1f(program.fog, config.global.fog);

            program.param = gl.getUniformLocation(program, "param");
            gl.uniform1f(program.param, config.global.param);

            gl.bindTexture(gl.TEXTURE_2D, noiseTexture);
            gl.uniform1i(gl.getUniformLocation(program, "ntexture"), 0);

            program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            gl.enableVertexAttribArray(program.aVertexPosition);
            gl.vertexAttribPointer(program.aVertexPosition, triCount, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.TRIANGLES, 0, numItems);

            stats.end();
            pause = false;
         }
         requestAnimationFrame(f);
      })();
   }
</script>
<script src="js/utils.js"></script>


</html>