reflective1.html

<!DOCTYPE html>
<html>
   <head>
<!--
   Ray Marching demo by Kevin Roast
   
   - Lots of code/ideas for this demo come from reading:
     http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf
     http://www.pouet.net/topic.php?which=7931&page=1
     http://www.pouet.net/topic.php?which=7920&page=1
     http://iquilezles.org/www/articles/distfunctions/distfunctions.htm
     https://www.shadertoy.com/
   
   If you want to understand this stuff read through the PDF and pouet.net links above!
-->
      <script src="scripts/dat.gui.min.js"></script>
      <script src="scripts/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 lightDir;
uniform vec3 lightColour;
uniform float specular;
uniform float specularHardness;
uniform vec3 diffuse;
uniform float ambientFactor;
uniform bool occulsion;
uniform bool shadows;
uniform bool rotateWorld;
uniform float param;
//uniform bool antialias;

#define PI 3.14159265
#define AO_SAMPLES 4

#define RAY_DEPTH 256
#define MAX_DEPTH 32.0
#define DISTANCE_MIN 0.001
#define PI 3.14159265

#define FLOOR_YPOS -0.25

const vec2 delta = vec2(DISTANCE_MIN, 0.);

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;
}

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;
}

float Plane(vec3 p, vec3 n)
{
   return dot(p, n);
}

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*.1;
	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 Length8(vec2 p)
{
   p = p*p; p = p*p; p = p*p;
   return pow(p.x + p.y, 1.0/8.0);
}

float Torus88(vec3 p, vec2 t)
{
  vec2 q = vec2(Length8(p.xz)-t.x,p.y);
  return Length8(q)-t.y;
}

float Octahedron( vec3 p, vec3 c, float r )
{
	p -= c;
	vec2 s = vec2(1,-1)/sqrt(3.0);
	return max(max(max(
			abs(dot(p,s.xxx)),abs(dot(p,s.yyx))),
			abs(dot(p,s.yxy))),abs(dot(p,s.xyy))) - r*mix(1.0,1.0/sqrt(3.0),.5);
}

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);
}

vec2 pModPolar(vec2 p, float repetitions) {
	float angle = 2.0*PI/repetitions;
	float a = atan(p.y, p.x) + angle/2.0;
	float r = length(p);
	a = mod(a,angle) - angle/2.;
	p = vec2(cos(a), sin(a))*r;
	return p;
}

float smin(float a, float b, float k)
{
   float h = clamp(0.5+0.5*(b-a)/k, 0.0, 1.0);
   return mix(b, a, h) - k*h*(1.0-h);
}

float Objects(vec3 p, vec3 c)
{
   vec2 polar = pModPolar(p.xz, 8.0);
   vec3 q1 = vec3(polar.x, p.y, polar.y);
   
   return
      min(
         smin(
            length(q1-vec3(5.0+(sin(time*0.9)),0.5,0.0))-0.75,
            Torus88(RotateY(vec3(p.x,p.y+cos(time*0.55)-1.0,p.z),time*1.1), vec2(2.5, 0.75)), 1.0
         ),
         CubeFrame(q1, vec3(6.0,0.5,0.0), 1.30)
      );
}

//#define NoiseSize 32.0
//#define NoiseRoughness 0.1
//+ (Noise(pos.xz*NoiseSize)*NoiseRoughness/NoiseSize)
float Dist(vec3 pos)
{
   if (rotateWorld) pos = RotateY(pos, sin(time*0.25)*PI);
   
   return min(
      Plane(pos-vec3(0.,FLOOR_YPOS,0.), vec3(0.,1.,0.)),
      Objects(pos, vec3(3.,0.,3.))
   );
}

// Based on original by IQ
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) * 0.3;
      r += w * (d0 - Dist(p + n * d0));
      w *= 0.5;
   }
   return 1.0 - r;
}

// Based on original by IQ
float SoftShadow(vec3 ro, vec3 rd)
{
   float k = 16.0;          // softness
   float res = 1.0;
   float t = 0.1;          // min-t see http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm
   for (int i=0; i<24; i++)
   {
      float h = Dist(ro + rd * t);
      res = min(res, k*h/t);
      t += h;
      if (t > 32.0) break; // max-t
   }
   // NOTE: clamping max shadow occulsion
   return clamp(res, 0.25, 1.0);
}

vec3 GetNormal(vec3 pos, float s)
{
   if (pos.y < FLOOR_YPOS + DISTANCE_MIN)
   {
      return vec3(0.0,1.0,0.0);
   }
   else
   {
      vec3 n;
      //n.x = s - Dist(pos - delta.xyy);
      //n.y = s - Dist(pos - delta.yxy);
      //n.z = s - Dist(pos - delta.yyx);

      // NOTE: shortcut above creates artifacts, try tetraheral offsets i.e. 4 samples
      n.x = Dist( pos + delta.xyy ) - Dist( pos - delta.xyy );
      n.y = Dist( pos + delta.yxy ) - Dist( pos - delta.yxy );
      n.z = Dist( pos + delta.yyx ) - Dist( pos - delta.yyx );
      
      return normalize(n);
   }
}

const vec3 check1 = vec3(0.6,0.25,0.2);
const vec3 check2 = vec3(0.8,0.83,0.81);
const float checkSize = 0.3;
// marble (from 'the surface king' TekF https://www.shadertoy.com/view/MdXSzX)
vec4 Marble(vec3 pos)
{
   vec3 p = pos;
   if (rotateWorld) p = RotateY(pos, sin(time*0.25)*PI);

   // 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 floorDiffuse = 0.6;
const float floorSpecular = 1.2;
const float floorSpecularHardness = 64.0;
vec4 Shading(vec3 pos, vec3 rd, vec3 norm)
{
   vec3 light;
   float ref;

   float ao = 1.0;
   if (occulsion) ao = CalcAO(pos, norm);

   vec3 heading = normalize(-rd + lightDir);

   // simple pos test on pos.y for floor (see Dist() above) - different colour and no spec for floor
   if (pos.y > FLOOR_YPOS+DISTANCE_MIN)
   {
      float spec = pow(max(0.0, dot(heading, norm)), specularHardness);
      light = lightColour * max(0.0, dot(norm, lightDir));
      light = (diffuse * light) + (spec * specular);
      if (shadows) light *= SoftShadow(pos, lightDir);
      light += ao * ambientFactor;
      // sphere reflection
      ref = 0.5;
   }
   else
   {
      float spec = pow(max(0.0, dot(heading, norm)), floorSpecularHardness);
      vec4 marble = Marble(pos);
      light = marble.rgb * max(0.0, dot(norm, lightDir));
      light = (floorDiffuse * light) + (spec * (floorSpecular - marble.w));
      if (shadows) light *= SoftShadow(pos, lightDir);
      light += ao * ambientFactor;
      // floor reflection
      ref = 0.35;
   }
   
   return vec4(light, ref);
}

vec3 Sky(vec3 rd)
{
   vec3 sky = mix( vec3(.8), vec3(0), exp2(-(1.0/max(rd.y,.01))*vec3(.4,.6,1.0)) );
   float sunAmount = max(dot(rd, lightDir), 0.0);
   sky += vec3(1.0,0.6,0.3) * sunAmount * sunAmount * .5 + vec3(1.0,0.6,0.3) * min(pow(sunAmount, 800.0), .3);

	return sky;
}

// 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;
}

// March - note the inout!
vec4 March(inout vec3 ro, inout vec3 rd)
{
   float t = 0.0;
   float d = 1.0;
   for (int i=0; i<RAY_DEPTH; i++)
   {
      vec3 p = ro + rd * t;
      d = Dist(p);
      if (d < DISTANCE_MIN)
      {
         vec3 norm = GetNormal(p, d);
         vec4 res = Shading(p, rd, norm);
         res.rgb *= (1.0 - (res.a - diffuse));
         
         // ray reflection - shift out again so not immediately hit same point
         rd = reflect(rd, norm);
         ro = p + (rd * DISTANCE_MIN);
         return res;
      }
      t += d;
      if (t >= MAX_DEPTH) break;
   }
   return vec4(Sky(rd), 0.0);
}

vec4 MarchEnd(vec3 ro, vec3 rd)
{
   float t = 0.0;
   float d = 1.0;
   for (int i=0; i<RAY_DEPTH; i++)
   {
      vec3 p = ro + rd * t;
      d = Dist(p);
      if (d < DISTANCE_MIN)
      {
         vec3 norm = GetNormal(p, d);
         return Shading(p, rd, norm);
      }
      t += d;
      if (t >= MAX_DEPTH) break;
   }
   return vec4(Sky(rd), 0.0);
}

// 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;
}

void main()
{
   const int ANTIALIAS_SAMPLES = 4;
   //const int DOF_SAMPLES = 16;
   
   //const bool dof = false;
   
   vec3 cpos = cameraPos;
   vec3 lookAt = cameraLookat;
   if (rotateWorld) {
      cpos.y = sin(time*0.5)*4.0 + 8.0;
      cpos.x = cos(time*.25)*8.0 + 4.0;

      lookAt.y = -sin(time*0.5)*4.0 - 8.0;
   }

   vec4 res = vec4(0.0);
   
 /*  if (antialias)
   {
      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));
         vec4 _res = March(ro, rd);
         if (_res.a != 0.0)  // reflection sample needed
         {
            vec4 res1 = March(ro, rd);
            if (res1.a != 0.0)  // another reflection sample needed
            {
               // add in colour from another reflection march step
               _res.rgb += res1.rgb * _res.a * 0.666;  // the amount of ref was returned on the first surface hit test - divide by number of reflection passes
               vec4 res2 = MarchEnd(ro, rd);
               _res.rgb += res2.rgb * _res.a * 0.333;  // the amount of ref was returned on the first surface hit test - divide by number of reflection passes
            }
            else
            {
               // add in colour from a reflection march step
               _res.rgb += res1.rgb * _res.a;     // the amount of ref was returned on the first surface hit test - divide by number of reflection passes
            }
         }
         res.rgb += _res.rgb;
         ang += d_ang;
      }
      res.rgb /= float(ANTIALIAS_SAMPLES);
   }
   else
   {*/
      vec2 p = gl_FragCoord.xy / resolution.xy;
      vec3 ro = cpos;
      vec3 rd = normalize(GetRay(lookAt-cpos, p));
      res = March(ro, rd);
      if (res.a != 0.0)  // reflection sample needed
      {
         vec4 res1 = March(ro, rd);
         if (res1.a != 0.0)  // another reflection sample needed
         {
            // add in colour from another reflection march step
            res.rgb += res1.rgb * (res.a - diffuse) * 0.6;
            vec4 res2 = MarchEnd(ro, rd);
            /*if (res2.a != 0.0)  // another reflection sample needed
            {
               // add in colour from another reflection march step
               res.rgb += res2.rgb * (res.a - diffuse) * 0.3;
               vec4 res3 = MarchEnd(ro, rd);
               res.rgb += res3.rgb * (res.a - diffuse) * 0.1;
            }
            else*/
            {
               res.rgb += res2.rgb * (res.a - diffuse) * 0.4;
            }
         }
         else
         {
            // add in colour from a reflection march step
            res.rgb += res1.rgb * (res.a - diffuse);
         }
      }

   //}
   
   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: 9.0, y: 2.0, z: 6.0
   },
   lookat: {
      x: 0.0, y: 0.0, z: -6.0
   },
   lightDir: {
      x: 0.0, y: 2.4, z: 2.0
   },
   lightColour: {
      r: 1.8, g: 1.5, b: 1.5
   },
   surface: {
      specular: 1.0,
      specularHardness: 16.0,
      diffuse: 0.15,
      ambientFactor: 0.2
   },
   global: {
      occulsion: true,
      shadows: true,
      rotateWorld: true,
      antialias: "None",// None|Classic
      param: 0.5
   }
};

var aspect, gl;
function init()
{
   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 Direction');
   panel.add(config.lightDir, "x").min(-16.0).max(16.0).step(0.1);
   panel.add(config.lightDir, "y").min(-16.0).max(16.0).step(0.1);
   panel.add(config.lightDir, "z").min(-16.0).max(16.0).step(0.1);
   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(64);
   panel.add(config.surface, "specularHardness").min(16).max(1024).step(16);
   panel.add(config.surface, "diffuse").min(0).max(1).step(0.05);
   panel.add(config.surface, "ambientFactor").min(0).max(1).step(0.05);
   //panel.open();
   panel = gui.addFolder('Global');
   //panel.add(config.global, "antialias", ["None", "Classic"]).name("Anti Alias");
   panel.add(config.global, "shadows").name("Shadows");
   panel.add(config.global, "occulsion").name("Occlusion");
   //panel.add(config.global, "rotateWorld").name("Rotate World");
   //panel.add(config.global, "param").min(0.01).max(3.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);
   
   // 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.lightDir = gl.getUniformLocation(program, "lightDir");
         // pre normalise light dir
         var x = config.lightDir.x, y = config.lightDir.y, z = config.lightDir.z;
         var len = x*x + y*y + z*z;
         len = 1.0 / Math.sqrt(len);
         gl.uniform3f(program.lightDir, config.lightDir.x*len, config.lightDir.y*len, config.lightDir.z*len);
         
         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.diffuse = gl.getUniformLocation(program, "diffuse");
         gl.uniform3f(program.diffuse, config.surface.diffuse,config.surface.diffuse,config.surface.diffuse);
         
         program.ambientFactor = gl.getUniformLocation(program, "ambientFactor");
         gl.uniform1f(program.ambientFactor, config.surface.ambientFactor);
         
         program.rotateWorld = gl.getUniformLocation(program, "rotateWorld");
         gl.uniform1f(program.rotateWorld, config.global.rotateWorld);
         
         //program.antialias = gl.getUniformLocation(program, "antialias");
         //gl.uniform1f(program.antialias, (config.global.antialias === "Classic"));
         
         program.occulsion = gl.getUniformLocation(program, "occulsion");
         gl.uniform1f(program.occulsion, config.global.occulsion);
         
         program.shadows = gl.getUniformLocation(program, "shadows");
         gl.uniform1f(program.shadows, config.global.shadows);

         program.param = gl.getUniformLocation(program, "param");
         gl.uniform1f(program.param, config.global.param);
         
         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 = true;
      }
      requestAnimationFrame(f);
   })();
}
      </script>
      <script src="scripts/utils.js"></script>
      <link rel="stylesheet" href="../../reset.css">
      <link rel="stylesheet" href="./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="768" height="512"></canvas>
      <a href="#" id="fullscreen">Toggle Full Screen</a>
      <a href="." id="back">Show me more awesome demos!</a>
   </body>
</html>