Updated raytracer example and added @alteredq's credit.

examples/js/renderers/RaytracingRenderer.js

@@ -1,5 +1,6 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * @author alteredq / http://alteredqualia.com/
  */
 
 THREE.RaytracingRenderer = function ( parameters ) {

examples/raytracer_sandbox.html

@@ -9,7 +9,7 @@
 				font-family: Monospace;
 				color: #ffffff;
 				margin: 0px;
-				overflow: hidden;
+				padding: 0px;
 			}
 		</style>
 	</head>
@@ -38,51 +38,160 @@
 				info.style.position = 'absolute';
 				info.style.top = '10px';
 				info.style.width = '100%';
+				info.style.zIndex = '100';
 				info.style.textAlign = 'center';
 				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js<a/> - raytracing renderer';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 600;
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.TorusKnotGeometry( 150 );
+				// materials
 
-				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
+				var phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x222222, shininess: 150, vertexColors: THREE.NoColors, shading: THREE.SmoothShading } );
 
-					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
+				var phongMaterialBox = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				var phongMaterialBoxBottom = new THREE.MeshPhongMaterial( { color: 0x666666, specular: 0x111111, shininess: 100, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				var phongMaterialBoxLeft = new THREE.MeshPhongMaterial( { color: 0x990000, specular: 0x111111, shininess: 100, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				var phongMaterialBoxRight = new THREE.MeshPhongMaterial( { color: 0x0066ff, specular: 0x111111, shininess: 100, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
 
-				}
+				var mirrorMaterialFlat = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff8888, shininess: 10000, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				mirrorMaterialFlat.mirror = true;
+				mirrorMaterialFlat.reflectivity = 1;
 
-				torus = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
-				scene.add( torus );
+				var mirrorMaterialFlatDark = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xaaaaaa, shininess: 10000, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				mirrorMaterialFlatDark.mirror = true;
+				mirrorMaterialFlatDark.reflectivity = 1;
 
-				// Plane
+				var mirrorMaterialSmooth = new THREE.MeshPhongMaterial( { color: 0xffaa00, specular: 0x222222, shininess: 10000, vertexColors: THREE.NoColors, shading: THREE.SmoothShading } );
+				mirrorMaterialSmooth.mirror = true;
+				mirrorMaterialSmooth.reflectivity = 0.3;
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var glassMaterialFlat = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x00ff00, shininess: 10000, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				glassMaterialFlat.glass = true;
+				glassMaterialFlat.reflectivity = 0.5;
 
-				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
+				var glassMaterialSmooth = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xffaa55, shininess: 10000, vertexColors: THREE.NoColors, shading: THREE.SmoothShading } );
+				glassMaterialSmooth.glass = true;
+				glassMaterialSmooth.reflectivity = 0.25;
+				glassMaterialSmooth.refractionRatio = 0.6;
 
-					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
+				var debugMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-				}
+				// geometries
 
-				cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ) );
-				scene.add( cube );
+				var torusGeometry = new THREE.TorusKnotGeometry( 150 );
+				var sphereGeometry = new THREE.SphereGeometry( 100, 16, 8 );
+				var planeGeometry = new THREE.BoxGeometry( 600, 5, 600 );
+				var boxGeometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				var light = new THREE.PointLight( 0xffffff, 0.5 );
-				light.position.set( 300, 300, 300 );
+				// TorusKnot
+
+				//torus = new THREE.Mesh( torusGeometry, phongMaterial );
+				//scene.add( torus );
+
+				// Sphere
+
+				sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
+				sphere.scale.multiplyScalar( 0.5 );
+				sphere.position.set( -50, -250+5, -50 );
+				scene.add( sphere );
+
+				sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
+				sphere2.scale.multiplyScalar( 0.5 );
+				sphere2.position.set( 175, -250+5, -150 );
+				scene.add( sphere2 );
+
+				// Box
+
+				box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
+				box.position.set( -175, -250+2.5, -150 );
+				box.rotation.y = 0.5;
+				scene.add( box );
+
+				// Glass
+
+				glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
+				glass.scale.multiplyScalar( 0.5 );
+				glass.position.set( 75, -250+5, -75 );
+				glass.rotation.y = 0.5;
+				scene.add( glass );
+
+				// bottom
+
+				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
+				plane.position.set( 0, -300+2.5, -300 );
+				scene.add( plane );
+
+				// top
+
+				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				plane.position.set( 0, 300-2.5, -300 );
+				scene.add( plane );
+
+				// back
+
+				plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				plane.rotation.x = 1.57;
+				plane.position.set( 0, 0, -300 );
+				scene.add( plane );
+
+				plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
+				plane.rotation.x = 1.57;
+				plane.position.set( 0, 0, -300+10 );
+				plane.scale.multiplyScalar( 0.85 );
+				scene.add( plane );
+
+				// left
+
+				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
+				plane.rotation.z = 1.57;
+				plane.position.set( -300, 0, -300 )
+				scene.add( plane );
+
+				// right
+
+				plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
+				plane.rotation.z = 1.57;
+				plane.position.set( 300, 0, -300 )
+				scene.add( plane );
+
+				// light
+
+				var intensity = 70000;
+
+				var light = new THREE.PointLight( 0xffaa55, intensity );
+				light.position.set( -200, 100, 100 );
+				light.physicalAttenuation = true;
+				scene.add( light );
+
+				var light = new THREE.PointLight( 0x55aaff, intensity );
+				light.position.set( 200, 100, 100 );
+				light.physicalAttenuation = true;
 				scene.add( light );
 
-				var light = new THREE.PointLight( 0x0000ff );
-				light.position.set( - 300, 300, 300 );
+				var light = new THREE.PointLight( 0xffffff, intensity * 1.5 );
+				light.position.set( 0, 0, 300 );
+				light.physicalAttenuation = true;
 				scene.add( light );
 
+				//
+
+				//var mesh = new THREE.Mesh( new THREE.BoxGeometry( 5, 5, 5 ), debugMaterial );
+				//light.add( mesh );
+
+				//
+
 				renderer = new THREE.RaytracingRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.domElement.style.position = "absolute";
+				renderer.domElement.style.top = "0px";
+				renderer.domElement.style.left = "0px";
+
 				container.appendChild( renderer.domElement );
 
 			}