super-three 0.141.0 → 0.147.0

package/examples/js/postprocessing/UnrealBloomPass.js

@@ -9,7 +9,6 @@
  * Reference:
  * - https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/
  */
-
 	class UnrealBloomPass extends THREE.Pass {
 
 		constructor( resolution, strength, radius, threshold ) {
@@ -18,10 +17,12 @@
 			this.strength = strength !== undefined ? strength : 1;
 			this.radius = radius;
 			this.threshold = threshold;
-			this.resolution = resolution !== undefined ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 ); // create color only once here, reuse it later inside the render function
+			this.resolution = resolution !== undefined ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 );
 
-			this.clearColor = new THREE.Color( 0, 0, 0 ); // render targets
+			// create color only once here, reuse it later inside the render function
+			this.clearColor = new THREE.Color( 0, 0, 0 );
 
+			// render targets
 			this.renderTargetsHorizontal = [];
 			this.renderTargetsVertical = [];
 			this.nMips = 5;
@@ -30,7 +31,6 @@
 			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 );
@@ -44,8 +44,9 @@
 				resx = Math.round( resx / 2 );
 				resy = Math.round( resy / 2 );
 
-			} // luminosity high pass material
+			}
 
+			// luminosity high pass material
 
 			if ( THREE.LuminosityHighPassShader === undefined ) console.error( 'THREE.UnrealBloomPass relies on THREE.LuminosityHighPassShader' );
 			const highPassShader = THREE.LuminosityHighPassShader;
@@ -57,13 +58,13 @@
 				vertexShader: highPassShader.vertexShader,
 				fragmentShader: highPassShader.fragmentShader,
 				defines: {}
-			} ); // Gaussian Blur Materials
+			} );
 
+			// Gaussian Blur Materials
 			this.separableBlurMaterials = [];
 			const kernelSizeArray = [ 3, 5, 7, 9, 11 ];
 			resx = Math.round( this.resolution.x / 2 );
 			resy = Math.round( this.resolution.y / 2 );
-
 			for ( let i = 0; i < this.nMips; i ++ ) {
 
 				this.separableBlurMaterials.push( this.getSeperableBlurMaterial( kernelSizeArray[ i ] ) );
@@ -71,9 +72,9 @@
 				resx = Math.round( resx / 2 );
 				resy = Math.round( resy / 2 );
 
-			} // Composite material
-
+			}
 
+			// Composite material
 			this.compositeMaterial = this.getCompositeMaterial( this.nMips );
 			this.compositeMaterial.uniforms[ 'blurTexture1' ].value = this.renderTargetsVertical[ 0 ].texture;
 			this.compositeMaterial.uniforms[ 'blurTexture2' ].value = this.renderTargetsVertical[ 1 ].texture;
@@ -86,8 +87,9 @@
 			const bloomFactors = [ 1.0, 0.8, 0.6, 0.4, 0.2 ];
 			this.compositeMaterial.uniforms[ 'bloomFactors' ].value = bloomFactors;
 			this.bloomTintColors = [ new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ) ];
-			this.compositeMaterial.uniforms[ 'bloomTintColors' ].value = this.bloomTintColors; // copy material
+			this.compositeMaterial.uniforms[ 'bloomTintColors' ].value = this.bloomTintColors;
 
+			// copy material
 			if ( THREE.CopyShader === undefined ) {
 
 				console.error( 'THREE.UnrealBloomPass relies on THREE.CopyShader' );
@@ -114,7 +116,6 @@
 			this.fsQuad = new THREE.FullScreenQuad( null );
 
 		}
-
 		dispose() {
 
 			for ( let i = 0; i < this.renderTargetsHorizontal.length; i ++ ) {
@@ -131,14 +132,28 @@
 
 			this.renderTargetBright.dispose();
 
-		}
+			//
+
+			for ( let i = 0; i < this.separableBlurMaterials.length; i ++ ) {
+
+				this.separableBlurMaterials[ i ].dispose();
+
+			}
+
+			this.compositeMaterial.dispose();
+			this.materialCopy.dispose();
+			this.basic.dispose();
+
+			//
 
+			this.fsQuad.dispose();
+
+		}
 		setSize( width, height ) {
 
 			let resx = Math.round( width / 2 );
 			let resy = Math.round( height / 2 );
 			this.renderTargetBright.setSize( resx, resy );
-
 			for ( let i = 0; i < this.nMips; i ++ ) {
 
 				this.renderTargetsHorizontal[ i ].setSize( resx, resy );
@@ -150,7 +165,6 @@
 			}
 
 		}
-
 		render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
 
 			renderer.getClearColor( this._oldClearColor );
@@ -158,7 +172,9 @@
 			const oldAutoClear = renderer.autoClear;
 			renderer.autoClear = false;
 			renderer.setClearColor( this.clearColor, 0 );
-			if ( maskActive ) renderer.state.buffers.stencil.setTest( false ); // Render input to screen
+			if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
+
+			// Render input to screen
 
 			if ( this.renderToScreen ) {
 
@@ -168,18 +184,20 @@
 				renderer.clear();
 				this.fsQuad.render( renderer );
 
-			} // 1. Extract Bright Areas
+			}
 
+			// 1. Extract Bright Areas
 
 			this.highPassUniforms[ 'tDiffuse' ].value = readBuffer.texture;
 			this.highPassUniforms[ 'luminosityThreshold' ].value = this.threshold;
 			this.fsQuad.material = this.materialHighPassFilter;
 			renderer.setRenderTarget( this.renderTargetBright );
 			renderer.clear();
-			this.fsQuad.render( renderer ); // 2. Blur All the mips progressively
+			this.fsQuad.render( renderer );
 
-			let inputRenderTarget = this.renderTargetBright;
+			// 2. Blur All the mips progressively
 
+			let inputRenderTarget = this.renderTargetBright;
 			for ( let i = 0; i < this.nMips; i ++ ) {
 
 				this.fsQuad.material = this.separableBlurMaterials[ i ];
@@ -195,8 +213,9 @@
 				this.fsQuad.render( renderer );
 				inputRenderTarget = this.renderTargetsVertical[ i ];
 
-			} // Composite All the mips
+			}
 
+			// Composite All the mips
 
 			this.fsQuad.material = this.compositeMaterial;
 			this.compositeMaterial.uniforms[ 'bloomStrength' ].value = this.strength;
@@ -204,12 +223,13 @@
 			this.compositeMaterial.uniforms[ 'bloomTintColors' ].value = this.bloomTintColors;
 			renderer.setRenderTarget( this.renderTargetsHorizontal[ 0 ] );
 			renderer.clear();
-			this.fsQuad.render( renderer ); // Blend it additively over the input texture
+			this.fsQuad.render( renderer );
+
+			// Blend it additively over the input texture
 
 			this.fsQuad.material = this.materialCopy;
 			this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetsHorizontal[ 0 ].texture;
 			if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
-
 			if ( this.renderToScreen ) {
 
 				renderer.setRenderTarget( null );
@@ -220,14 +240,14 @@
 				renderer.setRenderTarget( readBuffer );
 				this.fsQuad.render( renderer );
 
-			} // Restore renderer settings
+			}
 
+			// Restore renderer settings
 
 			renderer.setClearColor( this._oldClearColor, this.oldClearAlpha );
 			renderer.autoClear = oldAutoClear;
 
 		}
-
 		getSeperableBlurMaterial( kernelRadius ) {
 
 			return new THREE.ShaderMaterial( {
@@ -279,7 +299,6 @@
 			} );
 
 		}
-
 		getCompositeMaterial( nMips ) {
 
 			return new THREE.ShaderMaterial( {
@@ -348,7 +367,6 @@
 		}
 
 	}
-
 	UnrealBloomPass.BlurDirectionX = new THREE.Vector2( 1.0, 0.0 );
 	UnrealBloomPass.BlurDirectionY = new THREE.Vector2( 0.0, 1.0 );
 

package/examples/js/renderers/CSS2DRenderer.js

@@ -25,7 +25,6 @@
 			} );
 
 		}
-
 		copy( source, recursive ) {
 
 			super.copy( source, recursive );
@@ -34,36 +33,28 @@
 
 		}
 
-	} //
+	}
 
+	//
 
 	const _vector = new THREE.Vector3();
-
 	const _viewMatrix = new THREE.Matrix4();
-
 	const _viewProjectionMatrix = new THREE.Matrix4();
-
 	const _a = new THREE.Vector3();
-
 	const _b = new THREE.Vector3();
-
 	class CSS2DRenderer {
 
 		constructor( parameters = {} ) {
 
 			const _this = this;
-
 			let _width, _height;
-
 			let _widthHalf, _heightHalf;
-
 			const cache = {
 				objects: new WeakMap()
 			};
 			const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' );
 			domElement.style.overflow = 'hidden';
 			this.domElement = domElement;
-
 			this.getSize = function () {
 
 				return {
@@ -75,13 +66,10 @@
 
 			this.render = function ( scene, camera ) {
 
-				if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
-
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 				_viewMatrix.copy( camera.matrixWorldInverse );
-
 				_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
-
 				renderObject( scene, scene, camera );
 				zOrder( scene );
 
@@ -103,18 +91,14 @@
 				if ( object.isCSS2DObject ) {
 
 					_vector.setFromMatrixPosition( object.matrixWorld );
-
 					_vector.applyMatrix4( _viewProjectionMatrix );
-
 					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 ( visible === true ) {
 
 						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)';
-
 						if ( element.parentNode !== domElement ) {
 
 							domElement.appendChild( element );
@@ -143,9 +127,7 @@
 			function getDistanceToSquared( object1, object2 ) {
 
 				_a.setFromMatrixPosition( object1.matrixWorld );
-
 				_b.setFromMatrixPosition( object2.matrixWorld );
-
 				return _a.distanceToSquared( _b );
 
 			}
@@ -178,7 +160,6 @@
 
 				} );
 				const zMax = sorted.length;
-
 				for ( let i = 0, l = sorted.length; i < l; i ++ ) {
 
 					sorted[ i ].element.style.zIndex = zMax - i;

package/examples/js/renderers/CSS3DRenderer.js

@@ -5,11 +5,8 @@
  */
 
 	const _position = new THREE.Vector3();
-
 	const _quaternion = new THREE.Quaternion();
-
 	const _scale = new THREE.Vector3();
-
 	class CSS3DObject extends THREE.Object3D {
 
 		constructor( element = document.createElement( 'div' ) ) {
@@ -36,7 +33,6 @@
 			} );
 
 		}
-
 		copy( source, recursive ) {
 
 			super.copy( source, recursive );
@@ -46,7 +42,6 @@
 		}
 
 	}
-
 	class CSS3DSprite extends CSS3DObject {
 
 		constructor( element ) {
@@ -56,7 +51,6 @@
 			this.rotation2D = 0;
 
 		}
-
 		copy( source, recursive ) {
 
 			super.copy( source, recursive );
@@ -65,23 +59,19 @@
 
 		}
 
-	} //
+	}
 
+	//
 
 	const _matrix = new THREE.Matrix4();
-
 	const _matrix2 = new THREE.Matrix4();
-
 	class CSS3DRenderer {
 
 		constructor( parameters = {} ) {
 
 			const _this = this;
-
 			let _width, _height;
-
 			let _widthHalf, _heightHalf;
-
 			const cache = {
 				camera: {
 					fov: 0,
@@ -96,7 +86,6 @@
 			cameraElement.style.transformStyle = 'preserve-3d';
 			cameraElement.style.pointerEvents = 'none';
 			domElement.appendChild( cameraElement );
-
 			this.getSize = function () {
 
 				return {
@@ -109,7 +98,6 @@
 			this.render = function ( scene, camera ) {
 
 				const fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
-
 				if ( cache.camera.fov !== fov ) {
 
 					domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
@@ -117,10 +105,9 @@
 
 				}
 
-				if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 				let tx, ty;
-
 				if ( camera.isOrthographicCamera ) {
 
 					tx = - ( camera.right + camera.left ) / 2;
@@ -130,7 +117,6 @@
 
 				const cameraCSSMatrix = camera.isOrthographicCamera ? 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
 				const style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
-
 				if ( cache.camera.style !== style ) {
 
 					cameraElement.style.transform = style;
@@ -182,26 +168,20 @@
 
 					const visible = object.visible === true && object.layers.test( camera.layers ) === true;
 					object.element.style.display = visible === true ? '' : 'none';
-
 					if ( visible === true ) {
 
 						object.onBeforeRender( _this, scene, camera );
 						let style;
-
 						if ( object.isCSS3DSprite ) {
 
 							// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
-							_matrix.copy( camera.matrixWorldInverse );
 
+							_matrix.copy( camera.matrixWorldInverse );
 							_matrix.transpose();
-
 							if ( object.rotation2D !== 0 ) _matrix.multiply( _matrix2.makeRotationZ( object.rotation2D ) );
 							object.matrixWorld.decompose( _position, _quaternion, _scale );
-
 							_matrix.setPosition( _position );
-
 							_matrix.scale( _scale );
-
 							_matrix.elements[ 3 ] = 0;
 							_matrix.elements[ 7 ] = 0;
 							_matrix.elements[ 11 ] = 0;
@@ -216,7 +196,6 @@
 
 						const element = object.element;
 						const cachedObject = cache.objects.get( object );
-
 						if ( cachedObject === undefined || cachedObject.style !== style ) {
 
 							element.style.transform = style;