easy-three-utils 0.0.1

package/src/tileRenderer/plugins/three/TileCompressionPlugin.js

@@ -0,0 +1,223 @@
+import { Vector3, LinearFilter, BufferAttribute, MathUtils } from 'three';
+
+const _vec = new Vector3();
+function compressAttribute( attribute, arrayType ) {
+
+	if ( attribute.isInterleavedBufferAttribute || attribute.array instanceof arrayType ) {
+
+		return attribute;
+
+	}
+
+	const signed = arrayType === Int8Array || arrayType === Int16Array || arrayType === Int32Array;
+	const minValue = signed ? - 1 : 0;
+
+	const array = new arrayType( attribute.count * attribute.itemSize );
+	const newAttribute = new BufferAttribute( array, attribute.itemSize, true );
+	const itemSize = attribute.itemSize;
+	const count = attribute.count;
+	for ( let i = 0; i < count; i ++ ) {
+
+		for ( let j = 0; j < itemSize; j ++ ) {
+
+			const v = MathUtils.clamp( attribute.getComponent( i, j ), minValue, 1 );
+			newAttribute.setComponent( i, j, v );
+
+		}
+
+	}
+
+	return newAttribute;
+
+}
+
+function compressPositionAttribute( mesh, arrayType = Int16Array ) {
+
+	const geometry = mesh.geometry;
+	const attributes = geometry.attributes;
+	const attribute = attributes.position;
+
+	// skip if it's already compressed to the provided level
+	if ( attribute.isInterleavedBufferAttribute || attribute.array instanceof arrayType ) {
+
+		return attribute;
+
+	}
+
+	// new attribute data
+	const array = new arrayType( attribute.count * attribute.itemSize );
+	const newAttribute = new BufferAttribute( array, attribute.itemSize, false );
+	const itemSize = attribute.itemSize;
+	const count = attribute.count;
+
+	// bounding box stride
+	// TODO: the bounding box is computed every time even if it already exists because
+	// it's possible that the encoded value is incorrect causing artifacts
+	geometry.computeBoundingBox();
+
+	const boundingBox = geometry.boundingBox;
+	const { min, max } = boundingBox;
+
+	// array range
+	const maxValue = 2 ** ( 8 * arrayType.BYTES_PER_ELEMENT - 1 ) - 1;
+	const minValue = - maxValue;
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		for ( let j = 0; j < itemSize; j ++ ) {
+
+			const key = j === 0 ? 'x' : j === 1 ? 'y' : 'z';
+			const bbMinValue = min[ key ];
+			const bbMaxValue = max[ key ];
+
+			// scale the geometry values to the integer range
+			const v = MathUtils.mapLinear(
+				attribute.getComponent( i, j ),
+				bbMinValue, bbMaxValue,
+				minValue, maxValue,
+			);
+
+			newAttribute.setComponent( i, j, v );
+
+		}
+
+	}
+
+	// shift the mesh to the center of the bounds
+	boundingBox.getCenter( _vec );
+	mesh.position.add( _vec );
+
+	// adjust the scale to accommodate the new geometry data range
+	mesh.scale.x *= 0.5 * ( max.x - min.x ) / maxValue;
+	mesh.scale.y *= 0.5 * ( max.y - min.y ) / maxValue;
+	mesh.scale.z *= 0.5 * ( max.z - min.z ) / maxValue;
+
+	attributes.position = newAttribute;
+	mesh.geometry.boundingBox = null;
+	mesh.geometry.boundingSphere = null;
+
+	mesh.updateMatrixWorld();
+
+}
+
+export class TileCompressionPlugin {
+
+	constructor( options ) {
+
+		this._options = {
+			// whether to generate normals if they don't already exist.
+			generateNormals: false,
+
+			// whether to disable use of mipmaps since they are typically not necessary
+			// with something like 3d tiles.
+			disableMipmaps: true,
+
+			// whether to compress certain attributes
+			compressIndex: true,
+			compressNormals: true,
+			compressUvs: true,
+			compressPosition: false,
+
+			// the TypedArray type to use when compressing the attributes
+			uvType: Int8Array,
+			normalType: Int8Array,
+			positionType: Int16Array,
+
+			...options,
+		};
+
+	}
+
+	processTileModel( scene, tile ) {
+
+		const {
+			generateNormals,
+
+			disableMipmaps,
+			compressIndex,
+			compressUvs,
+			compressNormals,
+			compressPosition,
+
+			uvType,
+			normalType,
+			positionType,
+		} = this._options;
+
+		scene.traverse( c => {
+
+			// handle materials
+			if ( c.material && disableMipmaps ) {
+
+				const material = c.material;
+				for ( const key in material ) {
+
+					const value = material[ key ];
+					if ( value && value.isTexture && value.generateMipmaps ) {
+
+						value.generateMipmaps = false;
+						value.minFilter = LinearFilter;
+
+					}
+
+				}
+
+			}
+
+			// handle geometry attribute compression
+			if ( c.geometry ) {
+
+				const geometry = c.geometry;
+				const attributes = geometry.attributes;
+				if ( compressUvs ) {
+
+					const { uv, uv1, uv2, uv3 } = attributes;
+					if ( uv ) attributes.uv = compressAttribute( uv, uvType );
+					if ( uv1 ) attributes.uv1 = compressAttribute( uv1, uvType );
+					if ( uv2 ) attributes.uv2 = compressAttribute( uv2, uvType );
+					if ( uv3 ) attributes.uv3 = compressAttribute( uv3, uvType );
+
+				}
+
+				if ( generateNormals && ! attributes.normals ) {
+
+					geometry.computeVertexNormals();
+
+				}
+
+				if ( compressNormals && attributes.normals ) {
+
+					attributes.normals = compressAttribute( attributes.normals, normalType );
+
+				}
+
+				if ( compressPosition ) {
+
+					compressPositionAttribute( c, positionType );
+
+				}
+
+				if ( compressIndex && geometry.index ) {
+
+					const vertCount = attributes.position.count;
+					const index = geometry.index;
+					const type = vertCount > 65535 ? Uint32Array : vertCount > 255 ? Uint16Array : Uint8Array;
+					if ( ! ( index.array instanceof type ) ) {
+
+						const array = new type( geometry.index.count );
+						array.set( index.array );
+
+						const attribute = new BufferAttribute( array, 1 );
+						geometry.setIndex( attribute );
+
+					}
+
+				}
+
+			}
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/plugins/three/UpdateOnChangePlugin.d.ts

@@ -0,0 +1,5 @@
+export class UpdateOnChangePlugin {
+
+	constructor();
+
+}

package/src/tileRenderer/plugins/three/UpdateOnChangePlugin.js

@@ -0,0 +1,87 @@
+import { Matrix4 } from 'three';
+
+const _matrix = new Matrix4();
+export class UpdateOnChangePlugin {
+
+	constructor() {
+
+		this.name = 'UPDATE_ON_CHANGE_PLUGIN';
+		this.tiles = null;
+		this.needsUpdate = false;
+		this.cameraMatrices = new Map();
+
+	}
+
+	init( tiles ) {
+
+		this.tiles = tiles;
+
+		// register callbacks to add cameras and force a new update
+		this._needsUpdateCallback = () => {
+
+			this.needsUpdate = true;
+
+		};
+		this._onCameraAdd = ( { camera } ) => {
+
+			this.needsUpdate = true;
+			this.cameraMatrices.set( camera, new Matrix4() );
+
+		};
+		this._onCameraDelete = ( { camera } ) => {
+
+			this.needsUpdate = true;
+			this.cameraMatrices.delete( camera );
+
+		};
+
+		tiles.addEventListener( 'camera-resolution-change', this._needsUpdateCallback );
+		tiles.addEventListener( 'load-content', this._needsUpdateCallback );
+		tiles.addEventListener( 'add-camera', this._onCameraAdd );
+		tiles.addEventListener( 'delete-camera', this._onCameraDelete );
+
+		// register any already-present cameras
+		tiles.cameras.forEach( camera => {
+
+			this._onCameraAdd( { camera } );
+
+		} );
+
+	}
+
+	doTilesNeedUpdate() {
+
+		const tiles = this.tiles;
+		let didCamerasChange = false;
+		this.cameraMatrices.forEach( ( matrix, camera ) => {
+
+			// check if the camera position or frustum changed by comparing the MVP
+			// matrix between frames
+			_matrix
+				.copy( tiles.group.matrixWorld )
+				.premultiply( camera.matrixWorldInverse )
+				.premultiply( camera.projectionMatrixInverse );
+
+			didCamerasChange = didCamerasChange || ! _matrix.equals( matrix );
+			matrix.copy( _matrix );
+
+		} );
+
+		const needsUpdate = this.needsUpdate;
+		this.needsUpdate = false;
+
+		return needsUpdate || didCamerasChange;
+
+	}
+
+	dispose() {
+
+		const tiles = this.tiles;
+		tiles.removeEventListener( 'camera-resolution-change', this._needsUpdateCallback );
+		tiles.removeEventListener( 'content-load', this._needsUpdateCallback );
+		tiles.removeEventListener( 'camera-add', this._onCameraAdd );
+		tiles.removeEventListener( 'camera-delete', this._onCameraDelete );
+
+	}
+
+}

package/src/tileRenderer/plugins/three/fade/FadeManager.js

@@ -0,0 +1,370 @@
+import { MathUtils } from 'three';
+
+const { clamp } = MathUtils;
+export class FadeManager {
+
+	constructor() {
+
+		this.duration = 250;
+		this.fadeCount = 0;
+		this._lastTick = - 1;
+		this._fadeState = new Map();
+		this._fadeParams = new WeakMap();
+		this.onFadeComplete = null;
+		this.onFadeStart = null;
+		this.onFadeSetComplete = null;
+		this.onFadeSetStart = null;
+
+	}
+
+	// initialize materials in the object
+	prepareObject( object ) {
+
+		object.traverse( child => {
+
+			if ( child.material ) {
+
+				this.prepareMaterial( child.material );
+
+			}
+
+		} );
+
+	}
+
+	// delete the object from the fade, reset the material data
+	deleteObject( object ) {
+
+		if ( ! object ) {
+
+			return;
+
+		}
+
+		this.completeFade( object );
+
+		const fadeParams = this._fadeParams;
+		object.traverse( child => {
+
+			const material = child.material;
+			if ( material ) {
+
+				fadeParams.delete( material );
+				material.onBeforeCompile = () => {};
+				material.needsUpdate = true;
+
+			}
+
+		} );
+
+	}
+
+	// initialize the material
+	prepareMaterial( material ) {
+
+		const fadeParams = this._fadeParams;
+		if ( fadeParams.has( material ) ) {
+
+			return;
+
+		}
+
+		const params = {
+			fadeIn: { value: 0 },
+			fadeOut: { value: 0 },
+		};
+
+		material.defines = {
+			FEATURE_FADE: 0,
+		};
+
+		material.onBeforeCompile = shader => {
+
+			shader.uniforms = {
+				...shader.uniforms,
+				...params,
+			};
+
+			shader.fragmentShader = shader.fragmentShader
+				.replace( /void main\(/, value => /* glsl */`
+					#if FEATURE_FADE
+
+					// adapted from https://www.shadertoy.com/view/Mlt3z8
+					float bayerDither2x2( vec2 v ) {
+
+						return mod( 3.0 * v.y + 2.0 * v.x, 4.0 );
+
+					}
+
+					float bayerDither4x4( vec2 v ) {
+
+						vec2 P1 = mod( v, 2.0 );
+						vec2 P2 = floor( 0.5 * mod( v, 4.0 ) );
+						return 4.0 * bayerDither2x2( P1 ) + bayerDither2x2( P2 );
+
+					}
+
+					uniform float fadeIn;
+					uniform float fadeOut;
+					#endif
+
+					${ value }
+				` )
+				.replace( /#include <dithering_fragment>/, value => /* glsl */`
+
+					${ value }
+
+					#if FEATURE_FADE
+
+					float bayerValue = bayerDither4x4( floor( mod( gl_FragCoord.xy, 4.0 ) ) );
+					float bayerBins = 16.0;
+					float dither = ( 0.5 + bayerValue ) / bayerBins;
+					if ( dither >= fadeIn ) {
+
+						discard;
+
+					}
+
+					if ( dither < fadeOut ) {
+
+						discard;
+
+					}
+
+					#endif
+
+				` );
+
+
+		};
+
+		fadeParams.set( material, params );
+
+	}
+
+	// Ensure we're storing a fade timer for the provided object
+	// Returns whether a new state had to be added
+	guaranteeState( object ) {
+
+		const fadeState = this._fadeState;
+		if ( fadeState.has( object ) ) {
+
+			return false;
+
+		}
+
+		const state = {
+			fadeInTarget: 0,
+			fadeOutTarget: 0,
+			fadeIn: 0,
+			fadeOut: 0,
+		};
+
+		fadeState.set( object, state );
+
+		const fadeParams = this._fadeParams;
+		object.traverse( child => {
+
+			const material = child.material;
+			if ( material && fadeParams.has( material ) ) {
+
+				const params = fadeParams.get( material );
+				params.fadeIn.value = 0;
+				params.fadeOut.value = 0;
+
+			}
+
+		} );
+
+		return true;
+
+	}
+
+	// Force the fade to complete in the direction it is already trending
+	completeFade( object ) {
+
+		const fadeState = this._fadeState;
+		if ( ! fadeState.has( object ) ) return;
+
+		fadeState.delete( object );
+		object.traverse( child => {
+
+			const material = child.material;
+			if ( material && material.defines.FEATURE_FADE !== 0 ) {
+
+				material.defines.FEATURE_FADE = 0;
+				material.needsUpdate = true;
+
+			}
+
+		} );
+
+		// fire events
+		this.fadeCount --;
+
+		if ( this.onFadeComplete ) {
+
+			this.onFadeComplete( object );
+
+		}
+
+		if ( this.fadeCount === 0 && this.onFadeSetComplete ) {
+
+			this.onFadeSetComplete();
+
+		}
+
+	}
+
+	completeAllFades() {
+
+		this._fadeState.forEach( ( value, key ) => {
+
+			this.completeFade( key );
+
+		} );
+
+	}
+
+	forEachObject( cb ) {
+
+		this._fadeState.forEach( ( info, scene ) => cb( scene ) );
+
+	}
+
+	// Fade the object in
+	fadeIn( object ) {
+
+		const noState = this.guaranteeState( object );
+		const state = this._fadeState.get( object );
+		state.fadeInTarget = 1;
+		state.fadeOutTarget = 0;
+		state.fadeOut = 0;
+
+		// Fire events
+		if ( noState ) {
+
+			this.fadeCount ++;
+			if ( this.fadeCount === 1 && this.onFadeSetStart ) {
+
+				this.onFadeSetStart();
+
+			}
+
+			if ( this.onFadeStart ) {
+
+				this.onFadeStart( object );
+
+			}
+
+		}
+
+	}
+
+	// Fade the object out
+	fadeOut( object ) {
+
+		const noState = this.guaranteeState( object );
+		const state = this._fadeState.get( object );
+		state.fadeOutTarget = 1;
+
+		// Fire events and initialize state
+		if ( noState ) {
+
+			state.fadeInTarget = 1;
+			state.fadeIn = 1;
+
+			this.fadeCount ++;
+			if ( this.fadeCount === 1 && this.onFadeSetStart ) {
+
+				this.onFadeSetStart();
+
+			}
+
+			if ( this.onFadeStart ) {
+
+				this.onFadeStart( object );
+
+			}
+
+		}
+
+	}
+
+	// Tick the fade timer for each actively fading object
+	update() {
+
+		// clamp delta in case duration is really small or 0
+		const time = window.performance.now();
+		if ( this._lastTick === - 1 ) {
+
+			this._lastTick = time;
+
+		}
+
+		const delta = clamp( ( time - this._lastTick ) / this.duration, 0, 1 );
+		this._lastTick = time;
+
+		const fadeState = this._fadeState;
+		const fadeParams = this._fadeParams;
+		fadeState.forEach( ( state, object ) => {
+
+			// tick the fade values
+			const {
+				fadeOutTarget,
+				fadeInTarget,
+			} = state;
+
+			let {
+				fadeOut,
+				fadeIn,
+			} = state;
+
+			const fadeInSign = Math.sign( fadeInTarget - fadeIn );
+			fadeIn = clamp( fadeIn + fadeInSign * delta, 0, 1 );
+
+			const fadeOutSign = Math.sign( fadeOutTarget - fadeOut );
+			fadeOut = clamp( fadeOut + fadeOutSign * delta, 0, 1 );
+
+			state.fadeIn = fadeIn;
+			state.fadeOut = fadeOut;
+
+			// update the material fields
+			const defineValue = Number( fadeOut !== fadeOutTarget || fadeIn !== fadeInTarget );
+			object.traverse( child => {
+
+				const material = child.material;
+				if ( material && fadeParams.has( material ) ) {
+
+					const uniforms = fadeParams.get( material );
+					uniforms.fadeIn.value = fadeIn;
+					uniforms.fadeOut.value = fadeOut;
+
+					if ( defineValue !== material.defines.FEATURE_FADE ) {
+
+						material.defines.FEATURE_FADE = defineValue;
+						material.needsUpdate = true;
+
+					}
+
+				}
+
+			} );
+
+			// Check if the fade in and fade out animations are complete
+			const fadeOutComplete = fadeOut === 1 || fadeOut === 0;
+			const fadeInComplete = fadeIn === 1 || fadeIn === 0;
+
+			// If they are or the fade out animation is further along than the
+			// fade in animation then mark the fade as completed for this tile
+			if ( ( fadeOutComplete && fadeInComplete ) || fadeOut >= fadeIn ) {
+
+				this.completeFade( object );
+
+			}
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/plugins/three/fade/TilesFadePlugin.d.ts

@@ -0,0 +1,9 @@
+export class TilesFadePlugin {
+
+	constructor( options: {
+		maximumFadeOutTiles: Number,
+		fadeRootTiles: Boolean,
+		fadeDuration: Number,
+	} );
+
+}