r74 (bis)

docs/api/lights/DirectionalLight.html

@@ -63,12 +63,6 @@ scene.add( directionalLight );</code>
 			Default — *1.0*.
 		</div>
 
-		<h3>[property:Boolean onlyShadow]</h3>
-		<div>
-			If set to *true* light will only cast shadow but not contribute any lighting (as if *intensity* was 0 but cheaper to compute).<br />
-			Default — *false*.
-		</div>
-
 		<h3>[property:Boolean castShadow]</h3>
 		<div>
 			If set to true light will cast dynamic shadows. Warning: This is expensive and requires tweaking to get shadows looking right.<br />

docs/api/lights/SpotLight.html

@@ -13,7 +13,7 @@
 		<h1>[name]</h1>
 
 		<div class="desc">A point light that can cast shadow in one direction.</div>
-		
+
 		<div class="desc">Affects objects using [page:MeshLambertMaterial] or [page:MeshPhongMaterial].</div>
 
 
@@ -24,7 +24,7 @@
 		<div>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</div>
 		<div>[example:webgl_morphtargets_md2 morphtargets / md2 ]</div>
 		<div>[example:webgl_shading_physical shading / physical ]</div>
-		
+
 		<code>
 		// white spotlight shining from the side, casting shadow
 
@@ -73,50 +73,44 @@
 			Default position — *(0,0,0)*.<br />
 			*Note*: Currently for target property to work properly, it must be part of the [page:Scene scene], e.g. this will help: <code>scene.add( light.target )</code>
 		</div>
-	
+
 		<h3>[property:Float intensity]</h3>
 		<div>
 			Light's intensity.<br />
 			Default — *1.0*.
 		</div>
-	
+
 		<h3>[property:Float distance]</h3>
 		<div>
 			If non-zero, light will attenuate linearly from maximum intensity at light *position* down to zero at *distance*.<br />
 			Default — *0.0*.
 		</div>
-	
+
 		<h3>[property:Float angle]</h3>
 		<div>
 			Maximum extent of the spotlight, in radians, from its direction. Should be no more than *Math.PI/2*.<br />
 			Default — *Math.PI/3*.
 		</div>
-	
+
 		<h3>[property:Float exponent]</h3>
 		<div>
 			Rapidity of the falloff of light from its target direction. A lower value spreads out the light, while a higher
 			focuses it towards the center.<br />
 			Default — *10.0*.
 		</div>
-		
+
 		<h3>[property:Float decay]</h3>
 		<div>
 			The amount the light dims along the distance of the light<br />
 			Default — *1*.
 		</div>
-	
+
 		<h3>[property:Boolean castShadow]</h3>
 		<div>
 			If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and requires tweaking to get shadows looking right.<br />
 			Default — *false*.
 		</div>
-		
-		<h3>[property:Boolean onlyShadow]</h3>
-		<div>
-			If set to *true* light will only cast shadow but not contribute any lighting (as if *intensity* was 0 but cheaper to compute).<br />
-			Default — *false*.
-		</div>
-		
+
 		<h3>[property:Float shadowCameraNear]</h3>
 		<div>
 			Perspective shadow camera frustum <em>near</em> parameter.<br />
@@ -134,13 +128,13 @@
 			Perspective shadow camera frustum <em>field of view</em> parameter.<br />
 			Default — *50*.
 		</div>
-		
+
 		<h3>[property:Boolean shadowCameraVisible]</h3>
 		<div>
 			Show debug shadow camera frustum.<br />
 			Default — *false*.
 		</div>
-		
+
 		<h3>[property:Float shadowBias]</h3>
 		<div>
 			Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow.<br />
@@ -158,34 +152,34 @@
 			Shadow map texture height in pixels.<br />
 			Default — *512*.
 		</div>
-		
+
 		<h3>[property:Vector2 shadowMapSize]</h3>
 		<div>
 			The shadowMapWidth and shadowMapHeight stored in a [page:Vector2 THREE.Vector2]. Set internally during rendering.
-		</div> 
+		</div>
 
 		<h3>[property:PerspectiveCamera shadowCamera]</h3>
 		<div>
 			The shadow's view of the world. Computed internally during rendering from the shadowCamera* settings.
-		</div> 
+		</div>
 
 		<h3>[property:Matrix4 shadowMatrix]</h3>
 		<div>
 			Model to shadow camera space, to compute location and depth in shadow map. Computed internally during rendering.
-		</div> 
+		</div>
 
 		<h3>[property:WebGLRenderTarget shadowMap]</h3>
 		<div>
 		    The depth map generated using the shadowCamera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
-		</div> 
+		</div>
 
-		<h2>Methods</h2>		
+		<h2>Methods</h2>
 		<h3>[method:SpotLight clone]()</h3>
 		<div>
 		<br />
 		It returns a clone of SpotLight.
 		</div>
-		
+
 		<h3>[method:JSON toJSON]()</h3>
 		<div>
 		Return SpotLight data in JSON format.

editor/js/Menubar.Add.js

@@ -324,9 +324,9 @@ Menubar.Add = function ( editor ) {
 		var intensity = 1;
 		var distance = 0;
 		var angle = Math.PI * 0.1;
-		var exponent = 10;
+		var penumbra = 0;
 
-		var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
+		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
 		light.name = 'SpotLight ' + ( ++ lightCount );
 		light.target.name = 'SpotLight ' + ( lightCount ) + ' Target';
 

editor/js/Sidebar.Object.js

@@ -224,15 +224,15 @@ Sidebar.Object = function ( editor ) {
 
 	container.add( objectAngleRow );
 
-	// exponent
+	// penumrba
 
-	var objectExponentRow = new UI.Row();
-	var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
+	var objectPenumbraRow = new UI.Row();
+	var objectPenumbra = new UI.Number().setRange( 0, 1 ).onChange( update );
 
-	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ) );
-	objectExponentRow.add( objectExponent );
+	objectPenumbraRow.add( new UI.Text( 'Penumbra' ).setWidth( '90px' ) );
+	objectPenumbraRow.add( objectPenumbra );
 
-	container.add( objectExponentRow );
+	container.add( objectPenumbraRow );
 
 	// decay
 
@@ -444,9 +444,9 @@ Sidebar.Object = function ( editor ) {
 
 			}
 
-			if ( object.exponent !== undefined && Math.abs( object.exponent - objectExponent.getValue() ) >= 0.01 ) {
+			if ( object.penumbra !== undefined && Math.abs( object.penumbra - objectPenumbra.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'exponent', objectExponent.getValue() ) );
+				editor.execute( new SetValueCommand( object, 'penumbra', objectPenumbra.getValue() ) );
 
 			}
 
@@ -520,7 +520,7 @@ Sidebar.Object = function ( editor ) {
 			'groundColor': objectGroundColorRow,
 			'distance' : objectDistanceRow,
 			'angle' : objectAngleRow,
-			'exponent' : objectExponentRow,
+			'penumbra' : objectPenumbraRow,
 			'decay' : objectDecayRow,
 			'castShadow' : objectShadowRow,
 			'receiveShadow' : objectReceiveShadow,
@@ -679,9 +679,9 @@ Sidebar.Object = function ( editor ) {
 
 		}
 
-		if ( object.exponent !== undefined ) {
+		if ( object.penumbra !== undefined ) {
 
-			objectExponent.setValue( object.exponent );
+			objectPenumbra.setValue( object.penumbra );
 
 		}
 

editor/js/Storage.js

@@ -7,8 +7,10 @@ var Storage = function () {
 	var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
 	if ( indexedDB === undefined  ) {
+
 		console.warn( 'Storage: IndexedDB not available.' );
 		return { init: function () {}, get: function () {}, set: function () {}, clear: function () {} };
+
 	}
 
 	var name = 'threejs-editor';
@@ -89,6 +91,6 @@ var Storage = function () {
 
 		}
 
-	}
+	};
 
 };

examples/files.js

@@ -178,6 +178,7 @@ var files = {
 		"webgl_postprocessing_godrays",
 		"webgl_postprocessing_masking",
 		"webgl_postprocessing_nodes",
+		"webgl_postprocessing_smaa",
 		"webgl_postprocessing_ssao",
 		"webgl_raycast_texture",
 		"webgl_read_float_buffer",
@@ -229,7 +230,8 @@ var files = {
 	],
 	"webvr": [
 		"webvr_cubes",
-		"webvr_video"
+		"webvr_video",
+		"webvr_stereo_pano"
 	],
 	"css3d": [
 		"css3d_molecules",

examples/index.html

@@ -59,24 +59,24 @@
 				background: #fafafa;
 			}
 
-				#panel #content {
-					padding: 0px 20px 20px 20px;
-				}
+			#panel #content {
+				padding: 0px 20px 20px 20px;
+			}
 
-				#panel #content .link {
-					color: #2194CE;
-					text-decoration: none;
-					cursor: pointer;
-					display: block;
-				}
+			#panel #content .link {
+				color: #2194CE;
+				text-decoration: none;
+				cursor: pointer;
+				display: block;
+			}
 
-				#panel #content .selected {
-					color: #ff0000;
-				}
+			#panel #content .selected {
+				color: #ff0000;
+			}
 
-					#panel #content .link:hover {
-						text-decoration: underline;
-					}
+			#panel #content .link:hover {
+				text-decoration: underline;
+			}
 
 			#viewer {
 				position: absolute;
@@ -97,10 +97,59 @@
 				opacity: 0.7;
 			}
 
-				#button:hover {
-					cursor: pointer;
-					opacity: 1;
-				}
+			#button:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+
+			.filterBlock{
+				margin: 20px;
+				position: relative;
+			}
+
+			.filterBlock p {
+				margin: 0;
+			}
+
+			#filterInput {
+				width: 100%;
+				padding: 5px;
+				font-family: inherit;
+				font-size: 15px;
+				outline: none;
+				border: 1px solid #dedede;
+			}
+
+			#filterInput:focus{
+				border: 1px solid #2194CE;
+			}
+
+			#clearFilterButton {
+				position: absolute;
+				right: 6px;
+				top: 50%;
+				margin-top: -8px;
+				width: 16px;
+				height: 16px;
+				font-size: 14px;
+				color: grey;
+				text-align: center;
+				line-height: 0;
+				padding-top: 7px;
+				opacity: .5;
+			}
+
+			#clearFilterButton:hover {
+				opacity: 1;
+			}
+
+			.filtered {
+				display: none !important;
+			}
+
+			#panel li b {
+				font-weight: bold;
+			}
 
 			/* mobile */
 
@@ -113,22 +162,22 @@
 				height: 32px;
 			}
 
-				#expandButton span {
-					height: 2px;
-					background-color: #2194CE;
-					width: 16px;
-					position: absolute;
-					left: 8px;
-					top: 10px;
-				}
+			#expandButton span {
+				height: 2px;
+				background-color: #2194CE;
+				width: 16px;
+				position: absolute;
+				left: 8px;
+				top: 10px;
+			}
 
-				#expandButton span:nth-child(1) {
-					top: 16px;
-				}
+			#expandButton span:nth-child(1) {
+				top: 16px;
+			}
 
-				#expandButton span:nth-child(2) {
-					top: 22px;
-				}
+			#expandButton span:nth-child(2) {
+				top: 22px;
+			}
 
 			@media all and ( max-width: 640px ) {
 				h1{
@@ -149,7 +198,7 @@
 				#content{
 					position: absolute;
 					left: 0;
-					top: 60px;
+					top: 90px;
 					right: 0;
 					bottom: 0;
 					font-size: 17px;
@@ -195,6 +244,10 @@
 				<span></span>
 				<span></span>
 			</a>
+			<div class="filterBlock" >
+				<input type="text" id="filterInput" placeholder="Type to filter"/>
+				<a href="#" id="clearFilterButton" >x</a>
+			</div>
 			<div id="content"></div>
 		</div>
 		<iframe id="viewer" allowfullscreen onmousewheel=""></iframe>
@@ -206,6 +259,9 @@
 		var content = document.getElementById( 'content' );
 		var viewer = document.getElementById( 'viewer' );
 
+		var filterInput = document.getElementById( 'filterInput' );
+		var clearFilterButton = document.getElementById( 'clearFilterButton' );
+
 		var expandButton = document.getElementById( 'expandButton' );
 		expandButton.addEventListener( 'click', function ( event ) {
 			panel.classList.toggle( 'collapsed' );
@@ -249,17 +305,16 @@
 
 			var section = files[ key ];
 
-			var div = document.createElement( 'h2' );
-			div.textContent = key;
-			container.appendChild( div );
+			var header = document.createElement( 'h2' );
+			header.textContent = key;
+			header.setAttribute( 'data-category', key );
+			container.appendChild( header );
 
 			for ( var i = 0; i < section.length; i ++ ) {
 
 				( function ( file ) {
 
-					var name = file.split( '_' );
-					name.shift();
-					name = name.join( ' / ' );
+					var name = getName( file );
 
 					var link = document.createElement( 'a' );
 					link.className = 'link';
@@ -309,6 +364,112 @@
 
 		}
 
+		// filter
+
+		filterInput.addEventListener( 'input', function( e ) {
+
+			updateFilter();
+
+		} );
+
+		clearFilterButton.addEventListener( 'click', function( e ) {
+
+			filterInput.value = '';
+			updateFilter();
+			e.preventDefault();
+
+		} );
+
+		function updateFilter() {
+
+			var exp = new RegExp( filterInput.value, 'gi' );
+
+			for ( var key in files ) {
+
+				var section = files[ key ];
+
+				for ( var i = 0; i < section.length; i ++ ) {
+
+					filterExample( section[ i ], exp );
+
+				}
+
+			}
+
+			layoutList();
+
+		}
+
+		function filterExample( file, exp ){
+
+			var link = links[ file ];
+			var name = getName( file );
+			var res = file.match( exp );
+			var text;
+
+			if ( res && res.length > 0 ) {
+
+				link.classList.remove( 'filtered' );
+
+				for( var i = 0; i < res.length; i++ ) {
+					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
+				}
+
+				link.innerHTML = text;
+
+			} else {
+
+				link.classList.add( 'filtered' );
+				link.innerHTML = name;
+
+			}
+		}
+
+		function getName( file ) {
+
+			var name = file.split( '_' );
+			name.shift();
+			return name.join( ' / ' );
+
+		}
+
+		function layoutList() {
+
+			for ( var key in files ) {
+
+				var collapsed = true;
+
+				var section = files[ key ];
+
+				for ( var i = 0; i < section.length; i ++ ) {
+
+					var file = section[ i ];
+
+					if( !links[ file ].classList.contains( 'filtered' ) ){
+
+						collapsed = false;
+						break;
+
+					}
+
+				}
+
+				var element = document.querySelector( 'h2[data-category="' + key + '"]' );
+
+				if( collapsed ){
+
+					element.classList.add( 'filtered' );
+
+				} else {
+
+					element.classList.remove( 'filtered' );
+
+				}
+
+			}
+
+		}
+
 		</script>
 
 	</body>

examples/js/effects/VREffect.js

@@ -12,8 +12,8 @@
 THREE.VREffect = function ( renderer, onError ) {
 
 	var vrHMD;
-	var eyeTranslationL, eyeFOVL;
-	var eyeTranslationR, eyeFOVR;
+	var eyeTranslationL, eyeFOVL, renderRectL;
+	var eyeTranslationR, eyeFOVR, renderRectR;
 
 	function gotVRDevices( devices ) {
 
@@ -102,6 +102,8 @@ THREE.VREffect = function ( renderer, onError ) {
 			eyeTranslationR = eyeParamsR.eyeTranslation;
 			eyeFOVL = eyeParamsL.recommendedFieldOfView;
 			eyeFOVR = eyeParamsR.recommendedFieldOfView;
+			renderRectL = eyeParamsL.renderRect;
+			renderRectR = eyeParamsR.renderRect;
 
 			if ( Array.isArray( scene ) ) {
 
@@ -127,13 +129,24 @@ THREE.VREffect = function ( renderer, onError ) {
 			cameraR.translateX( eyeTranslationR.x * this.scale );
 
 			// render left eye
-			renderer.setViewport( 0, 0, size.width / 2, size.height );
-			renderer.setScissor( 0, 0, size.width / 2, size.height );
+			if ( renderRectL === undefined ) {
+
+				renderRectL = { x: 0, y: 0, width: size.width / 2, height: size.height };
+
+			}
+			renderer.setViewport( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
+			renderer.setScissor( renderRectL.x, renderRectL.y, renderRectL.width, renderRectL.height );
 			renderer.render( scene, cameraL );
 
 			// render right eye
-			renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
-			renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+			if ( renderRectR === undefined ) {
+
+				renderRectR = { x: size.width / 2, y: 0, width: size.width / 2, height: size.height };
+
+			}
+
+			renderer.setViewport( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
+			renderer.setScissor( renderRectR.x, renderRectR.y, renderRectR.width, renderRectR.height );
 			renderer.render( scene, cameraR );
 
 			renderer.setScissorTest( false );

examples/js/loaders/ColladaLoader.js

@@ -1258,7 +1258,6 @@ THREE.ColladaLoader = function () {
 				var intensity = lparams.intensity;
 				var distance = lparams.distance;
 				var angle = lparams.falloff_angle;
-				var exponent; // Intentionally undefined, don't know what this is yet
 
 				switch ( lparams.technique ) {
 
@@ -1275,7 +1274,7 @@ THREE.ColladaLoader = function () {
 
 					case 'spot':
 
-						light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
+						light = new THREE.SpotLight( color, intensity, distance, angle );
 						light.position.set(0, 0, 1);
 						break;
 

examples/js/loaders/MTLLoader.js

@@ -303,9 +303,7 @@ THREE.MTLLoader.MaterialCreator.prototype = {
 
 			var value = mat[ prop ];
 
-			if ( value === '' ) {
-				continue;
-			}
+			if ( value === '' ) continue;
 
 			switch ( prop.toLowerCase() ) {
 

examples/js/loaders/OBJLoader.js

@@ -217,7 +217,7 @@ THREE.OBJLoader.prototype = {
 
 		var object_pattern = /^[og]\s+(.+)/;
 
-		var smoothing_pattern = /^s\s+([01]|on|off)/;
+		var smoothing_pattern = /^s\s+(\d+|on|off)/;
 
 		//
 

examples/js/loaders/deprecated/SceneLoader.js

@@ -345,7 +345,7 @@ THREE.SceneLoader.prototype = {
 								break;
 
 							case 'SpotLight':
-								light = new THREE.SpotLight( color, intensity, distance, 1 );
+								light = new THREE.SpotLight( color, intensity, distance );
 								light.angle = objJSON.angle;
 								light.position.fromArray( position );
 								light.target.set( position[ 0 ], position[ 1 ] - distance, position[ 2 ] );

examples/js/postprocessing/BloomPass.js

@@ -11,7 +11,7 @@ THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 
 	// render targets
 
-	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
 
 	this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
 	this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );

examples/js/postprocessing/EffectComposer.js

@@ -12,7 +12,7 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 
 		var width  = Math.floor( renderer.context.canvas.width  / pixelRatio ) || 1;
 		var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
-		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
+		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
 
 		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
 

examples/js/renderers/SoftwareRenderer.js

@@ -52,13 +52,20 @@ THREE.SoftwareRenderer = function ( parameters ) {
 
 	var projector = new THREE.Projector();
 
-	var vector1 = new THREE.Vector3();
-	var vector2 = new THREE.Vector3();
-	var vector3 = new THREE.Vector3();
+	var spriteV1 = new THREE.Vector4();
+	var spriteV2 = new THREE.Vector4();
+	var spriteV3 = new THREE.Vector4();
 
-	var texCoord1 = new THREE.Vector2();
-	var texCoord2 = new THREE.Vector2();
-	var texCoord3 = new THREE.Vector2();
+	var spriteUV1 = new THREE.Vector2();
+	var spriteUV2 = new THREE.Vector2();
+	var spriteUV3 = new THREE.Vector2();
+
+	var mpVPool = [];
+	var mpVPoolCount = 0;
+	var mpNPool = [];
+	var mpNPoolCount = 0;
+	var mpUVPool = [];
+	var mpUVPoolCount = 0;
 
 	this.domElement = canvas;
 
@@ -134,6 +141,9 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		recty1 = Infinity;
 		rectx2 = 0;
 		recty2 = 0;
+		mpVPoolCount = 0;
+		mpNPoolCount = 0;
+		mpUVPoolCount = 0;
 
 		for ( var i = 0; i < numBlocks; i ++ ) {
 
@@ -190,68 +200,68 @@ THREE.SoftwareRenderer = function ( parameters ) {
 				var scaleX = element.scale.x * 0.5;
 				var scaleY = element.scale.y * 0.5;
 
-				vector1.copy( element );
-				vector1.x -= scaleX;
-				vector1.y += scaleY;
+				spriteV1.copy( element );
+				spriteV1.x -= scaleX;
+				spriteV1.y += scaleY;
 
-				vector2.copy( element );
-				vector2.x -= scaleX;
-				vector2.y -= scaleY;
+				spriteV2.copy( element );
+				spriteV2.x -= scaleX;
+				spriteV2.y -= scaleY;
 
-				vector3.copy( element );
-				vector3.x += scaleX;
-				vector3.y += scaleY;
+				spriteV3.copy( element );
+				spriteV3.x += scaleX;
+				spriteV3.y += scaleY;
 
 				if ( material.map ) {
 
-					texCoord1.set( 0, 1 );
-					texCoord2.set( 0, 0 );
-					texCoord3.set( 1, 1 );
+					spriteUV1.set( 0, 1 );
+					spriteUV2.set( 0, 0 );
+					spriteUV3.set( 1, 1 );
 
 					drawTriangle(
-						vector1, vector2, vector3,
-						texCoord1, texCoord2, texCoord3,
+						spriteV1, spriteV2, spriteV3,
+						spriteUV1, spriteUV2, spriteUV3,
 						shader, element, material
 					);
 
 				} else {
 
 					drawTriangle(
-						vector1, vector2, vector3,
+						spriteV1, spriteV2, spriteV3,
 						null, null, null,
 						shader, element, material
 					);
 
 				}
 
-				vector1.copy( element );
-				vector1.x += scaleX;
-				vector1.y += scaleY;
+				spriteV1.copy( element );
+				spriteV1.x += scaleX;
+				spriteV1.y += scaleY;
 
-				vector2.copy( element );
-				vector2.x -= scaleX;
-				vector2.y -= scaleY;
+				spriteV2.copy( element );
+				spriteV2.x -= scaleX;
+				spriteV2.y -= scaleY;
 
-				vector3.copy( element );
-				vector3.x += scaleX;
-				vector3.y -= scaleY;
+				spriteV3.copy( element );
+				spriteV3.x += scaleX;
+				spriteV3.y -= scaleY;
 
 				if ( material.map ) {
 
-					texCoord1.set( 1, 1 );
-					texCoord2.set( 0, 0 );
-					texCoord3.set( 1, 0 );
+					spriteUV1.set( 1, 1 );
+					spriteUV2.set( 0, 0 );
+					spriteUV3.set( 1, 0 );
 
 					drawTriangle(
-						vector1, vector2, vector3,
-						texCoord1, texCoord2, texCoord3,
+						spriteV1, spriteV2, spriteV3,
+						spriteUV1, spriteUV2, spriteUV3,
 						shader, element, material
 					);
 
 				} else {
 
 					drawTriangle(
-						vector1, vector2, vector3,
+						spriteV1, spriteV2, spriteV3,
 						null, null, null,
 						shader, element, material
 					);
@@ -437,25 +447,26 @@ THREE.SoftwareRenderer = function ( parameters ) {
 			buffer[ colorOffset ] = tdata[ tIndex ];
 			buffer[ colorOffset + 1 ] = tdata[ tIndex + 1 ];
 			buffer[ colorOffset + 2 ] = tdata[ tIndex + 2 ];
-			buffer[ colorOffset + 3 ] = material.opacity * 255;
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
 			depthBuf[ offset ] = depth;
 
 		} else {
 
-			var opaci = tdata[ tIndex + 3 ] * material.opacity;
-			var texel = ( tdata[ tIndex ] << 16 ) + ( tdata[ tIndex + 1 ] << 8 ) + tdata[ tIndex + 2 ];
-			if ( opaci < 250 ) {
-
-				var backColor = ( buffer[ colorOffset ] << 16 ) + ( buffer[ colorOffset + 1 ] << 8 ) + buffer[ colorOffset + 2 ];
-				texel = texel * opaci + backColor * ( 1 - opaci );
-
-			}
-
-			buffer[ colorOffset ] = ( texel & 0xff0000 ) >> 16;
-			buffer[ colorOffset + 1 ] = ( texel & 0xff00 ) >> 8;
-			buffer[ colorOffset + 2 ] = texel & 0xff;
-			buffer[ colorOffset + 3 ] = material.opacity * 255;
-
+			var srcR = tdata[ tIndex ];
+			var srcG = tdata[ tIndex + 1 ];
+			var srcB = tdata[ tIndex + 2 ];
+			var opaci = tdata[ tIndex + 3 ] * material.opacity / 255;
+			var destR = buffer[ colorOffset ];
+			var destG = buffer[ colorOffset + 1 ];
+			var destB = buffer[ colorOffset + 2 ];
+	
+			buffer[ colorOffset ] = ( srcR * opaci + destR * ( 1 - opaci ) );
+			buffer[ colorOffset + 1 ] = ( srcG * opaci + destG * ( 1 - opaci ) );
+			buffer[ colorOffset + 2 ] = ( srcB * opaci + destB * ( 1 - opaci ) );
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+
+			if ( buffer[ colorOffset + 3 ] == 255 )	// Only opaue pixls write to the depth buffer
+				depthBuf[ offset ] = depth;
 		}
 
 	}
@@ -481,28 +492,26 @@ THREE.SoftwareRenderer = function ( parameters ) {
 			buffer[ colorOffset ] = ( material.palette[ cIndex ] * tdata[ tIndex ] ) >> 8;
 			buffer[ colorOffset + 1 ] = ( material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ] ) >> 8;
 			buffer[ colorOffset + 2 ] = ( material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ] ) >> 8;
-			buffer[ colorOffset + 3 ] = material.opacity * 255;
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
 			depthBuf[ offset ] = depth;
 
 		} else {
 
-			var opaci = tdata[ tIndex + 3 ] * material.opacity;
-			var foreColor = ( ( material.palette[ cIndex ] * tdata[ tIndex ] ) << 16 )
-							+ ( ( material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ] ) << 8 )
-							+ ( material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ] );
-
-			if ( opaci < 250 ) {
-
-				var backColor = buffer[ colorOffset ] << 24 + buffer[ colorOffset + 1 ] << 16 + buffer[ colorOffset + 2 ] << 8;
-				foreColor = foreColor * opaci + backColor * ( 1 - opaci );
-
-			}
-
-			buffer[ colorOffset ] = ( foreColor & 0xff0000 ) >> 16;
-			buffer[ colorOffset + 1 ] = ( foreColor & 0xff00 ) >> 8;
-			buffer[ colorOffset + 2 ] = ( foreColor & 0xff );
-			buffer[ colorOffset + 3 ] = material.opacity * 255;
-
+			var foreColorR = material.palette[ cIndex ] * tdata[ tIndex ];
+			var foreColorG = material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ];
+			var foreColorB = material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ];
+			var opaci = tdata[ tIndex + 3 ] * material.opacity / 256;
+			var destR = buffer[ colorOffset ];
+			var destG = buffer[ colorOffset + 1 ];
+			var destB = buffer[ colorOffset + 2 ];
+
+			buffer[ colorOffset ] = foreColorR * opaci + destR * ( 1 - opaci );
+			buffer[ colorOffset + 1 ] = foreColorG * opaci + destG * ( 1 - opaci );
+			buffer[ colorOffset + 2 ] = foreColorB * opaci + destB * ( 1 - opaci );
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+
+			if ( buffer[ colorOffset + 3 ] == 255 )	// Only opaue pixls write to the depth buffer
+				depthBuf[ offset ] = depth;
 		}
 
 	}
@@ -688,13 +697,16 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		var y3 = ( v3.y * viewportYScale + viewportYOffs ) | 0;
 
 		var bHasNormal = face.vertexNormalsModel && face.vertexNormalsModel.length;
+		var bHasUV = uv1 && uv2 && uv3;
 
 		var longestSide = Math.max(
 			Math.sqrt( (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2) ),
 			Math.sqrt( (x2 - x3)*(x2 - x3) + (y2 - y3)*(y2 - y3) ),
 			Math.sqrt( (x3 - x1)*(x3 - x1) + (y3 - y1)*(y3 - y1) )
 		);
-		if( longestSide > 100 * fixscale ) {
+
+		if( !(face instanceof THREE.RenderableSprite) 
+			&& (longestSide > 100 * fixscale) ) {
 
 			// 1
 			// |\
@@ -704,32 +716,90 @@ THREE.SoftwareRenderer = function ( parameters ) {
 			// |b\|d\
 			// |__\__\
 			// 2      3
-			var	mpV12 = new THREE.Vector4(),
-				mpV23 = new THREE.Vector4(),
-				mpV31 = new THREE.Vector4(),
-				mpN12 = new THREE.Vector3(),
-				mpN23 = new THREE.Vector3(),
-				mpN31 = new THREE.Vector3(),
-				mpUV12 = new THREE.Vector2(),
-				mpUV23 = new THREE.Vector2(),
-				mpUV31 = new THREE.Vector2(),
-				tempFace = { vertexNormalsModel : []
-							, color : { r: face.color.r, g: face.color.b, b: face.color.b } };
-
-			var weight;
-
-			weight = (1 + v2.z) * (v2.w / v1.w) / (1 + v1.z);
-			mpUV12.copy( uv1 ).multiplyScalar( weight ).add( uv2 ).multiplyScalar( 1 / (weight + 1) );
-			weight = (1 + v3.z) * (v3.w / v2.w) / (1 + v2.z);
-			mpUV23.copy( uv2 ).multiplyScalar( weight ).add( uv3 ).multiplyScalar( 1 / (weight + 1) );
-			weight = (1 + v1.z) * (v1.w / v3.w) / (1 + v3.z);
-			mpUV31.copy( uv3 ).multiplyScalar( weight ).add( uv1 ).multiplyScalar( 1 / (weight + 1) );
+			var tempFace = { vertexNormalsModel : [], 
+						color : face.color };
+			var mpUV12, mpUV23, mpUV31;
+			if ( bHasUV ) {
+				if ( mpUVPoolCount === mpUVPool.length ) {
+					mpUV12 = new THREE.Vector2();
+					mpUVPool.push( mpUV12 );
+					++mpUVPoolCount;
+
+					mpUV23 = new THREE.Vector2();
+					mpUVPool.push( mpUV23 );
+					++mpUVPoolCount;
+
+					mpUV31 = new THREE.Vector2();
+					mpUVPool.push( mpUV31 );
+					++mpUVPoolCount;
+				} else {
+					mpUV12 = mpUVPool[ mpUVPoolCount ];
+					++mpUVPoolCount;				
+					mpUV23 = mpUVPool[ mpUVPoolCount ];
+					++mpUVPoolCount;
+					mpUV31 = mpUVPool[ mpUVPoolCount ];
+					++mpUVPoolCount;
+				}
+
+				var weight;
+
+				weight = (1 + v2.z) * (v2.w / v1.w) / (1 + v1.z);
+				mpUV12.copy( uv1 ).multiplyScalar( weight ).add( uv2 ).multiplyScalar( 1 / (weight + 1) );
+				weight = (1 + v3.z) * (v3.w / v2.w) / (1 + v2.z);
+				mpUV23.copy( uv2 ).multiplyScalar( weight ).add( uv3 ).multiplyScalar( 1 / (weight + 1) );
+				weight = (1 + v1.z) * (v1.w / v3.w) / (1 + v3.z);
+				mpUV31.copy( uv3 ).multiplyScalar( weight ).add( uv1 ).multiplyScalar( 1 / (weight + 1) );
+			}
+			
+			var mpV12, mpV23, mpV31;
+			if ( mpVPoolCount === mpVPool.length ) {
+				mpV12 = new THREE.Vector4();
+				mpVPool.push( mpV12 );
+				++mpVPoolCount;
+
+				mpV23 = new THREE.Vector4();
+				mpVPool.push( mpV23 );
+				++mpVPoolCount;
+
+				mpV31 = new THREE.Vector4();
+				mpVPool.push( mpV31 );
+				++mpVPoolCount;
+			} else {
+				mpV12 = mpVPool[ mpVPoolCount ];
+				++mpVPoolCount;				
+				mpV23 = mpVPool[ mpVPoolCount ];
+				++mpVPoolCount;
+				mpV31 = mpVPool[ mpVPoolCount ];
+				++mpVPoolCount;
+			}
 
 			mpV12.copy( v1 ).add( v2 ).multiplyScalar( 0.5 );
 			mpV23.copy( v2 ).add( v3 ).multiplyScalar( 0.5 );
 			mpV31.copy( v3 ).add( v1 ).multiplyScalar( 0.5 );
 
+			var mpN12, mpN23, mpN31;
 			if( bHasNormal ) {
+				if ( mpNPoolCount === mpNPool.length ) {
+					mpN12 = new THREE.Vector3();
+					mpNPool.push( mpN12 );
+					++mpNPoolCount;
+
+					mpN23 = new THREE.Vector3();
+					mpNPool.push( mpN23 );
+					++mpNPoolCount;
+
+					mpN31 = new THREE.Vector3();
+					mpNPool.push( mpN31 );
+					++mpNPoolCount;
+				} else {
+					mpN12 = mpNPool[ mpNPoolCount ];
+					++mpNPoolCount;				
+					mpN23 = mpNPool[ mpNPoolCount ];
+					++mpNPoolCount;
+					mpN31 = mpNPool[ mpNPoolCount ];
+					++mpNPoolCount;
+				}
+
 				mpN12.copy( face.vertexNormalsModel[ 0 ] ).add( face.vertexNormalsModel[ 1 ] ).normalize();
 				mpN23.copy( face.vertexNormalsModel[ 1 ] ).add( face.vertexNormalsModel[ 2 ] ).normalize();
 				mpN31.copy( face.vertexNormalsModel[ 2 ] ).add( face.vertexNormalsModel[ 0 ] ).normalize();
@@ -1298,20 +1368,20 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		// TODO: Implement per-pixel z-clipping
 		if ( v1.z < -1 || v1.z > 1 || v2.z < -1 || v2.z > 1 ) return;
 
-		var halfLineWidth = Math.floor( (material.linewidth-1) * 0.5 );
+		var halfLineWidth = Math.floor( ( material.linewidth - 1 ) * 0.5 );
 
 		// https://gist.github.com/2486101
 		// explanation: http://pouet.net/topic.php?which=8760&page=1
 
 		// 28.4 fixed-point coordinates
-		var x1 = (v1.x * viewportXScale + viewportXOffs) | 0;
-		var x2 = (v2.x * viewportXScale + viewportXOffs) | 0;
+		var x1 = ( v1.x * viewportXScale + viewportXOffs ) | 0;
+		var x2 = ( v2.x * viewportXScale + viewportXOffs ) | 0;
 
-		var y1 = (v1.y * viewportYScale + viewportYOffs) | 0;
-		var y2 = (v2.y * viewportYScale + viewportYOffs) | 0;
+		var y1 = ( v1.y * viewportYScale + viewportYOffs ) | 0;
+		var y2 = ( v2.y * viewportYScale + viewportYOffs ) | 0;
 
-		var z1 = (v1.z * viewportZScale + viewportZOffs) | 0;
-		var z2 = (v2.z * viewportZScale + viewportZOffs) | 0;
+		var z1 = ( v1.z * viewportZScale + viewportZOffs ) | 0;
+		var z2 = ( v2.z * viewportZScale + viewportZOffs ) | 0;
 
 		// Deltas
 		var dx12 = x1 - x2, dy12 = y1 - y2, dz12 = z1 - z2;
@@ -1322,7 +1392,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		var miny = Math.max( ( Math.min( y1, y2 ) + subpixelBias ) >> subpixelBits, 0 );
 		var maxy = Math.min( ( Math.max( y1, y2 ) + subpixelBias ) >> subpixelBits, canvasHeight );
 		var minz = Math.max( ( Math.min( z1, z2 ) + subpixelBias ) >> subpixelBits, 0 );
-		var maxz = Math.min( ( Math.max( z1, z2 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxz = ( Math.max( z1, z2 ) + subpixelBias ) >> subpixelBits;
 
 		rectx1 = Math.min( minx, rectx1 );
 		rectx2 = Math.max( maxx, rectx2 );
@@ -1330,10 +1400,10 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		recty2 = Math.max( maxy, recty2 );
 
 		// Get the line's unit vector and cross vector
-		var length = Math.sqrt((dy12 * dy12) + (dx12 * dx12));
-		var unitX = (dx12 / length);
-		var unitY = (dy12 / length);
-		var unitZ = (dz12 / length);
+		var length = Math.sqrt( ( dy12 * dy12 ) + ( dx12 * dx12 ) );
+		var unitX = ( dx12 / length );
+		var unitY = ( dy12 / length );
+		var unitZ = ( dz12 / length );
 		var pixelX, pixelY, pixelZ;
 		var pX, pY, pZ;
 		crossVector.set( unitX, unitY, unitZ );
@@ -1343,21 +1413,21 @@ THREE.SoftwareRenderer = function ( parameters ) {
 		while (length > 0) {
 
 			// Get this pixel.
-			pixelX = (x2 + length * unitX);
-			pixelY = (y2 + length * unitY);
-			pixelZ = (z2 + length * unitZ);
+			pixelX = x2 + length * unitX;
+			pixelY = y2 + length * unitY;
+			pixelZ = z2 + length * unitZ;
 
-			pixelX = (pixelX + subpixelBias) >> subpixelBits;
-			pixelY = (pixelY + subpixelBias) >> subpixelBits;
-			pZ = (pixelZ + subpixelBias) >> subpixelBits;
+			pixelX = ( pixelX + subpixelBias ) >> subpixelBits;
+			pixelY = ( pixelY + subpixelBias ) >> subpixelBits;
+			pZ = ( pixelZ + subpixelBias ) >> subpixelBits;
 
 			// Draw line with line width
 			for ( var i = -halfLineWidth; i <= halfLineWidth; ++i ) {
 
 				// Compute the line pixels.
 				// Get the pixels on the vector that crosses to the line vector
-				pX = Math.floor((pixelX + crossVector.x * i));
-				pY = Math.floor((pixelY + crossVector.y * i));
+				pX = Math.floor( ( pixelX + crossVector.x * i ) );
+				pY = Math.floor( ( pixelY + crossVector.y * i ) );
 
 				// if pixel is over the rect. Continue
 				if ( rectx1 >= pX || rectx2 <= pX || recty1 >= pY

examples/js/shaders/SMAAShader.js

@@ -0,0 +1,462 @@
+/**
+ * @author mpk / http://polko.me/
+ *
+ * WebGL port of Subpixel Morphological Antialiasing (SMAA) v2.8
+ * Preset: SMAA 1x Medium (with color edge detection)
+ * https://github.com/iryoku/smaa/releases/tag/v2.8
+ */
+
+THREE.SMAAShader = [ {
+
+	defines: {
+
+		"SMAA_THRESHOLD": "0.1"
+
+	},
+
+	uniforms: {
+
+		"tDiffuse":		{ type: "t", value: null },
+		"resolution":	{ type: "v2", value: new THREE.Vector2( 1 / 1024, 1 / 512 ) }
+
+	},
+
+	vertexShader: [
+
+		"uniform vec2 resolution;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[ 3 ];",
+
+		"void SMAAEdgeDetectionVS( vec2 texcoord ) {",
+			"vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0,  1.0 );", // WebGL port note: Changed sign in W component
+			"vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4(  1.0, 0.0, 0.0, -1.0 );", // WebGL port note: Changed sign in W component
+			"vOffset[ 2 ] = texcoord.xyxy + resolution.xyxy * vec4( -2.0, 0.0, 0.0,  2.0 );", // WebGL port note: Changed sign in W component
+		"}",
+
+		"void main() {",
+
+			"vUv = uv;",
+
+			"SMAAEdgeDetectionVS( vUv );",
+
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[ 3 ];",
+
+		"vec4 SMAAColorEdgeDetectionPS( vec2 texcoord, vec4 offset[3], sampler2D colorTex ) {",
+			"vec2 threshold = vec2( SMAA_THRESHOLD, SMAA_THRESHOLD );",
+
+			// Calculate color deltas:
+			"vec4 delta;",
+			"vec3 C = texture2D( colorTex, texcoord ).rgb;",
+
+			"vec3 Cleft = texture2D( colorTex, offset[0].xy ).rgb;",
+			"vec3 t = abs( C - Cleft );",
+			"delta.x = max( max( t.r, t.g ), t.b );",
+
+			"vec3 Ctop = texture2D( colorTex, offset[0].zw ).rgb;",
+			"t = abs( C - Ctop );",
+			"delta.y = max( max( t.r, t.g ), t.b );",
+
+			// We do the usual threshold:
+			"vec2 edges = step( threshold, delta.xy );",
+
+			// Then discard if there is no edge:
+			"if ( dot( edges, vec2( 1.0, 1.0 ) ) == 0.0 )",
+				"discard;",
+
+			// Calculate right and bottom deltas:
+			"vec3 Cright = texture2D( colorTex, offset[1].xy ).rgb;",
+			"t = abs( C - Cright );",
+			"delta.z = max( max( t.r, t.g ), t.b );",
+
+			"vec3 Cbottom  = texture2D( colorTex, offset[1].zw ).rgb;",
+			"t = abs( C - Cbottom );",
+			"delta.w = max( max( t.r, t.g ), t.b );",
+
+			// Calculate the maximum delta in the direct neighborhood:
+			"float maxDelta = max( max( max( delta.x, delta.y ), delta.z ), delta.w );",
+
+			// Calculate left-left and top-top deltas:
+			"vec3 Cleftleft  = texture2D( colorTex, offset[2].xy ).rgb;",
+			"t = abs( C - Cleftleft );",
+			"delta.z = max( max( t.r, t.g ), t.b );",
+
+			"vec3 Ctoptop = texture2D( colorTex, offset[2].zw ).rgb;",
+			"t = abs( C - Ctoptop );",
+			"delta.w = max( max( t.r, t.g ), t.b );",
+
+			// Calculate the final maximum delta:
+			"maxDelta = max( max( maxDelta, delta.z ), delta.w );",
+
+			// Local contrast adaptation in action:
+			"edges.xy *= step( 0.5 * maxDelta, delta.xy );",
+
+			"return vec4( edges, 0.0, 0.0 );",
+		"}",
+
+		"void main() {",
+
+			"gl_FragColor = SMAAColorEdgeDetectionPS( vUv, vOffset, tDiffuse );",
+
+		"}"
+
+	].join("\n")
+
+}, {
+
+	defines: {
+
+		"SMAA_MAX_SEARCH_STEPS":		"8",
+		"SMAA_AREATEX_MAX_DISTANCE":	"16",
+		"SMAA_AREATEX_PIXEL_SIZE":		"( 1.0 / vec2( 160.0, 560.0 ) )",
+		"SMAA_AREATEX_SUBTEX_SIZE":		"( 1.0 / 7.0 )"
+
+	},
+
+	uniforms: {
+
+		"tDiffuse":		{ type: "t", value: null },
+		"tArea":		{ type: "t", value: null },
+		"tSearch":		{ type: "t", value: null },
+		"resolution":	{ type: "v2", value: new THREE.Vector2( 1 / 1024, 1 / 512 ) }
+
+	},
+
+	vertexShader: [
+
+		"uniform vec2 resolution;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[ 3 ];",
+		"varying vec2 vPixcoord;",
+
+		"void SMAABlendingWeightCalculationVS( vec2 texcoord ) {",
+			"vPixcoord = texcoord / resolution;",
+
+			// We will use these offsets for the searches later on (see @PSEUDO_GATHER4):
+			"vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -0.25, 0.125, 1.25, 0.125 );", // WebGL port note: Changed sign in Y and W components
+			"vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( -0.125, 0.25, -0.125, -1.25 );", // WebGL port note: Changed sign in Y and W components
+
+			// And these for the searches, they indicate the ends of the loops:
+			"vOffset[ 2 ] = vec4( vOffset[ 0 ].xz, vOffset[ 1 ].yw ) + vec4( -2.0, 2.0, -2.0, 2.0 ) * resolution.xxyy * float( SMAA_MAX_SEARCH_STEPS );",
+
+		"}",
+
+		"void main() {",
+
+			"vUv = uv;",
+
+			"SMAABlendingWeightCalculationVS( vUv );",
+
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"#define SMAASampleLevelZeroOffset( tex, coord, offset ) texture2D( tex, coord + float( offset ) * resolution, 0.0 )",
+
+		"uniform sampler2D tDiffuse;",
+		"uniform sampler2D tArea;",
+		"uniform sampler2D tSearch;",
+		"uniform vec2 resolution;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[3];",
+		"varying vec2 vPixcoord;",
+
+		"vec2 round( vec2 x ) {",
+			"return sign( x ) * floor( abs( x ) + 0.5 );",
+		"}",
+
+		"float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {",
+			// Not required if searchTex accesses are set to point:
+			// float2 SEARCH_TEX_PIXEL_SIZE = 1.0 / float2(66.0, 33.0);
+			// e = float2(bias, 0.0) + 0.5 * SEARCH_TEX_PIXEL_SIZE +
+			//     e * float2(scale, 1.0) * float2(64.0, 32.0) * SEARCH_TEX_PIXEL_SIZE;
+			"e.r = bias + e.r * scale;",
+			"return 255.0 * texture2D( searchTex, e, 0.0 ).r;",
+		"}",
+
+		"float SMAASearchXLeft( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {",
+			/**
+			* @PSEUDO_GATHER4
+			* This texcoord has been offset by (-0.25, -0.125) in the vertex shader to
+			* sample between edge, thus fetching four edges in a row.
+			* Sampling with different offsets in each direction allows to disambiguate
+			* which edges are active from the four fetched ones.
+			*/
+			"vec2 e = vec2( 0.0, 1.0 );",
+
+			"for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {", // WebGL port note: Changed while to for
+				"e = texture2D( edgesTex, texcoord, 0.0 ).rg;",
+				"texcoord -= vec2( 2.0, 0.0 ) * resolution;",
+				"if ( ! ( texcoord.x > end && e.g > 0.8281 && e.r == 0.0 ) ) break;",
+			"}",
+
+			// We correct the previous (-0.25, -0.125) offset we applied:
+			"texcoord.x += 0.25 * resolution.x;",
+
+			// The searches are bias by 1, so adjust the coords accordingly:
+			"texcoord.x += resolution.x;",
+
+			// Disambiguate the length added by the last step:
+			"texcoord.x += 2.0 * resolution.x;", // Undo last step
+			"texcoord.x -= resolution.x * SMAASearchLength(searchTex, e, 0.0, 0.5);",
+
+			"return texcoord.x;",
+		"}",
+
+		"float SMAASearchXRight( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {",
+			"vec2 e = vec2( 0.0, 1.0 );",
+
+			"for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {", // WebGL port note: Changed while to for
+				"e = texture2D( edgesTex, texcoord, 0.0 ).rg;",
+				"texcoord += vec2( 2.0, 0.0 ) * resolution;",
+				"if ( ! ( texcoord.x < end && e.g > 0.8281 && e.r == 0.0 ) ) break;",
+			"}",
+
+			"texcoord.x -= 0.25 * resolution.x;",
+			"texcoord.x -= resolution.x;",
+			"texcoord.x -= 2.0 * resolution.x;",
+			"texcoord.x += resolution.x * SMAASearchLength( searchTex, e, 0.5, 0.5 );",
+
+			"return texcoord.x;",
+		"}",
+
+		"float SMAASearchYUp( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {",
+			"vec2 e = vec2( 1.0, 0.0 );",
+
+			"for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {", // WebGL port note: Changed while to for
+				"e = texture2D( edgesTex, texcoord, 0.0 ).rg;",
+				"texcoord += vec2( 0.0, 2.0 ) * resolution;", // WebGL port note: Changed sign
+				"if ( ! ( texcoord.y > end && e.r > 0.8281 && e.g == 0.0 ) ) break;",
+			"}",
+
+			"texcoord.y -= 0.25 * resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y -= resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y -= 2.0 * resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y += resolution.y * SMAASearchLength( searchTex, e.gr, 0.0, 0.5 );", // WebGL port note: Changed sign
+
+			"return texcoord.y;",
+		"}",
+
+		"float SMAASearchYDown( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {",
+			"vec2 e = vec2( 1.0, 0.0 );",
+
+			"for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {", // WebGL port note: Changed while to for
+				"e = texture2D( edgesTex, texcoord, 0.0 ).rg;",
+				"texcoord -= vec2( 0.0, 2.0 ) * resolution;", // WebGL port note: Changed sign
+				"if ( ! ( texcoord.y < end && e.r > 0.8281 && e.g == 0.0 ) ) break;",
+			"}",
+
+			"texcoord.y += 0.25 * resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y += resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y += 2.0 * resolution.y;", // WebGL port note: Changed sign
+			"texcoord.y -= resolution.y * SMAASearchLength( searchTex, e.gr, 0.5, 0.5 );", // WebGL port note: Changed sign
+
+			"return texcoord.y;",
+		"}",
+
+		"vec2 SMAAArea( sampler2D areaTex, vec2 dist, float e1, float e2, float offset ) {",
+			// Rounding prevents precision errors of bilinear filtering:
+			"vec2 texcoord = float( SMAA_AREATEX_MAX_DISTANCE ) * round( 4.0 * vec2( e1, e2 ) ) + dist;",
+
+			// We do a scale and bias for mapping to texel space:
+			"texcoord = SMAA_AREATEX_PIXEL_SIZE * texcoord + ( 0.5 * SMAA_AREATEX_PIXEL_SIZE );",
+
+			// Move to proper place, according to the subpixel offset:
+			"texcoord.y += SMAA_AREATEX_SUBTEX_SIZE * offset;",
+
+			"return texture2D( areaTex, texcoord, 0.0 ).rg;",
+		"}",
+
+		"vec4 SMAABlendingWeightCalculationPS( vec2 texcoord, vec2 pixcoord, vec4 offset[ 3 ], sampler2D edgesTex, sampler2D areaTex, sampler2D searchTex, ivec4 subsampleIndices ) {",
+			"vec4 weights = vec4( 0.0, 0.0, 0.0, 0.0 );",
+
+			"vec2 e = texture2D( edgesTex, texcoord ).rg;",
+
+			"if ( e.g > 0.0 ) {", // Edge at north
+				"vec2 d;",
+
+				// Find the distance to the left:
+				"vec2 coords;",
+				"coords.x = SMAASearchXLeft( edgesTex, searchTex, offset[ 0 ].xy, offset[ 2 ].x );",
+				"coords.y = offset[ 1 ].y;", // offset[1].y = texcoord.y - 0.25 * resolution.y (@CROSSING_OFFSET)
+				"d.x = coords.x;",
+
+				// Now fetch the left crossing edges, two at a time using bilinear
+				// filtering. Sampling at -0.25 (see @CROSSING_OFFSET) enables to
+				// discern what value each edge has:
+				"float e1 = texture2D( edgesTex, coords, 0.0 ).r;",
+
+				// Find the distance to the right:
+				"coords.x = SMAASearchXRight( edgesTex, searchTex, offset[ 0 ].zw, offset[ 2 ].y );",
+				"d.y = coords.x;",
+
+				// We want the distances to be in pixel units (doing this here allow to
+				// better interleave arithmetic and memory accesses):
+				"d = d / resolution.x - pixcoord.x;",
+
+				// SMAAArea below needs a sqrt, as the areas texture is compressed
+				// quadratically:
+				"vec2 sqrt_d = sqrt( abs( d ) );",
+
+				// Fetch the right crossing edges:
+				"coords.y -= 1.0 * resolution.y;", // WebGL port note: Added
+				"float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 1, 0 ) ).r;",
+
+				// Ok, we know how this pattern looks like, now it is time for getting
+				// the actual area:
+				"weights.rg = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.y ) );",
+			"}",
+
+			"if ( e.r > 0.0 ) {", // Edge at west
+				"vec2 d;",
+
+				// Find the distance to the top:
+				"vec2 coords;",
+
+				"coords.y = SMAASearchYUp( edgesTex, searchTex, offset[ 1 ].xy, offset[ 2 ].z );",
+				"coords.x = offset[ 0 ].x;", // offset[1].x = texcoord.x - 0.25 * resolution.x;
+				"d.x = coords.y;",
+
+				// Fetch the top crossing edges:
+				"float e1 = texture2D( edgesTex, coords, 0.0 ).g;",
+
+				// Find the distance to the bottom:
+				"coords.y = SMAASearchYDown( edgesTex, searchTex, offset[ 1 ].zw, offset[ 2 ].w );",
+				"d.y = coords.y;",
+
+				// We want the distances to be in pixel units:
+				"d = d / resolution.y - pixcoord.y;",
+
+				// SMAAArea below needs a sqrt, as the areas texture is compressed
+				// quadratically:
+				"vec2 sqrt_d = sqrt( abs( d ) );",
+
+				// Fetch the bottom crossing edges:
+				"coords.y -= 1.0 * resolution.y;", // WebGL port note: Added
+				"float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 0, 1 ) ).g;",
+
+				// Get the area for this direction:
+				"weights.ba = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.x ) );",
+			"}",
+
+			"return weights;",
+		"}",
+
+		"void main() {",
+
+			"gl_FragColor = SMAABlendingWeightCalculationPS( vUv, vPixcoord, vOffset, tDiffuse, tArea, tSearch, ivec4( 0.0 ) );",
+
+		"}"
+
+	].join("\n")
+
+}, {
+
+	uniforms: {
+
+		"tDiffuse":		{ type: "t", value: null },
+		"tColor":		{ type: "t", value: null },
+		"resolution":	{ type: "v2", value: new THREE.Vector2( 1 / 1024, 1 / 512 ) }
+
+	},
+
+	vertexShader: [
+
+		"uniform vec2 resolution;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[ 2 ];",
+
+		"void SMAANeighborhoodBlendingVS( vec2 texcoord ) {",
+			"vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0, 1.0 );", // WebGL port note: Changed sign in W component
+			"vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( 1.0, 0.0, 0.0, -1.0 );", // WebGL port note: Changed sign in W component
+		"}",
+
+		"void main() {",
+
+			"vUv = uv;",
+
+			"SMAANeighborhoodBlendingVS( vUv );",
+
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"uniform sampler2D tDiffuse;",
+		"uniform sampler2D tColor;",
+		"uniform vec2 resolution;",
+
+		"varying vec2 vUv;",
+		"varying vec4 vOffset[ 2 ];",
+
+		"vec4 SMAANeighborhoodBlendingPS( vec2 texcoord, vec4 offset[ 2 ], sampler2D colorTex, sampler2D blendTex ) {",
+			// Fetch the blending weights for current pixel:
+			"vec4 a;",
+			"a.xz = texture2D( blendTex, texcoord ).xz;",
+			"a.y = texture2D( blendTex, offset[ 1 ].zw ).g;",
+			"a.w = texture2D( blendTex, offset[ 1 ].xy ).a;",
+
+			// Is there any blending weight with a value greater than 0.0?
+			"if ( dot(a, vec4( 1.0, 1.0, 1.0, 1.0 )) < 1e-5 ) {",
+				"return texture2D( colorTex, texcoord, 0.0 );",
+			"} else {",
+				// Up to 4 lines can be crossing a pixel (one through each edge). We
+				// favor blending by choosing the line with the maximum weight for each
+				// direction:
+				"vec2 offset;",
+				"offset.x = a.a > a.b ? a.a : -a.b;", // left vs. right
+				"offset.y = a.g > a.r ? -a.g : a.r;", // top vs. bottom // WebGL port note: Changed signs
+
+				// Then we go in the direction that has the maximum weight:
+				"if ( abs( offset.x ) > abs( offset.y )) {", // horizontal vs. vertical
+					"offset.y = 0.0;",
+				"} else {",
+					"offset.x = 0.0;",
+				"}",
+
+				// Fetch the opposite color and lerp by hand:
+				"vec4 C = texture2D( colorTex, texcoord, 0.0 );",
+				"texcoord += sign( offset ) * resolution;",
+				"vec4 Cop = texture2D( colorTex, texcoord, 0.0 );",
+				"float s = abs( offset.x ) > abs( offset.y ) ? abs( offset.x ) : abs( offset.y );",
+
+				// WebGL port note: Added gamma correction
+				"C.xyz = pow(C.xyz, vec3(2.2));",
+				"Cop.xyz = pow(Cop.xyz, vec3(2.2));",
+				"vec4 mixed = mix(C, Cop, s);",
+				"mixed.xyz = pow(mixed.xyz, vec3(1.0 / 2.2));",
+
+				"return mixed;",
+			"}",
+		"}",
+
+		"void main() {",
+
+			"gl_FragColor = SMAANeighborhoodBlendingPS( vUv, vOffset, tColor, tDiffuse );",
+
+		"}"
+
+	].join("\n")
+
+} ];

examples/software_sandbox.html

@@ -16,21 +16,18 @@
 	<body>
 
 		<script src="../build/three.min.js"></script>
-
+		<script src="js/geometries/hilbert3D.js"></script>
 		<script src="js/controls/TrackballControls.js"></script>
-
 		<script src="js/renderers/Projector.js"></script>
 		<script src="js/renderers/SoftwareRenderer.js"></script>
-
 		<script src="js/libs/stats.min.js"></script>
-
 		<script>
 
 			var container, stats;
 
 			var camera, controls, scene, renderer;
 
-			var torus, cube;
+			var torus, cube, texCube;
 
 			var start = Date.now();
 
@@ -50,13 +47,14 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js<a/> - software renderer<br/>drag to change the point of view';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 600;
 
 				controls = new THREE.TrackballControls( camera );
 
 				scene = new THREE.Scene();
 
+				// Torus
 				var geometry = new THREE.TorusKnotGeometry( 150 );
 
 				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
@@ -68,8 +66,7 @@
 				torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
 				scene.add( torus );
 
-				// Plane
-
+				// Cube
 				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
 				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
@@ -79,8 +76,55 @@
 				}
 
 				cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
+				scene.position.set( 100, 0, 0 );
 				scene.add( cube );
 
+				// Cube with texture
+				var loader = new THREE.TextureLoader();
+				var map = loader.load( 'textures/brick_diffuse.jpg' );
+				texCube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: map, overdraw: 0.5 } ) );
+				texCube.position.set( -300, 0, 0 );
+				scene.add( texCube );
+
+				// Sprite
+				var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 0xff0040 } ) );
+				sprite.scale.set( 100, 100, 1 );
+				sprite.position.set( -100, 200, 0 );
+				scene.add( sprite );
+
+				// Sprite with texture
+				var texLoader = new THREE.TextureLoader();
+				map = texLoader.load( 'textures/sprite1.png' );
+				var texSprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: map,transparent: true } ) );
+				texSprite.scale.set( 100, 100, 1 );
+				texSprite.position.set( 100, 200, 0 );
+				scene.add( texSprite );
+
+				// Line
+				var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var spline = new THREE.Spline( points );
+				var n_sub = 6, colors = [], line;
+				var lineGeometry = new THREE.Geometry()
+
+				for ( i = 0; i < points.length * n_sub; i ++ ) {
+
+					index = i / ( points.length * n_sub );
+					position = spline.getPoint( index );
+
+					lineGeometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
+
+					colors[ i ] = new THREE.Color( 0x88aaff );
+
+				}
+
+				lineGeometry.colors = colors;
+
+				material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
+				line = new THREE.Line( lineGeometry, material );
+				line.scale.set( 0.5, 0.5, 0.5 );
+				line.position.set( 0, -200, 0);
+				scene.add( line );
+
 				renderer = new THREE.SoftwareRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -129,6 +173,8 @@
 				cube.rotation.x = timer * 0.0002;
 				cube.rotation.z = timer * 0.0003;
 
+				texCube.rotation.x = timer * 0.0002;
+				texCube.rotation.z = timer * 0.0003;
 
 				controls.update();
 

examples/webgl_geometry_large_mesh.html

@@ -58,7 +58,6 @@
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = -250;
 
 			var container, stats;
 

examples/webgl_loader_ctm.html

@@ -99,17 +99,18 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x080808 );
-				//scene.add( ambient );
+				var ambient = new THREE.AmbientLight( 0x040404 );
+				scene.add( ambient );
 
-				var light = new THREE.SpotLight( 0xffeedd, 1.2, 650, Math.PI/2, 3 );
+				var light = new THREE.SpotLight( 0xffeedd, 1.2, 650, Math.PI / 6 );
 				light.position.set( 0, -100, 500 );
 
 				light.castShadow = true;
-				light.shadowMapWidth = 2048;
-				light.shadowMapHeight = 2048;
-				light.shadowCameraFov = 45;
-				//light.shadowCameraVisible = true;
+				light.shadow.mapWidth = 1024;
+				light.shadow.mapHeight = 1024;
+				light.shadow.camera.fov = 45;
+				light.shadow.camera.far = 650;
+				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
 				scene.add( light );
 

examples/webgl_loader_gltf.html

@@ -165,20 +165,23 @@
 					directionalLight.position.set( 0, -1, 1 ).normalize();
 					scene.add( directionalLight );
 
-					spot1	 = new THREE.SpotLight( 0xffffff, 1 );
+					spot1 = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 4, 0.75 );
 					spot1.position.set( -100, 200, 100 );
 					spot1.target.position.set( 0, 0, 0 );
 
 					if (sceneInfo.shadows) {
 
-					spot1.shadowCameraNear		= 1;
-					spot1.shadowCameraFar		= 1024;
-					spot1.castShadow			= true;
-					spot1.shadowBias = 0.0001;
-					spot1.shadowMapWidth = 2048;
-					spot1.shadowMapHeight = 2048;
+						spot1.shadowCameraNear = 1;
+						spot1.shadowCameraFar = 1024;
+						spot1.castShadow = true;
+						spot1.shadowBias = 0.0001;
+						spot1.shadowMapWidth = 2048;
+						spot1.shadowMapHeight = 2048;
+
 					}
+
 					scene.add( spot1 );
+
 				}
 
 				// RENDERER

examples/webgl_materials_cubemap_dynamic.html

@@ -164,7 +164,7 @@
 				ambientLight = new THREE.AmbientLight( 0x555555 );
 				scene.add( ambientLight );
 
-				spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2, 1 );
+				spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2 );
 				spotLight.position.set( 0, 1800, 1500 );
 				spotLight.target.position.set( 0, 0, 0 );
 				spotLight.castShadow = true;

examples/webgl_postprocessing_smaa.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - postprocessing smaa</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000000;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/postprocessing/SMAAPass.js"></script>
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/SMAAShader.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+
+
+		<script>
+
+			var camera, scene, renderer, composer, pass;
+			var geometry, material, object;
+
+			var textureLoader = new THREE.TextureLoader();
+
+			textureLoader.load( "textures/brick_diffuse.jpg", function( meshTexture ) {
+				init( meshTexture );
+				animate();
+			});
+
+			function init( meshTexture ) {
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 400;
+
+				scene = new THREE.Scene();
+
+				geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				material = new THREE.MeshBasicMaterial( { map: meshTexture } );
+				meshTexture.anisotropy = 4;
+
+				object = new THREE.Mesh( geometry, material );
+
+				scene.add( object );
+
+				// postprocessing
+
+				composer = new THREE.EffectComposer( renderer );
+				composer.addPass( new THREE.RenderPass( scene, camera ) );
+
+				pass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
+				pass.renderToScreen = true;
+				composer.addPass( pass );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+				var pixelRatio = renderer.getPixelRatio();
+				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newHeight = Math.floor( height / pixelRatio ) || 1;
+				composer.setSize( newWidth, newHeight );
+				pass.setSize( newWidth, newHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				composer.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_shading_physical.html

@@ -267,7 +267,7 @@
 				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
-				sunLight = new THREE.SpotLight( 0xffffff, sunIntensity, 0, Math.PI/2, 1 );
+				sunLight = new THREE.SpotLight( 0xffffff, sunIntensity, 0, Math.PI/2 );
 				sunLight.position.set( 1000, 2000, 1000 );
 
 				sunLight.castShadow = true;

examples/webgl_shadowmap.html

@@ -105,7 +105,7 @@
 				var ambient = new THREE.AmbientLight( 0x444444 );
 				scene.add( ambient );
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2, 1 );
+				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 );
 				light.position.set( 0, 1500, 1000 );
 				light.target.position.set( 0, 0, 0 );
 

examples/webgl_shadowmap_performance.html

@@ -100,7 +100,7 @@
 				var ambient = new THREE.AmbientLight( 0x444444 );
 				scene.add( ambient );
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2, 1 );
+				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2 );
 				light.position.set( 0, 1500, 1000 );
 				light.target.position.set( 0, 0, 0 );
 

examples/webgl_shadowmap_pointlight.html

@@ -73,8 +73,6 @@
 					pointLight.shadowCameraNear = 1;
 					pointLight.shadowCameraFar = 30;
 					// pointLight.shadowCameraVisible = true;
-					pointLight.shadowMapWidth = 2048;
-					pointLight.shadowMapHeight = 1024;
 					pointLight.shadowBias = 0.01;
 
 					var geometry = new THREE.SphereGeometry( 0.3, 32, 32 );

examples/webgl_shadowmap_viewer.html

@@ -72,6 +72,8 @@
 
 				spotLight = new THREE.SpotLight( 0xffffff );
 				spotLight.name = 'Spot Light';
+				spotLight.angle = Math.PI / 5;
+				spotLight.penumbra = 0.3;
 				spotLight.position.set( 10, 10, 5 );
 				spotLight.castShadow = true;
 				spotLight.shadowCameraNear = 8;

examples/webvr_stereo_pano.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - stereo pano demo</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<meta name="viewmode" content="projection=stereo">
+		<style>
+			html, body {
+				background-color: #000;
+				margin: 0px;
+				padding: 0px;
+				overflow: hidden;
+			}
+
+			#VrMode {
+				position: absolute;
+				top: 0;
+				left: 0;
+				margin: 10px;
+				background: black;
+				border: 0;
+				color: #fff;
+				padding: 10px;
+				font-size: 1rem;
+			}
+
+		</style>
+
+	</head>
+	<body>
+		<button id="VrMode">VR MODE</button>
+		<script src="../build/three.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/controls/VRControls.js"></script>
+		<script src="js/effects/VREffect.js"></script>
+
+		<script>
+
+		var camera;
+		var vrControls;
+		var effect;
+		var renderer;
+		var scene;
+		var vrMode = false;
+
+		function init() {
+
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio ? window.devicePixelRatio : 1 );
+			document.body.appendChild( renderer.domElement );
+
+			scene = new THREE.Scene();
+
+			camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 10000 );
+			camera.position.z = 0.0001;
+			camera.layers.enable(1);
+
+			effect = new THREE.VREffect( renderer );
+
+
+			if ( navigator.getVRDevices ) {
+
+				vrControls = new THREE.VRControls( camera, vrFallback );
+
+			} else {
+
+				vrFallback();
+
+			}
+
+
+			var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
+
+
+			var materials = [];
+
+			for ( var i = 0; i < 6; i ++ ) {
+
+					materials.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
+
+			}
+
+			var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materials ) );
+			skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
+			skyBox.layers.set( 1 );
+			scene.add( skyBox );
+
+
+			var materialsR = [];
+
+			for ( var i = 6; i < 12; i ++ ) {
+
+					materialsR.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
+
+			}
+
+			var skyBoxR = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materialsR ) );
+			skyBoxR.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
+			skyBoxR.layers.set( 2 );
+			scene.add( skyBoxR );
+
+			animate();
+			onWindowResize();
+
+		}
+
+		function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
+
+			var textures = [];
+
+			for ( var i=0; i < tilesNum; i++ ) {
+
+				textures[i] = new THREE.Texture();
+
+			}
+
+			var imageObj = new Image();
+
+			imageObj.onload = function() {
+
+				var canvas, context;
+				var tileWidth = imageObj.height;
+
+				for ( var i = 0; i < textures.length; i++ ) {
+
+					canvas = document.createElement( 'canvas' );
+					context = canvas.getContext( '2d' );
+					canvas.height = tileWidth;
+					canvas.width = tileWidth;
+					context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
+					textures[i].image = canvas
+					textures[i].needsUpdate = true;
+
+				}
+
+			};
+
+			imageObj.src = atlasImgUrl;
+
+			return textures;
+
+		}
+
+		function vrFallback() {
+
+				vrControls = new THREE.OrbitControls( camera );
+				document.querySelector( '#VrMode' ).style.textDecoration = "line-through";
+
+		}
+
+		function requestFullscreen() {
+
+				effect.setFullScreen( true );
+
+		}
+
+		function onWindowResize() {
+
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+
+			if (vrMode) {
+
+				effect.setSize(window.innerWidth, window.innerHeight);
+
+			} else {
+
+				renderer.setSize(window.innerWidth, window.innerHeight);
+				
+			}
+
+		}
+
+		function onFullscreenChange(e) {
+
+			var fsElement = document.fullscreenElement ||
+				document.mozFullScreenElement ||
+				document.webkitFullscreenElement;
+
+			if ( !fsElement ) {
+
+				vrMode = false;
+
+			} else {
+
+				window.screen.orientation.lock( 'landscape' );
+
+			}
+
+		}
+
+		function animate() {
+
+			if ( vrMode ) {
+
+				effect.render( scene, camera );
+
+			} else {
+
+				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
+				renderer.render( scene, camera );
+
+			}
+
+			vrControls.update();
+			requestAnimationFrame( animate );
+
+		}
+
+		document.querySelector( '#VrMode' ).addEventListener( 'click', function() {
+
+			vrMode = vrMode ? false : true;
+			requestFullscreen();
+			onWindowResize();
+
+		} );
+
+		document.addEventListener( 'fullscreenchange', onFullscreenChange );
+		document.addEventListener( 'mozfullscreenchange', onFullscreenChange );
+		window.addEventListener( 'resize', onWindowResize, false );
+
+		init();
+
+		</script>
+	</body>
+</html>