@needle-tools/three 0.145.0

package/examples/js/renderers/SVGRenderer.js

@@ -0,0 +1,537 @@
+( function () {
+
+	class SVGObject extends THREE.Object3D {
+
+		constructor( node ) {
+
+			super();
+			this.isSVGObject = true;
+			this.node = node;
+
+		}
+
+	}
+
+	class SVGRenderer {
+
+		constructor() {
+
+			let _renderData,
+				_elements,
+				_lights,
+				_svgWidth,
+				_svgHeight,
+				_svgWidthHalf,
+				_svgHeightHalf,
+				_v1,
+				_v2,
+				_v3,
+				_svgNode,
+				_pathCount = 0,
+				_precision = null,
+				_quality = 1,
+				_currentPath,
+				_currentStyle;
+
+			const _this = this,
+				_clipBox = new THREE.Box2(),
+				_elemBox = new THREE.Box2(),
+				_color = new THREE.Color(),
+				_diffuseColor = new THREE.Color(),
+				_ambientLight = new THREE.Color(),
+				_directionalLights = new THREE.Color(),
+				_pointLights = new THREE.Color(),
+				_clearColor = new THREE.Color(),
+				_vector3 = new THREE.Vector3(),
+				// Needed for PointLight
+				_centroid = new THREE.Vector3(),
+				_normal = new THREE.Vector3(),
+				_normalViewMatrix = new THREE.Matrix3(),
+				_viewMatrix = new THREE.Matrix4(),
+				_viewProjectionMatrix = new THREE.Matrix4(),
+				_svgPathPool = [],
+				_projector = new THREE.Projector(),
+				_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+
+			this.domElement = _svg;
+			this.autoClear = true;
+			this.sortObjects = true;
+			this.sortElements = true;
+			this.overdraw = 0.5;
+			this.info = {
+				render: {
+					vertices: 0,
+					faces: 0
+				}
+			};
+
+			this.setQuality = function ( quality ) {
+
+				switch ( quality ) {
+
+					case 'high':
+						_quality = 1;
+						break;
+
+					case 'low':
+						_quality = 0;
+						break;
+
+				}
+
+			};
+
+			this.setClearColor = function ( color ) {
+
+				_clearColor.set( color );
+
+			};
+
+			this.setPixelRatio = function () {};
+
+			this.setSize = function ( width, height ) {
+
+				_svgWidth = width;
+				_svgHeight = height;
+				_svgWidthHalf = _svgWidth / 2;
+				_svgHeightHalf = _svgHeight / 2;
+
+				_svg.setAttribute( 'viewBox', - _svgWidthHalf + ' ' + - _svgHeightHalf + ' ' + _svgWidth + ' ' + _svgHeight );
+
+				_svg.setAttribute( 'width', _svgWidth );
+
+				_svg.setAttribute( 'height', _svgHeight );
+
+				_clipBox.min.set( - _svgWidthHalf, - _svgHeightHalf );
+
+				_clipBox.max.set( _svgWidthHalf, _svgHeightHalf );
+
+			};
+
+			this.getSize = function () {
+
+				return {
+					width: _svgWidth,
+					height: _svgHeight
+				};
+
+			};
+
+			this.setPrecision = function ( precision ) {
+
+				_precision = precision;
+
+			};
+
+			function removeChildNodes() {
+
+				_pathCount = 0;
+
+				while ( _svg.childNodes.length > 0 ) {
+
+					_svg.removeChild( _svg.childNodes[ 0 ] );
+
+				}
+
+			}
+
+			function convert( c ) {
+
+				return _precision !== null ? c.toFixed( _precision ) : c;
+
+			}
+
+			this.clear = function () {
+
+				removeChildNodes();
+				_svg.style.backgroundColor = _clearColor.getStyle();
+
+			};
+
+			this.render = function ( scene, camera ) {
+
+				if ( camera instanceof THREE.Camera === false ) {
+
+					console.error( 'THREE.SVGRenderer.render: camera is not an instance of THREE.Camera.' );
+					return;
+
+				}
+
+				const background = scene.background;
+
+				if ( background && background.isColor ) {
+
+					removeChildNodes();
+					_svg.style.backgroundColor = background.getStyle();
+
+				} else if ( this.autoClear === true ) {
+
+					this.clear();
+
+				}
+
+				_this.info.render.vertices = 0;
+				_this.info.render.faces = 0;
+
+				_viewMatrix.copy( camera.matrixWorldInverse );
+
+				_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
+
+				_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
+				_elements = _renderData.elements;
+				_lights = _renderData.lights;
+
+				_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
+
+				calculateLights( _lights ); // reset accumulated path
+
+				_currentPath = '';
+				_currentStyle = '';
+
+				for ( let e = 0, el = _elements.length; e < el; e ++ ) {
+
+					const element = _elements[ e ];
+					const material = element.material;
+					if ( material === undefined || material.opacity === 0 ) continue;
+
+					_elemBox.makeEmpty();
+
+					if ( element instanceof THREE.RenderableSprite ) {
+
+						_v1 = element;
+						_v1.x *= _svgWidthHalf;
+						_v1.y *= - _svgHeightHalf;
+						renderSprite( _v1, element, material );
+
+					} else if ( element instanceof THREE.RenderableLine ) {
+
+						_v1 = element.v1;
+						_v2 = element.v2;
+						_v1.positionScreen.x *= _svgWidthHalf;
+						_v1.positionScreen.y *= - _svgHeightHalf;
+						_v2.positionScreen.x *= _svgWidthHalf;
+						_v2.positionScreen.y *= - _svgHeightHalf;
+
+						_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+
+						if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+							renderLine( _v1, _v2, material );
+
+						}
+
+					} else if ( element instanceof THREE.RenderableFace ) {
+
+						_v1 = element.v1;
+						_v2 = element.v2;
+						_v3 = element.v3;
+						if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
+						if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
+						if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
+						_v1.positionScreen.x *= _svgWidthHalf;
+						_v1.positionScreen.y *= - _svgHeightHalf;
+						_v2.positionScreen.x *= _svgWidthHalf;
+						_v2.positionScreen.y *= - _svgHeightHalf;
+						_v3.positionScreen.x *= _svgWidthHalf;
+						_v3.positionScreen.y *= - _svgHeightHalf;
+
+						if ( this.overdraw > 0 ) {
+
+							expand( _v1.positionScreen, _v2.positionScreen, this.overdraw );
+							expand( _v2.positionScreen, _v3.positionScreen, this.overdraw );
+							expand( _v3.positionScreen, _v1.positionScreen, this.overdraw );
+
+						}
+
+						_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen, _v3.positionScreen ] );
+
+						if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+							renderFace3( _v1, _v2, _v3, element, material );
+
+						}
+
+					}
+
+				}
+
+				flushPath(); // just to flush last svg:path
+
+				scene.traverseVisible( function ( object ) {
+
+					if ( object.isSVGObject ) {
+
+						_vector3.setFromMatrixPosition( object.matrixWorld );
+
+						_vector3.applyMatrix4( _viewProjectionMatrix );
+
+						if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
+						const x = _vector3.x * _svgWidthHalf;
+						const y = - _vector3.y * _svgHeightHalf;
+						const node = object.node;
+						node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' );
+
+						_svg.appendChild( node );
+
+					}
+
+				} );
+
+			};
+
+			function calculateLights( lights ) {
+
+				_ambientLight.setRGB( 0, 0, 0 );
+
+				_directionalLights.setRGB( 0, 0, 0 );
+
+				_pointLights.setRGB( 0, 0, 0 );
+
+				for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
+
+					const light = lights[ l ];
+					const lightColor = light.color;
+
+					if ( light.isAmbientLight ) {
+
+						_ambientLight.r += lightColor.r;
+						_ambientLight.g += lightColor.g;
+						_ambientLight.b += lightColor.b;
+
+					} else if ( light.isDirectionalLight ) {
+
+						_directionalLights.r += lightColor.r;
+						_directionalLights.g += lightColor.g;
+						_directionalLights.b += lightColor.b;
+
+					} else if ( light.isPointLight ) {
+
+						_pointLights.r += lightColor.r;
+						_pointLights.g += lightColor.g;
+						_pointLights.b += lightColor.b;
+
+					}
+
+				}
+
+			}
+
+			function calculateLight( lights, position, normal, color ) {
+
+				for ( let l = 0, ll = lights.length; l < ll; l ++ ) {
+
+					const light = lights[ l ];
+					const lightColor = light.color;
+
+					if ( light.isDirectionalLight ) {
+
+						const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
+
+						let amount = normal.dot( lightPosition );
+						if ( amount <= 0 ) continue;
+						amount *= light.intensity;
+						color.r += lightColor.r * amount;
+						color.g += lightColor.g * amount;
+						color.b += lightColor.b * amount;
+
+					} else if ( light.isPointLight ) {
+
+						const lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
+
+						let amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
+						if ( amount <= 0 ) continue;
+						amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
+						if ( amount == 0 ) continue;
+						amount *= light.intensity;
+						color.r += lightColor.r * amount;
+						color.g += lightColor.g * amount;
+						color.b += lightColor.b * amount;
+
+					}
+
+				}
+
+			}
+
+			function renderSprite( v1, element, material ) {
+
+				let scaleX = element.scale.x * _svgWidthHalf;
+				let scaleY = element.scale.y * _svgHeightHalf;
+
+				if ( material.isPointsMaterial ) {
+
+					scaleX *= material.size;
+					scaleY *= material.size;
+
+				}
+
+				const path = 'M' + convert( v1.x - scaleX * 0.5 ) + ',' + convert( v1.y - scaleY * 0.5 ) + 'h' + convert( scaleX ) + 'v' + convert( scaleY ) + 'h' + convert( - scaleX ) + 'z';
+				let style = '';
+
+				if ( material.isSpriteMaterial || material.isPointsMaterial ) {
+
+					style = 'fill:' + material.color.getStyle() + ';fill-opacity:' + material.opacity;
+
+				}
+
+				addPath( style, path );
+
+			}
+
+			function renderLine( v1, v2, material ) {
+
+				const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y );
+
+				if ( material.isLineBasicMaterial ) {
+
+					let style = 'fill:none;stroke:' + material.color.getStyle() + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+
+					if ( material.isLineDashedMaterial ) {
+
+						style = style + ';stroke-dasharray:' + material.dashSize + ',' + material.gapSize;
+
+					}
+
+					addPath( style, path );
+
+				}
+
+			}
+
+			function renderFace3( v1, v2, v3, element, material ) {
+
+				_this.info.render.vertices += 3;
+				_this.info.render.faces ++;
+				const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ) + 'L' + convert( v3.positionScreen.x ) + ',' + convert( v3.positionScreen.y ) + 'z';
+				let style = '';
+
+				if ( material.isMeshBasicMaterial ) {
+
+					_color.copy( material.color );
+
+					if ( material.vertexColors ) {
+
+						_color.multiply( element.color );
+
+					}
+
+				} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
+
+					_diffuseColor.copy( material.color );
+
+					if ( material.vertexColors ) {
+
+						_diffuseColor.multiply( element.color );
+
+					}
+
+					_color.copy( _ambientLight );
+
+					_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
+
+					calculateLight( _lights, _centroid, element.normalModel, _color );
+
+					_color.multiply( _diffuseColor ).add( material.emissive );
+
+				} else if ( material.isMeshNormalMaterial ) {
+
+					_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix ).normalize();
+
+					_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
+
+				}
+
+				if ( material.wireframe ) {
+
+					style = 'fill:none;stroke:' + _color.getStyle() + ';stroke-opacity:' + material.opacity + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+
+				} else {
+
+					style = 'fill:' + _color.getStyle() + ';fill-opacity:' + material.opacity;
+
+				}
+
+				addPath( style, path );
+
+			} // Hide anti-alias gaps
+
+
+			function expand( v1, v2, pixels ) {
+
+				let x = v2.x - v1.x,
+					y = v2.y - v1.y;
+				const det = x * x + y * y;
+				if ( det === 0 ) return;
+				const idet = pixels / Math.sqrt( det );
+				x *= idet;
+				y *= idet;
+				v2.x += x;
+				v2.y += y;
+				v1.x -= x;
+				v1.y -= y;
+
+			}
+
+			function addPath( style, path ) {
+
+				if ( _currentStyle === style ) {
+
+					_currentPath += path;
+
+				} else {
+
+					flushPath();
+					_currentStyle = style;
+					_currentPath = path;
+
+				}
+
+			}
+
+			function flushPath() {
+
+				if ( _currentPath ) {
+
+					_svgNode = getPathNode( _pathCount ++ );
+
+					_svgNode.setAttribute( 'd', _currentPath );
+
+					_svgNode.setAttribute( 'style', _currentStyle );
+
+					_svg.appendChild( _svgNode );
+
+				}
+
+				_currentPath = '';
+				_currentStyle = '';
+
+			}
+
+			function getPathNode( id ) {
+
+				if ( _svgPathPool[ id ] == null ) {
+
+					_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+
+					if ( _quality == 0 ) {
+
+						_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
+
+					}
+
+					return _svgPathPool[ id ];
+
+				}
+
+				return _svgPathPool[ id ];
+
+			}
+
+		}
+
+	}
+
+	THREE.SVGObject = SVGObject;
+	THREE.SVGRenderer = SVGRenderer;
+
+} )();

package/examples/js/shaders/ACESFilmicToneMappingShader.js

@@ -0,0 +1,92 @@
+( function () {
+
+	/**
+ * ACES Filmic Tone Mapping Shader by Stephen Hill
+ * source: https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs
+ *
+ * this implementation of ACES is modified to accommodate a brighter viewing environment.
+ * the scale factor of 1/0.6 is subjective. see discussion in #19621.
+ */
+	const ACESFilmicToneMappingShader = {
+		uniforms: {
+			'tDiffuse': {
+				value: null
+			},
+			'exposure': {
+				value: 1.0
+			}
+		},
+		vertexShader:
+  /* glsl */
+  `
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader:
+  /* glsl */
+  `
+
+		#define saturate(a) clamp( a, 0.0, 1.0 )
+
+		uniform sampler2D tDiffuse;
+
+		uniform float exposure;
+
+		varying vec2 vUv;
+
+		vec3 RRTAndODTFit( vec3 v ) {
+
+			vec3 a = v * ( v + 0.0245786 ) - 0.000090537;
+			vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081;
+			return a / b;
+
+		}
+
+		vec3 ACESFilmicToneMapping( vec3 color ) {
+
+		// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
+			const mat3 ACESInputMat = mat3(
+				vec3( 0.59719, 0.07600, 0.02840 ), // transposed from source
+				vec3( 0.35458, 0.90834, 0.13383 ),
+				vec3( 0.04823, 0.01566, 0.83777 )
+			);
+
+		// ODT_SAT => XYZ => D60_2_D65 => sRGB
+			const mat3 ACESOutputMat = mat3(
+				vec3(  1.60475, -0.10208, -0.00327 ), // transposed from source
+				vec3( -0.53108,  1.10813, -0.07276 ),
+				vec3( -0.07367, -0.00605,  1.07602 )
+			);
+
+			color = ACESInputMat * color;
+
+		// Apply RRT and ODT
+			color = RRTAndODTFit( color );
+
+			color = ACESOutputMat * color;
+
+		// Clamp to [0, 1]
+			return saturate( color );
+
+		}
+
+		void main() {
+
+			vec4 tex = texture2D( tDiffuse, vUv );
+
+			tex.rgb *= exposure / 0.6; // pre-exposed, outside of the tone mapping function
+
+			gl_FragColor = vec4( ACESFilmicToneMapping( tex.rgb ), tex.a );
+
+		}`
+	};
+
+	THREE.ACESFilmicToneMappingShader = ACESFilmicToneMappingShader;
+
+} )();

package/examples/js/shaders/AfterimageShader.js

@@ -0,0 +1,63 @@
+( function () {
+
+	/**
+ * Afterimage shader
+ * I created this effect inspired by a demo on codepen:
+ * https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&
+ */
+	const AfterimageShader = {
+		uniforms: {
+			'damp': {
+				value: 0.96
+			},
+			'tOld': {
+				value: null
+			},
+			'tNew': {
+				value: null
+			}
+		},
+		vertexShader:
+  /* glsl */
+  `
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader:
+  /* glsl */
+  `
+
+		uniform float damp;
+
+		uniform sampler2D tOld;
+		uniform sampler2D tNew;
+
+		varying vec2 vUv;
+
+		vec4 when_gt( vec4 x, float y ) {
+
+			return max( sign( x - y ), 0.0 );
+
+		}
+
+		void main() {
+
+			vec4 texelOld = texture2D( tOld, vUv );
+			vec4 texelNew = texture2D( tNew, vUv );
+
+			texelOld *= damp * when_gt( texelOld, 0.1 );
+
+			gl_FragColor = max(texelNew, texelOld);
+
+		}`
+	};
+
+	THREE.AfterimageShader = AfterimageShader;
+
+} )();

package/examples/js/shaders/BasicShader.js

@@ -0,0 +1,30 @@
+( function () {
+
+	/**
+ * Simple test shader
+ */
+	const BasicShader = {
+		uniforms: {},
+		vertexShader:
+  /* glsl */
+  `
+
+		void main() {
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader:
+  /* glsl */
+  `
+
+		void main() {
+
+			gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
+
+		}`
+	};
+
+	THREE.BasicShader = BasicShader;
+
+} )();