SoftwareRenderer2: Clearing/Putting only modified pixels. Pretty fast now...

I guess I was just trying to avoid doing the vertex colors thingie :P

examples/js/renderers/SoftwareRenderer2.js

@@ -18,6 +18,12 @@ THREE.SoftwareRenderer2 = function () {
 	var canvasWidthHalf = canvasWidth / 2;
 	var canvasHeightHalf = canvasHeight / 2;
 
+	var rectx1 = 0, recty1 = 0;
+	var rectx2 = 0, recty2 = 0;
+
+	var prevrectx1 = 0, prevrecty1 = 0;
+	var prevrectx2 = 0, prevrecty2 = 0;
+
 	var projector = new THREE.Projector();
 
 	this.domElement = canvas;
@@ -42,17 +48,16 @@ THREE.SoftwareRenderer2 = function () {
 
 	this.clear = function () {
 
-		for ( var i = 3, l = data.length; i < l; i += 4 ) {
-
-			data[ i ] = 0;
-
-		}
+		clearRectangle( prevrectx1, prevrecty1, prevrectx2, prevrecty2 );
 
 	};
 
 	this.render = function ( scene, camera ) {
 
-		var m, ml, element, material, dom, v1x, v1y;
+		rectx1 = canvasWidth;
+		recty1 = canvasHeight;
+		rectx2 = 0;
+		recty2 = 0;
 
 		if ( this.autoClear ) this.clear();
 
@@ -118,7 +123,15 @@ THREE.SoftwareRenderer2 = function () {
 
 		}
 
-		context.putImageData( imagedata, 0, 0 );
+		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;
+
+		context.putImageData( imagedata, 0, 0, x, y, width, height );
+
+		prevrectx1 = rectx1; prevrecty1 = recty1;
+		prevrectx2 = rectx2; prevrecty2 = recty2;
 
 	};
 
@@ -160,19 +173,38 @@ THREE.SoftwareRenderer2 = function () {
 	}
 	*/
 
+	function clearRectangle( x1, y1, x2, y2 ) {
+
+		var xmin = Math.min( x1, x2 );
+		var xmax = Math.max( x1, x2 );
+		var ymin = Math.min( y1, y2 );
+		var ymax = Math.max( y1, y2 );
+
+		for ( var y = ymin; y < ymax; y ++ ) {
+
+			for ( var x = xmin; x < xmax; x ++ ) {
+
+				data[ ( ( x + y * canvasWidth ) * 4 ) + 3 ] = 0;
+
+			}
+
+		}
+
+	}
+
 	function drawTriangle( x1, y1, color1, x2, y2, color2, x3, y3, color3 ) {
 
 		// http://devmaster.net/forums/topic/1145-advanced-rasterization/
 
 		// 28.4 fixed-point coordinates
 
-		var x1 = ( 16 * x1 ) >> 0;
-		var x2 = ( 16 * x2 ) >> 0;
-		var x3 = ( 16 * x3 ) >> 0;
+		var x1 = Math.round( 16 * x1 );
+		var x2 = Math.round( 16 * x2 );
+		var x3 = Math.round( 16 * x3 );
 
-		var y1 = ( 16 * y1 ) >> 0;
-		var y2 = ( 16 * y2 ) >> 0;
-		var y3 = ( 16 * y3 ) >> 0;
+		var y1 = Math.round( 16 * y1 );
+		var y2 = Math.round( 16 * y2 );
+		var y3 = Math.round( 16 * y3 );
 
 		// Deltas
 
@@ -196,10 +228,15 @@ THREE.SoftwareRenderer2 = 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 xmin = Math.max( ( Math.min( x1, x2, x3 ) + 0xf ) >> 4, 0 );
+		var xmax = Math.min( ( Math.max( x1, x2, x3 ) + 0xf ) >> 4, canvasWidth );
+		var ymin = Math.max( ( Math.min( y1, y2, y3 ) + 0xf ) >> 4, 0 );
+		var ymax = Math.min( ( Math.max( y1, y2, y3 ) + 0xf ) >> 4, canvasHeight );
+
+		rectx1 = Math.min( xmin, rectx1 );
+		rectx2 = Math.max( xmax, rectx2 );
+		recty1 = Math.min( ymin, recty1 );
+		recty2 = Math.max( ymax, recty2 );
 
 		// Constant part of half-edge functions
 
@@ -213,13 +250,13 @@ THREE.SoftwareRenderer2 = function () {
 		if ( dy23 < 0 || ( dy23 == 0 && dx23 > 0 ) ) c2 ++;
 		if ( dy31 < 0 || ( dy31 == 0 && dx31 > 0 ) ) c3++;
 
-		var cy1 = c1 + dx12 * ( miny << 4 ) - dy12 * ( minx << 4 );
-		var cy2 = c2 + dx23 * ( miny << 4 ) - dy23 * ( minx << 4 );
-		var cy3 = c3 + dx31 * ( miny << 4 ) - dy31 * ( minx << 4 );
+		var cy1 = c1 + dx12 * ( ymin << 4 ) - dy12 * ( xmin << 4 );
+		var cy2 = c2 + dx23 * ( ymin << 4 ) - dy23 * ( xmin << 4 );
+		var cy3 = c3 + dx31 * ( ymin << 4 ) - dy31 * ( xmin << 4 );
 
 		// Scan through bounding rectangle
 
-		for ( var y = miny; y < maxy; y ++ ) {
+		for ( var y = ymin; y < ymax; y ++ ) {
 
 			// Start value for horizontal scan
 
@@ -227,7 +264,7 @@ THREE.SoftwareRenderer2 = function () {
 			var cx2 = cy2;
 			var cx3 = cy3;
 
-			for ( var x = minx; x < maxx; x ++ ) {
+			for ( var x = xmin; x < xmax; x ++ ) {
 
 				if ( cx1 > 0 && cx2 > 0 && cx3 > 0 ) {
 

examples/misc_software.html

@@ -55,7 +55,7 @@
 
 				controls = new THREE.TrackballControls( camera );
 				
-				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 5 ), new THREE.MeshBasicMaterial() );
+				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 150, 1 ), new THREE.MeshBasicMaterial() );
 				scene.add( sphere );
 
 				// Plane