SoftwareRenderer now features zbuffering. @rygorous ftw!

examples/js/renderers/SoftwareRenderer.js

@@ -1,5 +1,6 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * @author ryg / http://farbrausch.de/~fg
  * @author mraleph / http://mrale.ph/
  */
 
@@ -10,21 +11,22 @@ THREE.SoftwareRenderer = function () {
 	var canvas = document.createElement( 'canvas' );
 	var context = canvas.getContext( '2d' );
 
-	var canvasWidth = canvas.width;
-	var canvasHeight = canvas.height;
+	var canvasWidth, canvasHeight;
+	var canvasWBlocks, canvasHBlocks;
+	var viewportXScale, viewportYScale, viewportZScale;
+	var viewportXOffs, viewportYOffs, viewportZOffs;
 
-	var canvasWidthHalf = canvasWidth / 2;
-	var canvasHeightHalf = canvasHeight / 2;
+	var imagedata, data, zbuffer;
+	var numBlocks, blockMaxZ, blockFlags;
 
-	var imagedata = context.getImageData( 0, 0, canvas.width, canvas.height );
-	var data = imagedata.data;
+	var BLOCK_ISCLEAR = (1 << 0);
+	var BLOCK_NEEDCLEAR = (1 << 1);
 
-	var blocksize = 8;
-
-	var canvasWBlocks = Math.floor( ( canvasWidth + blocksize - 1 ) / blocksize );
-	var canvasHBlocks = Math.floor( ( canvasHeight + blocksize - 1 ) / blocksize );
-
-	var block_full = new Uint8Array( canvasWBlocks * canvasHBlocks );
+	var subpixelBits = 4;
+	var subpixelBias = (1 << subpixelBits) - 1;
+	var blockShift = 3;
+	var blockSize = 1 << blockShift;
+	var maxZVal = (1 << 24); // Note: You want to size this so you don't get overflows.
 
 	var rectx1 = Infinity, recty1 = Infinity;
 	var rectx2 = 0, recty2 = 0;
@@ -40,37 +42,106 @@ THREE.SoftwareRenderer = function () {
 
 	this.setSize = function ( width, height ) {
 
-		canvasWidth = Math.floor( width / blocksize ) * blocksize;
-		canvasHeight = Math.floor( height / blocksize ) * blocksize;
+		canvasWBlocks = Math.floor( width / blockSize );
+		canvasHBlocks = Math.floor( height / blockSize );
+		canvasWidth   = canvasWBlocks * blockSize;
+		canvasHeight  = canvasHBlocks * blockSize;
+
+		var fixScale = 1 << subpixelBits;
 
-		canvasWidthHalf = canvasWidth / 2;
-		canvasHeightHalf = canvasHeight / 2;
+		viewportXScale =  fixScale * canvasWidth  / 2;
+		viewportYScale = -fixScale * canvasHeight / 2;
+		viewportZScale =             maxZVal      / 2;
+		viewportXOffs  =  fixScale * canvasWidth  / 2 + 0.5;
+		viewportYOffs  =  fixScale * canvasHeight / 2 + 0.5;
+		viewportZOffs  =             maxZVal      / 2 + 0.5;
 
 		canvas.width = canvasWidth;
 		canvas.height = canvasHeight;
 
 		imagedata = context.getImageData( 0, 0, canvasWidth, canvasHeight );
 		data = imagedata.data;
+		zbuffer = new Int32Array( data.length / 4 );
+
+		numBlocks = canvasWBlocks * canvasHBlocks;
+		blockMaxZ = new Int32Array( numBlocks );
+		blockFlags = new Uint8Array( numBlocks );
+
+		for ( var i = 0, l = zbuffer.length; i < l; i ++ ) {
 
-		canvasWBlocks = Math.floor( ( canvasWidth + blocksize - 1 ) / blocksize );
-		canvasHBlocks = Math.floor( ( canvasHeight + blocksize - 1 ) / blocksize );
+			zbuffer[ i ] = maxZVal;
 
-		block_full = new Uint8Array( canvasWBlocks * canvasHBlocks )
+		}
+
+		for ( var i = 0; i < numBlocks; i ++ ) {
+
+			blockFlags[ i ] = BLOCK_ISCLEAR;
+
+		}
 
 	};
 
-	this.clear = function () {
+	this.setSize( canvas.width, canvas.height );
 
-		clearRectangle( prevrectx1, prevrecty1, prevrectx2, prevrecty2 );
+	this.clear = function () {
 
-		for ( var i = 0, l = block_full.length; i < l; i ++ ) {
+		for ( var i = 0; i < numBlocks; i ++ ) {
 
-			block_full[ i ] = 0;
+			blockMaxZ[ i ] = maxZVal;
+			blockFlags[ i ] = (blockFlags[ i ] & BLOCK_ISCLEAR) ? BLOCK_ISCLEAR : BLOCK_NEEDCLEAR;
 
 		}
 
 	};
 
+	function clearBlock( blockX, blockY ) {
+		var zoffset = blockX * blockSize + blockY * blockSize * canvasWidth;
+		var poffset = zoffset * 4 + 3;
+
+		var zlinestep = canvasWidth - blockSize;
+		var plinestep = zlinestep * 4;
+
+		for ( var y = 0; y < blockSize; y ++ ) {
+
+			for ( var x = 0; x < blockSize; x ++ ) {
+
+				zbuffer[ zoffset ] = maxZVal;
+				data[ poffset ] = 0;
+
+				zoffset ++;
+				poffset += 4;
+
+			}
+
+			zoffset += zlinestep;
+			poffset += plinestep;
+
+		}
+
+	}
+
+	function finishClear( ) {
+
+		var block = 0;
+
+		for ( var y = 0; y < canvasHBlocks; y ++ ) {
+
+			for ( var x = 0; x < canvasWBlocks; x ++ ) {
+
+				if ( blockFlags[ block ] & BLOCK_NEEDCLEAR ) {
+
+					clearBlock( x, y );
+					blockFlags[ block ] = BLOCK_ISCLEAR;
+
+				}
+
+				block ++;
+			}
+
+		}
+
+	}
+
 	this.render = function ( scene, camera ) {
 
 		rectx1 = Infinity;
@@ -80,83 +151,84 @@ THREE.SoftwareRenderer = function () {
 
 		if ( this.autoClear ) this.clear();
 
+		finishClear();
+
 		var renderData = projector.projectScene( scene, camera );
 		var elements = renderData.elements;
 
-		elements.sort( numericalSort );
-
 		for ( var e = 0, el = elements.length; e < el; e ++ ) {
 
 			var element = elements[ e ];
 
 			if ( element instanceof THREE.RenderableFace3 ) {
 
-				var v1 = element.v1.positionScreen;
-				var v2 = element.v2.positionScreen;
-				var v3 = element.v3.positionScreen;
-
 				drawTriangle(
-					v1.x * canvasWidthHalf + canvasWidthHalf,
-					- v1.y * canvasHeightHalf + canvasHeightHalf,
-					v2.x * canvasWidthHalf + canvasWidthHalf,
-					- v2.y * canvasHeightHalf + canvasHeightHalf,
-					v3.x * canvasWidthHalf + canvasWidthHalf,
-					- v3.y * canvasHeightHalf + canvasHeightHalf,
-					function ( offset, cx1, cx2, scale ) {
-						var u = cx1 * scale; // 0-255!
-						var v = cx2 * scale; // 0-255!
-						data[ offset ] = u;
-						data[ offset + 1 ] = v;
+					element.v1.positionScreen,
+					element.v2.positionScreen,
+					element.v3.positionScreen,
+					function ( offset, u, v ) {
+
+						data[ offset ] = u * 255;
+						data[ offset + 1 ] = v * 255;
 						data[ offset + 2 ] = 0;
 						data[ offset + 3 ] = 255;
+
 					}
+
 				)
 
 			} else if ( element instanceof THREE.RenderableFace4 ) {
 
-				var v1 = element.v1.positionScreen;
-				var v2 = element.v2.positionScreen;
-				var v3 = element.v3.positionScreen;
-				var v4 = element.v4.positionScreen;
-
 				drawTriangle(
-					v1.x * canvasWidthHalf + canvasWidthHalf,
-					- v1.y * canvasHeightHalf + canvasHeightHalf,
-					v2.x * canvasWidthHalf + canvasWidthHalf,
-					- v2.y * canvasHeightHalf + canvasHeightHalf,
-					v3.x * canvasWidthHalf + canvasWidthHalf,
-					- v3.y * canvasHeightHalf + canvasHeightHalf,
-					function ( offset, cx1, cx2, scale ) {
-						data[ offset ] = 0;
-						data[ offset + 1 ] = 255;
+					element.v1.positionScreen,
+					element.v2.positionScreen,
+					element.v4.positionScreen,
+					function ( offset, u, v ) {
+
+						data[ offset ] = u * 255;
+						data[ offset + 1 ] = v * 255;
 						data[ offset + 2 ] = 0;
 						data[ offset + 3 ] = 255;
 					}
 				);
 
 				drawTriangle(
-					v3.x * canvasWidthHalf + canvasWidthHalf,
-					- v3.y * canvasHeightHalf + canvasHeightHalf,
-					v4.x * canvasWidthHalf + canvasWidthHalf,
-					- v4.y * canvasHeightHalf + canvasHeightHalf,
-					v1.x * canvasWidthHalf + canvasWidthHalf,
-					- v1.y * canvasHeightHalf + canvasHeightHalf,
-					function ( offset, cx1, cx2, scale ) {
-						data[ offset ] = 0;
-						data[ offset + 1 ] = 0;
-						data[ offset + 2 ] = 255;
+					element.v2.positionScreen,
+					element.v3.positionScreen,
+					element.v4.positionScreen,
+					function ( offset, u, v ) {
+
+						data[ offset ] = u * 255;
+						data[ offset + 1 ] = v * 255;
+						data[ offset + 2 ] = 0;
 						data[ offset + 3 ] = 255;
+
 					}
+
 				);
 
 			}
 
 		}
 
+		finishClear();
+
 		var x = Math.min( rectx1, prevrectx1 );
 		var y = Math.min( recty1, prevrecty1 );
 		var width = Math.max( rectx2, prevrectx2 ) - x;
 		var height = Math.max( recty2, prevrecty2 ) - y;
+		
+		/*// debug; draw zbuffer
+
+		for ( var i = 0, l = zbuffer.length; i < l; i++ ) {
+
+			var o = i * 4;
+			var v = (65535 - zbuffer[ i ]) >> 3;
+			data[ o + 0 ] = v;
+			data[ o + 1 ] = v;
+			data[ o + 2 ] = v;
+			data[ o + 3 ] = 255;
+		}*/
 
 		if ( x !== Infinity ) {
 
@@ -169,12 +241,6 @@ THREE.SoftwareRenderer = function () {
 
 	};
 
-	function numericalSort( a, b ) {
-
-		return a.z - b.z;
-
-	}
-
 	function clearRectangle( x1, y1, x2, y2 ) {
 
 		var xmin = Math.max( Math.min( x1, x2 ), 0 );
@@ -199,20 +265,26 @@ THREE.SoftwareRenderer = function () {
 
 	}
 
-	function drawTriangle( x1, y1, x2, y2, x3, y3, shader ) {
+	function drawTriangle( v1, v2, v3, shader ) {
 
 		// https://gist.github.com/2486101
 		// explanation: http://pouet.net/topic.php?which=8760&page=1
 
 		// 28.4 fixed-point coordinates
 
-		var x1 = (16 * x1) | 0;
-		var x2 = (16 * x2) | 0;
-		var x3 = (16 * x3) | 0;
+		var x1 = (v1.x * viewportXScale + viewportXOffs) | 0;
+		var x2 = (v2.x * viewportXScale + viewportXOffs) | 0;
+		var x3 = (v3.x * viewportXScale + viewportXOffs) | 0;
+
+		var y1 = (v1.y * viewportYScale + viewportYOffs) | 0;
+		var y2 = (v2.y * viewportYScale + viewportYOffs) | 0;
+		var y3 = (v3.y * viewportYScale + viewportYOffs) | 0;
+
+		// Z values (.28 fixed-point)
 
-		var y1 = (16 * y1) | 0;
-		var y2 = (16 * y2) | 0;
-		var y3 = (16 * y3) | 0;
+		var z1 = (v1.z * viewportZScale + viewportZOffs) | 0;
+		var z2 = (v2.z * viewportZScale + viewportZOffs) | 0;
+		var z3 = (v3.z * viewportZScale + viewportZOffs) | 0;
 
 		// Deltas
 
@@ -222,10 +294,10 @@ THREE.SoftwareRenderer = function () {
 
 		// Bounding rectangle
 
-		var minx = Math.max( ( Math.min( x1, x2, x3 ) + 0xf ) >> 4, 0 );
-		var maxx = Math.min( ( Math.max( x1, x2, x3 ) + 0xf ) >> 4, canvasWidth );
-		var miny = Math.max( ( Math.min( y1, y2, y3 ) + 0xf ) >> 4, 0 );
-		var maxy = Math.min( ( Math.max( y1, y2, y3 ) + 0xf ) >> 4, canvasHeight );
+		var minx = Math.max( ( Math.min( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxx = Math.min( ( Math.max( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, canvasWidth );
+		var miny = Math.max( ( Math.min( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxy = Math.min( ( Math.max( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, canvasHeight );
 
 		rectx1 = Math.min( minx, rectx1 );
 		rectx2 = Math.max( maxx, rectx2 );
@@ -234,7 +306,7 @@ THREE.SoftwareRenderer = function () {
 
 		// Block size, standard 8x8 (must be power of two)
 
-		var q = blocksize;
+		var q = blockSize;
 
 		// Start in corner of 8x8 block
 
@@ -243,9 +315,9 @@ THREE.SoftwareRenderer = function () {
 
 		// Constant part of half-edge functions
 
-		var c1 = dy12 * ((minx << 4) - x1) + dx12 * ((miny << 4) - y1);
-		var c2 = dy23 * ((minx << 4) - x2) + dx23 * ((miny << 4) - y2);
-		var c3 = dy31 * ((minx << 4) - x3) + dx31 * ((miny << 4) - y3);
+		var c1 = dy12 * ((minx << subpixelBits) - x1) + dx12 * ((miny << subpixelBits) - y1);
+		var c2 = dy23 * ((minx << subpixelBits) - x2) + dx23 * ((miny << subpixelBits) - y2);
+		var c3 = dy31 * ((minx << subpixelBits) - x3) + dx31 * ((miny << subpixelBits) - y3);
 
 		// Correct for fill convention
 
@@ -255,33 +327,55 @@ THREE.SoftwareRenderer = function () {
 
 		// Note this doesn't kill subpixel precision, but only because we test for >=0 (not >0).
 		// It's a bit subtle. :)
-		c1 = (c1 - 1) >> 4;
-		c2 = (c2 - 1) >> 4;
-		c3 = (c3 - 1) >> 4;
+		c1 = (c1 - 1) >> subpixelBits;
+		c2 = (c2 - 1) >> subpixelBits;
+		c3 = (c3 - 1) >> subpixelBits;
+
+		// Z interpolation setup
+
+		var dz12 = z1 - z2, dz31 = z3 - z1;
+		var invDet = 1.0 / (dx12*dy31 - dx31*dy12);
+		var dzdx = (invDet * (dz12*dy31 - dz31*dy12)); // dz per one subpixel step in x
+		var dzdy = (invDet * (dz12*dx31 - dx12*dz31)); // dz per one subpixel step in y
+
+		// Z at top/left corner of rast area
+
+		var cz = z1 + ((minx << subpixelBits) - x1) * dzdx + ((miny << subpixelBits) - y1) * dzdy;
+
+		// Z pixel steps
+
+		var zfixscale = (1 << subpixelBits);
+		dzdx = (dzdx * zfixscale) | 0;
+		dzdy = (dzdy * zfixscale) | 0;
 
 		// Set up min/max corners
 		var qm1 = q - 1; // for convenience
 		var nmin1 = 0, nmax1 = 0;
 		var nmin2 = 0, nmax2 = 0;
 		var nmin3 = 0, nmax3 = 0;
+		var nminz = 0, nmaxz = 0;
 		if (dx12 >= 0) nmax1 -= qm1*dx12; else nmin1 -= qm1*dx12;
 		if (dy12 >= 0) nmax1 -= qm1*dy12; else nmin1 -= qm1*dy12;
 		if (dx23 >= 0) nmax2 -= qm1*dx23; else nmin2 -= qm1*dx23;
 		if (dy23 >= 0) nmax2 -= qm1*dy23; else nmin2 -= qm1*dy23;
 		if (dx31 >= 0) nmax3 -= qm1*dx31; else nmin3 -= qm1*dx31;
 		if (dy31 >= 0) nmax3 -= qm1*dy31; else nmin3 -= qm1*dy31;
+		if (dzdx >= 0) nmaxz += qm1*dzdx; else nminz += qm1*dzdx;
+		if (dzdy >= 0) nmaxz += qm1*dzdy; else nminz += qm1*dzdy;
 
 		// Loop through blocks
-		var linestep = (canvasWidth - q) * 4;
-		var scale = 255.0 / (c1 + c2 + c3);
+		var linestep = canvasWidth - q;
+		var scale = 1.0 / (c1 + c2 + c3);
 
 		var cb1 = c1;
 		var cb2 = c2;
 		var cb3 = c3;
+		var cbz = cz;
 		var qstep = -q;
 		var e1x = qstep * dy12;
 		var e2x = qstep * dy23;
 		var e3x = qstep * dy31;
+		var ezx = qstep * dzdx;
 		var x0 = minx;
 
 		for ( var y0 = miny; y0 < maxy; y0 += q ) {
@@ -293,6 +387,7 @@ THREE.SoftwareRenderer = function () {
 				cb1 += e1x;
 				cb2 += e2x;
 				cb3 += e3x;
+				cbz += ezx;
 
 			}
 
@@ -301,14 +396,16 @@ THREE.SoftwareRenderer = function () {
 			e1x = -e1x;
 			e2x = -e2x;
 			e3x = -e3x;
+			ezx = -ezx;
 
-			while (1) {
+			while ( 1 ) {
 
 				// Step everything
 				x0 += qstep;
 				cb1 += e1x;
 				cb2 += e2x;
 				cb3 += e3x;
+				cbz += ezx;
 
 				// We're done with this block line when at least one edge completely out
 				// If an edge function is too small and decreasing in the current traversal
@@ -319,77 +416,106 @@ THREE.SoftwareRenderer = function () {
 				if (cb3 < nmax3) if (e3x < 0) break; else continue;
 
 				// We can skip this block if it's already fully covered
-				var blockX = (x0 / q) | 0;
-				var blockY = (y0 / q) | 0;
-				var blockInd = blockX + blockY * canvasWBlocks;
-				if (block_full[blockInd]) continue;
+				var blockX = x0 >> blockShift;
+				var blockY = y0 >> blockShift;
+				var blockId = blockX + blockY * canvasWBlocks;
+				var minz = cbz + nminz;
+
+				// farthest point in block closer than closest point in our tri?
+				if ( blockMaxZ[ blockId ] < minz ) continue;
+
+				// Need to do a deferred clear?
+				var bflags = blockFlags[ blockId ];
+				if ( bflags & BLOCK_NEEDCLEAR) clearBlock( blockX, blockY );
+				blockFlags[ blockId ] = bflags & ~( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
 
 				// Offset at top-left corner
-				var offset = ( x0 + y0 * canvasWidth ) * 4;
+				var offset = x0 + y0 * canvasWidth;
 
 				// Accept whole block when fully covered
 				if ( cb1 >= nmin1 && cb2 >= nmin2 && cb3 >= nmin3 ) {
 
+					var maxz = cbz + nmaxz;
+					blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
+
 					var cy1 = cb1;
 					var cy2 = cb2;
+					var cyz = cbz;
 
 					for ( var iy = 0; iy < q; iy ++ ) {
 
 						var cx1 = cy1;
 						var cx2 = cy2;
+						var cxz = cyz;
 
 						for ( var ix = 0; ix < q; ix ++ ) {
 
-							if ( data[ offset + 3 ] === 0 ) {
-
-								shader( offset, cx1, cx2, scale );
+							var z = cxz;
 
+							if ( z < zbuffer[ offset ] ) {
+								zbuffer[ offset ] = z;
+								var u = cx1 * scale;
+								var v = cx2 * scale;
+								shader( offset * 4, u, v );
 							}
 
 							cx1 += dy12;
 							cx2 += dy23;
-							offset += 4;
+							cxz += dzdx;
+							offset++;
 
 						}
 
 						cy1 += dx12;
 						cy2 += dx23;
+						cyz += dzdy;
 						offset += linestep;
 
 					}
 
-					block_full[blockInd] = 1;
-
 				} else { // Partially covered block
 
 					var cy1 = cb1;
 					var cy2 = cb2;
 					var cy3 = cb3;
+					var cyz = cbz;
 
 					for ( var iy = 0; iy < q; iy ++ ) {
 
 						var cx1 = cy1;
 						var cx2 = cy2;
 						var cx3 = cy3;
+						var cxz = cyz;
 
 						for ( var ix = 0; ix < q; ix ++ ) {
 
-							if ( ( cx1 | cx2 | cx3 ) >= 0 && data[ offset + 3 ] === 0 ) {
+							if ( ( cx1 | cx2 | cx3 ) >= 0 ) {
 
-								shader( offset, cx1, cx2, scale );
+								var z = cxz;
+
+								if ( z < zbuffer[ offset ] ) {
+									var u = cx1 * scale;
+									var v = cx2 * scale;
+
+									zbuffer[ offset ] = z;
+									shader( offset * 4, u, v );
+
+								}
 
 							}
 
 							cx1 += dy12;
 							cx2 += dy23;
 							cx3 += dy31;
-							offset += 4;
+							cxz += dzdx;
+							offset++;
 
 						}
 
 						cy1 += dx12;
 						cy2 += dx23;
 						cy3 += dx31;
+						cyz += dzdy;
 						offset += linestep;
 
 					}
@@ -402,7 +528,7 @@ THREE.SoftwareRenderer = function () {
 			cb1 += q*dx12;
 			cb2 += q*dx23;
 			cb3 += q*dx31;
-
+			cbz += q*dzdy;
 		}
 
 	}

examples/misc_software.html

@@ -18,7 +18,6 @@
 		<script src="../build/three.min.js"></script>
 
 		<script src="js/controls/TrackballControls.js"></script>
-
 		<script src="js/renderers/SoftwareRenderer.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
@@ -29,13 +28,12 @@
 
 			var camera, controls, scene, renderer;
 
-			var sphere, plane;
+			var torus, cube;
 
 			var start = Date.now();
 
 			init();
 			animate();
-			// render();
 
 			function init() {
 
@@ -50,26 +48,23 @@
 				info.innerHTML = '<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js<a/> - software renderer<br/>drag to change the point of view';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.y = 150;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 600;
 
 				controls = new THREE.TrackballControls( camera );
 
 				scene = new THREE.Scene();
 
-				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 3 ), new THREE.MeshBasicMaterial() );
-				scene.add( sphere );
+				torus = new THREE.Mesh( new THREE.TorusKnotGeometry( 150 ), new THREE.MeshBasicMaterial() );
+				scene.add( torus );
 
 				// Plane
 
-				plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
-				plane.position.y = - 150;
-				plane.rotation.x = - Math.PI / 2;
-				scene.add( plane );
+				cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
+				scene.add( cube );
 
 				renderer = new THREE.SoftwareRenderer();
-				renderer.setSize( window.innerWidth || 2, window.innerHeight || 2 );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -108,9 +103,13 @@
 
 				var timer = Date.now() - start;
 
-				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
-				sphere.rotation.x = timer * 0.0003;
-				sphere.rotation.z = timer * 0.0002;
+				torus.position.y = Math.sin( timer * 0.002 ) * 150;
+				torus.rotation.x = timer * 0.0003;
+				torus.rotation.z = timer * 0.0002;
+
+				cube.rotation.x = timer * 0.0002;
+				cube.rotation.z = timer * 0.0003;
+
 
 				controls.update();