Initial commit

HTML/ThreeJS/node_modules/three/examples/js/effects/AnaglyphEffect.js

@@ -0,0 +1,100 @@
+( function () {
+
+	class AnaglyphEffect {
+
+		constructor( renderer, width = 512, height = 512 ) {
+
+			// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
+			this.colorMatrixLeft = new THREE.Matrix3().fromArray( [ 0.456100, - 0.0400822, - 0.0152161, 0.500484, - 0.0378246, - 0.0205971, 0.176381, - 0.0157589, - 0.00546856 ] );
+			this.colorMatrixRight = new THREE.Matrix3().fromArray( [ - 0.0434706, 0.378476, - 0.0721527, - 0.0879388, 0.73364, - 0.112961, - 0.00155529, - 0.0184503, 1.2264 ] );
+
+			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( width, height, _params );
+
+			const _renderTargetR = new THREE.WebGLRenderTarget( width, height, _params );
+
+			const _material = new THREE.ShaderMaterial( {
+				uniforms: {
+					'mapLeft': {
+						value: _renderTargetL.texture
+					},
+					'mapRight': {
+						value: _renderTargetR.texture
+					},
+					'colorMatrixLeft': {
+						value: this.colorMatrixLeft
+					},
+					'colorMatrixRight': {
+						value: this.colorMatrixRight
+					}
+				},
+				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;', 'uniform mat3 colorMatrixLeft;', 'uniform mat3 colorMatrixRight;', // These functions implement sRGB linearization and gamma correction
+					'float lin( float c ) {', '	return c <= 0.04045 ? c * 0.0773993808 :', '			pow( c * 0.9478672986 + 0.0521327014, 2.4 );', '}', 'vec4 lin( vec4 c ) {', '	return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );', '}', 'float dev( float c ) {', '	return c <= 0.0031308 ? c * 12.92', '			: pow( c, 0.41666 ) * 1.055 - 0.055;', '}', 'void main() {', '	vec2 uv = vUv;', '	vec4 colorL = lin( texture2D( mapLeft, uv ) );', '	vec4 colorR = lin( texture2D( mapRight, uv ) );', '	vec3 color = clamp(', '			colorMatrixLeft * colorL.rgb +', '			colorMatrixRight * colorR.rgb, 0., 1. );', '	gl_FragColor = vec4(', '			dev( color.r ), dev( color.g ), dev( color.b ),', '			max( colorL.a, colorR.a ) );', '}' ].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 ) {
+
+				const currentRenderTarget = renderer.getRenderTarget();
+				scene.updateMatrixWorld();
+				if ( camera.parent === null ) camera.updateMatrixWorld();
+
+				_stereo.update( camera );
+
+				renderer.setRenderTarget( _renderTargetL );
+				renderer.clear();
+				renderer.render( scene, _stereo.cameraL );
+				renderer.setRenderTarget( _renderTargetR );
+				renderer.clear();
+				renderer.render( scene, _stereo.cameraR );
+				renderer.setRenderTarget( null );
+				renderer.render( _scene, _camera );
+				renderer.setRenderTarget( currentRenderTarget );
+
+			};
+
+			this.dispose = function () {
+
+				_renderTargetL.dispose();
+
+				_renderTargetR.dispose();
+
+				_mesh.geometry.dispose();
+
+				_mesh.material.dispose();
+
+			};
+
+		}
+
+	}
+
+	THREE.AnaglyphEffect = AnaglyphEffect;
+
+} )();

HTML/ThreeJS/node_modules/three/examples/js/effects/AsciiEffect.js

@@ -0,0 +1,278 @@
+( function () {
+
+	/**
+ * Ascii generation is based on https://github.com/hassadee/jsascii/blob/master/jsascii.js
+ *
+ * 16 April 2012 - @blurspline
+ */
+	class AsciiEffect {
+
+		constructor( renderer, charSet = ' .:-=+*#%@', options = {} ) {
+
+			// ' .,:;=|iI+hHOE#`$';
+			// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+			// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
+			// Some ASCII settings
+			const bResolution = ! options[ 'resolution' ] ? 0.15 : options[ 'resolution' ]; // Higher for more details
+
+			const iScale = ! options[ 'scale' ] ? 1 : options[ 'scale' ];
+			const bColor = ! options[ 'color' ] ? false : options[ 'color' ]; // nice but slows down rendering!
+
+			const bAlpha = ! options[ 'alpha' ] ? false : options[ 'alpha' ]; // Transparency
+
+			const bBlock = ! options[ 'block' ] ? false : options[ 'block' ]; // blocked characters. like good O dos
+
+			const bInvert = ! options[ 'invert' ] ? false : options[ 'invert' ]; // black is white, white is black
+
+			const strResolution = 'low';
+			let width, height;
+			const domElement = document.createElement( 'div' );
+			domElement.style.cursor = 'default';
+			const oAscii = document.createElement( 'table' );
+			domElement.appendChild( oAscii );
+			let iWidth, iHeight;
+			let oImg;
+
+			this.setSize = function ( w, h ) {
+
+				width = w;
+				height = h;
+				renderer.setSize( w, h );
+				initAsciiSize();
+
+			};
+
+			this.render = function ( scene, camera ) {
+
+				renderer.render( scene, camera );
+				asciifyImage( oAscii );
+
+			};
+
+			this.domElement = domElement; // Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
+
+			function initAsciiSize() {
+
+				iWidth = Math.round( width * fResolution );
+				iHeight = Math.round( height * fResolution );
+				oCanvas.width = iWidth;
+				oCanvas.height = iHeight; // oCanvas.style.display = "none";
+				// oCanvas.style.width = iWidth;
+				// oCanvas.style.height = iHeight;
+
+				oImg = renderer.domElement;
+
+				if ( oImg.style.backgroundColor ) {
+
+					oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
+					oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
+
+				}
+
+				oAscii.cellSpacing = 0;
+				oAscii.cellPadding = 0;
+				const oStyle = oAscii.style;
+				oStyle.display = 'inline';
+				oStyle.width = Math.round( iWidth / fResolution * iScale ) + 'px';
+				oStyle.height = Math.round( iHeight / fResolution * iScale ) + 'px';
+				oStyle.whiteSpace = 'pre';
+				oStyle.margin = '0px';
+				oStyle.padding = '0px';
+				oStyle.letterSpacing = fLetterSpacing + 'px';
+				oStyle.fontFamily = strFont;
+				oStyle.fontSize = fFontSize + 'px';
+				oStyle.lineHeight = fLineHeight + 'px';
+				oStyle.textAlign = 'left';
+				oStyle.textDecoration = 'none';
+
+			}
+
+			const aDefaultCharList = ' .,:;i1tfLCG08@'.split( '' );
+			const aDefaultColorCharList = ' CGO08@'.split( '' );
+			const strFont = 'courier new, monospace';
+			const oCanvasImg = renderer.domElement;
+			const oCanvas = document.createElement( 'canvas' );
+
+			if ( ! oCanvas.getContext ) {
+
+				return;
+
+			}
+
+			const oCtx = oCanvas.getContext( '2d' );
+
+			if ( ! oCtx.getImageData ) {
+
+				return;
+
+			}
+
+			let aCharList = bColor ? aDefaultColorCharList : aDefaultCharList;
+			if ( charSet ) aCharList = charSet;
+			let fResolution = 0.5;
+
+			switch ( strResolution ) {
+
+				case 'low':
+					fResolution = 0.25;
+					break;
+
+				case 'medium':
+					fResolution = 0.5;
+					break;
+
+				case 'high':
+					fResolution = 1;
+					break;
+
+			}
+
+			if ( bResolution ) fResolution = bResolution; // Setup dom
+
+			const fFontSize = 2 / fResolution * iScale;
+			const fLineHeight = 2 / fResolution * iScale; // adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
+			let fLetterSpacing = 0;
+
+			if ( strResolution == 'low' ) {
+
+				switch ( iScale ) {
+
+					case 1:
+						fLetterSpacing = - 1;
+						break;
+
+					case 2:
+					case 3:
+						fLetterSpacing = - 2.1;
+						break;
+
+					case 4:
+						fLetterSpacing = - 3.1;
+						break;
+
+					case 5:
+						fLetterSpacing = - 4.15;
+						break;
+
+				}
+
+			}
+
+			if ( strResolution == 'medium' ) {
+
+				switch ( iScale ) {
+
+					case 1:
+						fLetterSpacing = 0;
+						break;
+
+					case 2:
+						fLetterSpacing = - 1;
+						break;
+
+					case 3:
+						fLetterSpacing = - 1.04;
+						break;
+
+					case 4:
+					case 5:
+						fLetterSpacing = - 2.1;
+						break;
+
+				}
+
+			}
+
+			if ( strResolution == 'high' ) {
+
+				switch ( iScale ) {
+
+					case 1:
+					case 2:
+						fLetterSpacing = 0;
+						break;
+
+					case 3:
+					case 4:
+					case 5:
+						fLetterSpacing = - 1;
+						break;
+
+				}
+
+			} // can't get a span or div to flow like an img element, but a table works?
+			// convert img element to ascii
+
+
+			function asciifyImage( oAscii ) {
+
+				oCtx.clearRect( 0, 0, iWidth, iHeight );
+				oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
+				const oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data; // Coloring loop starts now
+
+				let strChars = ''; // console.time('rendering');
+
+				for ( let y = 0; y < iHeight; y += 2 ) {
+
+					for ( let x = 0; x < iWidth; x ++ ) {
+
+						const iOffset = ( y * iWidth + x ) * 4;
+						const iRed = oImgData[ iOffset ];
+						const iGreen = oImgData[ iOffset + 1 ];
+						const iBlue = oImgData[ iOffset + 2 ];
+						const iAlpha = oImgData[ iOffset + 3 ];
+						let iCharIdx;
+						let fBrightness;
+						fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255; // fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
+
+						if ( iAlpha == 0 ) {
+
+							// should calculate alpha instead, but quick hack :)
+							//fBrightness *= (iAlpha / 255);
+							fBrightness = 1;
+
+						}
+
+						iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
+
+						if ( bInvert ) {
+
+							iCharIdx = aCharList.length - iCharIdx - 1;
+
+						} // good for debugging
+						//fBrightness = Math.floor(fBrightness * 10);
+						//strThisChar = fBrightness;
+
+
+						let strThisChar = aCharList[ iCharIdx ];
+						if ( strThisChar === undefined || strThisChar == ' ' ) strThisChar = '&nbsp;';
+
+						if ( bColor ) {
+
+							strChars += '<span style=\'' + 'color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' + ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' ) + ( bAlpha ? 'opacity:' + iAlpha / 255 + ';' : '' ) + '\'>' + strThisChar + '</span>';
+
+						} else {
+
+							strChars += strThisChar;
+
+						}
+
+					}
+
+					strChars += '<br/>';
+
+				}
+
+				oAscii.innerHTML = '<tr><td>' + strChars + '</td></tr>'; // console.timeEnd('rendering');
+				// return oAscii;
+
+			}
+
+		}
+
+	}
+
+	THREE.AsciiEffect = AsciiEffect;
+
+} )();

HTML/ThreeJS/node_modules/three/examples/js/effects/OutlineEffect.js

@@ -0,0 +1,474 @@
+( function () {
+
+	/**
+ * Reference: https://en.wikipedia.org/wiki/Cel_shading
+ *
+ * API
+ *
+ * 1. Traditional
+ *
+ * const effect = new OutlineEffect( renderer );
+ *
+ * function render() {
+ *
+ * 	effect.render( scene, camera );
+ *
+ * }
+ *
+ * 2. VR compatible
+ *
+ * const effect = new OutlineEffect( renderer );
+ * let renderingOutline = false;
+ *
+ * scene.onAfterRender = function () {
+ *
+ * 	if ( renderingOutline ) return;
+ *
+ * 	renderingOutline = true;
+ *
+ * 	effect.renderOutline( scene, camera );
+ *
+ * 	renderingOutline = false;
+ *
+ * };
+ *
+ * function render() {
+ *
+ * 	renderer.render( scene, camera );
+ *
+ * }
+ *
+ * // How to set default outline parameters
+ * new OutlineEffect( renderer, {
+ * 	defaultThickness: 0.01,
+ * 	defaultColor: [ 0, 0, 0 ],
+ * 	defaultAlpha: 0.8,
+ * 	defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
+ * } );
+ *
+ * // How to set outline parameters for each material
+ * material.userData.outlineParameters = {
+ * 	thickness: 0.01,
+ * 	color: [ 0, 0, 0 ]
+ * 	alpha: 0.8,
+ * 	visible: true,
+ * 	keepAlive: true
+ * };
+ */
+
+	class OutlineEffect {
+
+		constructor( renderer, parameters = {} ) {
+
+			this.enabled = true;
+			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
+			// 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
+			// outlineMaterial.uuid -> object.material[ n ]
+			// save before render and release after render.
+
+			const originalMaterials = {}; // object.uuid -> originalOnBeforeRender
+			// save before render and release after render.
+
+			const originalOnBeforeRenders = {}; //this.cache = cache;  // for debug
+
+			const uniformsOutline = {
+				outlineThickness: {
+					value: defaultThickness
+				},
+				outlineColor: {
+					value: defaultColor
+				},
+				outlineAlpha: {
+					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
+				'	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( {
+					type: 'OutlineEffect',
+					uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ 'fog' ], THREE.UniformsLib[ 'displacementmap' ], uniformsOutline ] ),
+					vertexShader: vertexShader,
+					fragmentShader: fragmentShader,
+					side: THREE.BackSide
+				} );
+
+			}
+
+			function getOutlineMaterialFromCache( originalMaterial ) {
+
+				let data = cache[ originalMaterial.uuid ];
+
+				if ( data === undefined ) {
+
+					data = {
+						material: createMaterial(),
+						used: true,
+						keepAlive: defaultKeepAlive,
+						count: 0
+					};
+					cache[ originalMaterial.uuid ] = data;
+
+				}
+
+				data.used = true;
+				return data.material;
+
+			}
+
+			function getOutlineMaterial( originalMaterial ) {
+
+				const outlineMaterial = getOutlineMaterialFromCache( originalMaterial );
+				originalMaterials[ outlineMaterial.uuid ] = originalMaterial;
+				updateOutlineMaterial( outlineMaterial, originalMaterial );
+				return outlineMaterial;
+
+			}
+
+			function isCompatible( object ) {
+
+				const geometry = object.geometry;
+				let hasNormals = false;
+
+				if ( object.geometry !== undefined ) {
+
+					if ( geometry.isBufferGeometry ) {
+
+						hasNormals = geometry.attributes.normal !== undefined;
+
+					} else {
+
+						hasNormals = true; // the renderer always produces a normal attribute for Geometry
+
+					}
+
+				}
+
+				return object.isMesh === true && object.material !== undefined && hasNormals === true;
+
+			}
+
+			function setOutlineMaterial( object ) {
+
+				if ( isCompatible( object ) === false ) return;
+
+				if ( Array.isArray( object.material ) ) {
+
+					for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+						object.material[ i ] = getOutlineMaterial( object.material[ i ] );
+
+					}
+
+				} else {
+
+					object.material = getOutlineMaterial( object.material );
+
+				}
+
+				originalOnBeforeRenders[ object.uuid ] = object.onBeforeRender;
+				object.onBeforeRender = onBeforeRender;
+
+			}
+
+			function restoreOriginalMaterial( object ) {
+
+				if ( isCompatible( object ) === false ) return;
+
+				if ( Array.isArray( object.material ) ) {
+
+					for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+						object.material[ i ] = originalMaterials[ object.material[ i ].uuid ];
+
+					}
+
+				} else {
+
+					object.material = originalMaterials[ object.material.uuid ];
+
+				}
+
+				object.onBeforeRender = originalOnBeforeRenders[ object.uuid ];
+
+			}
+
+			function onBeforeRender( renderer, scene, camera, geometry, material ) {
+
+				const originalMaterial = originalMaterials[ material.uuid ]; // just in case
+
+				if ( originalMaterial === undefined ) return;
+				updateUniforms( material, originalMaterial );
+
+			}
+
+			function updateUniforms( material, originalMaterial ) {
+
+				const outlineParameters = originalMaterial.userData.outlineParameters;
+				material.uniforms.outlineAlpha.value = originalMaterial.opacity;
+
+				if ( outlineParameters !== undefined ) {
+
+					if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness;
+					if ( outlineParameters.color !== undefined ) material.uniforms.outlineColor.value.fromArray( outlineParameters.color );
+					if ( outlineParameters.alpha !== undefined ) material.uniforms.outlineAlpha.value = outlineParameters.alpha;
+
+				}
+
+				if ( originalMaterial.displacementMap ) {
+
+					material.uniforms.displacementMap.value = originalMaterial.displacementMap;
+					material.uniforms.displacementScale.value = originalMaterial.displacementScale;
+					material.uniforms.displacementBias.value = originalMaterial.displacementBias;
+
+				}
+
+			}
+
+			function updateOutlineMaterial( material, originalMaterial ) {
+
+				if ( material.name === 'invisible' ) return;
+				const outlineParameters = originalMaterial.userData.outlineParameters;
+				material.fog = originalMaterial.fog;
+				material.toneMapped = originalMaterial.toneMapped;
+				material.premultipliedAlpha = originalMaterial.premultipliedAlpha;
+				material.displacementMap = originalMaterial.displacementMap;
+
+				if ( outlineParameters !== undefined ) {
+
+					if ( originalMaterial.visible === false ) {
+
+						material.visible = false;
+
+					} else {
+
+						material.visible = outlineParameters.visible !== undefined ? outlineParameters.visible : true;
+
+					}
+
+					material.transparent = outlineParameters.alpha !== undefined && outlineParameters.alpha < 1.0 ? true : originalMaterial.transparent;
+					if ( outlineParameters.keepAlive !== undefined ) cache[ originalMaterial.uuid ].keepAlive = outlineParameters.keepAlive;
+
+				} else {
+
+					material.transparent = originalMaterial.transparent;
+					material.visible = originalMaterial.visible;
+
+				}
+
+				if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false;
+
+				if ( originalMaterial.clippingPlanes ) {
+
+					material.clipping = true;
+					material.clippingPlanes = originalMaterial.clippingPlanes;
+					material.clipIntersection = originalMaterial.clipIntersection;
+					material.clipShadows = originalMaterial.clipShadows;
+
+				}
+
+				material.version = originalMaterial.version; // update outline material if necessary
+
+			}
+
+			function cleanupCache() {
+
+				let keys; // clear originialMaterials
+
+				keys = Object.keys( originalMaterials );
+
+				for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+					originalMaterials[ keys[ i ] ] = undefined;
+
+				} // 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
+
+
+				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 ];
+
+						}
+
+					} else {
+
+						cache[ key ].used = false;
+						cache[ key ].count = 0;
+
+					}
+
+				}
+
+			}
+
+			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 );
+					return;
+
+				}
+
+				const currentAutoClear = renderer.autoClear;
+				renderer.autoClear = this.autoClear;
+				renderer.render( scene, camera );
+				renderer.autoClear = currentAutoClear;
+				this.renderOutline( scene, camera );
+
+			};
+
+			this.renderOutline = function ( scene, camera ) {
+
+				const currentAutoClear = renderer.autoClear;
+				const currentSceneAutoUpdate = scene.autoUpdate;
+				const currentSceneBackground = scene.background;
+				const currentShadowMapEnabled = renderer.shadowMap.enabled;
+				scene.autoUpdate = false;
+				scene.background = null;
+				renderer.autoClear = false;
+				renderer.shadowMap.enabled = false;
+				scene.traverse( setOutlineMaterial );
+				renderer.render( scene, camera );
+				scene.traverse( restoreOriginalMaterial );
+				cleanupCache();
+				scene.autoUpdate = currentSceneAutoUpdate;
+				scene.background = currentSceneBackground;
+				renderer.autoClear = currentAutoClear;
+				renderer.shadowMap.enabled = currentShadowMapEnabled;
+
+			};
+			/*
+     * See #9918
+     *
+     * The following property copies and wrapper methods enable
+     * OutlineEffect to be called from other *Effect, like
+     *
+     * effect = new StereoEffect( new OutlineEffect( renderer ) );
+     *
+     * function render () {
+     *
+    	 * 	effect.render( scene, camera );
+     *
+     * }
+     */
+
+
+			this.autoClear = renderer.autoClear;
+			this.domElement = renderer.domElement;
+			this.shadowMap = renderer.shadowMap;
+
+			this.clear = function ( color, depth, stencil ) {
+
+				renderer.clear( color, depth, stencil );
+
+			};
+
+			this.getPixelRatio = function () {
+
+				return renderer.getPixelRatio();
+
+			};
+
+			this.setPixelRatio = function ( value ) {
+
+				renderer.setPixelRatio( value );
+
+			};
+
+			this.getSize = function ( target ) {
+
+				return renderer.getSize( target );
+
+			};
+
+			this.setSize = function ( width, height, updateStyle ) {
+
+				renderer.setSize( width, height, updateStyle );
+
+			};
+
+			this.setViewport = function ( x, y, width, height ) {
+
+				renderer.setViewport( x, y, width, height );
+
+			};
+
+			this.setScissor = function ( x, y, width, height ) {
+
+				renderer.setScissor( x, y, width, height );
+
+			};
+
+			this.setScissorTest = function ( boolean ) {
+
+				renderer.setScissorTest( boolean );
+
+			};
+
+			this.setRenderTarget = function ( renderTarget ) {
+
+				renderer.setRenderTarget( renderTarget );
+
+			};
+
+		}
+
+	}
+
+	THREE.OutlineEffect = OutlineEffect;
+
+} )();

HTML/ThreeJS/node_modules/three/examples/js/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,75 @@
+( function () {
+
+	class ParallaxBarrierEffect {
+
+		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': {
+						value: _renderTargetL.texture
+					},
+					'mapRight': {
+						value: _renderTargetR.texture
+					}
+				},
+				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();
+
+				_stereo.update( camera );
+
+				renderer.setRenderTarget( _renderTargetL );
+				renderer.clear();
+				renderer.render( scene, _stereo.cameraL );
+				renderer.setRenderTarget( _renderTargetR );
+				renderer.clear();
+				renderer.render( scene, _stereo.cameraR );
+				renderer.setRenderTarget( null );
+				renderer.render( _scene, _camera );
+
+			};
+
+		}
+
+	}
+
+	THREE.ParallaxBarrierEffect = ParallaxBarrierEffect;
+
+} )();

HTML/ThreeJS/node_modules/three/examples/js/effects/PeppersGhostEffect.js

@@ -0,0 +1,166 @@
+( function () {
+
+	/**
+ * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
+ */
+
+	class PeppersGhostEffect {
+
+		constructor( renderer ) {
+
+			const scope = this;
+			scope.cameraDistance = 15;
+			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(); // Initialization
+
+
+			renderer.autoClear = false;
+
+			this.setSize = function ( width, height ) {
+
+				_halfWidth = width / 2;
+
+				if ( width < height ) {
+
+					_width = width / 3;
+					_height = width / 3;
+
+				} else {
+
+					_width = height / 3;
+					_height = height / 3;
+
+				}
+
+				renderer.setSize( width, height );
+
+			};
+
+			this.render = function ( scene, camera ) {
+
+				scene.updateMatrixWorld();
+				if ( camera.parent === null ) 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 ); // back
+
+
+				_cameraB.position.copy( _position );
+
+				_cameraB.quaternion.copy( _quaternion );
+
+				_cameraB.translateZ( - scope.cameraDistance );
+
+				_cameraB.lookAt( scene.position );
+
+				_cameraB.rotation.z += 180 * ( Math.PI / 180 ); // left
+
+				_cameraL.position.copy( _position );
+
+				_cameraL.quaternion.copy( _quaternion );
+
+				_cameraL.translateX( - scope.cameraDistance );
+
+				_cameraL.lookAt( scene.position );
+
+				_cameraL.rotation.x += 90 * ( Math.PI / 180 ); // 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 );
+
+				} else {
+
+					renderer.render( scene, _cameraF );
+
+				}
+
+				renderer.setScissor( _halfWidth - _width / 2, 0, _width, _height );
+				renderer.setViewport( _halfWidth - _width / 2, 0, _width, _height );
+
+				if ( scope.reflectFromAbove ) {
+
+					renderer.render( scene, _cameraF );
+
+				} else {
+
+					renderer.render( scene, _cameraB );
+
+				}
+
+				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 );
+
+				} else {
+
+					renderer.render( scene, _cameraL );
+
+				}
+
+				renderer.setScissor( _halfWidth + _width / 2, _height, _width, _height );
+				renderer.setViewport( _halfWidth + _width / 2, _height, _width, _height );
+
+				if ( scope.reflectFromAbove ) {
+
+					renderer.render( scene, _cameraL );
+
+				} else {
+
+					renderer.render( scene, _cameraR );
+
+				}
+
+				renderer.setScissorTest( false );
+
+			};
+
+		}
+
+	}
+
+	THREE.PeppersGhostEffect = PeppersGhostEffect;
+
+} )();

HTML/ThreeJS/node_modules/three/examples/js/effects/StereoEffect.js

@@ -0,0 +1,50 @@
+( function () {
+
+	class StereoEffect {
+
+		constructor( renderer ) {
+
+			const _stereo = new THREE.StereoCamera();
+
+			_stereo.aspect = 0.5;
+			const size = new THREE.Vector2();
+
+			this.setEyeSeparation = function ( eyeSep ) {
+
+				_stereo.eyeSep = eyeSep;
+
+			};
+
+			this.setSize = function ( width, height ) {
+
+				renderer.setSize( width, height );
+
+			};
+
+			this.render = function ( scene, camera ) {
+
+				scene.updateMatrixWorld();
+				if ( camera.parent === null ) camera.updateMatrixWorld();
+
+				_stereo.update( camera );
+
+				renderer.getSize( size );
+				if ( renderer.autoClear ) renderer.clear();
+				renderer.setScissorTest( true );
+				renderer.setScissor( 0, 0, size.width / 2, size.height );
+				renderer.setViewport( 0, 0, size.width / 2, size.height );
+				renderer.render( scene, _stereo.cameraL );
+				renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+				renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+				renderer.render( scene, _stereo.cameraR );
+				renderer.setScissorTest( false );
+
+			};
+
+		}
+
+	}
+
+	THREE.StereoEffect = StereoEffect;
+
+} )();