three.js/examples/js/renderers/SoftwareRenderer2.js

/**
 * @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 ( 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.max( Math.min( x1, x2, x3 ) >> 0, 0 );
		var maxx = Math.min( Math.max( x1, x2, x3 ) >> 0, canvasWidth );
		var miny = Math.max( Math.min( y1, y2, y3 ) >> 0, 0 );
		var maxy = Math.min( Math.max( y1, y2, y3 ) >> 0, canvasHeight );

		// 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;

		}

	}

};