super-three 0.136.0 → 0.141.0

package/examples/js/postprocessing/OutlinePass.js

@@ -18,18 +18,9 @@
 			this.pulsePeriod = 0;
 			this._visibilityCache = new Map();
 			this.resolution = resolution !== undefined ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 );
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			};
 			const resx = Math.round( this.resolution.x / this.downSampleRatio );
 			const resy = Math.round( this.resolution.y / this.downSampleRatio );
-			this.maskBufferMaterial = new THREE.MeshBasicMaterial( {
-				color: 0xffffff
-			} );
-			this.maskBufferMaterial.side = THREE.DoubleSide;
-			this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+			this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
 			this.renderTargetMaskBuffer.texture.generateMipmaps = false;
 			this.depthMaterial = new THREE.MeshDepthMaterial();
@@ -39,23 +30,23 @@
 			this.prepareMaskMaterial = this.getPrepareMaskMaterial();
 			this.prepareMaskMaterial.side = THREE.DoubleSide;
 			this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
-			this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+			this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
 			this.renderTargetDepthBuffer.texture.generateMipmaps = false;
-			this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
 			this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
-			this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
 			this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
-			this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+			this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 			this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
 			this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
 			this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
-			this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
 			this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
-			this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+			this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 			this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
 			this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
 			const MAX_EDGE_THICKNESS = 4;
@@ -93,7 +84,7 @@
 
 			function replaceDepthToViewZ( string, camera ) {
 
-				var type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
+				const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
 				return string.replace( /DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ' );
 
 			}

package/examples/js/postprocessing/SAOPass.js

@@ -31,17 +31,12 @@
 				saoBlurDepthCutoff: 0.01
 			};
 			this.resolution = new THREE.Vector2( resolution.x, resolution.y );
-			this.saoRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} );
+			this.saoRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
 			this.beautyRenderTarget = this.saoRenderTarget.clone();
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.depthRenderTarget = this.normalRenderTarget.clone();
 			let depthTexture;

package/examples/js/postprocessing/SMAAPass.js

@@ -7,17 +7,11 @@
 			super(); // render targets
 
 			this.edgesRT = new THREE.WebGLRenderTarget( width, height, {
-				depthBuffer: false,
-				generateMipmaps: false,
-				minFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat
+				depthBuffer: false
 			} );
 			this.edgesRT.texture.name = 'SMAAPass.edges';
 			this.weightsRT = new THREE.WebGLRenderTarget( width, height, {
-				depthBuffer: false,
-				generateMipmaps: false,
-				minFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
+				depthBuffer: false
 			} );
 			this.weightsRT.texture.name = 'SMAAPass.weights'; // textures
 
@@ -35,7 +29,6 @@
 			this.areaTexture = new THREE.Texture();
 			this.areaTexture.name = 'SMAAPass.area';
 			this.areaTexture.image = areaTextureImage;
-			this.areaTexture.format = THREE.RGBFormat;
 			this.areaTexture.minFilter = THREE.LinearFilter;
 			this.areaTexture.generateMipmaps = false;
 			this.areaTexture.flipY = false;

package/examples/js/postprocessing/SSAARenderPass.js

@@ -31,7 +31,6 @@
 				uniforms: this.copyUniforms,
 				vertexShader: copyShader.vertexShader,
 				fragmentShader: copyShader.fragmentShader,
-				premultipliedAlpha: true,
 				transparent: true,
 				blending: THREE.AdditiveBlending,
 				depthTest: false,
@@ -62,11 +61,7 @@
 
 			if ( ! this.sampleRenderTarget ) {
 
-				this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBAFormat
-				} );
+				this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height );
 				this.sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
 
 			}

package/examples/js/postprocessing/SSAOPass.js

@@ -23,25 +23,17 @@
 			this.generateRandomKernelRotations(); // beauty render target
 
 			const depthTexture = new THREE.DepthTexture();
-			depthTexture.type = THREE.UnsignedShortType;
-			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} ); // normal render target with depth buffer
+			depthTexture.format = THREE.DepthStencilFormat;
+			depthTexture.type = THREE.UnsignedInt248Type;
+			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height ); // normal render target with depth buffer
 
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				depthTexture: depthTexture
 			} ); // ssao render target
 
-			this.ssaoRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} );
+			this.ssaoRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height );
 			this.blurRenderTarget = this.ssaoRenderTarget.clone(); // ssao material
 
 			if ( THREE.SSAOShader === undefined ) {
@@ -131,7 +123,8 @@
 			/*, readBuffer, deltaTime, maskActive */
 		) {
 
-			// render beauty
+			if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = THREE.LuminanceFormat; // render beauty
+
 			renderer.setRenderTarget( this.beautyRenderTarget );
 			renderer.clear();
 			renderer.render( this.scene, this.camera ); // render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
@@ -297,23 +290,18 @@
 
 			const simplex = new THREE.SimplexNoise();
 			const size = width * height;
-			const data = new Float32Array( size * 4 );
+			const data = new Float32Array( size );
 
 			for ( let i = 0; i < size; i ++ ) {
 
-				const stride = i * 4;
 				const x = Math.random() * 2 - 1;
 				const y = Math.random() * 2 - 1;
 				const z = 0;
-				const noise = simplex.noise3d( x, y, z );
-				data[ stride ] = noise;
-				data[ stride + 1 ] = noise;
-				data[ stride + 2 ] = noise;
-				data[ stride + 3 ] = 1;
+				data[ i ] = simplex.noise3d( x, y, z );
 
 			}
 
-			this.noiseTexture = new THREE.DataTexture( data, width, height, THREE.RGBAFormat, THREE.FloatType );
+			this.noiseTexture = new THREE.DataTexture( data, width, height, THREE.RedFormat, THREE.FloatType );
 			this.noiseTexture.wrapS = THREE.RepeatWrapping;
 			this.noiseTexture.wrapT = THREE.RepeatWrapping;
 			this.noiseTexture.needsUpdate = true;

package/examples/js/postprocessing/SSRPass.js

@@ -146,34 +146,29 @@
 			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				depthTexture: depthTexture,
 				depthBuffer: true
 			} ); //for bouncing
 
 			this.prevRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} ); // normal render target
 
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				type: THREE.HalfFloatType
 			} ); // metalness render target
 
 			this.metalnessRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} ); // ssr render target
 
 			this.ssrRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.blurRenderTarget = this.ssrRenderTarget.clone();
 			this.blurRenderTarget2 = this.ssrRenderTarget.clone(); // this.blurRenderTarget3 = this.ssrRenderTarget.clone();

package/examples/js/postprocessing/SavePass.js

@@ -18,11 +18,7 @@
 
 			if ( this.renderTarget === undefined ) {
 
-				this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat
-				} );
+				this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 				this.renderTarget.texture.name = 'SavePass.rt';
 
 			}

package/examples/js/postprocessing/TAARenderPass.js

@@ -24,7 +24,7 @@
 
 		render( renderer, writeBuffer, readBuffer, deltaTime ) {
 
-			if ( ! this.accumulate ) {
+			if ( this.accumulate === false ) {
 
 				super.render( renderer, writeBuffer, readBuffer, deltaTime );
 				this.accumulateIndex = - 1;
@@ -34,21 +34,21 @@
 
 			const jitterOffsets = _JitterVectors[ 5 ];
 
-			if ( ! this.sampleRenderTarget ) {
+			if ( this.sampleRenderTarget === undefined ) {
 
 				this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
 				this.sampleRenderTarget.texture.name = 'TAARenderPass.sample';
 
 			}
 
-			if ( ! this.holdRenderTarget ) {
+			if ( this.holdRenderTarget === undefined ) {
 
 				this.holdRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
 				this.holdRenderTarget.texture.name = 'TAARenderPass.hold';
 
 			}
 
-			if ( this.accumulate && this.accumulateIndex === - 1 ) {
+			if ( this.accumulateIndex === - 1 ) {
 
 				super.render( renderer, this.holdRenderTarget, readBuffer, deltaTime );
 				this.accumulateIndex = 0;

package/examples/js/postprocessing/UnrealBloomPass.js

@@ -22,27 +22,22 @@
 
 			this.clearColor = new THREE.Color( 0, 0, 0 ); // render targets
 
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			};
 			this.renderTargetsHorizontal = [];
 			this.renderTargetsVertical = [];
 			this.nMips = 5;
 			let resx = Math.round( this.resolution.x / 2 );
 			let resy = Math.round( this.resolution.y / 2 );
-			this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetBright.texture.name = 'UnrealBloomPass.bright';
 			this.renderTargetBright.texture.generateMipmaps = false;
 
 			for ( let i = 0; i < this.nMips; i ++ ) {
 
-				const renderTargetHorizonal = new THREE.WebGLRenderTarget( resx, resy, pars );
+				const renderTargetHorizonal = new THREE.WebGLRenderTarget( resx, resy );
 				renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i;
 				renderTargetHorizonal.texture.generateMipmaps = false;
 				this.renderTargetsHorizontal.push( renderTargetHorizonal );
-				const renderTargetVertical = new THREE.WebGLRenderTarget( resx, resy, pars );
+				const renderTargetVertical = new THREE.WebGLRenderTarget( resx, resy );
 				renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
 				renderTargetVertical.texture.generateMipmaps = false;
 				this.renderTargetsVertical.push( renderTargetVertical );
@@ -307,9 +302,6 @@
 					'blurTexture5': {
 						value: null
 					},
-					'dirtTexture': {
-						value: null
-					},
 					'bloomStrength': {
 						value: 1.0
 					},
@@ -334,7 +326,6 @@
 				uniform sampler2D blurTexture3;
 				uniform sampler2D blurTexture4;
 				uniform sampler2D blurTexture5;
-				uniform sampler2D dirtTexture;
 				uniform float bloomStrength;
 				uniform float bloomRadius;
 				uniform float bloomFactors[NUM_MIPS];

package/examples/js/renderers/CSS2DRenderer.js

@@ -5,6 +5,7 @@
 		constructor( element = document.createElement( 'div' ) ) {
 
 			super();
+			this.isCSS2DObject = true;
 			this.element = element;
 			this.element.style.position = 'absolute';
 			this.element.style.userSelect = 'none';
@@ -33,9 +34,8 @@
 
 		}
 
-	}
+	} //
 
-	CSS2DObject.prototype.isCSS2DObject = true; //
 
 	const _vector = new THREE.Vector3();
 
@@ -102,39 +102,34 @@
 
 				if ( object.isCSS2DObject ) {
 
-					object.onBeforeRender( _this, scene, camera );
-
 					_vector.setFromMatrixPosition( object.matrixWorld );
 
 					_vector.applyMatrix4( _viewProjectionMatrix );
 
-					const element = object.element;
+					const visible = object.visible === true && _vector.z >= - 1 && _vector.z <= 1 && object.layers.test( camera.layers ) === true;
+					object.element.style.display = visible === true ? '' : 'none';
 
-					if ( /apple/i.test( navigator.vendor ) ) {
+					if ( visible === true ) {
 
-						// https://github.com/mrdoob/three.js/issues/21415
-						element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+						object.onBeforeRender( _this, scene, camera );
+						const element = object.element;
+						element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-					} else {
+						if ( element.parentNode !== domElement ) {
 
-						element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+							domElement.appendChild( element );
+
+						}
+
+						object.onAfterRender( _this, scene, camera );
 
 					}
 
-					element.style.display = object.visible && _vector.z >= - 1 && _vector.z <= 1 ? '' : 'none';
 					const objectData = {
 						distanceToCameraSquared: getDistanceToSquared( camera, object )
 					};
 					cache.objects.set( object, objectData );
 
-					if ( element.parentNode !== domElement ) {
-
-						domElement.appendChild( element );
-
-					}
-
-					object.onAfterRender( _this, scene, camera );
-
 				}
 
 				for ( let i = 0, l = object.children.length; i < l; i ++ ) {
@@ -171,6 +166,12 @@
 
 				const sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
 
+					if ( a.renderOrder !== b.renderOrder ) {
+
+						return b.renderOrder - a.renderOrder;
+
+					}
+
 					const distanceA = cache.objects.get( a ).distanceToCameraSquared;
 					const distanceB = cache.objects.get( b ).distanceToCameraSquared;
 					return distanceA - distanceB;

package/examples/js/renderers/CSS3DRenderer.js

@@ -15,6 +15,7 @@
 		constructor( element = document.createElement( 'div' ) ) {
 
 			super();
+			this.isCSS3DObject = true;
 			this.element = element;
 			this.element.style.position = 'absolute';
 			this.element.style.pointerEvents = 'auto';
@@ -46,13 +47,12 @@
 
 	}
 
-	CSS3DObject.prototype.isCSS3DObject = true;
-
 	class CSS3DSprite extends CSS3DObject {
 
 		constructor( element ) {
 
 			super( element );
+			this.isCSS3DSprite = true;
 			this.rotation2D = 0;
 
 		}
@@ -65,9 +65,8 @@
 
 		}
 
-	}
+	} //
 
-	CSS3DSprite.prototype.isCSS3DSprite = true; //
 
 	const _matrix = new THREE.Matrix4();
 
@@ -181,57 +180,62 @@
 
 				if ( object.isCSS3DObject ) {
 
-					object.onBeforeRender( _this, scene, camera );
-					let style;
+					const visible = object.visible === true && object.layers.test( camera.layers ) === true;
+					object.element.style.display = visible === true ? '' : 'none';
 
-					if ( object.isCSS3DSprite ) {
+					if ( visible === true ) {
 
-						// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
-						_matrix.copy( camera.matrixWorldInverse );
+						object.onBeforeRender( _this, scene, camera );
+						let style;
 
-						_matrix.transpose();
+						if ( object.isCSS3DSprite ) {
 
-						if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
-						object.matrixWorld.decompose( _position, _quaternion, _scale );
+							// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+							_matrix.copy( camera.matrixWorldInverse );
 
-						_matrix.setPosition( _position );
+							_matrix.transpose();
 
-						_matrix.scale( _scale );
+							if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
+							object.matrixWorld.decompose( _position, _quaternion, _scale );
 
-						_matrix.elements[ 3 ] = 0;
-						_matrix.elements[ 7 ] = 0;
-						_matrix.elements[ 11 ] = 0;
-						_matrix.elements[ 15 ] = 1;
-						style = getObjectCSSMatrix( _matrix );
+							_matrix.setPosition( _position );
 
-					} else {
+							_matrix.scale( _scale );
 
-						style = getObjectCSSMatrix( object.matrixWorld );
+							_matrix.elements[ 3 ] = 0;
+							_matrix.elements[ 7 ] = 0;
+							_matrix.elements[ 11 ] = 0;
+							_matrix.elements[ 15 ] = 1;
+							style = getObjectCSSMatrix( _matrix );
 
-					}
+						} else {
 
-					const element = object.element;
-					const cachedObject = cache.objects.get( object );
+							style = getObjectCSSMatrix( object.matrixWorld );
 
-					if ( cachedObject === undefined || cachedObject.style !== style ) {
+						}
 
-						element.style.transform = style;
-						const objectData = {
-							style: style
-						};
-						cache.objects.set( object, objectData );
+						const element = object.element;
+						const cachedObject = cache.objects.get( object );
 
-					}
+						if ( cachedObject === undefined || cachedObject.style !== style ) {
 
-					element.style.display = object.visible ? '' : 'none';
+							element.style.transform = style;
+							const objectData = {
+								style: style
+							};
+							cache.objects.set( object, objectData );
 
-					if ( element.parentNode !== cameraElement ) {
+						}
 
-						cameraElement.appendChild( element );
+						if ( element.parentNode !== cameraElement ) {
 
-					}
+							cameraElement.appendChild( element );
+
+						}
 
-					object.onAfterRender( _this, scene, camera );
+						object.onAfterRender( _this, scene, camera );
+
+					}
 
 				}