Implemented Frustum checking to `Projector::projectObjects` (thanks errynp)

Added `boundingBox`, `boundingSphere` and `computeBoundingSphere` to Geometry.

examples/particles_floor.html

@@ -47,9 +47,6 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				var material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
 				for ( var ix = 0; ix < AMOUNTX; ix++ ) {
@@ -63,6 +60,8 @@
 					}
 				}
 
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/particles_random.html

@@ -44,9 +44,6 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				for ( var i = 0; i < 1000; i++ ) {
 
 					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0x808008 + 0x808080, opacity: 1 } ) );
@@ -57,6 +54,8 @@
 					scene.addObject( particle );
 				}
 
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/particles_sprites.html

@@ -44,9 +44,6 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				var material = new THREE.ParticleBasicMaterial( { map: createSprite(), blending: THREE.AdditiveBlending } );
 
 				for ( var i = 0; i < 1000; i++ ) {
@@ -58,6 +55,9 @@
 					scene.addObject( particle );
 				}
 
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortElements = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/particles_waves.html

@@ -27,7 +27,7 @@
 			var container, stats;
 			var camera, scene, renderer;
 
-			var particles, particle, count;
+			var particles, particle, count = 0;
 
 			var mouseX = 0, mouseY = 0;
 
@@ -47,9 +47,6 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				particles = new Array();
 
 				var i = 0;
@@ -63,11 +60,13 @@
 						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 						scene.addObject( particle );
+
 					}
-				}
 
-				count = 0;
+				}
 
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -99,6 +98,7 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -111,6 +111,7 @@
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
 				}
+
 			}
 
 			//
@@ -138,6 +139,7 @@
 				stats.update();
 
 				count += 0.1;
+
 			}
 
 		</script>

examples/webglrenderer2_sandbox.html

@@ -105,7 +105,7 @@
 
 			var container, stats;
 
-			var camera, scene, webglRenderer;
+			var camera, scene, renderer;
 
 			var mesh, zmesh, lightMesh, geometry;
 
@@ -167,9 +167,10 @@
 
 				}
 
-				webglRenderer = new THREE.WebGLRenderer2();
-				webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( webglRenderer.domElement );
+				renderer = new THREE.WebGLRenderer2();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				// renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
 
 				if ( statsEnabled ) {
 
@@ -223,7 +224,7 @@
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				webglRenderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 				if ( statsEnabled ) stats.update();
 

src/cameras/Camera.js

@@ -8,6 +8,7 @@ THREE.Camera = function ( fov, aspect, near, far ) {
 	this.target = { position: new THREE.Vector3() };
 
 	this.up = new THREE.Vector3( 0, 1, 0 );
+
 	this.matrix = new THREE.Matrix4();
 	this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
 
@@ -23,7 +24,7 @@ THREE.Camera = function ( fov, aspect, near, far ) {
 
 	};
 
-	/*
+	/* TODO
 	this.translateY = function ( amount ) {
 
 	};

src/core/Geometry.js

@@ -10,6 +10,9 @@ THREE.Geometry = function () {
 	this.faces = [];
 	this.uvs = [];
 
+	this.boundingBox = null;
+	this.boundingSphere = null;
+
 	this.geometryChunks = {};
 
 	this.hasTangents = false;
@@ -286,6 +289,8 @@ THREE.Geometry.prototype = {
 
 	computeBoundingBox: function () {
 
+		var vertex;
+
 		if ( this.vertices.length > 0 ) {
 
 			this.bbox = { 'x': [ this.vertices[ 0 ].position.x, this.vertices[ 0 ].position.x ],
@@ -332,6 +337,20 @@ THREE.Geometry.prototype = {
 
 	},
 
+	computeBoundingSphere: function () {
+
+		var radius = this.boundingSphere === null ? 0 : this.boundingSphere.radius;
+
+		for ( var v = 0, vl = this.vertices.length; v < vl; v ++ ) {
+
+			radius = Math.max( radius, this.vertices[ v ].position.length() );
+
+		}
+
+		this.boundingSphere = { radius: radius };
+
+	},
+
 	sortFacesByMaterial: function () {
 
 		// TODO

src/core/Matrix4.js

@@ -262,10 +262,10 @@ THREE.Matrix4.prototype = {
 
 	flatten: function() {
 
-		return [this.n11, this.n21, this.n31, this.n41,
-			this.n12, this.n22, this.n32, this.n42,
-			this.n13, this.n23, this.n33, this.n43,
-			this.n14, this.n24, this.n34, this.n44];
+		return [ this.n11, this.n21, this.n31, this.n41,
+			  this.n12, this.n22, this.n32, this.n42,
+			  this.n13, this.n23, this.n33, this.n43,
+			  this.n14, this.n24, this.n34, this.n44 ];
 
 	},
 

src/objects/Mesh.js

@@ -17,7 +17,8 @@ THREE.Mesh = function ( geometry, material/*, normUVs*/ ) {
 
 	// if ( normUVs ) this.normalizeUVs();
 
-	this.geometry.computeBoundingBox();
+	// this.geometry.boundingBox ||this.geometry.computeBoundingBox();
+	this.geometry.boundingSphere || this.geometry.computeBoundingSphere();
 
 };
 

src/renderers/Projector.js

@@ -15,6 +15,7 @@ THREE.Projector = function() {
 	_vector4 = new THREE.Vector4(),
 	_projScreenMatrix = new THREE.Matrix4(),
 	_projScreenObjectMatrix = new THREE.Matrix4(),
+	_frustum = [],
 
 	_clippedVertex1PositionScreen = new THREE.Vector4(),
 	_clippedVertex2PositionScreen = new THREE.Vector4(),
@@ -29,13 +30,15 @@ THREE.Projector = function() {
 		_objectCount = 0;
 		_projScreenMatrix.multiply( camera.projectionMatrix, camera.matrix );
 
+		computeFrustum( _projScreenMatrix );
+
 		objects = scene.objects;
 
 		for ( o = 0, ol = objects.length; o < ol; o++ ) {
 
 			object = objects[ o ];
 
-			if ( object.visible === false ) continue;
+			if ( object.visible === false || isInFrustum( object ) === false ) continue;
 
 			_object = _objectPool[ _objectCount ] = _objectPool[ _objectCount ] || new THREE.RenderableObject();
 
@@ -372,6 +375,46 @@ THREE.Projector = function() {
 
 	};
 
+	function painterSort( a, b ) {
+
+		return b.z - a.z;
+
+	}
+
+	function computeFrustum( m ) {
+
+		_frustum[ 0 ] = new THREE.Vector4( m.n41 - m.n11, m.n42 - m.n12, m.n43 - m.n13, m.n44 - m.n14 );
+		_frustum[ 1 ] = new THREE.Vector4( m.n41 + m.n11, m.n42 + m.n12, m.n43 + m.n13, m.n44 + m.n14 );
+		_frustum[ 2 ] = new THREE.Vector4( m.n41 + m.n21, m.n42 + m.n22, m.n43 + m.n23, m.n44 + m.n24 );
+		_frustum[ 3 ] = new THREE.Vector4( m.n41 - m.n21, m.n42 - m.n22, m.n43 - m.n23, m.n44 - m.n24 );
+		_frustum[ 4 ] = new THREE.Vector4( m.n41 - m.n31, m.n42 - m.n32, m.n43 - m.n33, m.n44 - m.n34 );
+		_frustum[ 5 ] = new THREE.Vector4( m.n41 + m.n31, m.n42 + m.n32, m.n43 + m.n33, m.n44 + m.n34 );
+
+		for ( var i = 0, l = _frustum.length; i < l; i ++ ) {
+
+			var plane = _frustum[ i ];
+			plane.divideScalar( Math.sqrt( plane.x * plane.x + plane.y * plane.y + plane.z * plane.z ) );
+
+		}
+
+	}
+
+	function isInFrustum( object ) {
+
+		var d, position = object.position,
+		radius = - object.geometry.boundingSphere.radius * Math.max( object.scale.x, Math.max( object.scale.y, object.scale.z ) );
+
+		for ( var i = 0; i < 6; i ++ ) {
+
+			d = _frustum[ i ].x * position.x + _frustum[ i ].y * position.y + _frustum[ i ].z * position.z + _frustum[ i ].w;
+			if ( d <= radius ) return false;
+
+		}
+
+		return true;
+
+	}
+
 	function clipLine( s1, s2 ) {
 
 		var alpha1 = 0, alpha2 = 1,
@@ -442,10 +485,4 @@ THREE.Projector = function() {
 
 	}
 
-	function painterSort( a, b ) {
-
-		return b.z - a.z;
-
-	}
-
 };

src/renderers/WebGLRenderer2.js

@@ -78,9 +78,7 @@ THREE.WebGLRenderer2 = function () {
 		/*
 		for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
 
-			object = scene.objects[ o ];
-
-			renderObject( object );
+			renderObject( scene.objects[ o ] );
 
 		}
 		*/
@@ -89,13 +87,10 @@ THREE.WebGLRenderer2 = function () {
 
 		for ( o = 0, ol = _renderList.length; o < ol; o++ ) {
 
-			object = _renderList[ o ];
-
-			renderObject( object.object );
+			renderObject( _renderList[ o ].object );
 
 		}
 
-
 		function renderObject( object ) {
 
 			var geometry, material, m, nl,
@@ -242,8 +237,6 @@ THREE.WebGLRenderer2 = function () {
 
 		function buildBuffers( geometry ) {
 
-			// TODO: Handle 65535
-
 			var itemCount = 0, vertexIndex, group,
 			f, fl, face, v1, v2, v3, vertexNormals, normal, uv,
 			vertexGroups = [], faceGroups = [], lineGroups = [], normalGroups = [], uvGroups = [],
@@ -470,8 +463,12 @@ THREE.WebGLRenderer2 = function () {
 
 					pfs += 'uniform sampler2D tMap;\n';
 					pfs += 'varying vec2 vUv;\n';
-					// fs += 'vec4 mapColor = texture2D( tMap, vUv );\n';
-					// fs += 'mapColor.xyz *= mapColor.w;\n';
+
+					/* Premultiply alpha
+					fs += 'vec4 mapColor = texture2D( tMap, vUv );\n';
+					fs += 'mapColor.xyz *= mapColor.w;\n';
+					*/
+
 					fs += 'gl_FragColor *= texture2D( tMap, vUv );\n';
 
 					identifiers.push( 'tMap' );