Merge branch 'dev' into dev-rotate_tex

docs/api/core/Layers.html

@@ -11,15 +11,14 @@
 		<h1>[name]</h1>
 
 		<div class="desc">
-		An object providing a [link:https://en.wikipedia.org/wiki/Mask_(computing) bit mask] and accessor methods
-		used to control an [page:Object3D]'s visibility.
-		A [page:Layers] object assigns an [page:Object3D] to 0 or more of 32 layers numbered 0 to 31.<br /><br />
+      			A [page:Layers] object assigns an [page:Object3D] to 1 or more of 32 layers numbered 0 to 31
+      			- internally the layers are stored as a [link:https://en.wikipedia.org/wiki/Mask_(computing) bit mask], and by default all
+      			Object3Ds are a member of layer 0.<br /><br />
 
-		This is used to control visibility - an object must share a layer with a [page:Camera camera]
-		to be visible when that camera's view is renderered.<br /><br />
+      			This can be used to control visibility - an object must share a layer with a [page:Camera camera] to be visible when that camera's
+      			view is renderered.<br /><br />
 
-		All classes that inherit from [page:Object3D] have a [property:layers] property which is an instance
-		of this class.
+      			All classes that inherit from [page:Object3D] have an [page:Object3D.layers] property which is an instance of this class.
 		</div>
 
 
@@ -28,14 +27,14 @@
 
 		<h3>[name]()</h3>
 		<div>
-		Create a new Layers object, with an initial mask set to layer 1.
+			Create a new Layers object, with membership initially set to layer 0.
 		</div>
 
 		<h2>Properties</h2>
 
 		<h3>[property:Integer mask]</h3>
 		<div>
-		Internal layer mask.
+		 	A bit mask storing which of the 32 layers this layers object is currently a member of.
 		</div>
 
 
@@ -43,37 +42,37 @@
 
 		<h3>[method:null disable]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Remove *layer* from the mask.
+			Remove membership of this *layer*.
 		</div>
 
 		<h3>[method:null enable]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Add *layer* to the mask.
+			Add membership of this *layer*.
 		</div>
 
 		<h3>[method:null set]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Set the layer mask to the value *layer*.
+			Set membership to *layer*, and remove membership all other layers.
 		</div>
 
 		<h3>[method:Boolean test]( [page:Integer layers] )</h3>
 		<div>
-		layers - a 32bit bit mask of layer numbers.<br /><br />
+			layers - a Layers object<br /><br />
 
-		Returns true if *layers* and [page:.mask] have any bits set in common.
+			Returns true if this and the passed *layers* object are members of the same set of layers.
 		</div>
 
 		<h3>[method:null toggle]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Toggle the *layer* value in the mask.
+			Toggle membership of *layer*.
 		</div>
 
 		<h2>Source</h2>

editor/js/Loader.js

@@ -177,7 +177,7 @@ var Loader = function ( editor ) {
 					var contents = event.target.result;
 
 					var loader = new THREE.GLTF2Loader();
-					loader.parse( contents, function ( result ) {
+					loader.parse( contents, '', function ( result ) {
 
 						result.scene.name = filename;
 						editor.execute( new AddObjectCommand( result.scene ) );

editor/js/Sidebar.Material.js

@@ -1011,7 +1011,7 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.length === 0 ) return;
 
-			material = material[ 0 ];
+			material = material[ currentMaterialSlot ];
 
 		} else {
 

examples/js/loaders/AssimpJSONLoader.js

@@ -21,6 +21,8 @@ THREE.AssimpJSONLoader.prototype = {
 
 	constructor: THREE.AssimpJSONLoader,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;

examples/js/loaders/BinaryLoader.js

@@ -19,6 +19,8 @@ THREE.BinaryLoader.prototype = {
 
 	constructor: THREE.BinaryLoader,
 
+	crossOrigin: 'Anonymous',
+
 	// Load models generated by slim OBJ converter with BINARY option (converter_obj_three_slim.py -t binary)
 	//  - binary models consist of two files: JS and BIN
 	//  - parameters

examples/js/loaders/ColladaLoader2.js

@@ -13,6 +13,8 @@ THREE.ColladaLoader.prototype = {
 
 	constructor: THREE.ColladaLoader,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;

examples/js/loaders/GLTF2Loader.js

@@ -18,6 +18,8 @@ THREE.GLTF2Loader = ( function () {
 
 		constructor: GLTF2Loader,
 
+		crossOrigin: 'Anonymous',
+
 		load: function ( url, onLoad, onProgress, onError ) {
 
 			var scope = this;
@@ -30,7 +32,16 @@ THREE.GLTF2Loader = ( function () {
 
 			loader.load( url, function ( data ) {
 
-				scope.parse( data, onLoad, path );
+				try {
+
+					scope.parse( data, path, onLoad, onError );
+
+				} catch ( e ) {
+
+					// For SyntaxError or TypeError, return a generic failure message.
+					onError( e.constructor === Error ? e : new Error( 'THREE.GLTF2Loader: Unable to parse model.' ) );
+
+				}
 
 			}, onProgress, onError );
 
@@ -48,7 +59,7 @@ THREE.GLTF2Loader = ( function () {
 
 		},
 
-		parse: function ( data, callback, path ) {
+		parse: function ( data, path, onLoad, onError ) {
 
 			var content;
 			var extensions = {};
@@ -68,6 +79,13 @@ THREE.GLTF2Loader = ( function () {
 
 			var json = JSON.parse( content );
 
+			if ( json.asset.version[0] < 2 ) {
+
+				onError( new Error( 'THREE.GLTF2Loader: Legacy glTF detected. Use THREE.GLTFLoader instead.' ) );
+				return;
+
+			}
+
 			if ( json.extensionsUsed ) {
 
 				if( json.extensionsUsed.indexOf( EXTENSIONS.KHR_LIGHTS ) >= 0 ) {
@@ -116,9 +134,9 @@ THREE.GLTF2Loader = ( function () {
 					animations: animations
 				};
 
-				callback( glTF );
+				onLoad( glTF );
 
-			} );
+			}, onError );
 
 		}
 
@@ -582,7 +600,7 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( ! materialParams.fragmentShader ) {
 
-			throw new Error( 'THREE.GLTF2Loader: Missing fragment shader definition: ', program.fragmentShader );
+			throw new Error( 'THREE.GLTF2Loader: Missing fragment shader definition: ' + program.fragmentShader );
 
 		}
 
@@ -590,7 +608,7 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( ! vertexShader ) {
 
-			throw new Error( 'THREE.GLTF2Loader: Missing vertex shader definition: ', program.vertexShader );
+			throw new Error( 'THREE.GLTF2Loader: Missing vertex shader definition: ' + program.vertexShader );
 
 		}
 
@@ -1643,7 +1661,7 @@ THREE.GLTF2Loader = ( function () {
 
 	};
 
-	GLTFParser.prototype.parse = function ( callback ) {
+	GLTFParser.prototype.parse = function ( onLoad, onError ) {
 
 		var json = this.json;
 
@@ -1686,9 +1704,9 @@ THREE.GLTF2Loader = ( function () {
 
 			}
 
-			callback( scene, scenes, cameras, animations );
+			onLoad( scene, scenes, cameras, animations );
 
-		} );
+		} ).catch( onError );
 
 	};
 

examples/js/loaders/GLTFLoader.js

@@ -17,6 +17,8 @@ THREE.GLTFLoader = ( function () {
 
 		constructor: GLTFLoader,
 
+		crossOrigin: 'Anonymous',
+
 		load: function ( url, onLoad, onProgress, onError ) {
 
 			var scope = this;

examples/js/loaders/MTLLoader.js

@@ -202,6 +202,8 @@ THREE.MTLLoader.MaterialCreator.prototype = {
 
 	constructor: THREE.MTLLoader.MaterialCreator,
 
+	crossOrigin: 'Anonymous',
+
 	setCrossOrigin: function ( value ) {
 
 		this.crossOrigin = value;

examples/js/loaders/TDSLoader.js

@@ -193,43 +193,6 @@ THREE.TDSLoader.prototype = {
 				material.shininess = shininess;
 				this.debugMessage( '   Shininess : ' + shininess );
 
-			} else if ( next === MAT_TEXMAP ) {
-
-				this.debugMessage( '   Map (TODO ImageLoader)' );
-				//var map = this.readMap(data);
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next === MAT_BUMPMAP ) {
-
-				this.debugMessage( '   BumpMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_OPACMAP ) {
-
-				this.debugMessage( '   OpacityMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_SPECMAP ) {
-
-				this.debugMessage( '   SpecularMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_SHINMAP ) {
-
-				this.debugMessage( '   ShininessrMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_REFLMAP ) {
-
-				this.debugMessage( '   RelectMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
 			} else {
 
 				this.debugMessage( '   Unknown material chunk: ' + next.toString( 16 ) );
@@ -377,7 +340,46 @@ THREE.TDSLoader.prototype = {
 
 				this.debugMessage( '   Tranformation Matrix (TODO)' );
 
-				//TODO <ADD CODE HERE>
+				var values = [];
+				for( var i = 0; i < 12; i++ ) {
+
+					values[ i ] = this.readFloat( data );
+				
+				}
+
+				var matrix = new THREE.Matrix4();
+
+				//X Line
+				matrix.elements[ 0 ] = values[ 0 ];
+				matrix.elements[ 1 ] = values[ 6 ];
+				matrix.elements[ 2 ] = values[ 3 ];
+				matrix.elements[ 3 ] = values[ 9 ];
+
+				//Y Line
+				matrix.elements[ 4 ] = -values[ 2 ];
+				matrix.elements[ 5 ] = -values[ 8 ];
+				matrix.elements[ 6 ] = -values[ 5 ];
+				matrix.elements[ 7 ] = -values[ 11 ];
+
+				//Z Line
+				matrix.elements[ 8 ] = values[ 1 ];
+				matrix.elements[ 9 ] = values[ 7 ];
+				matrix.elements[ 10 ] = values[ 4 ];
+				matrix.elements[ 11 ] = -values[ 10 ];
+
+				//W Line
+				matrix.elements[ 12 ] = 0;
+				matrix.elements[ 13 ] = 0;
+				matrix.elements[ 14 ] = 0;
+				matrix.elements[ 15 ] = 1;
+
+				matrix.transpose();
+
+				var inverse = new THREE.Matrix4();
+				inverse.getInverse( matrix, true );
+				geometry.applyMatrix( inverse );
+				
+				matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
 
 			} else {
 
@@ -395,15 +397,19 @@ THREE.TDSLoader.prototype = {
 
 			//geometry.faceVertexUvs[0][faceIndex][vertexIndex]
 
-			var faceUV = [];
+			if ( uvs.length > 0 ) {
 
-			for ( var i = 0; i < geometry.faces.length; i ++ ) {
+				var faceUV = [];
 
-				faceUV.push( [ uvs[ geometry.faces[ i ].a ], uvs[ geometry.faces[ i ].b ], uvs[ geometry.faces[ i ].c ] ] );
+				for ( var i = 0; i < geometry.faces.length; i ++ ) {
 
-			}
+					faceUV.push( [ uvs[ geometry.faces[ i ].a ], uvs[ geometry.faces[ i ].b ], uvs[ geometry.faces[ i ].c ] ] );
+
+				}
 
-			geometry.faceVertexUvs[ 0 ] = faceUV;
+				geometry.faceVertexUvs[ 0 ] = faceUV;
+	
+			}		
 
 			geometry.computeVertexNormals();
 
@@ -456,12 +462,6 @@ THREE.TDSLoader.prototype = {
 
 				}
 
-			} else if ( chunk.id === SMOOTH_GROUP ) {
-
-				this.debugMessage( '      Smooth Group (TODO)' );
-
-				//TODO <ADD CODE HERE>
-
 			} else {
 
 				this.debugMessage( '      Unknown face array chunk: ' + chunk.toString( 16 ) );

examples/js/loaders/VRMLLoader.js

@@ -26,6 +26,8 @@ THREE.VRMLLoader.prototype = {
 
 	recordingFieldname: null,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;

examples/js/postprocessing/BokehPass.js

@@ -33,6 +33,8 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	// depth material
 
 	this.materialDepth = new THREE.MeshDepthMaterial();
+	this.materialDepth.depthPacking = THREE.RGBADepthPacking;
+	this.materialDepth.blending = THREE.NoBlending;
 
 	// bokeh material
 
@@ -51,8 +53,11 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	bokehUniforms[ "aspect" ].value = aspect;
 	bokehUniforms[ "aperture" ].value = aperture;
 	bokehUniforms[ "maxblur" ].value = maxblur;
+	bokehUniforms[ "nearClip" ].value = camera.near;
+	bokehUniforms[ "farClip" ].value = camera.far;
 
 	this.materialBokeh = new THREE.ShaderMaterial( {
+		defines: bokehShader.defines,
 		uniforms: bokehUniforms,
 		vertexShader: bokehShader.vertexShader,
 		fragmentShader: bokehShader.fragmentShader
@@ -68,6 +73,9 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 
+	this.oldClearColor = new THREE.Color();
+	this.oldClearAlpha = 1;
+
 };
 
 THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
@@ -82,11 +90,20 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		this.scene.overrideMaterial = this.materialDepth;
 
+		this.oldClearColor.copy( renderer.getClearColor() );
+		this.oldClearAlpha = renderer.getClearAlpha();
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		renderer.setClearColor( 0xffffff );
+		renderer.setClearAlpha( 1.0 );
 		renderer.render( this.scene, this.camera, this.renderTargetDepth, true );
 
 		// Render bokeh composite
 
 		this.uniforms[ "tColor" ].value = readBuffer.texture;
+		this.uniforms[ "nearClip" ].value = this.camera.near;
+		this.uniforms[ "farClip" ].value = this.camera.far;
 
 		if ( this.renderToScreen ) {
 
@@ -99,7 +116,10 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 		}
 
 		this.scene.overrideMaterial = null;
-
+		renderer.setClearColor( this.oldClearColor );
+		renderer.setClearAlpha( this.oldClearAlpha );
+		renderer.autoClear = this.oldAutoClear;
+	
 	}
 
 } );

examples/js/renderers/RaytracingRenderer.js

@@ -24,7 +24,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 	var maxRecursionDepth = 3;
 
 	var canvasWidth, canvasHeight;
-	var canvasWidthHalf, canvasHeightHalf;
 
 	var clearColor = new THREE.Color( 0x000000 );
 
@@ -126,9 +125,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 		canvasWidth = canvas.width;
 		canvasHeight = canvas.height;
 
-		canvasWidthHalf = Math.floor( canvasWidth / 2 );
-		canvasHeightHalf = Math.floor( canvasHeight / 2 );
-
 		context.fillStyle = 'white';
 
 		pool.forEach( updateSettings );

examples/js/renderers/RaytracingWorker.js

@@ -41,7 +41,7 @@ self.onmessage = function( e ) {
 		var meta = data.annex;
 		scene.traverse( function( o ) {
 
-			if ( o instanceof THREE.PointLight ) {
+			if ( o.isPointLight ) {
 
 				o.physicalAttenuation = true;
 
@@ -96,10 +96,12 @@ THREE.RaytracingRendererWorker = function () {
 	var cameraPosition = new THREE.Vector3();
 
 	var raycaster = new THREE.Raycaster( origin, direction );
+	var ray = raycaster.ray;
+
 	var raycasterLight = new THREE.Raycaster();
+	var rayLight = raycasterLight.ray;
 
 	var perspective;
-	var modelViewMatrix = new THREE.Matrix4();
 	var cameraNormalMatrix = new THREE.Matrix3();
 
 	var objects;
@@ -147,31 +149,19 @@ THREE.RaytracingRendererWorker = function () {
 
 		return function spawnRay( rayOrigin, rayDirection, outputColor, recursionDepth ) {
 
-			var ray = raycaster.ray;
-
-			ray.origin = rayOrigin;
-			ray.direction = rayDirection;
-
-			//
-
-			var rayLight = raycasterLight.ray;
-
-			//
-
 			outputColor.setRGB( 0, 0, 0 );
 
 			//
 
+			ray.origin = rayOrigin;
+			ray.direction = rayDirection;
+
 			var intersections = raycaster.intersectObjects( objects, true );
 
 			// ray didn't find anything
 			// (here should come setting of background color?)
 
-			if ( intersections.length === 0 ) {
-
-				return;
-
-			}
+			if ( intersections.length === 0 ) return;
 
 			// ray hit
 
@@ -188,14 +178,13 @@ THREE.RaytracingRendererWorker = function () {
 
 			var _object = cache[ object.id ];
 
-			localPoint.copy( point ).applyMatrix4( _object.inverseMatrix );
-			eyeVector.subVectors( raycaster.ray.origin, point ).normalize();
+			eyeVector.subVectors( ray.origin, point ).normalize();
 
 			// resolve pixel diffuse color
 
-			if ( material instanceof THREE.MeshLambertMaterial ||
-				 material instanceof THREE.MeshPhongMaterial ||
-				 material instanceof THREE.MeshBasicMaterial ) {
+			if ( material.isMeshLambertMaterial ||
+				 material.isMeshPhongMaterial ||
+				 material.isMeshBasicMaterial ) {
 
 				diffuseColor.copyGammaToLinear( material.color );
 
@@ -215,7 +204,7 @@ THREE.RaytracingRendererWorker = function () {
 
 			rayLight.origin.copy( point );
 
-			if ( material instanceof THREE.MeshBasicMaterial ) {
+			if ( material.isMeshBasicMaterial ) {
 
 				for ( var i = 0, l = lights.length; i < l; i ++ ) {
 
@@ -238,8 +227,7 @@ THREE.RaytracingRendererWorker = function () {
 
 				}
 
-			} else if ( material instanceof THREE.MeshLambertMaterial ||
-						material instanceof THREE.MeshPhongMaterial ) {
+			} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial ) {
 
 				var normalComputed = false;
 
@@ -247,8 +235,6 @@ THREE.RaytracingRendererWorker = function () {
 
 					var light = lights[ i ];
 
-					lightColor.copyGammaToLinear( light.color );
-
 					lightVector.setFromMatrixPosition( light.matrixWorld );
 					lightVector.sub( point );
 
@@ -267,6 +253,7 @@ THREE.RaytracingRendererWorker = function () {
 						// the same normal can be reused for all lights
 						// (should be possible to cache even more)
 
+						localPoint.copy( point ).applyMatrix4( _object.inverseMatrix );
 						computePixelNormal( normalVector, localPoint, material.flatShading, face, vertices );
 						normalVector.applyMatrix3( _object.normalMatrix ).normalize();
 
@@ -274,6 +261,8 @@ THREE.RaytracingRendererWorker = function () {
 
 					}
 
+					lightColor.copyGammaToLinear( light.color );
+
 					// compute attenuation
 
 					var attenuation = 1.0;
@@ -300,7 +289,7 @@ THREE.RaytracingRendererWorker = function () {
 
 					// compute specular
 
-					if ( material instanceof THREE.MeshPhongMaterial ) {
+					if ( material.isMeshPhongMaterial ) {
 
 						halfVector.addVectors( lightVector, eyeVector ).normalize();
 
@@ -318,9 +307,9 @@ THREE.RaytracingRendererWorker = function () {
 						schlick.b = specularColor.b + ( 1.0 - specularColor.b ) * alpha;
 
 						lightContribution.copy( schlick );
-
 						lightContribution.multiply( lightColor );
 						lightContribution.multiplyScalar( specularNormalization * specularIntensity * attenuation );
+
 						outputColor.add( lightContribution );
 
 					}
@@ -474,7 +463,7 @@ THREE.RaytracingRendererWorker = function () {
 
 					// convert from linear to gamma
 
-					data[ index ]     = Math.sqrt( pixelColor.r ) * 255;
+					data[ index + 0 ] = Math.sqrt( pixelColor.r ) * 255;
 					data[ index + 1 ] = Math.sqrt( pixelColor.g ) * 255;
 					data[ index + 2 ] = Math.sqrt( pixelColor.b ) * 255;
 					data[ index + 3 ] = 255;
@@ -519,7 +508,6 @@ THREE.RaytracingRendererWorker = function () {
 		//
 
 		cameraNormalMatrix.getNormalMatrix( camera.matrixWorld );
-		origin.copy( cameraPosition );
 
 		perspective = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * canvasHeight;
 
@@ -531,7 +519,7 @@ THREE.RaytracingRendererWorker = function () {
 
 		scene.traverse( function ( object ) {
 
-			if ( object instanceof THREE.Light ) {
+			if ( object.isPointLight ) {
 
 				lights.push( object );
 
@@ -546,11 +534,9 @@ THREE.RaytracingRendererWorker = function () {
 
 			}
 
-			modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-
 			var _object = cache[ object.id ];
 
-			_object.normalMatrix.getNormalMatrix( modelViewMatrix );
+			_object.normalMatrix.getNormalMatrix( object.matrixWorld );
 			_object.inverseMatrix.getInverse( object.matrixWorld );
 
 		} );

examples/js/renderers/SVGRenderer.js

@@ -382,11 +382,11 @@ THREE.SVGRenderer = function () {
 
 			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
 
-			addPath( style, path );
+			if ( material.isLineDashedMaterial ) {
 
-		} else if ( material.isLineDashedMaterial ) {
+				style = style + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize;
 
-			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize;
+			}
 
 			addPath( style, path );
 

examples/js/shaders/BokehShader.js

@@ -8,6 +8,11 @@
 
 THREE.BokehShader = {
 
+	defines: {
+		"DEPTH_PACKING": 1,
+		"PERSPECTIVE_CAMERA": 1,
+	},
+
 	uniforms: {
 
 		"tColor":   { value: null },
@@ -15,7 +20,9 @@ THREE.BokehShader = {
 		"focus":    { value: 1.0 },
 		"aspect":   { value: 1.0 },
 		"aperture": { value: 0.025 },
-		"maxblur":  { value: 1.0 }
+		"maxblur":  { value: 1.0 },
+		"nearClip":  { value: 1.0 },
+		"farClip":  { value: 1000.0 },
 
 	},
 
@@ -33,6 +40,7 @@ THREE.BokehShader = {
 	].join( "\n" ),
 
 	fragmentShader: [
+		"#include <common>",
 
 		"varying vec2 vUv;",
 
@@ -42,16 +50,38 @@ THREE.BokehShader = {
 		"uniform float maxblur;",  // max blur amount
 		"uniform float aperture;", // aperture - bigger values for shallower depth of field
 
+		"uniform float nearClip;",
+		"uniform float farClip;",
+
 		"uniform float focus;",
 		"uniform float aspect;",
 
+		"#include <packing>",
+
+		"float getDepth( const in vec2 screenPosition ) {",
+		"	#if DEPTH_PACKING == 1",
+		"	return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );",
+		"	#else",
+		"	return texture2D( tDepth, screenPosition ).x;",
+		"	#endif",
+		"}",
+
+		"float getViewZ( const in float depth ) {",
+		"	#if PERSPECTIVE_CAMERA == 1",
+		"	return perspectiveDepthToViewZ( depth, nearClip, farClip );",
+		"	#else",
+		"	return orthoDepthToViewZ( depth, nearClip, farClip );",
+		"	#endif",
+		"}",
+		
+
 		"void main() {",
 
 			"vec2 aspectcorrect = vec2( 1.0, aspect );",
+	
+			"float viewZ = getViewZ( getDepth( vUv ) );",
 
-			"vec4 depth1 = texture2D( tDepth, vUv );",
-
-			"float factor = depth1.x - focus;",
+			"float factor = ( focus + viewZ );",  // viewZ is <= 0, so this is a difference equation
 
 			"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
 

examples/misc_controls_deviceorientation.html

@@ -40,66 +40,70 @@
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script>
-			(function() {
-				  "use strict";
 
-				  window.addEventListener('load', function() {
+			var container, camera, scene, renderer, controls;
 
-						var container, camera, scene, renderer, controls, geometry, mesh;
+			init();
+			animate();
 
-						var animate = function(){
+			function init() {
 
-							window.requestAnimationFrame( animate );
+				container = document.getElementById( 'container' );
 
-							controls.update();
-							renderer.render(scene, camera);
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-						};
+				controls = new THREE.DeviceOrientationControls( camera );
 
-						container = document.getElementById( 'container' );
+				scene = new THREE.Scene();
 
-						camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
+				geometry.scale( - 1, 1, 1 );
 
-						controls = new THREE.DeviceOrientationControls( camera );
+				var material = new THREE.MeshBasicMaterial( {
+					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
+				} );
 
-						scene = new THREE.Scene();
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-						var geometry = new THREE.SphereGeometry( 500, 16, 8 );
-						geometry.scale( - 1, 1, 1 );
+				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				scene.add( helper );
 
-						var material = new THREE.MeshBasicMaterial( {
-							map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
-						} );
+				//
 
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-						var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
-						var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.BackSide, wireframe: true } );
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				//
 
-						renderer = new THREE.WebGLRenderer();
-						renderer.setPixelRatio( window.devicePixelRatio );
-						renderer.setSize(window.innerWidth, window.innerHeight);
-						renderer.domElement.style.position = 'absolute';
-						renderer.domElement.style.top = 0;
-						container.appendChild(renderer.domElement);
+				window.addEventListener( 'resize', onWindowResize, false );
 
-						window.addEventListener('resize', function() {
 
-							camera.aspect = window.innerWidth / window.innerHeight;
-							camera.updateProjectionMatrix();
-							renderer.setSize( window.innerWidth, window.innerHeight );
+			}
 
-						}, false);
+			function animate() {
 
-						animate();
+				window.requestAnimationFrame( animate );
 
-				  }, false);
+				controls.update();
+				renderer.render( scene, camera );
 
-			})();
-		</script>
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+		</script>
 	</body>
 </html>

examples/webgl_panorama_dualfisheye.html

@@ -61,6 +61,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				// Remap UVs

examples/webgl_panorama_equirectangular.html

@@ -61,7 +61,8 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var material = new THREE.MeshBasicMaterial( {

examples/webgl_postprocessing_dof.html

@@ -176,8 +176,8 @@
 
 				var effectController  = {
 
-					focus: 		1.0,
-					aperture:	0.025,
+					focus: 		500.0,
+					aperture:	5,
 					maxblur:	1.0
 
 				};
@@ -185,17 +185,18 @@
 				var matChanger = function( ) {
 
 					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
-					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
+					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
 					postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;
 
 				};
 
 				var gui = new dat.GUI();
-				gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
-				gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
+				gui.add( effectController, "focus", 10.0, 3000.0, 10 ).onChange( matChanger );
+				gui.add( effectController, "aperture", 0, 10, 0.1 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
 				gui.close();
 
+				matChanger();
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_video_panorama_equirectangular.html

@@ -64,6 +64,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var video = document.createElement( 'video' );
@@ -71,7 +72,7 @@
 				video.height = 360;
 				video.loop = true;
 				video.muted = true;
-				video.src = "textures/pano.webm";
+				video.src = 'textures/pano.webm';
 				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
 				video.play();
 

examples/webvr_video.html

@@ -85,6 +85,7 @@
 				// left
 
 				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var uvs = geometry.faceVertexUvs[ 0 ];

utils/exporters/maya/plug-ins/threeJsFileTranslator.py

@@ -43,11 +43,12 @@ class ThreeJsWriter(object):
         self.skinIndices = []
         self.skinWeights = []
 
-        print("exporting meshes")
-        self._exportMeshes()
+        # Materials are used when exporting faces, so do them first.
         if self.options["materials"]:
             print("exporting materials")
             self._exportMaterials()
+        print("exporting meshes")
+        self._exportMeshes()
         if not self.accessMode == MPxFileTranslator.kExportActiveAccessMode :
 			if self.options["bakeAnimations"]:
 				print("exporting animations")
@@ -199,10 +200,13 @@ class ThreeJsWriter(object):
                 self._exportFaceVertexNormals(face)
 
     def _exportFaceBitmask(self, face, typeBitmask, hasMaterial=True):
-        if face.polygonVertexCount() == 4:
+        vertexCount = face.polygonVertexCount()
+        if vertexCount == 4:
             faceBitmask = 1
-        else:
+        elif vertexCount == 3:
             faceBitmask = 0
+        else:
+            raise ValueError('Faces must have 3 or 4 vertices')
 
         if hasMaterial:
             faceBitmask |= (1 << 1)
@@ -247,8 +251,8 @@ class ThreeJsWriter(object):
             "depthTest": True,
             "depthWrite": True,
             "shading": mat.__class__.__name__,
-            "opacity": mat.getTransparency().r,
-            "transparent": mat.getTransparency().r != 1.0,
+            "opacity": 1.0 - mat.getTransparency().r,
+            "transparent": mat.getTransparency().r != 0.0,
             "vertexColors": False
         }
         if isinstance(mat, nodetypes.Phong):