@needle-tools/three 0.146.10 → 0.153.0

package/examples/js/effects/AsciiEffect.js

@@ -1,260 +0,0 @@
-( 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 fResolution = options[ 'resolution' ] || 0.15; // Higher for more details
-			const iScale = options[ 'scale' ] || 1;
-			const bColor = options[ 'color' ] || false; // nice but slows down rendering!
-			const bAlpha = options[ 'alpha' ] || false; // Transparency
-			const bBlock = options[ 'block' ] || false; // blocked characters. like good O dos
-			const bInvert = options[ 'invert' ] || false; // black is white, white is black
-			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;
-			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;
-
-			// 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;
-
-} )();

package/examples/js/effects/OutlineEffect.js

@@ -1,450 +0,0 @@
-( 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 ) {
-
-				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.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;
-
-			};
-
-			/*
-     * 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;
-
-} )();