RayTracerSimple.txt

function setup()
{
	UI = {};
	UI.tabs = [];
	UI.titleLong = 'Ray Tracer';
	UI.titleShort = 'RayTracerSimple';
	UI.numFrames = 1000;
	UI.maxFPS = 24;
	UI.renderWidth = 800;
	UI.renderHeight = 400;

	UI.tabs.push(
		{
		visible: true,
		type: `x-shader/x-fragment`,
		title: `RaytracingDemoFS - GL`,
		id: `RaytracingDemoFS`,
		initialValue: `precision highp float;

struct PointLight {
  vec3 position;
  vec3 color;
};
struct Material {
  vec3  diffuse;
  vec3  specular;
  float glossiness;
  float weight_of_reflection;
  float index_of_refraction;
  float weight_of_refraction;
};

struct Sphere {
  vec3 position;
  float radius;
  Material material;
  vec3 color;
};

struct Plane {
  vec3 normal;
  float d;
  Material material;
};

struct Cylinder {
  vec3 position;
  vec3 direction;  
  float radius;
  vec3 color;
  Material material;
};

const int lightCount = 2;
const int sphereCount = 3;
const int planeCount = 1;
const int cylinderCount = 2;

struct Scene {
  vec3 ambient;
  PointLight[lightCount] lights;
  Sphere[sphereCount] spheres;
  Plane[planeCount] planes;
  Cylinder[cylinderCount] cylinders;
};

struct Ray {
  vec3 origin;
  vec3 direction;
};

// Contains all information pertaining to a ray/object intersection
struct HitInfo {
  bool hit;
  float t;
  vec3 position;
  vec3 normal;
  vec3 color;
  Material material;
};

HitInfo getEmptyHit() {
  return HitInfo(
    false, 
    0.0, 
    vec3(0.0), 
    vec3(0.0), 
    vec3(0.0),
    Material(vec3(0.0), vec3(0.0), 0.0, 0.5, 0.0, 0.0)

	);
}

// Sorts the two t values such that t1 is smaller than t2
void sortT(inout float t1, inout float t2) {
  // Make t1 the smaller t
  if(t2 < t1)  {
    float temp = t1;
    t1 = t2;
    t2 = temp;
  }
}

// Tests if t is in an interval
bool isTInInterval(const float t, const float tMin, const float tMax) {
  return t > tMin && t < tMax;
}

// Get the smallest t in an interval
bool getSmallestTInInterval(float t0, float t1, const float tMin, const float tMax, inout float smallestTInInterval) {
  
  sortT(t0, t1);
  
  // As t0 is smaller, test this first
  if(isTInInterval(t0, tMin, tMax)) {
  	smallestTInInterval = t0;
    return true;
  }
  
  // If t0 was not in the interval, still t1 could be
  if(isTInInterval(t1, tMin, tMax)) {
  	smallestTInInterval = t1;
    return true;
  }  
  
  // None was
  return false;
}

HitInfo intersectSphere(const Ray ray, const Sphere sphere, const float tMin, const float tMax) {
              
    vec3 to_sphere = ray.origin - sphere.position;
  
    float a = dot(ray.direction, ray.direction) ;
    float b = 2.0 * dot(ray.direction, to_sphere);
    float c = dot(to_sphere, to_sphere) - sphere.radius * sphere.radius;
    float D = b * b - 4.0 * a * c;
    if (D > 0.0)
    {
		float t0 = (-b - sqrt(D)) / (2.0 * a);
		float t1 = (-b + sqrt(D)) / (2.0 * a);
      
      	float smallestTInInterval;
      	if(!getSmallestTInInterval(t0, t1, tMin, tMax, smallestTInInterval)) {
          return getEmptyHit();
        }
      
      	vec3 hitPosition = ray.origin + smallestTInInterval * ray.direction;      

      	vec3 normal = 
          	length(ray.origin - sphere.position) < sphere.radius + 0.001? 
          	-normalize(hitPosition - sphere.position) : 
      		normalize(hitPosition - sphere.position);      

        return HitInfo(
          	true,
          	smallestTInInterval,
          	hitPosition,
          	normal,
          	sphere.color,
          	sphere.material);
    }
    return getEmptyHit();
}

/*
IntersectPlane --> to compute the ray-plane interection we know that the plane equation is a*x + b*y + c*z = d
the plane.normal desxribes (a,b,c) and plane.d is just the d coefficient.
We nee to substitute the ray equation ray_origin + t*ray_direction = (o_x, o_y, o_z) + t*(d_x, d_y, d_z) into the plane equation:
a*(o_x +t*d_x) + b*(o_y +t*d_y) + c*(o_z +t*d_z) = d ====> dot(ray_origin,plane.normal) + t*dot(ray_direction,plane.normal) = d
solving for t we get t = -(d + dot(ray_origin,plane.normal)) / dot(ray_direction,plane_normal)
*/
HitInfo intersectPlane(const Ray ray,const Plane plane, const float tMin, const float tMax) {
	if (dot(ray.direction, plane.normal) != 0.0){
      
      float a = dot(ray.direction, plane.normal);
      float b = dot(ray.origin, plane.normal);
      
      float t = -(plane.d + b)/a;
      
        if(t > tMax || t < tMin ) {
          return getEmptyHit();
        }

        vec3 hitPosition = ray.origin + t* ray.direction;
      
      	 return HitInfo(
            true,
            t,
            hitPosition,
            plane.normal,
           	vec3(0.5),
            plane.material);
    }
  return getEmptyHit();
}

float lengthSquared(vec3 x) {
  return dot(x, x);
}

/*
intersectCylinder -> find the interesction point with a cylinder, the function has in input the ray interescting
the cylinder, the Cylinder itself which contains the position, direction and the radius and the tMin, tMax.
To compute the interesction we have the equation of the distance between a point and a line given by len(P-A) = radius  
now A is given by the direction of the cylinder and P is the interestion point. To compute P as we've done so far to compute
the ray-sphere intersection we plug the ray equation origin + t*ray_direction.
Once we've plugged in the ray equation we can solve the quadratic equation for t.
*/
HitInfo intersectCylinder(const Ray ray, const Cylinder cylinder, const float tMin, const float tMax) {
	vec3 to_cylinder = ray.origin - (cylinder.position);

    float a = dot(ray.direction , ray.direction) - pow(dot(ray.direction , cylinder.direction), 2.0);
    float b = 2.0*dot(ray.direction, to_cylinder) - 2.0*dot(ray.direction, cylinder.direction)*dot(to_cylinder, cylinder.direction);
    float c = dot(to_cylinder, to_cylinder) - pow(dot(to_cylinder, cylinder.direction), 2.0) -  (cylinder.radius*cylinder.radius);

    float D = b * b - 4.0 * a * c;

    if (D > 0.0)
    {
        float t0 = (-b - sqrt(D)) / (2.0*a);
        float t1 = (-b + sqrt(D)) / (2.0*a);
        float smallestTInInterval;
        if(!getSmallestTInInterval(t0, t1, tMin, tMax, smallestTInInterval)) {
          return getEmptyHit();
        }
		
      	vec3 hitPosition = ray.origin + smallestTInInterval*ray.direction;
        float m = dot(to_cylinder, cylinder.direction) + smallestTInInterval* dot(ray.direction, cylinder.direction);
      	vec3 normal = normalize(hitPosition - cylinder.position - cylinder.direction*m);
      
        return HitInfo(
            true,
            smallestTInInterval,
            hitPosition,
            normal,
          	cylinder.color,
            cylinder.material);
    }
    return getEmptyHit();
}

HitInfo getBetterHitInfo(const HitInfo oldHitInfo, const HitInfo newHitInfo) {
	if(newHitInfo.hit)
  		if(newHitInfo.t < oldHitInfo.t)  // No need to test for the interval, this has to be done per-primitive
          return newHitInfo;
  	return oldHitInfo;
}

HitInfo intersectScene(const Scene scene, const Ray ray, const float tMin, const float tMax) {
  HitInfo bestHitInfo;
  bestHitInfo.t = tMax;
  bestHitInfo.hit = false;
  for (int i = 0; i < cylinderCount; ++i) {
    bestHitInfo = getBetterHitInfo(bestHitInfo, intersectCylinder(ray, scene.cylinders[i], tMin, tMax));
  }
  for (int i = 0; i < sphereCount; ++i) {
    bestHitInfo = getBetterHitInfo(bestHitInfo, intersectSphere(ray, scene.spheres[i], tMin, tMax));
  }
  for (int i = 0; i < planeCount; ++i) {
    bestHitInfo = getBetterHitInfo(bestHitInfo, intersectPlane(ray, scene.planes[i], tMin, tMax));
  }
  
  return bestHitInfo;
}

vec3 shadeFromLight(
  const Scene scene,
  const Ray ray,
  const HitInfo hit_info,
  const PointLight light)
{ 
  vec3 hitToLight = light.position - hit_info.position;
  
  vec3 lightDirection = normalize(hitToLight);
  vec3 viewDirection = normalize(hit_info.position - ray.origin);
  vec3 reflectedDirection = reflect(viewDirection, hit_info.normal);
  float diffuse_term = max(0.0, dot(lightDirection, hit_info.normal));
  float specular_term  = pow(max(0.0, dot(lightDirection, reflectedDirection)), hit_info.material.glossiness);
  
  /*
  Shadow test --> to compute the shadows what we do is cast a new ray starting from the intersection
  point (which can be obtained from the hitInfo) to the light source.
  Once we have the shadow_ray we check whether we intersect other objects if we do than it means 
  that the shadow_ray doesn't reach the light source hence we have a shadow.
  Common errors --> a common error could be not computing the tmax which is the maximum point 
  we want for the intersection test, this might be a problem if we have an object behind the light source 
  , interescting the object would result in a shadow but the object is not in the middle of the light source
  and the point we're computing the shadow.
  					
                     |---------tmax----------|  we want the tmx being the distance between the light and the obj.
   obj2 <---------- light <---shadow_ray--- obj
  
  */
  Ray shadow_ray = Ray(hit_info.position, lightDirection);
  
  float tmax = distance(light.position, hit_info.position);
  HitInfo shadow = intersectScene(scene, shadow_ray, 0.0001, tmax );

  float visibility = shadow.hit == true ? 0.0 : 1.0;
  
  //visibility = visibility + (visibility == 0.0 && shadow.material.index_of_refraction != 0.0 ? 1.0 : 0.0); 
  
  return 	visibility * 
    		hit_info.color*
    		light.color * (
    		specular_term * hit_info.material.specular +
      		diffuse_term * hit_info.material.diffuse);
}

vec3 background(const Ray ray) {
  // A simple implicit sky that can be used for the background
  return vec3(0.2) + vec3(0.8, 0.6, 0.5) * max(0.0, ray.direction.y);
}

// It seems to be a WebGL issue that the third parameter needs to be inout instea dof const on Tobias' machine
vec3 shade(const Scene scene, const Ray ray, inout HitInfo hitInfo) {
  
  	if(!hitInfo.hit) {
  		return background(ray);
  	}
  
    vec3 shading = scene.ambient * hitInfo.material.diffuse;
    for (int i = 0; i < lightCount; ++i) {
        shading += shadeFromLight(scene, ray, hitInfo, scene.lights[i]); 
    }
    return shading;
}


Ray getFragCoordRay(const vec2 frag_coord) {
  	float sensorDistance = 1.0;
  	vec2 sensorMin = vec2(-1, -0.5);
  	vec2 sensorMax = vec2(1, 0.5);
  	vec2 pixelSize = (sensorMax- sensorMin) / vec2(800, 400);
  	vec3 origin = vec3(0, 0, sensorDistance);
    vec3 direction = normalize(vec3(sensorMin + pixelSize * frag_coord, -sensorDistance));  
  
  	return Ray(origin, direction);
}

float fresnel(const vec3 viewDirection, const vec3 normal, const float r_0) {
    // Transparent objects such as glass or water are both refractive and reflective. 
  	// How much light they reflect vs the amount they transmit actually depends on the angle of incidence.
    // A nice way to implement something close to the Fresnel equa- tions is to use the Schlick approximation.
    // R(theta) = r_0 + (1 - r_0) ( 1 - cos(theta) )^5
    // where r_0 = ((out_index_refraction - in_index_refraction)/(out_index_refraction + in_index_refraction))^2
    // By definition the cosine of the angle of two vectors is the quotient of their dot product by the product of their lengths
    // so we can compute the cos(theta).
	return r_0 + (1.0 - r_0) * pow(1.0 - dot(-viewDirection, normal)/(length(viewDirection)*length(normal)) , 5.0);
}

vec3 my_refraction(const vec3 i, const vec3 n, const float r)
{
  //  i specifies the normalized direction of the incoming ray and n specifies the normalized normal vector 	  
  //  of the interface of two optical media, r is just the index of refraction ratio.
  float d = 1.0 - r * r * (1.0 - dot(n, i) * dot(n, i));
  if (d < 0.0) return vec3(0.0); // total internal reflection
  return r * i - (r * dot(n, i) + sqrt(d)) * n;
}


vec3 colorForFragment(const Scene scene, const vec2 fragCoord) {
      
    Ray initialRay = getFragCoordRay(fragCoord);  
  	HitInfo initialHitInfo = intersectScene(scene, initialRay, 0.0001, 10000.0);  
  	vec3 result = shade(scene, initialRay, initialHitInfo);
	
  	Ray currentRay;
  	HitInfo currentHitInfo;
  	
  	// Compute the reflection
  	currentRay = initialRay;
  	currentHitInfo = initialHitInfo;
  	
  	// The initial medium is air
  	float currentIOR = 1.0;
  
  	
  	float r_0 = pow(currentIOR - currentHitInfo.material.index_of_refraction , 2.0 )/ pow(currentIOR + currentHitInfo.material.index_of_refraction, 2.0);
  	
    // The initial strength of the reflection
  	float reflectionWeight = 1.0;
  	const int maxReflectionStepCount = 2;
  	for(int i = 0; i < maxReflectionStepCount; i++) {
      
      if(!currentHitInfo.hit) break;
      
      // Update this with the correct values
      reflectionWeight *= currentHitInfo.material.weight_of_reflection
        *fresnel(currentRay.direction, currentHitInfo.normal, r_0);
      
      Ray nextRay;
	  //compute the reflection
	  vec3 v = normalize(currentRay.origin - currentHitInfo.position);
      vec3 reflectionDirection = -reflect(v, currentHitInfo.normal);
      nextRay.origin = currentHitInfo.position;
      nextRay.direction = reflectionDirection;
      currentRay = nextRay;
      
      currentHitInfo = intersectScene(scene, currentRay, 0.0001, 10000.0);      
            
      result += reflectionWeight * shade(scene, currentRay, currentHitInfo);
    }
  
  	// Compute the refraction
  	currentRay = initialRay;  
  	currentHitInfo = initialHitInfo;
  	// The initial strength of the refraction.
  	float refractionWeight = 1.0;
  	const int maxRefractionStepCount = 2;
  
  	for(int i = 0; i < maxRefractionStepCount; i++) {
      
      if(!currentHitInfo.hit) break;

      // Update this with the correct values
      refractionWeight *= currentHitInfo.material.weight_of_refraction*(1.0 - fresnel(currentRay.direction, currentHitInfo.normal, r_0));           
	  
      Ray nextRay;
	  // Compute the refraction ray
      vec3 normal = currentHitInfo.normal;
      float cos_theta = dot(currentRay.direction, normal);
      float etha = currentIOR/currentHitInfo.material.index_of_refraction ;

      normal = cos_theta < 0.0 ? normal : -normal;
      
	  // When light rays pass from one "transparent" medium to another, they change direction.
      // Refraction is described by the Snell's law sin(theta1)/sin(theta2) = refract_index_1/refract_index_2    
      // this is handled by the refract function in GLSL. NOTE: theta1 and theta2 can be computed from the ray 
      // direction and the normal computed at the intersection point.
      nextRay.direction = refract(currentRay.direction, normal, etha);
     
      nextRay.origin = currentHitInfo.position;	
      
      currentRay = nextRay;
      currentIOR = currentHitInfo.material.index_of_refraction;
      currentHitInfo = intersectScene(scene, currentRay, 0.001, 10000.0);
      
      result += refractionWeight * shade(scene, currentRay, currentHitInfo);
      
    }
  return result;
}



Material getDefaultMaterial() {
  return Material(vec3(0.3), vec3(0), 1.0, 0.0, 0.0 , 0.0 );
}

Material getPaperMaterial() {
  return Material(vec3(0.3), vec3(0.4), 0.8, 0.0, 0.4, 0.05);
}

Material getPlasticMaterial() {
  return Material(vec3(0.8,0.8,0.0), vec3(0.8,0.8,0.8), 6.0, 0.0, 0.0 , 0.0 );
}

Material getGlassMaterial() {
  return Material(vec3(0.0), vec3(0.0),10.0, 0.75, 1.1, 1.0);
}

Material getSteelMirrorMaterial() {
  return Material(vec3(0.0), vec3(0.0),0.3,0.3, 0.0, 0.0);
}

vec3 tonemap(const vec3 radiance) {
  const float monitorGamma = 2.0;
  return pow(radiance, vec3(1.0 / monitorGamma));
}

void main()
{
    // Setup scene
    Scene scene;
  	scene.ambient = vec3(0.12, 0.15, 0.2);
  
    // Lights
    scene.lights[0].position = vec3(5, 15, -5);
    scene.lights[0].color    = 0.5 * vec3(0.8, 0.6, 0.5);
    
  	scene.lights[1].position = vec3(-15, 10, 2);
    scene.lights[1].color    = 0.5 * vec3(0.5, 0.7, 1.0);
  	/*
    HOW TO CHOOSE THE VALUES FOR THE MATERIALS:
    just to remember the struct material
    struct Material {
      vec3  diffuse;
      vec3  specular;
      float glossiness;
      float weight_of_reflection;
      float index_of_refraction;
      float weight_of_refraction;
    };
    
    SteelMirrorMaterial --> Material(vec3(0.0), vec3(0.0),0.3,0.3, 0.0, 0.0)
    						the steel material is not diffuse or specular but it has a glossiness and a non-zero
                            weight_of_reflection 
                            
    PaperMaterial       --> Material(vec3(0.3), vec3(0.4), 0.8, 0.0, 0.4, 0.05);
    						the paper is slightly refractive but not too much that's why the refraction weight is really small 
                            it almost appear solid.
                            
    PlasticMaterial     --> Material(vec3(0.8,0.8,0.0), vec3(0.8,0.8,0.8), 6.0, 0.0, 0.0 , 0.0 );
    						A high glossiness gives a nice matte effect on the plastic sphere
                            
    GlassMaterial       --> Material(vec3(0.0), vec3(0.0),10.0, 0.75, 1.1, 1.0);
    						The glass material is the toughest to achive becuase is both reflective and refractive that's why
                            both the reflection and refraction weights are non zero values.  
                            The index of refraction is set to be 1.1 to reach the desired effect when computing the ratio between 
                            the air and the glass index of refractions.
    */
    // Primitives
    scene.spheres[0].position            	= vec3(8, -2, -13);
    scene.spheres[0].radius              	= 4.0;
  	scene.spheres[0].color 					= vec3(1);  
    scene.spheres[0].material 				= getPaperMaterial();
    
  	scene.spheres[1].position            	= vec3(-7, -1, -13);
    scene.spheres[1].radius             	= 4.0;
  	scene.spheres[1].color					= vec3(1.0,1.0,0.0);
    scene.spheres[1].material				= getPlasticMaterial();
  
    scene.spheres[2].position            	= vec3(0.0, 0.5, -5);
    scene.spheres[2].radius              	= 2.0;
  	scene.spheres[2].color 					= vec3(1.0,1.0,1.0);
    scene.spheres[2].material   			= getGlassMaterial();

  	scene.planes[0].normal            		= vec3(0, 1, 0);
  	scene.planes[0].d              			= 4.5;
    scene.planes[0].material				= getSteelMirrorMaterial();
  
  	scene.cylinders[0].position            	= vec3(-1, 1, -18);
  	scene.cylinders[0].direction            = normalize(vec3(-1, 2, -1));
  	scene.cylinders[0].radius         		= 1.5;
    scene.cylinders[0].color                = vec3(1);
    scene.cylinders[0].material				= getPaperMaterial();
  
  	scene.cylinders[1].position            	= vec3(3, 1, -5);
  	scene.cylinders[1].direction            = normalize(vec3(1, 4, 1));
  	scene.cylinders[1].radius         		= 0.25;
    scene.cylinders[1].color                = vec3(0.4,0.4,0.0);
    scene.cylinders[1].material				= getPlasticMaterial();
  
  // compute color for fragment
  gl_FragColor.rgb = tonemap(colorForFragment(scene, gl_FragCoord.xy));
  gl_FragColor.a = 1.0;
}
`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	UI.tabs.push(
		{
		visible: false,
		type: `x-shader/x-vertex`,
		title: `RaytracingDemoVS - GL`,
		id: `RaytracingDemoVS`,
		initialValue: `attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
  
    void main(void) {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	 return UI; 
}//!setup

var gl;
function initGL(canvas) {
	try {
		gl = canvas.getContext("experimental-webgl");
		gl.viewportWidth = canvas.width;
		gl.viewportHeight = canvas.height;
	} catch (e) {
	}
	if (!gl) {
		alert("Could not initialise WebGL, sorry :-(");
	}
}

function getShader(gl, id) {
	var shaderScript = document.getElementById(id);
	if (!shaderScript) {
		return null;
	}

	var str = "";
	var k = shaderScript.firstChild;
	while (k) {
		if (k.nodeType == 3) {
			str += k.textContent;
		}
		k = k.nextSibling;
	}

	var shader;
	if (shaderScript.type == "x-shader/x-fragment") {
		shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (shaderScript.type == "x-shader/x-vertex") {
		shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
		return null;
	}

    console.log(str);
	gl.shaderSource(shader, str);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		alert(gl.getShaderInfoLog(shader));
		return null;
	}

	return shader;
}

function RaytracingDemo() {
}

RaytracingDemo.prototype.initShaders = function() {

	this.shaderProgram = gl.createProgram();

	gl.attachShader(this.shaderProgram, getShader(gl, "RaytracingDemoVS"));
	gl.attachShader(this.shaderProgram, getShader(gl, "RaytracingDemoFS"));
	gl.linkProgram(this.shaderProgram);

	if (!gl.getProgramParameter(this.shaderProgram, gl.LINK_STATUS)) {
		alert("Could not initialise shaders");
	}

	gl.useProgram(this.shaderProgram);

	this.shaderProgram.vertexPositionAttribute = gl.getAttribLocation(this.shaderProgram, "position");
	gl.enableVertexAttribArray(this.shaderProgram.vertexPositionAttribute);

	this.shaderProgram.projectionMatrixUniform = gl.getUniformLocation(this.shaderProgram, "projectionMatrix");
	this.shaderProgram.modelviewMatrixUniform = gl.getUniformLocation(this.shaderProgram, "modelViewMatrix");
}

RaytracingDemo.prototype.initBuffers = function() {
	this.triangleVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
	
	var vertices = [
		 -1,  -1,  0,
		 -1,  1,  0,
		 1,  1,  0,

		 -1,  -1,  0,
		 1,  -1,  0,
		 1,  1,  0,
	 ];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	this.triangleVertexPositionBuffer.itemSize = 3;
	this.triangleVertexPositionBuffer.numItems = 3 * 2;
}


RaytracingDemo.prototype.drawScene = function() {
			
	var perspectiveMatrix = new J3DIMatrix4();	
	perspectiveMatrix.setUniform(gl, this.shaderProgram.projectionMatrixUniform, false);

	var modelViewMatrix = new J3DIMatrix4();	
	modelViewMatrix.setUniform(gl, this.shaderProgram.modelviewMatrixUniform, false);

	gl.bindBuffer(gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
	gl.vertexAttribPointer(this.shaderProgram.vertexPositionAttribute, this.triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
	
	gl.drawArrays(gl.TRIANGLES, 0, this.triangleVertexPositionBuffer.numItems);
}

RaytracingDemo.prototype.run = function() {
	this.initShaders();
	this.initBuffers();

	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT);

	this.drawScene();
};

function init() {	
	

	env = new RaytracingDemo();	
	env.run();

    return env;
}

function compute(canvas)
{
    env.initShaders();
    env.initBuffers();

    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT);

    env.drawScene();
}