Added SoftwareRenderer.

examples/js/renderers/SoftwareRenderer.js

@@ -0,0 +1,370 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.SoftwareRenderer = function () {
+
+	console.log( 'THREE.SoftwareRenderer', THREE.REVISION );
+
+	var canvas = document.createElement( 'canvas' );
+	var context = canvas.getContext( '2d' );
+
+	var imagedata = context.getImageData( 0, 0, canvas.width, canvas.height );
+	var data = imagedata.data;
+
+	var canvasWidth = canvas.width;
+	var canvasHeight = canvas.height;
+
+	var canvasWidthHalf = canvasWidth / 2;
+	var canvasHeightHalf = canvasHeight / 2;
+
+	var edges = [ new Edge(), new Edge(), new Edge() ];
+	var span = new Span();
+
+	var projector = new THREE.Projector();
+
+	this.domElement = canvas;
+
+	this.autoClear = true;
+
+	this.setSize = function ( width, height ) {
+
+		canvas.width = width;
+		canvas.height = height;
+
+		canvasWidth = canvas.width;
+		canvasHeight = canvas.height;
+
+		canvasWidthHalf = width / 2;
+		canvasHeightHalf = height / 2;
+
+		imagedata = context.getImageData( 0, 0, width, height );
+		data = imagedata.data;
+
+	};
+
+	this.clear = function () {
+
+		for ( var i = 3, l = data.length; i < l; i += 4 ) {
+
+			data[ i ] = 0;
+
+		}
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		var m, ml, element, material, dom, v1x, v1y;
+
+		if ( this.autoClear ) this.clear();
+
+		var renderData = projector.projectScene( scene, camera );
+		var elements = renderData.elements;
+
+		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,
+					0xff0000,
+					v2.x * canvasWidthHalf + canvasWidthHalf,
+					- v2.y * canvasHeightHalf + canvasHeightHalf,
+					0x00ff00,
+					v3.x * canvasWidthHalf + canvasWidthHalf,
+					- v3.y * canvasHeightHalf + canvasHeightHalf,
+					0x0000ff
+				)
+
+			} 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,
+					0xff0000,
+					v2.x * canvasWidthHalf + canvasWidthHalf,
+					- v2.y * canvasHeightHalf + canvasHeightHalf,
+					0x00ff00,
+					v3.x * canvasWidthHalf + canvasWidthHalf,
+					- v3.y * canvasHeightHalf + canvasHeightHalf,
+					0x0000ff
+				);
+
+				drawTriangle(
+					v3.x * canvasWidthHalf + canvasWidthHalf,
+					- v3.y * canvasHeightHalf + canvasHeightHalf,
+					0x0000ff,
+					v4.x * canvasWidthHalf + canvasWidthHalf,
+					- v4.y * canvasHeightHalf + canvasHeightHalf,
+					0xff00ff,
+					v1.x * canvasWidthHalf + canvasWidthHalf,
+					- v1.y * canvasHeightHalf + canvasHeightHalf,
+					0xff0000
+				);
+
+			}
+
+		}
+
+		context.putImageData( imagedata, 0, 0 );
+
+	};
+
+	function drawPixel( x, y, r, g, b ) {
+
+		var offset = ( x + y * canvasWidth ) * 4;
+
+		if ( x < 0 || y < 0 ) return;
+		if ( x > canvasWidth || y > canvasHeight ) return;
+
+		if ( data[ offset + 3 ] ) return;
+
+		data[ offset ] = r;
+		data[ offset + 1 ] = g;
+		data[ offset + 2 ] = b;
+		data[ offset + 3 ] = 255;
+
+	}
+
+	function drawRectangle( x1, y1, x2, y2, color ) {
+
+		var r = color >> 16 & 255;
+		var g = color >> 8 & 255;
+		var b = color & 255;
+
+		var xmin = Math.min( x1 >> 0, x2 >> 0 );
+		var xmax = Math.max( x1 >> 0, x2 >> 0 );
+		var ymin = Math.min( y1 >> 0, y2 >> 0 );
+		var ymax = Math.max( y1 >> 0, y2 >> 0 );
+
+		for ( var y = ymin; y < ymax; y ++ ) {
+
+			for ( var x = xmin; x < xmax; x ++ ) {
+
+				drawPixel( x, y, r, g, b );
+
+			}
+
+		}
+
+	}
+
+	function drawTriangle( x1, y1, color1, x2, y2, color2, x3, y3, color3 ) {
+
+		// http://joshbeam.com/articles/triangle_rasterization/
+
+		edges[ 0 ].set( x1, y1, color1, x2, y2, color2 );
+		edges[ 1 ].set( x2, y2, color2, x3, y3, color3 );
+		edges[ 2 ].set( x3, y3, color3, x1, y1, color1 );
+
+		var maxLength = 0;
+		var longEdge = 0;
+
+		// find edge with the greatest length in the y axis
+
+		for ( var i = 0; i < 3; i ++ ) {
+
+			var length = ( edges[ i ].y2 - edges[ i ].y1 );
+
+			if ( length > maxLength ) {
+
+				maxLength = length;
+				longEdge = i;
+
+			}
+		}
+
+		var shortEdge1 = ( longEdge + 1 ) % 3;
+		var shortEdge2 = ( longEdge + 2 ) % 3;
+
+		drawSpans( edges[ longEdge ], edges[ shortEdge1 ] );
+		drawSpans( edges[ longEdge ], edges[ shortEdge2 ] );
+
+	}
+
+	function drawSpans( e1, e2 ) {
+
+		var e1ydiff = e1.y2 - e1.y1;
+		if ( e1ydiff === 0 ) return;
+
+		var e2ydiff = e2.y2 - e2.y1;
+		if ( e2ydiff === 0 ) return;
+
+		var e1xdiff = e1.x2 - e1.x1;
+		var e2xdiff = e2.x2 - e2.x1;
+
+		var e1colordiffr = e1.r2 - e1.r1;
+		var e1colordiffg = e1.g2 - e1.g1;
+		var e1colordiffb = e1.b2 - e1.b1;
+
+		var e2colordiffr = e2.r2 - e2.r1;
+		var e2colordiffg = e2.g2 - e2.g1;
+		var e2colordiffb = e2.b2 - e2.b1;
+
+		var factor1 = ( e2.y1 - e1.y1 ) / e1ydiff;
+		var factorStep1 = 1 / e1ydiff;
+		var factor2 = 0;
+		var factorStep2 = 1 / e2ydiff;
+
+
+		for ( var y = e2.y1; y < e2.y2; y ++ ) {
+
+			span.set(
+				e1.x1 + ( e1xdiff * factor1 ),
+				e1.r1 + e1colordiffr * factor1,
+				e1.g1 + e1colordiffg * factor1,
+				e1.b1 + e1colordiffb * factor1,
+
+				e2.x1 + ( e2xdiff * factor2 ),
+				e2.r1 + e2colordiffr * factor2,
+				e2.g1 + e2colordiffg * factor2,
+				e2.b1 + e2colordiffb * factor2
+			);
+
+			var xdiff = span.x2 - span.x1;
+			if ( xdiff > 0 ) {
+
+				var colordiffr = span.r2 - span.r1;
+				var colordiffg = span.g2 - span.g1;
+				var colordiffb = span.b2 - span.b1;
+
+				var factor = 0;
+				var factorStep = 1 / xdiff;
+
+				for ( var x = span.x1; x < span.x2; x ++ ) {
+
+					var r = span.r1 + colordiffr * factor;
+					var g = span.g1 + colordiffg * factor;
+					var b = span.b1 + colordiffb * factor;
+
+					drawPixel( x, y, r, g, b );
+					factor += factorStep;
+
+				}
+
+			}
+
+			factor1 += factorStep1;
+			factor2 += factorStep2;
+
+		}
+
+	}
+
+	function Edge() {
+
+		this.x1 = 0;
+		this.y1 = 0;
+
+		this.x2 = 0;
+		this.y2 = 0;
+
+		this.r1 = 0;
+		this.g1 = 0;
+		this.b1 = 0;
+
+		this.r2 = 0;
+		this.g2 = 0;
+		this.b2 = 0;
+
+		this.set = function ( x1, y1, color1, x2, y2, color2 ) {
+
+			if ( y1 < y2 ) {
+
+				this.x1 = x1 >> 0;
+				this.y1 = y1 >> 0;
+
+				this.x2 = x2 >> 0;
+				this.y2 = y2 >> 0;
+
+				this.r1 = color1 >> 16 & 255;
+				this.g1 = color1 >> 8 & 255;
+				this.b1 = color1 & 255;
+
+				this.r2 = color2 >> 16 & 255;
+				this.g2 = color2 >> 8 & 255;
+				this.b2 = color2 & 255;
+
+			} else {
+
+				this.x1 = x2 >> 0;
+				this.y1 = y2 >> 0;
+
+				this.x2 = x1 >> 0;
+				this.y2 = y1 >> 0;
+
+				this.r1 = color2 >> 16 & 255;
+				this.g1 = color2 >> 8 & 255;
+				this.b1 = color2 & 255;
+
+				this.r2 = color1 >> 16 & 255;
+				this.g2 = color1 >> 8 & 255;
+				this.b2 = color1 & 255;
+
+			}
+
+		}
+
+	}
+
+	function Span() {
+
+		this.x1 = 0;
+		this.x2 = 0;
+
+		this.r1 = 0;
+		this.g1 = 0;
+		this.b1 = 0;
+
+		this.r2 = 0;
+		this.g2 = 0;
+		this.b2 = 0;
+
+		this.set = function ( x1, r1, g1, b1, x2, r2, g2, b2 ) {
+
+			if ( x1 < x2 ) {
+
+				this.x1 = x1 >> 0;
+				this.x2 = x2 >> 0;
+
+				this.r1 = r1;
+				this.g1 = g1;
+				this.b1 = b1;
+
+				this.r2 = r2;
+				this.g2 = g2;
+				this.b2 = b2;
+
+			} else {
+
+				this.x1 = x2 >> 0;
+				this.x2 = x1 >> 0;
+
+				this.r1 = r2;
+				this.g1 = g2;
+				this.b1 = b2;
+
+				this.r2 = r1;
+				this.g2 = g1;
+				this.b2 = b1;
+
+			}
+
+		}
+
+	}
+
+};

examples/misc_software.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js - software renderer</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/Three.js"></script>
+		<script src="js/renderers/SoftwareRenderer.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script>
+
+			var container, stats;
+
+			var camera, controls, scene, renderer;
+
+			var sphere, plane;
+
+			var start = Date.now();
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				var info = document.createElement( 'div' );
+				info.style.position = 'absolute';
+				info.style.top = '10px';
+				info.style.width = '100%';
+				info.style.textAlign = 'center';
+				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 );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.y = 150;
+				camera.position.z = 500;
+				scene.add( camera );
+
+				controls = new THREE.TrackballControls( camera );
+				
+				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 1 ), new THREE.MeshBasicMaterial() );
+				scene.add( sphere );
+
+				// Plane
+
+				plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
+				plane.position.y = - 150;
+				scene.add( plane );
+
+				renderer = new THREE.SoftwareRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				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;
+
+				controls.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

src/renderers/CanvasRenderer.js

@@ -405,7 +405,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
-		function renderParticle ( v1, element, material, scene ) {
+		function renderParticle( v1, element, material, scene ) {
 
 			setOpacity( material.opacity );
 			setBlending( material.blending );
@@ -799,7 +799,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 			_context.lineTo( x1, y1 );
 			_context.lineTo( x2, y2 );
 			_context.lineTo( x0, y0 );
-			_context.closePath();
 
 		}
 
@@ -811,7 +810,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 			_context.lineTo( x2, y2 );
 			_context.lineTo( x3, y3 );
 			_context.lineTo( x0, y0 );
-			_context.closePath();
 
 		}