Added SoftwareRenderer2.

WIP of another triangle rasterizer algorithm.

examples/js/renderers/SoftwareRenderer.js

@@ -141,6 +141,7 @@ THREE.SoftwareRenderer = function () {
 
 	}
 
+	/*
 	function drawRectangle( x1, y1, x2, y2, color ) {
 
 		var r = color >> 16 & 255;
@@ -163,6 +164,7 @@ THREE.SoftwareRenderer = function () {
 		}
 
 	}
+	*/
 
 	function drawTriangle( x1, y1, color1, x2, y2, color2, x3, y3, color3 ) {
 

examples/js/renderers/SoftwareRenderer2.js

@@ -0,0 +1,229 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.SoftwareRenderer2 = 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 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;
+
+		elements.sort( function painterSort( a, b ) { return a.z - b.z; } );
+
+		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, x2 ) >> 0;
+		var xmax = Math.max( x1, x2 ) >> 0;
+		var ymin = Math.min( y1, y2 ) >> 0;
+		var ymax = Math.max( y1, 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://devmaster.net/forums/topic/1145-advanced-rasterization/
+
+		// Deltas
+
+		var dx12 = x1 - x2;
+		var dx23 = x2 - x3;
+		var dx31 = x3 - x1;
+
+		var dy12 = y1 - y2;
+		var dy23 = y2 - y3;
+		var dy31 = y3 - y1;
+
+		// Bounding rectangle
+
+		var minx = Math.min( x1, x2, x3 ) >> 0;
+		var maxx = Math.max( x1, x2, x3 ) >> 0;
+		var miny = Math.min( y1, y2, y3 ) >> 0;
+		var maxy = Math.max( y1, y2, y3 ) >> 0;
+
+		// Constant part of half-edge functions
+
+		var c1 = dy12 * x1 - dx12 * y1;
+		var c2 = dy23 * x2 - dx23 * y2;
+		var c3 = dy31 * x3 - dx31 * y3;
+
+		var cy1 = c1 + dx12 * miny - dy12 * minx;
+		var cy2 = c2 + dx23 * miny - dy23 * minx;
+		var cy3 = c3 + dx31 * miny - dy31 * minx;
+
+		// Scan through bounding rectangle
+
+		for ( var y = miny; y < maxy; y ++ ) {
+
+			// Start value for horizontal scan
+
+			var cx1 = cy1;
+			var cx2 = cy2;
+			var cx3 = cy3;
+
+			for ( var x = minx; x < maxx; x ++ ) {
+
+				if ( cx1 > 0 && cx2 > 0 && cx3 > 0 ) {
+
+					drawPixel( x, y, 255, 0, 0 );
+
+				}
+
+				cx1 -= dy12;
+				cx2 -= dy23;
+				cx3 -= dy31;
+
+			}
+
+			cy1 += dx12;
+			cy2 += dx23;
+			cy3 += dx31;
+
+		}
+
+	}
+
+};

examples/misc_software.html

@@ -17,6 +17,7 @@
 
 		<script src="../build/Three.js"></script>
 		<script src="js/renderers/SoftwareRenderer.js"></script>
+		<script src="js/renderers/SoftwareRenderer2.js"></script>
 		<script src="js/Stats.js"></script>
 
 		<script>
@@ -54,7 +55,7 @@
 
 				controls = new THREE.TrackballControls( camera );
 				
-				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 1 ), new THREE.MeshBasicMaterial() );
+				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 5 ), new THREE.MeshBasicMaterial() );
 				scene.add( sphere );
 
 				// Plane
@@ -63,7 +64,7 @@
 				plane.position.y = - 150;
 				scene.add( plane );
 
-				renderer = new THREE.SoftwareRenderer();
+				renderer = new THREE.SoftwareRenderer2();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );