Cleaned up CanvasRenderer/MeshDepthMaterial code.

Moved near/far values from MeshDepthMaterial to Camera (CanvasRenderer/WebGLRenderer/WebGLRenderer2).

examples/camera_orthographic.html

@@ -41,7 +41,7 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
 				container.appendChild( info );
 
-				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, - 2000, 1000 );
 				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
 				camera.position.x = 200;
 				camera.position.y = 100;

examples/materials.html

@@ -29,6 +29,7 @@
 			var particleLight, pointLight;
 
 			init();
+			// loop();
 			setInterval( loop, 1000 / 60 );
 
 			function init() {
@@ -69,18 +70,19 @@
 
 				var geometry = new Sphere( 100, 14, 7, false );
 
-				var materials = [];
-				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true } );
-				//materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ), overdraw: false, doubleSided: true } );
-				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
-				materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
-				// materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false } );
-				materials.push( { material: new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false } );
-				materials.push( { material: new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ), overdraw: false, doubleSided: false } );
+				var materials = [
+
+					{ material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true },
+					{ material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true },
+					{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false },
+					{ material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false },
+					{ material: new THREE.MeshDepthMaterial(), overdraw: true, doubleSided: false },
+					{ material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false },
+					{ material: new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
+					{ material: new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false },
+					{ material: new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ), overdraw: false, doubleSided: false }
+
+				];
 
 				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
 

examples/materials_depth.html

@@ -73,7 +73,7 @@
 
 				// Plane
 
-				var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
+				var material = new THREE.MeshDepthMaterial();
 
 				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 				plane.rotation.x = - 90 * ( Math.PI / 180 );

examples/materials_gl.html

@@ -16,7 +16,7 @@
 	<body>
 
 		<pre id="log"></pre>
-		
+
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
@@ -78,7 +78,7 @@
 				materials.push( { material: new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ), overdraw: false, doubleSided: true } );
 
-				materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
+				materials.push( { material: new THREE.MeshDepthMaterial(), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshLambertMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
 

src/cameras/Camera.js

@@ -4,13 +4,18 @@
 
 THREE.Camera = function ( fov, aspect, near, far ) {
 
+	this.fov = fov;
+	this.aspect = aspect;
+	this.near = near;
+	this.far = far;
+
 	this.position = new THREE.Vector3();
 	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 );
+	this.projectionMatrix = null;
 
 	this.autoUpdateMatrix = true;
 
@@ -45,6 +50,14 @@ THREE.Camera = function ( fov, aspect, near, far ) {
 
 	};
 
+	this.updateProjectionMatrix = function () {
+
+		this.projectionMatrix = THREE.Matrix4.makePerspective( this.fov, this.aspect, this.near, this.far );
+
+	};
+
+	this.updateProjectionMatrix();
+
 	this.toString = function () {
 
 		return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';

src/core/Vertex.js

@@ -13,7 +13,7 @@ THREE.Vertex = function ( position, normal ) {
 	this.normalScreen = new THREE.Vector3();
 
 	this.tangent = new THREE.Vector4();
-	
+
 	this.__visible = true;
 
 }

src/materials/MeshDepthMaterial.js

@@ -2,8 +2,6 @@
  * @author mr.doob / http://mrdoob.com/
  *
  * parameters = {
- *  near: <float>,
- *  far: <float>,
  *  opacity: <float>,
  *  blending: THREE.NormalBlending
  * } 
@@ -11,9 +9,6 @@
 
 THREE.MeshDepthMaterial = function ( parameters ) {
 
-	this.near = 1;
-	this.far = 1000;
-
 	this.opacity = 1;
 	this.shading = THREE.SmoothShading;
 	this.blending = THREE.NormalBlending;
@@ -25,17 +20,11 @@ THREE.MeshDepthMaterial = function ( parameters ) {
 
 	if ( parameters ) {
 
-		if ( parameters.near !== undefined ) this.near = parameters.near;
-		if ( parameters.far !== undefined ) this.far = parameters.far;
 		if ( parameters.opacity !== undefined ) this.opacity  = parameters.opacity;
 		if ( parameters.blending !== undefined ) this.blending = parameters.blending;
 
 	}
 
-	this.__2near = 2 * this.near;
-	this.__farPlusNear = this.far + this.near;
-	this.__farMinusNear = this.far - this.near;
-
 };
 
 THREE.MeshDepthMaterial.prototype = {

src/renderers/CanvasRenderer.js

@@ -25,7 +25,8 @@ THREE.CanvasRenderer = function () {
 	_color2 = new THREE.Color(),
 	_color3 = new THREE.Color(),
 	_color4 = new THREE.Color(),
-	_2near, _farPlusNear, _farMinusNear,
+
+	_near, _far,
 
 	_bitmap,
 	_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
@@ -575,13 +576,12 @@ THREE.CanvasRenderer = function () {
 				_color.setRGB( _w, _w, _w );
 				*/
 
-				_2near = material.__2near;
-				_farPlusNear = material.__farPlusNear;
-				_farMinusNear = material.__farMinusNear;
+				_near = camera.near;
+				_far = camera.far;
 
-				_color1.r = _color1.g = _color1.b = 1 - ( _2near / ( _farPlusNear - v1.positionScreen.z * _farMinusNear ) );
-				_color2.r = _color2.g = _color2.b = 1 - ( _2near / ( _farPlusNear - v2.positionScreen.z * _farMinusNear ) );
-				_color3.r = _color3.g = _color3.b = 1 - ( _2near / ( _farPlusNear - v3.positionScreen.z * _farMinusNear ) );
+				_color1.r = _color1.g = _color1.b = 1 - smoothstep( v1.positionScreen.z, _near, _far );
+				_color2.r = _color2.g = _color2.b = 1 - smoothstep( v2.positionScreen.z, _near, _far );
+				_color3.r = _color3.g = _color3.b = 1 - smoothstep( v3.positionScreen.z, _near, _far );
 
 				_color4.r = ( _color2.r + _color3.r ) * 0.5;
 				_color4.g = ( _color2.g + _color3.g ) * 0.5;
@@ -789,6 +789,18 @@ THREE.CanvasRenderer = function () {
 
 		}
 
+		function smoothstep( value, min, max ) {
+
+			/*
+			if ( value <= min ) return 0;
+			if ( value >= max ) return 1;
+			*/
+
+			var x = ( value - min ) / ( max - min );
+			return x * x * ( 3 - 2 * x );
+
+		}
+
 		function normalToComponent( normal ) {
 
 			var component = ( normal + 1 ) * 0.5;

src/renderers/Projector.js

@@ -64,7 +64,7 @@ THREE.Projector = function() {
 
 	this.projectScene = function ( scene, camera, sort ) {
 
-		var renderList = [],
+		var renderList = [], near = camera.near, far = camera.far,
 		o, ol, v, vl, f, fl, n, nl, objects, object,
 		objectMatrix, objectRotationMatrix, objectMaterials, objectOverdraw,
 		geometry, vertices, vertex, vertexPositionScreen,
@@ -99,7 +99,7 @@ THREE.Projector = function() {
 
 				vertices = geometry.vertices;
 
-				for ( v = 0, vl = vertices.length; v < vl; v++ ) {
+				for ( v = 0, vl = vertices.length; v < vl; v ++ ) {
 
 					vertex = vertices[ v ];
 
@@ -110,12 +110,10 @@ THREE.Projector = function() {
 					vertexPositionScreen.copy( vertex.positionWorld );
 					_projScreenMatrix.multiplyVector4( vertexPositionScreen );
 
-					// Perform the perspective divide. TODO: This should be be performend 
-					// post clipping (imagine if the vertex lies at the same location as 
-					// the camera, causing a divide by w = 0).
-					vertexPositionScreen.multiplyScalar( 1 / vertexPositionScreen.w );
+					vertexPositionScreen.x /= vertexPositionScreen.w;
+					vertexPositionScreen.y /= vertexPositionScreen.w;
 
-					vertex.__visible = vertexPositionScreen.z > 0 && vertexPositionScreen.z < 1;
+					vertex.__visible = vertexPositionScreen.z > near && vertexPositionScreen.z < far;
 
 				}
 

src/renderers/WebGLRenderer.js

@@ -390,8 +390,8 @@ THREE.WebGLRenderer = function ( scene, antialias ) {
 
 					setMaterialShaders( material, ShaderLib[ 'depth' ] );
 
-					material.uniforms.mNear.value = material.near;
-					material.uniforms.mFar.value = material.far;
+					material.uniforms.mNear.value = camera.near;
+					material.uniforms.mFar.value = camera.far;
 
 				} else if ( material instanceof THREE.MeshNormalMaterial ) {
 

src/renderers/WebGLRenderer2.js

@@ -189,8 +189,8 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 						} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
-							_gl.uniform1f( uniforms.mNear, material.near );
-							_gl.uniform1f( uniforms.mFar, material.far );
+							_gl.uniform1f( uniforms.mNear, camera.near );
+							_gl.uniform1f( uniforms.mFar, camera.far );
 							_gl.uniform1f( uniforms.mOpacity, material.opacity );
 
 						}