super-three 0.141.0 → 0.147.0

package/examples/js/effects/OutlineEffect.js

@@ -49,7 +49,7 @@
  * // How to set outline parameters for each material
  * material.userData.outlineParameters = {
  * 	thickness: 0.01,
- * 	color: [ 0, 0, 0 ]
+ * 	color: [ 0, 0, 0 ],
  * 	alpha: 0.8,
  * 	visible: true,
  * 	keepAlive: true
@@ -64,21 +64,26 @@
 			const defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
 			const defaultColor = new THREE.Color().fromArray( parameters.defaultColor !== undefined ? parameters.defaultColor : [ 0, 0, 0 ] );
 			const defaultAlpha = parameters.defaultAlpha !== undefined ? parameters.defaultAlpha : 1.0;
-			const defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false; // object.material.uuid -> outlineMaterial or
+			const defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false;
+
+			// object.material.uuid -> outlineMaterial or
 			// object.material[ n ].uuid -> outlineMaterial
 			// save at the outline material creation and release
 			// if it's unused removeThresholdCount frames
 			// unless keepAlive is true.
-
 			const cache = {};
-			const removeThresholdCount = 60; // outlineMaterial.uuid -> object.material or
+			const removeThresholdCount = 60;
+
+			// outlineMaterial.uuid -> object.material or
 			// outlineMaterial.uuid -> object.material[ n ]
 			// save before render and release after render.
+			const originalMaterials = {};
 
-			const originalMaterials = {}; // object.uuid -> originalOnBeforeRender
+			// object.uuid -> originalOnBeforeRender
 			// save before render and release after render.
+			const originalOnBeforeRenders = {};
 
-			const originalOnBeforeRenders = {}; //this.cache = cache;  // for debug
+			//this.cache = cache;  // for debug
 
 			const uniformsOutline = {
 				outlineThickness: {
@@ -91,12 +96,15 @@
 					value: defaultAlpha
 				}
 			};
-			const vertexShader = [ '#include <common>', '#include <uv_pars_vertex>', '#include <displacementmap_pars_vertex>', '#include <fog_pars_vertex>', '#include <morphtarget_pars_vertex>', '#include <skinning_pars_vertex>', '#include <logdepthbuf_pars_vertex>', '#include <clipping_planes_pars_vertex>', 'uniform float outlineThickness;', 'vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {', '	float thickness = outlineThickness;', '	const float ratio = 1.0;', // TODO: support outline thickness ratio for each vertex
-				'	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );', // NOTE: subtract pos2 from pos because THREE.BackSide objectNormal is negative
-				'	vec4 norm = normalize( pos - pos2 );', '	return pos + norm * thickness * pos.w * ratio;', '}', 'void main() {', '	#include <uv_vertex>', '	#include <beginnormal_vertex>', '	#include <morphnormal_vertex>', '	#include <skinbase_vertex>', '	#include <skinnormal_vertex>', '	#include <begin_vertex>', '	#include <morphtarget_vertex>', '	#include <skinning_vertex>', '	#include <displacementmap_vertex>', '	#include <project_vertex>', '	vec3 outlineNormal = - objectNormal;', // the outline material is always rendered with THREE.BackSide
+			const vertexShader = [ '#include <common>', '#include <uv_pars_vertex>', '#include <displacementmap_pars_vertex>', '#include <fog_pars_vertex>', '#include <morphtarget_pars_vertex>', '#include <skinning_pars_vertex>', '#include <logdepthbuf_pars_vertex>', '#include <clipping_planes_pars_vertex>', 'uniform float outlineThickness;', 'vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {', '	float thickness = outlineThickness;', '	const float ratio = 1.0;',
+				// TODO: support outline thickness ratio for each vertex
+				'	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );',
+				// NOTE: subtract pos2 from pos because THREE.BackSide objectNormal is negative
+				'	vec4 norm = normalize( pos - pos2 );', '	return pos + norm * thickness * pos.w * ratio;', '}', 'void main() {', '	#include <uv_vertex>', '	#include <beginnormal_vertex>', '	#include <morphnormal_vertex>', '	#include <skinbase_vertex>', '	#include <skinnormal_vertex>', '	#include <begin_vertex>', '	#include <morphtarget_vertex>', '	#include <skinning_vertex>', '	#include <displacementmap_vertex>', '	#include <project_vertex>', '	vec3 outlineNormal = - objectNormal;',
+				// the outline material is always rendered with THREE.BackSide
+
 				'	gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );', '	#include <logdepthbuf_vertex>', '	#include <clipping_planes_vertex>', '	#include <fog_vertex>', '}' ].join( '\n' );
 			const fragmentShader = [ '#include <common>', '#include <fog_pars_fragment>', '#include <logdepthbuf_pars_fragment>', '#include <clipping_planes_pars_fragment>', 'uniform vec3 outlineColor;', 'uniform float outlineAlpha;', 'void main() {', '	#include <clipping_planes_fragment>', '	#include <logdepthbuf_fragment>', '	gl_FragColor = vec4( outlineColor, outlineAlpha );', '	#include <tonemapping_fragment>', '	#include <encodings_fragment>', '	#include <fog_fragment>', '	#include <premultiplied_alpha_fragment>', '}' ].join( '\n' );
-
 			function createMaterial() {
 
 				return new THREE.ShaderMaterial( {
@@ -112,7 +120,6 @@
 			function getOutlineMaterialFromCache( originalMaterial ) {
 
 				let data = cache[ originalMaterial.uuid ];
-
 				if ( data === undefined ) {
 
 					data = {
@@ -143,7 +150,6 @@
 
 				const geometry = object.geometry;
 				let hasNormals = false;
-
 				if ( object.geometry !== undefined ) {
 
 					if ( geometry.isBufferGeometry ) {
@@ -165,7 +171,6 @@
 			function setOutlineMaterial( object ) {
 
 				if ( isCompatible( object ) === false ) return;
-
 				if ( Array.isArray( object.material ) ) {
 
 					for ( let i = 0, il = object.material.length; i < il; i ++ ) {
@@ -188,7 +193,6 @@
 			function restoreOriginalMaterial( object ) {
 
 				if ( isCompatible( object ) === false ) return;
-
 				if ( Array.isArray( object.material ) ) {
 
 					for ( let i = 0, il = object.material.length; i < il; i ++ ) {
@@ -209,8 +213,9 @@
 
 			function onBeforeRender( renderer, scene, camera, geometry, material ) {
 
-				const originalMaterial = originalMaterials[ material.uuid ]; // just in case
+				const originalMaterial = originalMaterials[ material.uuid ];
 
+				// just in case
 				if ( originalMaterial === undefined ) return;
 				updateUniforms( material, originalMaterial );
 
@@ -220,7 +225,6 @@
 
 				const outlineParameters = originalMaterial.userData.outlineParameters;
 				material.uniforms.outlineAlpha.value = originalMaterial.opacity;
-
 				if ( outlineParameters !== undefined ) {
 
 					if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness;
@@ -247,7 +251,6 @@
 				material.toneMapped = originalMaterial.toneMapped;
 				material.premultipliedAlpha = originalMaterial.premultipliedAlpha;
 				material.displacementMap = originalMaterial.displacementMap;
-
 				if ( outlineParameters !== undefined ) {
 
 					if ( originalMaterial.visible === false ) {
@@ -271,7 +274,6 @@
 				}
 
 				if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false;
-
 				if ( originalMaterial.clippingPlanes ) {
 
 					material.clipping = true;
@@ -287,36 +289,32 @@
 
 			function cleanupCache() {
 
-				let keys; // clear originialMaterials
+				let keys;
 
+				// clear originialMaterials
 				keys = Object.keys( originalMaterials );
-
 				for ( let i = 0, il = keys.length; i < il; i ++ ) {
 
 					originalMaterials[ keys[ i ] ] = undefined;
 
-				} // clear originalOnBeforeRenders
-
+				}
 
+				// clear originalOnBeforeRenders
 				keys = Object.keys( originalOnBeforeRenders );
-
 				for ( let i = 0, il = keys.length; i < il; i ++ ) {
 
 					originalOnBeforeRenders[ keys[ i ] ] = undefined;
 
-				} // remove unused outlineMaterial from cache
-
+				}
 
+				// remove unused outlineMaterial from cache
 				keys = Object.keys( cache );
-
 				for ( let i = 0, il = keys.length; i < il; i ++ ) {
 
 					const key = keys[ i ];
-
 					if ( cache[ key ].used === false ) {
 
 						cache[ key ].count ++;
-
 						if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) {
 
 							delete cache[ key ];
@@ -336,26 +334,6 @@
 
 			this.render = function ( scene, camera ) {
 
-				let renderTarget;
-				let forceClear = false;
-
-				if ( arguments[ 2 ] !== undefined ) {
-
-					console.warn( 'THREE.OutlineEffect.render(): the renderTarget argument has been removed. Use .setRenderTarget() instead.' );
-					renderTarget = arguments[ 2 ];
-
-				}
-
-				if ( arguments[ 3 ] !== undefined ) {
-
-					console.warn( 'THREE.OutlineEffect.render(): the forceClear argument has been removed. Use .clear() instead.' );
-					forceClear = arguments[ 3 ];
-
-				}
-
-				if ( renderTarget !== undefined ) renderer.setRenderTarget( renderTarget );
-				if ( forceClear ) renderer.clear();
-
 				if ( this.enabled === false ) {
 
 					renderer.render( scene, camera );
@@ -374,10 +352,10 @@
 			this.renderOutline = function ( scene, camera ) {
 
 				const currentAutoClear = renderer.autoClear;
-				const currentSceneAutoUpdate = scene.autoUpdate;
+				const currentSceneAutoUpdate = scene.matrixWorldAutoUpdate;
 				const currentSceneBackground = scene.background;
 				const currentShadowMapEnabled = renderer.shadowMap.enabled;
-				scene.autoUpdate = false;
+				scene.matrixWorldAutoUpdate = false;
 				scene.background = null;
 				renderer.autoClear = false;
 				renderer.shadowMap.enabled = false;
@@ -385,12 +363,13 @@
 				renderer.render( scene, camera );
 				scene.traverse( restoreOriginalMaterial );
 				cleanupCache();
-				scene.autoUpdate = currentSceneAutoUpdate;
+				scene.matrixWorldAutoUpdate = currentSceneAutoUpdate;
 				scene.background = currentSceneBackground;
 				renderer.autoClear = currentAutoClear;
 				renderer.shadowMap.enabled = currentShadowMapEnabled;
 
 			};
+
 			/*
      * See #9918
      *
@@ -405,12 +384,9 @@
      *
      * }
      */
-
-
 			this.autoClear = renderer.autoClear;
 			this.domElement = renderer.domElement;
 			this.shadowMap = renderer.shadowMap;
-
 			this.clear = function ( color, depth, stencil ) {
 
 				renderer.clear( color, depth, stencil );

package/examples/js/effects/ParallaxBarrierEffect.js

@@ -5,21 +5,15 @@
 		constructor( renderer ) {
 
 			const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-
 			const _scene = new THREE.Scene();
-
 			const _stereo = new THREE.StereoCamera();
-
 			const _params = {
 				minFilter: THREE.LinearFilter,
 				magFilter: THREE.NearestFilter,
 				format: THREE.RGBAFormat
 			};
-
 			const _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params );
-
 			const _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
-
 			const _material = new THREE.ShaderMaterial( {
 				uniforms: {
 					'mapLeft': {
@@ -32,29 +26,22 @@
 				vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = vec2( uv.x, uv.y );', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
 				fragmentShader: [ 'uniform sampler2D mapLeft;', 'uniform sampler2D mapRight;', 'varying vec2 vUv;', 'void main() {', '	vec2 uv = vUv;', '	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {', '		gl_FragColor = texture2D( mapLeft, uv );', '	} else {', '		gl_FragColor = texture2D( mapRight, uv );', '	}', '}' ].join( '\n' )
 			} );
-
 			const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
-
 			_scene.add( mesh );
-
 			this.setSize = function ( width, height ) {
 
 				renderer.setSize( width, height );
 				const pixelRatio = renderer.getPixelRatio();
-
 				_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
-
 				_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
 
 			};
 
 			this.render = function ( scene, camera ) {
 
-				scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
-
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 				_stereo.update( camera );
-
 				renderer.setRenderTarget( _renderTargetL );
 				renderer.clear();
 				renderer.render( scene, _stereo.cameraL );

package/examples/js/effects/PeppersGhostEffect.js

@@ -10,35 +10,24 @@
 
 			const scope = this;
 			scope.cameraDistance = 15;
-			scope.reflectFromAbove = false; // Internals
+			scope.reflectFromAbove = false;
 
+			// Internals
 			let _halfWidth, _width, _height;
-
 			const _cameraF = new THREE.PerspectiveCamera(); //front
-
-
 			const _cameraB = new THREE.PerspectiveCamera(); //back
-
-
 			const _cameraL = new THREE.PerspectiveCamera(); //left
-
-
 			const _cameraR = new THREE.PerspectiveCamera(); //right
 
-
 			const _position = new THREE.Vector3();
-
 			const _quaternion = new THREE.Quaternion();
+			const _scale = new THREE.Vector3();
 
-			const _scale = new THREE.Vector3(); // Initialization
-
-
+			// Initialization
 			renderer.autoClear = false;
-
 			this.setSize = function ( width, height ) {
 
 				_halfWidth = width / 2;
-
 				if ( width < height ) {
 
 					_width = width / 3;
@@ -57,53 +46,40 @@
 
 			this.render = function ( scene, camera ) {
 
-				scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
-				camera.matrixWorld.decompose( _position, _quaternion, _scale ); // front
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+				camera.matrixWorld.decompose( _position, _quaternion, _scale );
 
+				// front
 				_cameraF.position.copy( _position );
-
 				_cameraF.quaternion.copy( _quaternion );
-
 				_cameraF.translateZ( scope.cameraDistance );
+				_cameraF.lookAt( scene.position );
 
-				_cameraF.lookAt( scene.position ); // back
-
-
+				// back
 				_cameraB.position.copy( _position );
-
 				_cameraB.quaternion.copy( _quaternion );
-
 				_cameraB.translateZ( - scope.cameraDistance );
-
 				_cameraB.lookAt( scene.position );
+				_cameraB.rotation.z += 180 * ( Math.PI / 180 );
 
-				_cameraB.rotation.z += 180 * ( Math.PI / 180 ); // left
-
+				// left
 				_cameraL.position.copy( _position );
-
 				_cameraL.quaternion.copy( _quaternion );
-
 				_cameraL.translateX( - scope.cameraDistance );
-
 				_cameraL.lookAt( scene.position );
+				_cameraL.rotation.x += 90 * ( Math.PI / 180 );
 
-				_cameraL.rotation.x += 90 * ( Math.PI / 180 ); // right
-
+				// right
 				_cameraR.position.copy( _position );
-
 				_cameraR.quaternion.copy( _quaternion );
-
 				_cameraR.translateX( scope.cameraDistance );
-
 				_cameraR.lookAt( scene.position );
-
 				_cameraR.rotation.x += 90 * ( Math.PI / 180 );
 				renderer.clear();
 				renderer.setScissorTest( true );
 				renderer.setScissor( _halfWidth - _width / 2, _height * 2, _width, _height );
 				renderer.setViewport( _halfWidth - _width / 2, _height * 2, _width, _height );
-
 				if ( scope.reflectFromAbove ) {
 
 					renderer.render( scene, _cameraB );
@@ -116,7 +92,6 @@
 
 				renderer.setScissor( _halfWidth - _width / 2, 0, _width, _height );
 				renderer.setViewport( _halfWidth - _width / 2, 0, _width, _height );
-
 				if ( scope.reflectFromAbove ) {
 
 					renderer.render( scene, _cameraF );
@@ -129,7 +104,6 @@
 
 				renderer.setScissor( _halfWidth - _width / 2 - _width, _height, _width, _height );
 				renderer.setViewport( _halfWidth - _width / 2 - _width, _height, _width, _height );
-
 				if ( scope.reflectFromAbove ) {
 
 					renderer.render( scene, _cameraR );
@@ -142,7 +116,6 @@
 
 				renderer.setScissor( _halfWidth + _width / 2, _height, _width, _height );
 				renderer.setViewport( _halfWidth + _width / 2, _height, _width, _height );
-
 				if ( scope.reflectFromAbove ) {
 
 					renderer.render( scene, _cameraL );

package/examples/js/effects/StereoEffect.js

@@ -5,10 +5,8 @@
 		constructor( renderer ) {
 
 			const _stereo = new THREE.StereoCamera();
-
 			_stereo.aspect = 0.5;
 			const size = new THREE.Vector2();
-
 			this.setEyeSeparation = function ( eyeSep ) {
 
 				_stereo.eyeSep = eyeSep;
@@ -23,11 +21,9 @@
 
 			this.render = function ( scene, camera ) {
 
-				scene.updateMatrixWorld();
-				if ( camera.parent === null ) camera.updateMatrixWorld();
-
+				if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+				if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 				_stereo.update( camera );
-
 				renderer.getSize( size );
 				if ( renderer.autoClear ) renderer.clear();
 				renderer.setScissorTest( true );

package/examples/js/environments/RoomEnvironment.js

@@ -3,7 +3,6 @@
 	/**
  * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts
  */
-
 	class RoomEnvironment extends THREE.Scene {
 
 		constructor() {
@@ -51,42 +50,67 @@
 			box6.position.set( - 2.193, - 0.369, - 5.547 );
 			box6.rotation.set( 0, 0.516, 0 );
 			box6.scale.set( 3.875, 3.487, 2.986 );
-			this.add( box6 ); // -x right
+			this.add( box6 );
 
+			// -x right
 			const light1 = new THREE.Mesh( geometry, createAreaLightMaterial( 50 ) );
 			light1.position.set( - 16.116, 14.37, 8.208 );
 			light1.scale.set( 0.1, 2.428, 2.739 );
-			this.add( light1 ); // -x left
+			this.add( light1 );
 
+			// -x left
 			const light2 = new THREE.Mesh( geometry, createAreaLightMaterial( 50 ) );
 			light2.position.set( - 16.109, 18.021, - 8.207 );
 			light2.scale.set( 0.1, 2.425, 2.751 );
-			this.add( light2 ); // +x
+			this.add( light2 );
 
+			// +x
 			const light3 = new THREE.Mesh( geometry, createAreaLightMaterial( 17 ) );
 			light3.position.set( 14.904, 12.198, - 1.832 );
 			light3.scale.set( 0.15, 4.265, 6.331 );
-			this.add( light3 ); // +z
+			this.add( light3 );
 
+			// +z
 			const light4 = new THREE.Mesh( geometry, createAreaLightMaterial( 43 ) );
 			light4.position.set( - 0.462, 8.89, 14.520 );
 			light4.scale.set( 4.38, 5.441, 0.088 );
-			this.add( light4 ); // -z
+			this.add( light4 );
 
+			// -z
 			const light5 = new THREE.Mesh( geometry, createAreaLightMaterial( 20 ) );
 			light5.position.set( 3.235, 11.486, - 12.541 );
 			light5.scale.set( 2.5, 2.0, 0.1 );
-			this.add( light5 ); // +y
+			this.add( light5 );
 
+			// +y
 			const light6 = new THREE.Mesh( geometry, createAreaLightMaterial( 100 ) );
 			light6.position.set( 0.0, 20.0, 0.0 );
 			light6.scale.set( 1.0, 0.1, 1.0 );
 			this.add( light6 );
 
 		}
+		dispose() {
 
-	}
+			const resources = new Set();
+			this.traverse( object => {
+
+				if ( object.isMesh ) {
+
+					resources.add( object.geometry );
+					resources.add( object.material );
+
+				}
+
+			} );
+			for ( const resource of resources ) {
+
+				resource.dispose();
+
+			}
 
+		}
+
+	}
 	function createAreaLightMaterial( intensity ) {
 
 		const material = new THREE.MeshBasicMaterial();