example/Tracer/js/Tracer.js

// The ray tracer code in this file is written by Adam Burmister. It
// is available in its original form from:
//
//   http://labs.flog.nz.co/raytracer/
//
// It has been modified slightly by Google to work as a standalone
// benchmark, but the all the computational code remains
// untouched. This file also contains a copy of parts of the Prototype
// JavaScript framework which is used by the ray tracer.

"use strict";
var scope = this;

// Variable used to hold a number that can be used to verify that
// the scene was ray traced correctly.
var checkNumber;

// ------------------------------------------------------------------------
// ------------------------------------------------------------------------

// The following is a copy of parts of the Prototype JavaScript library:

// Prototype JavaScript framework, version 1.5.0
// (c) 2005-2007 Sam Stephenson
//
// Prototype is freely distributable under the terms of an MIT-style license.
// For details, see the Prototype web site: http://prototype.conio.net/

Object.extend = function(destination, source) {
  Object.keys(source).forEach(function(p) {
    destination[p] = source[p];
  })
  return destination;
};


// ------------------------------------------------------------------------
// ------------------------------------------------------------------------

// The rest of this file is the actual ray tracer written by Adam
// Burmister. It's a concatenation of the following files:
//
//   flog/color.js
//   flog/light.js
//   flog/vector.js
//   flog/ray.js
//   flog/scene.js
//   flog/material/basematerial.js
//   flog/material/solid.js
//   flog/material/chessboard.js
//   flog/shape/baseshape.js
//   flog/shape/sphere.js
//   flog/shape/plane.js
//   flog/intersectioninfo.js
//   flog/camera.js
//   flog/background.js
//   flog/engine.js

/* Fake a Flog.* namespace */
if(typeof(scope.Flog) == 'undefined') {
  var Flog = scope.Flog = { RayTracer: { Shape: {}, Material: {} } };
}

var Color =
Flog.RayTracer.Color = function(r, g, b) {
  this.red = r;
  this.green = g;
  this.blue = b;
};
Color.prototype = {
  add: function(c){
    return new Color(
      this.red   + c.red,
      this.green + c.green,
      this.blue  + c.blue
    );
  },

  addScalar: function(s){
    var result = new Color(
      this.red   + s,
      this.green + s,
      this.blue  + s);
    result.limit();
    return result;
  },

  subtract: function(c1, c2){
    return new Color(
      c1.red   - c2.red,
      c1.green - c2.green,
      c1.blue  - c2.blue
    );
  },

  multiply: function(c) {
    return new Color(
      this.red   * c.red,
      this.green * c.green,
      this.blue  * c.blue
    );
  },

  multiplyScalar: function(f) {
    return new Color(
      this.red   * f,
      this.green * f,
      this.blue  * f
    );
  },

  divideFactor: function(c1, f) {
    return new Color(
      c1.red   / f,
      c1.green / f,
      c1.blue  / f
    );
  },

  limit: function() {
    this.red = (this.red > 0.0) ?
                  ( (this.red > 1.0) ? 1.0 : this.red ) : 0.0;
    this.green = (this.green > 0.0) ?
                  ( (this.green > 1.0) ? 1.0 : this.green ) : 0.0;
    this.blue = (this.blue > 0.0) ?
                  ( (this.blue > 1.0) ? 1.0 : this.blue ) : 0.0;
  },

  distance : function(color) {
    return  Math.abs(this.red   - color.red) +
            Math.abs(this.green - color.green) +
            Math.abs(this.blue  - color.blue);
  },

  blend: function(c, w){
    return this.multiplyScalar(1-w).add(c.multiplyScalar(w));
  },

  brightness : function() {
    var r = Math.floor(this.red*255);
    var g = Math.floor(this.green*255);
    var b = Math.floor(this.blue*255);
    return (r * 77 + g * 150 + b * 29) >> 8;
  },

  toString : function () {
    var r = Math.floor(this.red*255);
    var g = Math.floor(this.green*255);
    var b = Math.floor(this.blue*255);
    return "rgb("+ r +","+ g +","+ b +")";
  }
};

var Light =
Flog.RayTracer.Light = function (pos, color, intensity) {
  this.position = pos;
  this.color = color;
  this.intensity = (intensity ? intensity : 10.0);
};
Light.prototype = {
  toString : function () {
    var pos = this.position;
    return 'Light [' + pos.x + ','
                     + pos.y + ','
                     + pos.z + ']';
  }
};

var Vector =
Flog.RayTracer.Vector = function (x, y, z) {
  this.x = x;
  this.y = y;
  this.z = z;
};
Vector.prototype = {
  copy: function(v){
    this.x = v.x;
    this.y = v.y;
    this.z = v.z;
  },

  normalize : function() {
    var m = this.magnitude();
    return new Vector(
      this.x / m,
      this.y / m,
      this.z / m
    );
  },

  magnitude : function() {
    return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
  },

  cross : function(w) {
    return new Vector(
      -this.z * w.y + this.y * w.z,
       this.z * w.x - this.x * w.z,
      -this.y * w.x + this.x * w.y);
  },

  dot : function(w) {
    return this.x * w.x + this.y * w.y + this.z * w.z;
  },

  add: function(w) {
    return new Vector(w.x + this.x,
                      w.y + this.y,
                      w.z + this.z);
  },

  subtract: function(w) {
    return new Vector(this.x - w.x,
                      this.y - w.y,
                      this.z - w.z);
  },

  multiplyScalar: function(w) {
    return new Vector(this.x * w,
                      this.y * w,
                      this.z * w);
  },

  toString : function () {
    return 'Vector [' + this.x + ',' + this.y + ',' + this.z + ']';
  }
};

var Ray =
Flog.RayTracer.Ray = function(pos, dir) {
  this.position = pos;
  this.direction = dir;
};
Ray.prototype = {
  toString : function () {
    return 'Ray [' + this.position + ',' + this.direction + ']';
  }
};

var Scene =
Flog.RayTracer.Scene = function() {
  this.camera = new Camera(
    new Vector(0,0,-5),
    new Vector(0,0,1),
    new Vector(0,1,0)
  );
  this.shapes = [];
  this.lights = [];
  this.background = new Background(new Color(0,0,0.5), 0.2);
};

var BaseMaterial =
Flog.RayTracer.Material.BaseMaterial = function(reflection,
                                                transparency,
                                                glass) {
  this.gloss = glass;
  this.transparency = transparency;
  this.reflection = reflection;
  this.refraction = 0.50;
  this.hasTexture = false;
};
BaseMaterial.prototype = {
  wrapUp: function(t){
    t = t % 2.0;
    if(t < -1) t += 2.0;
    if(t >= 1) t -= 2.0;
    return t;
  },

  toString : function () {
    return 'Material [gloss=' + this.gloss + ', transparency=' + this.transparency + ', hasTexture=' + this.hasTexture +']';
  }
}

var Solid =
Flog.RayTracer.Material.Solid = function(color, reflection, refraction, transparency, gloss) {
  this.color = color;
  this.reflection = reflection;
  this.transparency = transparency;
  this.gloss = gloss;
  this.hasTexture = false;
};
Solid.prototype = Object.create(BaseMaterial.prototype, {
  getColor: {
    value: function() { return this.color; },
  },
  toString: {
    value: function() {
      return 'SolidMaterial [gloss=' + this.gloss +
                          ', transparency=' + this.transparency +
                          ', hasTexture=' + this.hasTexture +']';
    }
  }
});

var Chessboard =
Flog.RayTracer.Material.Chessboard = function(
    colorEven,
    colorOdd,
    reflection,
    transparency,
    gloss,
    density) {
  this.colorEven = colorEven;
  this.colorOdd = colorOdd;
  this.reflection = reflection;
  this.transparency = transparency;
  this.gloss = gloss;
  this.density = density;
  this.hasTexture = true;
};

Chessboard.prototype = Object.create(BaseMaterial.prototype, {
  getColor: {
    value: function(u, v){
      var t = this.wrapUp(u * this.density) * this.wrapUp(v * this.density);
      if(t < 0.0) {
        return this.colorEven;
      } else {
        return this.colorOdd;
      }
    }
  },
  toString: {
    value: function(){
      return 'ChessMaterial [gloss=' + this.gloss +
                          ', transparency=' + this.transparency +
                          ', hasTexture=' + this.hasTexture +']';
    }
  }
});


var Sphere =
Flog.RayTracer.Shape.Sphere = function(pos, radius, material) {
  this.radius = radius;
  this.position = pos;
  this.material = material;
};
Sphere.prototype = {

  _foundIntersection: function(B, D, info, ray) {
    info.isHit = true;
    info.distance = (-B) - Math.sqrt(D);
    info.position =
      ray.position.add(ray.direction.multiplyScalar(info.distance));
    info.normal = info.position.subtract(this.position).normalize();
    info.color = this.material.getColor(0,0);
  },

  intersect: function(ray){
    var info = new IntersectionInfo();
    info.shape = this;
    info.isHit = false;

    var dst = ray.position.subtract(this.position);
    var B = dst.dot(ray.direction);
    var C = dst.dot(dst) - (this.radius * this.radius);
    var D = (B * B) - C;

    if(D > 0) { // intersection!
      this._foundIntersection(B, D, info, ray);
    }
    return info;
  },

  toString : function () {
    return 'Sphere [position=' + this.position +
                 ', radius=' + this.radius + ']';
  }
}

var Plane =
Plane = function(pos, d, material) {
  this.position = pos;
  this.d = d;
  this.material = material;
};
Plane.prototype = {
  _hasTexture: function() {

  },
  intersect: function(ray){
    var info = new IntersectionInfo();
    var pos = this.position;
    var mat = this.material;

    var Vd = pos.dot(ray.direction);
    if(Vd == 0) return info; // no intersection

    var t = -(pos.dot(ray.position) + this.d) / Vd;
    if(t <= 0) { return info; }

    info.shape = this;
    info.isHit = true;
    info.position = ray.position.add(ray.direction.multiplyScalar(t));
    info.normal = pos;
    info.distance = t;

    if(mat.hasTexture){
      var vU = new Vector(pos.y, pos.z, -pos.x);
      var vV = vU.cross(pos);
      var u = info.position.dot(vU);
      var v = info.position.dot(vV);
      info.color = mat.getColor(u,v);
    } else {
      info.color = mat.getColor(0,0);
    }
    return info;
  },

  toString : function () {
    return 'Plane [' + this.position + ', d=' + this.d + ']';
  }
}

var IntersectionInfo =
Flog.RayTracer.IntersectionInfo = function(shape) {
  this.color = new Color(0,0,0);
  this.isHit = false;
  this.hitCount = 0;
  this.shape = null;
  this.position = null;
  this.normal = null;
  this.color = null;
  this.distance = null;
};
IntersectionInfo.prototype = {
  toString : function () {
    return 'Intersection [' + this.position + ']';
  }
}

var Camera =
Flog.RayTracer.Camera = function(pos, lookAt, up) {
  this.position = pos;
  this.lookAt = lookAt;
  this.up = up;
  this.equator = lookAt.normalize().cross(this.up);
  this.screen = this.position.add(this.lookAt);
};
Camera.prototype = {
  getRay: function(vx, vy){
    var pos = this.screen.subtract(
      this.equator.multiplyScalar(vx).subtract(this.up.multiplyScalar(vy))
    );
    pos.y = pos.y * -1;
    var dir = pos.subtract(this.position);
    return new Ray(pos, dir.normalize());
  },

  toString : function () { return 'Ray []'; }
}

var Background =
Flog.RayTracer.Background = function(color, ambience) {
  this.color = color;
  this.ambience = ambience;
};

var Engine =
Flog.RayTracer.Engine = function(options){
  this.options = Object.extend({
    canvasHeight: 100,
    canvasWidth: 100,
    pixelWidth: 2,
    pixelHeight: 2,
    renderDiffuse: false,
    renderShadows: false,
    renderHighlights: false,
    renderReflections: false,
    rayDepth: 2
  }, options || {});

  this.options.canvasHeight /= this.options.pixelHeight;
  this.options.canvasWidth /= this.options.pixelWidth;
  this.canvas = null;
  /* TODO: dynamically include other scripts */
};
Engine.prototype = {
  setPixel: function(x, y, color){
    var pxW, pxH;
    pxW = this.options.pixelWidth;
    pxH = this.options.pixelHeight;

    if (this.canvas) {
      this.canvas.fillStyle = color.toString();
      this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH);
    } else {
      if (x ===  y) {
        checkNumber += color.brightness();
      }
      // print(x * pxW, y * pxH, pxW, pxH);
    }
  },

  renderScene: function(scene, canvas){
    checkNumber = 0;
    /* Get canvas */
    if (canvas) {
      this.canvas = canvas.getContext("2d");
    } else {
      this.canvas = null;
    }

    var canvasHeight = this.options.canvasHeight;
    var canvasWidth = this.options.canvasWidth;

    for(var y=0; y < canvasHeight; y++){
      for(var x=0; x < canvasWidth; x++){
          var yp = y * 1.0 / canvasHeight * 2 - 1;

    		var xp = x * 1.0 / canvasWidth * 2 - 1;
    		var ray = scene.camera.getRay(xp, yp);
    		var color = this.getPixelColor(ray, scene);
      	this.setPixel(x, y, color);
      }
    }
    if (canvas == null && checkNumber !== 2321) {
      throw new Error("Scene rendered incorrectly");
    }
  },

  getPixelColor: function(ray, scene){
    var info = this.testIntersection(ray, scene, null);
    if(info.isHit){
      return this.rayTrace(info, ray, scene, 0);
    }
    return scene.background.color;
  },

  // FIXME(slightlyoff): HOT!
  testIntersection: function(ray, scene, exclude){
    var hits = 0;
    var best = new IntersectionInfo();
    best.distance = 2000;
    var info;
    var distance = 0|0;

    var shapesLength = scene.shapes.length;
    for(var i = 0; i < shapesLength; i++){
      if(scene.shapes[i] !== exclude){
        info = scene.shapes[i].intersect(ray);
        distance = info.distance;
        if(info.isHit && distance >= 0 && distance < best.distance) {
          best = info;
          hits++;
        }
      }
    }
    best.hitCount = hits;
    return best;
  },

  getReflectionRay: function(P,N,V){
    var c1 = -N.dot(V);
    var R1 = N.multiplyScalar(2*c1).add(V);
    return new Ray(P, R1);
  },

  rayTrace: function(info, ray, scene, depth) {
    // Calc ambient
    var color = info.color.multiplyScalar(scene.background.ambience);
    var oldColor = color;
    var shininess = Math.pow(10, info.shape.material.gloss + 1);

    for(var i=0; i<scene.lights.length; i++) {
      var light = scene.lights[i];

      // Calc diffuse lighting
      var v = light.position.subtract(info.position).normalize();

      if(this.options.renderDiffuse){
        var L = v.dot(info.normal);
        if(L > 0){
          color = color.add(
                    info.color.multiply(
                      light.color.multiplyScalar(L)
                    )
                  );
        }
      }

      // The greater the depth the more accurate the colours, but
      // this is exponentially (!) expensive
      if(depth <= this.options.rayDepth){
        // calculate reflection ray
        if(this.options.renderReflections &&
           info.shape.material.reflection > 0) {

          var reflectionRay = this.getReflectionRay(
                info.position, info.normal, ray.direction);
          var refl = this.testIntersection(reflectionRay, scene, info.shape);

          if (refl.isHit && refl.distance > 0){
            refl.color = this.rayTrace(refl, reflectionRay, scene, depth + 1);
          } else {
            refl.color = scene.background.color;
          }

          color = color.blend(
            refl.color, info.shape.material.reflection
          );
        }
          // Refraction
          /* TODO */
      }

      /* Render shadows and highlights */
      var shadowInfo = new IntersectionInfo();

      if(this.options.renderShadows) {
        var shadowRay = new Ray(info.position, v);

        shadowInfo = this.testIntersection(shadowRay, scene,
                                           info.shape);
        if(shadowInfo.isHit && shadowInfo.shape != info.shape
            /*&& shadowInfo.shape.type != 'PLANE'*/) {
          var vA = color.multiplyScalar(0.5);
          var dB = (0.5 * Math.pow(shadowInfo.shape.material.transparency, 0.5));
          color = vA.addScalar(dB);
        }
      }

      // Phong specular highlights
      if(this.options.renderHighlights && !shadowInfo.isHit && info.shape.material.gloss > 0) {
        var Lv = info.shape.position.subtract(light.position)
                  .normalize();
        var E = scene.camera.position.subtract(info.shape.position)
                  .normalize();
        var H = E.subtract(Lv).normalize();
        var glossWeight =
              Math.pow(Math.max(info.normal.dot(H), 0), shininess);
        color = light.color.multiplyScalar(glossWeight).add(color);
      }
    }
    color.limit();
    return color;
  }
};

// 'event' null means that we are benchmarking
var renderScene =
scope.renderScene = function(event){
  var scene = new Scene();

  scene.camera = new Camera(
                   new Vector(0, 0, -15),
                   new Vector(-0.2, 0, 5),
                   new Vector(0, 1, 0)
                 );

  scene.background = new Background(new Color(0.5, 0.5, 0.5), 0.4 );

  var sphere = new Sphere(
    new Vector(-1.5, 1.5, 2),
    1.5,
    new Solid(
      new Color(0,0.5,0.5),
      0.3,
      0.0,
      0.0,
      2.0
    )
  );

  var sphere1 = new Sphere(
    new Vector(1, 0.25, 1),
    0.5,
    new Solid(
      new Color(0.9,0.9,0.9),
      0.1,
      0.0,
      0.0,
      1.5
    )
  );

  var plane = new Plane(
    new Vector(0.1, 0.9, -0.5).normalize(),
    1.2,
    new Chessboard(
      new Color(1,1,1),
      new Color(0,0,0),
      0.2,
      0.0,
      1.0,
      0.7
    )
  );

  scene.shapes.push(plane);
  scene.shapes.push(sphere);
  scene.shapes.push(sphere1);

  var light = new Light(
    new Vector(5, 10, -1),
    new Color(0.8, 0.8, 0.8)
  );

  var light1 = new Light(
    new Vector(-3, 5, -15),
    new Color(0.8, 0.8, 0.8),
    100
  );

  scene.lights.push(light);
  scene.lights.push(light1);

  var imageWidth, imageHeight, pixelSize;
  var renderDiffuse, renderShadows, renderHighlights, renderReflections;
  var canvas;

  if (typeof(event) == 'undefined' || event == null) {
	  imageWidth = 100;
	  imageHeight = 100;
	  pixelSize = "5,5".split(',');
	  renderDiffuse = true;
	  renderShadows = true;
	  renderHighlights = true;
	  renderReflections = true;
	  canvas = null;
	} else {
	  imageWidth = parseInt(document.getElementById('imageWidth').value);
	  imageHeight = parseInt(document.getElementById('imageHeight').value);
	  pixelSize = document.getElementById('pixelSize').value.split(',');
	  renderDiffuse = document.getElementById('renderDiffuse').checked;
	  renderShadows = document.getElementById('renderShadows').checked;
	  renderHighlights = document.getElementById('renderHighlights').checked;
	  renderReflections = document.getElementById('renderReflections').checked;
	  canvas = document.getElementById("canvas");
	}

  var rayDepth = 2;//$F('rayDepth');

  var raytracer = new Engine({
    canvasWidth: imageWidth,
    canvasHeight: imageHeight,
    pixelWidth: parseInt(pixelSize[0]),
    pixelHeight: parseInt(pixelSize[1]),
    "renderDiffuse": renderDiffuse,
    "renderHighlights": renderHighlights,
    "renderShadows": renderShadows,
    "renderReflections": renderReflections,
    "rayDepth": rayDepth
  });

  raytracer.renderScene(scene, canvas, 0);
};