easy-three-utils 0.0.1

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

@@ -0,0 +1,318 @@
+import { Group, Matrix4, Vector3, Quaternion } from 'three';
+import { FadeManager } from './FadeManager.js';
+
+const HAS_POPPED_IN = Symbol( 'HAS_POPPED_IN' );
+const _fromPos = new Vector3();
+const _toPos = new Vector3();
+const _fromQuat = new Quaternion();
+const _toQuat = new Quaternion();
+const _scale = new Vector3();
+
+function onTileVisibilityChange( scene, tile, visible ) {
+
+	// ensure the tiles are marked as visible on visibility toggle since
+	// it's possible we disable them when adjusting visibility based on frustum
+	scene.visible = true;
+
+	if ( ! visible ) {
+
+		this._fadeGroup.add( scene );
+		this._fadeManager.fadeOut( scene );
+
+	} else {
+
+		// if this is a root renderable tile and this is the first time rendering in
+		// then pop it in
+		const isRootRenderableTile = tile.__depthFromRenderedParent === 1;
+		if ( isRootRenderableTile ) {
+
+			if ( tile[ HAS_POPPED_IN ] || this.fadeRootTiles ) {
+
+				this._fadeManager.fadeIn( scene );
+
+			}
+
+			tile[ HAS_POPPED_IN ] = true;
+
+
+		} else {
+
+			this._fadeManager.fadeIn( scene );
+
+		}
+
+	}
+
+}
+
+function onLoadModel( scene, tile ) {
+
+	this._fadeManager.prepareObject( scene );
+	this._tileMap.set( scene, tile );
+
+}
+
+function onDisposeModel( scene ) {
+
+	this._fadeManager.deleteObject( scene );
+	this._tileMap.delete( scene );
+
+}
+
+function onFadeComplete( object ) {
+
+	// when the fade finishes ensure we dispose the tile and remove it from the fade group
+	if ( object.parent === this._fadeGroup ) {
+
+		this._fadeGroup.remove( object );
+
+	}
+
+}
+
+function onAddCamera( camera ) {
+
+	this._prevCameraTransforms.set( camera, new Matrix4() );
+
+}
+
+function onDeleteCamera( camera ) {
+
+	this._prevCameraTransforms.delete( camera );
+
+}
+
+function onUpdateBefore() {
+
+	const fadeManager = this._fadeManager;
+	const tiles = this.tiles;
+
+	// store the tiles renderer state before the tiles update so we can check
+	// whether fading started or stopped completely
+	this._fadingBefore = fadeManager.fadeCount;
+	this._displayActiveTiles = tiles.displayActiveTiles;
+
+	// we need to display all active tiles in this case so we don't fade tiles in
+	// when moving from off screen
+	tiles.displayActiveTiles = true;
+
+}
+
+function onUpdateAfter() {
+
+	const fadeManager = this._fadeManager;
+	const fadeGroup = this._fadeGroup;
+	const displayActiveTiles = this._displayActiveTiles;
+	const fadingBefore = this._fadingBefore;
+	const tiles = this.tiles;
+	const prevCameraTransforms = this._prevCameraTransforms;
+	const tileMap = this._tileMap;
+	const lruCache = tiles.lruCache;
+	const cameras = tiles.cameras;
+
+	// reset state
+	tiles.displayActiveTiles = displayActiveTiles;
+
+	// update fades
+	fadeManager.update();
+
+	// fire an event
+	const fadingAfter = fadeManager.fadeCount;
+	if ( fadingBefore !== 0 && fadingAfter !== 0 ) {
+
+		tiles.dispatchEvent( { type: 'fade-change' } );
+		tiles.dispatchEvent( { type: 'force-rerender' } );
+
+	}
+
+	// update the visibility of tiles based on visibility since we must use
+	// the active tiles for rendering fade
+	if ( ! displayActiveTiles ) {
+
+		tiles.visibleTiles.forEach( t => {
+
+			t.cached.scene.visible = t.__inFrustum;
+
+		} );
+
+	}
+
+	if ( this.maximumFadeOutTiles < fadeGroup.children.length ) {
+
+		// determine whether all the rendering cameras are moving
+		// quickly so we can adjust how tiles fade accordingly
+		let isMovingFast = true;
+		cameras.forEach( camera => {
+
+			if ( ! prevCameraTransforms.has( camera ) ) {
+
+				return;
+
+			}
+
+			const currMatrix = camera.matrixWorld;
+			const prevMatrix = prevCameraTransforms.get( camera );
+
+			currMatrix.decompose( _toPos, _toQuat, _scale );
+			prevMatrix.decompose( _fromPos, _fromQuat, _scale );
+
+			const angleTo = _toQuat.angleTo( _fromQuat );
+			const positionTo = _toPos.distanceTo( _fromPos );
+
+			// if rotation is moving > 0.25 radians per frame or position is moving > 0.1 units
+			// then we are considering the camera to be moving too fast to notice a faster / abrupt fade
+			isMovingFast = isMovingFast && ( angleTo > 0.25 || positionTo > 0.1 );
+
+		} );
+
+		if ( isMovingFast ) {
+
+			fadeManager.completeAllFades();
+
+		}
+
+	}
+
+	// track the camera movement so we can use it for next frame
+	cameras.forEach( camera => {
+
+		prevCameraTransforms.get( camera ).copy( camera.matrixWorld );
+
+	} );
+
+	// prevent faded tiles from being unloaded
+	fadeManager.forEachObject( scene => {
+
+		lruCache.markUsed( tileMap.get( scene ) );
+
+	} );
+
+}
+
+export class TilesFadePlugin {
+
+	get fadeDuration() {
+
+		return this._fadeManager.duration;
+
+	}
+
+	set fadeDuration( value ) {
+
+		this._fadeManager.duration = Number( value );
+
+	}
+
+	get fadingTiles() {
+
+		return this._fadeManager.fadeCount;
+
+	}
+
+	constructor( options ) {
+
+		options = {
+
+			maximumFadeOutTiles: 50,
+			fadeRootTiles: false,
+			fadeDuration: 250,
+			...options,
+
+		};
+
+		this.name = 'FADE_TILES_PLUGIN';
+
+		this.tiles = null;
+		this._fadeManager = new FadeManager();
+		this._prevCameraTransforms = null;
+		this._fadeGroup = null;
+		this._tileMap = null;
+
+		this.maximumFadeOutTiles = options.maximumFadeOutTiles;
+		this.fadeRootTiles = options.fadeRootTiles;
+		this.fadeDuration = options.fadeDuration;
+
+	}
+
+	init( tiles ) {
+
+		const fadeGroup = new Group();
+		fadeGroup.name = 'TilesFadeGroup';
+		tiles.group.add( fadeGroup );
+
+		const fadeManager = this._fadeManager;
+		fadeManager.onFadeSetStart = () => {
+
+			tiles.dispatchEvent( { type: 'fade-start' } );
+			tiles.dispatchEvent( { type: 'force-rerender' } );
+
+		};
+
+		fadeManager.onFadeSetComplete = () => {
+
+			tiles.dispatchEvent( { type: 'fade-end' } );
+			tiles.dispatchEvent( { type: 'force-rerender' } );
+
+		};
+
+		fadeManager.onFadeComplete = onFadeComplete.bind( this );
+
+		this.tiles = tiles;
+		this._fadeManager = fadeManager;
+		this._fadeGroup = fadeGroup;
+		this._tileMap = new Map();
+		this._prevCameraTransforms = new Map();
+
+		tiles.cameras.forEach( camera => {
+
+			this._prevCameraTransforms.set( camera, new Matrix4() );
+
+		} );
+
+		tiles.forEachLoadedModel( ( scene, tile ) => {
+
+			onLoadModel.call( this, scene, tile );
+
+		} );
+
+		this._onLoadModel = e => onLoadModel.call( this, e.scene, e.tile );
+		this._onDisposeModel = e => onDisposeModel.call( this, e.scene );
+		this._onTileVisibilityChange = e => onTileVisibilityChange.call( this, e.scene, e.tile, e.visible );
+		this._onAddCamera = e => onAddCamera.call( this, e.camera );
+		this._onDeleteCamera = e => onDeleteCamera.call( this, e.camera );
+		this._onUpdateBefore = () => onUpdateBefore.call( this );
+		this._onUpdateAfter = () => onUpdateAfter.call( this );
+
+		tiles.addEventListener( 'load-model', this._onLoadModel );
+		tiles.addEventListener( 'dispose-model', this._onDisposeModel );
+		tiles.addEventListener( 'tile-visibility-change', this._onTileVisibilityChange );
+		tiles.addEventListener( 'add-camera', this._onAddCamera );
+		tiles.addEventListener( 'delete-camera', this._onDeleteCamera );
+		tiles.addEventListener( 'update-before', this._onUpdateBefore );
+		tiles.addEventListener( 'update-after', this._onUpdateAfter );
+
+	}
+
+	dispose() {
+
+		const tiles = this.tiles;
+		tiles.removeEventListener( 'load-model', this._onLoadModel );
+		tiles.removeEventListener( 'dispose-model', this._onDisposeModel );
+		tiles.removeEventListener( 'tile-visibility-change', this._onTileVisibilityChange );
+		tiles.removeEventListener( 'add-camera', this._onAddCamera );
+		tiles.removeEventListener( 'delete-camera', this._onDeleteCamera );
+		tiles.removeEventListener( 'update-before', this._onUpdateBefore );
+		tiles.removeEventListener( 'update-after', this._onUpdateAfter );
+		tiles.forEachLoadedModel( scene => {
+
+			this._fadeManager.deleteObject( scene );
+			this._tileMap.delete( scene );
+			scene.visible = true;
+
+		} );
+
+		this._fadeGroup.removeFromParent();
+
+	}
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFCesiumRTCExtension.d.ts

@@ -0,0 +1,5 @@
+export class GLTFCesiumRTCExtension {
+
+	name: 'CESIUM_RTC';
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFCesiumRTCExtension.js

@@ -0,0 +1,27 @@
+export class GLTFCesiumRTCExtension {
+
+	constructor() {
+
+		this.name = 'CESIUM_RTC';
+
+	}
+
+	afterRoot( res ) {
+
+		if ( res.parser.json.extensions && res.parser.json.extensions.CESIUM_RTC ) {
+
+			const { center } = res.parser.json.extensions.CESIUM_RTC;
+
+			if ( center ) {
+
+				res.scene.position.x += center[ 0 ];
+				res.scene.position.y += center[ 1 ];
+				res.scene.position.z += center[ 2 ];
+
+			}
+
+		}
+
+	}
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFMeshFeaturesExtension.d.ts

@@ -0,0 +1,30 @@
+import { Vector3 } from 'three';
+
+export class GLTFMeshFeaturesExtension {
+
+	name: 'EXT_mesh_features';
+
+}
+
+export class MeshFeatures {
+
+	getFeatures( triangle: Number, barycoord: Vector3 ): Array<Number>;
+	getFeaturesAsync( triangle: Number, barycoord: Vector3 ): Promise<Array<Number>>;
+	getFeaturesInfo(): Array<{ label: String, propertyTable: Number, nullFeatureId: Number | null }>;
+	dispose(): void;
+
+}
+
+declare module 'three' {
+
+	export interface Object3D {
+
+		userData: {
+
+			meshFeatures?: MeshFeatures;
+
+		}
+
+	}
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFMeshFeaturesExtension.js

@@ -0,0 +1,76 @@
+import { MeshFeatures } from './metadata/classes/MeshFeatures.js';
+
+// https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_mesh_features
+
+const EXT_NAME = 'EXT_mesh_features';
+
+function forEachPrimitiveExtension( scene, parser, callback ) {
+
+	scene.traverse( c => {
+
+		if ( parser.associations.has( c ) ) {
+
+			// check if this object has extension references
+			const { meshes, primitives } = parser.associations.get( c );
+			const primitive = parser.json.meshes[ meshes ].primitives[ primitives ];
+
+			if ( primitive && primitive.extensions && primitive.extensions[ EXT_NAME ] ) {
+
+				callback( c, primitive.extensions[ EXT_NAME ] );
+
+			}
+
+		}
+
+	} );
+
+}
+
+export class GLTFMeshFeaturesExtension {
+
+	constructor( parser ) {
+
+		this.parser = parser;
+		this.name = EXT_NAME;
+
+	}
+
+	async afterRoot( { scene, parser } ) {
+
+		// skip if the extension is not present
+		const extensionsUsed = parser.json.extensionsUsed;
+		if ( ! extensionsUsed || ! extensionsUsed.includes( EXT_NAME ) ) {
+
+			return;
+
+		}
+
+		// get fetch the relevant textures are loaded
+		const textureCount = parser.json.textures?.length || 0;
+		const promises = new Array( textureCount ).fill( null );
+		forEachPrimitiveExtension( scene, parser, ( child, { featureIds } ) => {
+
+			featureIds.forEach( info => {
+
+				if ( info.texture && promises[ info.texture.index ] === null ) {
+
+					const index = info.texture.index;
+					promises[ index ] = parser.loadTexture( index );
+
+				}
+
+			} );
+
+		} );
+
+		// initialize mesh features on each primitive
+		const textures = await Promise.all( promises );
+		forEachPrimitiveExtension( scene, parser, ( child, extension ) => {
+
+			child.userData.meshFeatures = new MeshFeatures( child.geometry, textures, extension );
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFStructuralMetadataExtension.d.ts

@@ -0,0 +1,49 @@
+import { Vector3, Texture } from 'three';
+
+export class GLTFStructuralMetadataExtension {
+
+	name: 'EXT_structural_metadata';
+
+}
+
+class StructuralMetadata {
+
+	textures: Array<Texture | null>;
+
+	getPropertyTableData( tableIndices: Array<Number>, ids: Array<Number>, target: Array = [] ): Array<any>;
+	getPropertyTableInfo( tableIndices: Array<Number> | null = null ): Array<{ name: String, className: string }>;
+
+	getPropertyTextureData( triangle: Number, barycoord: Vector3, target: Array = [] ): Array<any>;
+	getPropertyTextureDataAsync( triangle: Number, barycoord: Vector3, target: Array = [] ): Promise<Array<any>>;
+	getPropertyTextureInfo(): Array<{
+		name: String,
+		className: string,
+		properties: {
+			[key: string]: {
+				index: Number,
+				texCoord: Number,
+				channels: Array<Number>,
+			}
+		}
+	}>;
+
+	getPropertyAttributeData( attributeIndex: Number, target: Array = [] ): Array<any>;
+	getPropertyAttributeInfo(): Array<{ name: String, className: string }>;
+
+	dispose(): void;
+
+}
+
+declare module 'three' {
+
+	export interface Object3D {
+
+		userData: {
+
+			structuralMetadata?: StructuralMetadata;
+
+		}
+
+	}
+
+}

package/src/tileRenderer/plugins/three/gltf/GLTFStructuralMetadataExtension.js

@@ -0,0 +1,147 @@
+// https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_structural_metadata
+
+import { FileLoader } from 'three';
+import { StructuralMetadata } from './metadata/classes/StructuralMetadata.js';
+
+const EXT_NAME = 'EXT_structural_metadata';
+
+// returns the set of textures required by the property texture definitions
+function getRelevantTextures( parser, propertyTextures = [] ) {
+
+	const textureCount = parser.json.textures?.length || 0;
+	const result = new Array( textureCount ).fill( null );
+
+	propertyTextures.forEach( ( { properties } ) => {
+
+		for ( const key in properties ) {
+
+			const { index } = properties[ key ];
+			if ( result[ index ] === null ) {
+
+				result[ index ] = parser.loadTexture( index );
+
+			}
+
+		}
+
+	} );
+
+	return Promise.all( result );
+
+}
+
+// returns the set of buffers required by the property table definitions
+function getRelevantBuffers( parser, propertyTables = [] ) {
+
+	const textureCount = parser.json.bufferViews?.length || 0;
+	const result = new Array( textureCount ).fill( null );
+
+	propertyTables.forEach( ( { properties } ) => {
+
+		for ( const key in properties ) {
+
+			const { values, arrayOffsets, stringOffsets } = properties[ key ];
+			if ( result[ values ] === null ) {
+
+				result[ values ] = parser.loadBufferView( values );
+
+			}
+
+			if ( result[ arrayOffsets ] === null ) {
+
+				result[ arrayOffsets ] = parser.loadBufferView( arrayOffsets );
+
+			}
+
+			if ( result[ stringOffsets ] === null ) {
+
+				result[ stringOffsets ] = parser.loadBufferView( stringOffsets );
+
+			}
+
+		}
+
+	} );
+
+	return Promise.all( result );
+
+}
+
+export class GLTFStructuralMetadataExtension {
+
+	constructor( parser ) {
+
+		this.parser = parser;
+		this.name = EXT_NAME;
+
+	}
+
+	async afterRoot( { scene, parser } ) {
+
+		// skip if the extension is not present
+		const extensionsUsed = parser.json.extensionsUsed;
+		if ( ! extensionsUsed || ! extensionsUsed.includes( EXT_NAME ) ) {
+
+			return;
+
+		}
+
+		// load the remote schema definition if present
+		let schemaPromise = null;
+		let rootExtension = parser.json.extensions[ EXT_NAME ];
+		if ( rootExtension.schemaUri ) {
+
+			// TODO: cache the loaded schema so we can share it and dispose of it when the
+			// extension is no longer available
+			const { manager, path, requestHeader, crossOrigin } = parser.options;
+			const finalUri = new URL( rootExtension.schemaUri, path ).toString();
+			const fileLoader = new FileLoader( manager );
+			fileLoader.setCrossOrigin( crossOrigin );
+			fileLoader.setResponseType( 'json' );
+			fileLoader.setRequestHeader( requestHeader );
+
+			schemaPromise = fileLoader.loadAsync( finalUri )
+				.then( schema => {
+
+					rootExtension = { ...rootExtension, schema };
+
+				} );
+
+		}
+
+		// prep the textures and buffers
+		const [ textures, buffers ] = await Promise.all( [
+			getRelevantTextures( parser, rootExtension.propertyTextures ),
+			getRelevantBuffers( parser, rootExtension.propertyTables ),
+			schemaPromise,
+		] );
+
+		// initialize the extension
+		const rootMetadata = new StructuralMetadata( rootExtension, textures, buffers );
+		scene.userData.structuralMetadata = rootMetadata;
+
+		scene.traverse( child => {
+
+			if ( parser.associations.has( child ) ) {
+
+				// check if this object has extension references and use a child-specific version of the extension
+				const { meshes, primitives } = parser.associations.get( child );
+				const primitive = parser.json.meshes[ meshes ].primitives[ primitives ];
+				if ( primitive && primitive.extensions && primitive.extensions[ EXT_NAME ] ) {
+
+					const extension = primitive.extensions[ EXT_NAME ];
+					child.userData.structuralMetadata = new StructuralMetadata( rootExtension, textures, buffers, extension, child );
+
+				} else {
+
+					child.userData.structuralMetadata = rootMetadata;
+
+				}
+
+			}
+
+		} );
+
+	}
+
+}