main repo

node_modules/three/examples/jsm/effects/AnaglyphEffect.js

@@ -0,0 +1,179 @@
+import {
+	LinearFilter,
+	Matrix3,
+	NearestFilter,
+	RGBAFormat,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
+
+/**
+ * A class that creates an anaglyph effect.
+ *
+ * Note that this class can only be used with {@link WebGLRenderer}.
+ * When using {@link WebGPURenderer}, use {@link AnaglyphPassNode}.
+ *
+ * @three_import import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
+ */
+class AnaglyphEffect {
+
+	/**
+	 * Constructs a new anaglyph effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {number} width - The width of the effect in physical pixels.
+	 * @param {number} height - The height of the effect in physical pixels.
+	 */
+	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 Matrix3().fromArray( [
+			0.456100, - 0.0400822, - 0.0152161,
+			0.500484, - 0.0378246, - 0.0205971,
+			0.176381, - 0.0157589, - 0.00546856
+		] );
+
+		this.colorMatrixRight = new Matrix3().fromArray( [
+			- 0.0434706, 0.378476, - 0.0721527,
+			- 0.0879388, 0.73364, - 0.112961,
+			- 0.00155529, - 0.0184503, 1.2264
+		] );
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( width, height, _params );
+		const _renderTargetR = new WebGLRenderTarget( width, height, _params );
+
+		const _material = new 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;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	vec4 colorL = texture2D( mapLeft, uv );',
+				'	vec4 colorR = texture2D( mapRight, uv );',
+
+				'	vec3 color = clamp(',
+				'			colorMatrixLeft * colorL.rgb +',
+				'			colorMatrixRight * colorR.rgb, 0., 1. );',
+
+				'	gl_FragColor = vec4(',
+				'			color.r, color.g, color.b,',
+				'			max( colorL.a, colorR.a ) );',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _quad = new FullScreenQuad( _material );
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} width - The width of the effect in logical pixels.
+		 * @param {number} height - The height of the effect in logical pixels.
+		 */
+		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 );
+
+		};
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			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 );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		/**
+		 * Frees internal resources. This method should be called
+		 * when the effect is no longer required.
+		 */
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
+
+		};
+
+	}
+
+}
+
+export { AnaglyphEffect };

node_modules/three/examples/jsm/effects/AsciiEffect.js

@@ -0,0 +1,310 @@
+/**
+ * A class that creates an ASCII effect.
+ *
+ * The ASCII generation is based on [jsascii]{@link https://github.com/hassadee/jsascii/blob/master/jsascii.js}.
+ *
+ * @three_import import { AsciiEffect } from 'three/addons/effects/AsciiEffect.js';
+ */
+class AsciiEffect {
+
+	/**
+	 * Constructs a new ASCII effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {string} [charSet=' .:-=+*#%@'] - The char set.
+	 * @param {AsciiEffect~Options} [options] - The configuration parameter.
+	 */
+	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 fResolution = options[ 'resolution' ] || 0.15;
+		const iScale = options[ 'scale' ] || 1;
+		const bColor = options[ 'color' ] || false;
+		const bAlpha = options[ 'alpha' ] || false;
+		const bBlock = options[ 'block' ] || false;
+		const bInvert = options[ 'invert' ] || false;
+		const strResolution = options[ '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;
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} w - The width of the effect in logical pixels.
+		 * @param {number} h - The height of the effect in logical pixels.
+		 */
+		this.setSize = function ( w, h ) {
+
+			width = w;
+			height = h;
+
+			renderer.setSize( w, h );
+
+			initAsciiSize();
+
+		};
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			renderer.render( scene, camera );
+			asciifyImage( oAscii );
+
+		};
+
+		/**
+		 * The DOM element of the effect. This element must be used instead of the
+		 * default {@link WebGLRenderer#domElement}.
+		 *
+		 * @type {HTMLDivElement}
+		 */
+		this.domElement = domElement;
+
+
+		// Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
+
+		function initAsciiSize() {
+
+			iWidth = Math.floor( width * fResolution );
+			iHeight = Math.floor( 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.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 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;
+		if ( charSet ) {
+
+			aCharList = ( charSet ).split( '' );
+
+		} else {
+
+			const aDefaultCharList = ( ' .,:;i1tfLCG08@' ).split( '' );
+			const aDefaultColorCharList = ( ' CGO08@' ).split( '' );
+			aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
+
+		}
+
+
+		// 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 style="display:block;width:${width}px;height:${height}px;overflow:hidden">${strChars}</td></tr>`;
+
+			// console.timeEnd('rendering');
+
+			// return oAscii;
+
+		}
+
+	}
+
+}
+
+/**
+ * This type represents configuration settings of `AsciiEffect`.
+ *
+ * @typedef {Object} AsciiEffect~Options
+ * @property {number} [resolution=0.15] - A higher value leads to more details.
+ * @property {number} [scale=1] - The scale of the effect.
+ * @property {boolean} [color=false] - Whether colors should be enabled or not. Better quality but slows down rendering.
+ * @property {boolean} [alpha=false] - Whether transparency should be enabled or not.
+ * @property {boolean} [block=false] - Whether blocked characters should be enabled or not.
+ * @property {boolean} [invert=false] - Whether colors should be inverted or not.
+ * @property {('low'|'medium'|'high')} [strResolution='low'] - The string resolution.
+ **/
+
+export { AsciiEffect };

node_modules/three/examples/jsm/effects/OutlineEffect.js

@@ -0,0 +1,489 @@
+import {
+	BackSide,
+	Color,
+	ShaderMaterial,
+	UniformsLib,
+	UniformsUtils
+} from 'three';
+
+/**
+ * An outline effect for toon shaders.
+ *
+ * Note that this class can only be used with {@link WebGLRenderer}.
+ * When using {@link WebGPURenderer}, use {@link ToonOutlinePassNode}.
+ *
+ * ```js
+ * const effect = new OutlineEffect( renderer );
+ *
+ * function render() {
+ *
+ * 	effect.render( scene, camera );
+ *
+ * }
+ * ```
+ *
+ * @three_import import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js';
+ */
+class OutlineEffect {
+
+	/**
+	 * Constructs a new outline effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {OutlineEffect~Options} [parameters] - The configuration parameter.
+	 */
+	constructor( renderer, parameters = {} ) {
+
+		this.enabled = true;
+
+		const defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
+		const defaultColor = new 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 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 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 <colorspace_fragment>',
+			'	#include <fog_fragment>',
+			'	#include <premultiplied_alpha_fragment>',
+
+			'}'
+
+		].join( '\n' );
+
+		function createMaterial() {
+
+			return new ShaderMaterial( {
+				type: 'OutlineEffect',
+				uniforms: UniformsUtils.merge( [
+					UniformsLib[ 'fog' ],
+					UniformsLib[ 'displacementmap' ],
+					uniformsOutline
+				] ),
+				vertexShader: vertexShader,
+				fragmentShader: fragmentShader,
+				side: 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;
+			const hasNormals = ( geometry !== undefined ) && ( geometry.attributes.normal !== undefined );
+
+			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 originalMaterials
+			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;
+
+				}
+
+			}
+
+		}
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			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 method can be used to render outlines in VR.
+		 *
+		 * ```js
+		 * 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 );
+		 * }
+		 * ```
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.renderOutline = function ( scene, camera ) {
+
+			const currentAutoClear = renderer.autoClear;
+			const currentSceneAutoUpdate = scene.matrixWorldAutoUpdate;
+			const currentSceneBackground = scene.background;
+			const currentShadowMapEnabled = renderer.shadowMap.enabled;
+
+			scene.matrixWorldAutoUpdate = false;
+			scene.background = null;
+			renderer.autoClear = false;
+			renderer.shadowMap.enabled = false;
+
+			scene.traverse( setOutlineMaterial );
+
+			renderer.render( scene, camera );
+
+			scene.traverse( restoreOriginalMaterial );
+
+			cleanupCache();
+
+			scene.matrixWorldAutoUpdate = currentSceneAutoUpdate;
+			scene.background = currentSceneBackground;
+			renderer.autoClear = currentAutoClear;
+			renderer.shadowMap.enabled = currentShadowMapEnabled;
+
+		};
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} width - The width of the effect in logical pixels.
+		 * @param {number} height - The height of the effect in logical pixels.
+		 */
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+	}
+
+}
+
+/**
+ * This type represents configuration settings of `OutlineEffect`.
+ *
+ * @typedef {Object} OutlineEffect~Options
+ * @property {number} [defaultThickness=0.003] - The outline thickness.
+ * @property {Array<number>} [defaultColor=[0,0,0]] - The outline color.
+ * @property {number} [defaultAlpha=1] - The outline alpha value.
+ * @property {boolean} [defaultKeepAlive=false] - Whether to keep alive cached internal materials or not.
+ **/
+
+
+export { OutlineEffect };

node_modules/three/examples/jsm/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,155 @@
+import {
+	LinearFilter,
+	NearestFilter,
+	RGBAFormat,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
+
+/**
+ * A class that creates an parallax barrier effect.
+ *
+ * Note that this class can only be used with {@link WebGLRenderer}.
+ * When using {@link WebGPURenderer}, use {@link ParallaxBarrierPassNode}.
+ *
+ * @three_import import { ParallaxBarrierEffect } from 'three/addons/effects/ParallaxBarrierEffect.js';
+ */
+class ParallaxBarrierEffect {
+
+	/**
+	 * Constructs a new parallax barrier effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 */
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
+		const _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
+
+		const _material = new 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 );',
+
+				'	}',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _quad = new FullScreenQuad( _material );
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} width - The width of the effect in logical pixels.
+		 * @param {number} height - The height of the effect in logical pixels.
+		 */
+		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 );
+
+		};
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			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 );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		/**
+		 * Frees internal resources. This method should be called
+		 * when the effect is no longer required.
+		 */
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
+
+		};
+
+	}
+
+}
+
+export { ParallaxBarrierEffect };

node_modules/three/examples/jsm/effects/StereoEffect.js

@@ -0,0 +1,91 @@
+import {
+	StereoCamera,
+	Vector2
+} from 'three';
+
+/**
+ * A class that creates an stereo effect.
+ *
+ * Note that this class can only be used with {@link WebGLRenderer}.
+ * When using {@link WebGPURenderer}, use {@link StereoPassNode}.
+ *
+ * @three_import import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
+ */
+class StereoEffect {
+
+	/**
+	 * Constructs a new stereo effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 */
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+		_stereo.aspect = 0.5;
+		const size = new Vector2();
+
+		/**
+		 * Sets the given eye separation.
+		 *
+		 * @param {number} eyeSep - The eye separation to set.
+		 */
+		this.setEyeSeparation = function ( eyeSep ) {
+
+			_stereo.eyeSep = eyeSep;
+
+		};
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} width - The width of the effect in logical pixels.
+		 * @param {number} height - The height of the effect in logical pixels.
+		 */
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			const currentAutoClear = renderer.autoClear;
+			renderer.getSize( size );
+
+			renderer.autoClear = false;
+			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 );
+
+			renderer.autoClear = currentAutoClear;
+
+		};
+
+	}
+
+}
+
+export { StereoEffect };