Updates to fade example

example/src/FadeManager.js

@@ -30,6 +30,12 @@ export class FadeManager {
 
 	deleteObject( object ) {
 
+		if ( ! object ) {
+
+			return;
+
+		}
+
 		this._fadeParams.delete( object );
 		object.traverse( child => {
 
@@ -60,7 +66,7 @@ export class FadeManager {
 		};
 
 		material.defines = {
-			FEATURE_FADE: 1,
+			FEATURE_FADE: 0,
 		};
 
 		material.onBeforeCompile = shader => {
@@ -173,7 +179,7 @@ export class FadeManager {
 		object.traverse( child => {
 
 			const material = child.material;
-			if ( material.defines.FEATURE_FADE !== 0 ) {
+			if ( material && material.defines.FEATURE_FADE !== 0 ) {
 
 				material.defines.FEATURE_FADE = 0;
 				material.needsUpdate = true;
@@ -208,8 +214,9 @@ export class FadeManager {
 
 	update() {
 
+		// clamp delta in case duration is really small or 0
 		const time = window.performance.now();
-		const delta = ( time - this._lastTick ) / this.duration;
+		const delta = clamp( ( time - this._lastTick ) / this.duration, 0, 1 );
 		this._lastTick = time;
 
 		const fadeState = this._fadeState;

example/src/FadeTilesRenderer.js

@@ -4,15 +4,9 @@ import { FadeManager } from './FadeManager.js';
 
 function onTileVisibilityChange( scene, tile, visible ) {
 
-	if ( tile.__wasInFrustum !== tile.__inFrustum ) {
 
-		// TODO: possibly need to cancel fade?
-		return;
 
-	}
 
-	// TODO: we should only do this when jumping from parent to child tiles.
-	// do not fade when a tile is made visible from frustum culling
 	if ( ! visible ) {
 
 		this._fadeGroup.add( scene );
@@ -32,9 +26,45 @@ function onLoadModel( scene ) {
 
 }
 
-function onDisposeModel( scene ) {
+function onFadeFinish( object ) {
+
+	if ( object.parent === this._fadeGroup ) {
+
+		this._fadeGroup.remove( object );
+
+		if ( this.disposeSet.has( object ) ) {
+
+			this._fadeManager.deleteObject( object );
+			object.traverse( child => {
+
+				const { geometry, material } = child;
+				if ( geometry ) {
+
+					geometry.dispose();
+
+				}
+
+				if ( material ) {
+
+					material.dispose();
+					for ( const key in material ) {
+
+						const value = material[ key ];
+						if ( value && value.dispose && typeof value.dispose === 'function' ) {
+
+							value.dispose();
+
+						}
+
+					}
+
+				}
+
+			} );
 
-	this._fadeManager.deleteObject( scene );
+		}
+
+	}
 
 }
 
@@ -60,23 +90,16 @@ export class FadeTilesRenderer extends TilesRenderer {
 		this.group.add( fadeGroup );
 
 		const fadeManager = new FadeManager();
-		fadeManager.onFadeFinish = object => {
-
-			if ( object.parent === fadeGroup ) {
-
-				fadeGroup.remove( object );
-
-			}
-
-		};
+		fadeManager.onFadeFinish = onFadeFinish.bind( this );
 
 		this._fadeManager = fadeManager;
 		this._fadeGroup = fadeGroup;
 
 		this.onLoadModel = onLoadModel.bind( this );
-		this.onDisposeModel = onDisposeModel.bind( this );
 		this.onTileVisibilityChange = onTileVisibilityChange.bind( this );
 
+		this.disposeSet = new Set();
+
 	}
 
 	update( ...args ) {
@@ -86,4 +109,22 @@ export class FadeTilesRenderer extends TilesRenderer {
 
 	}
 
+	disposeTile( tile ) {
+
+		const scene = tile.cached.scene;
+		if ( scene && scene.parent === this._fadeGroup ) {
+
+			this.disposeSet.add( scene );
+			super.disposeTile( tile );
+			this._fadeGroup.add( scene );
+
+		} else {
+
+			super.disposeTile( tile );
+			this._fadeManager.deleteObject( scene );
+
+		}
+
+	}
+
 }