Fix tiles fade with displayActiveTiles (#1624)

* comment

* Add fade-fixes

* Add "wasInFrustum" - ensure other flags are valid after traversal

* Improvements to fade

* Adjust "active" flag to not be applied to internal tilesets

* Fix default value

* Remove unnecessary visible assignment

* Simpfliciation

Author: gkjohnson

src/core/renderer/tiles/TilesRendererBase.js

@@ -1189,6 +1189,7 @@ export class TilesRendererBase {
 			distanceFromCamera: Infinity,
 			error: Infinity,
 			inFrustum: false,
+			wasInFrustum: false,
 			isLeaf: false,
 			used: false,
 			usedLastFrame: false,

src/core/renderer/tiles/traverseFunctions.js

@@ -52,6 +52,10 @@ function resetFrameState( tile, renderer ) {
 
 	if ( tile.traversal.lastFrameVisited !== renderer.frameCount ) {
 
+		tile.traversal.wasInFrustum = tile.traversal.inFrustum;
+		tile.traversal.wasSetActive = tile.traversal.active;
+		tile.traversal.wasSetVisible = tile.traversal.visible;
+		tile.traversal.usedLastFrame = tile.traversal.used;
 		tile.traversal.lastFrameVisited = renderer.frameCount;
 		tile.traversal.used = false;
 		tile.traversal.inFrustum = false;
@@ -438,20 +442,27 @@ function toggleTiles( tile, renderer ) {
 	const isUsed = isUsedThisFrame( tile, renderer.frameCount );
 	if ( isUsed ) {
 
-		// any internal tileset and additive tile must be marked as active and loaded
-		if ( tile.internal.hasUnrenderableContent || ( tile.internal.hasRenderableContent && tile.refine === 'ADD' ) ) {
+		// any internal tileset loaded and marked as being used so we don't unload them
+		if ( tile.internal.hasUnrenderableContent ) {
+
+			renderer.markTileUsed( tile );
+			renderer.queueTileForDownload( tile );
+
+		}
+
+		// ADD tiles are part of the display frontier alongside their children
+		if ( tile.internal.hasRenderableContent && tile.refine === 'ADD' ) {
 
 			tile.traversal.active = true;
 
 		}
 
 		// queue any tiles to load that we need to, and unmark any unloaded or non visible tiles as "active"
-		// TODO: it may be more simple to track a separate variable than "active" here
 		if ( ( tile.traversal.active || tile.traversal.kicked ) && tile.internal.hasContent ) {
 
 			renderer.markTileUsed( tile );
 
-			if ( tile.internal.hasUnrenderableContent || tile.traversal.allUsedChildrenProcessed ) {
+			if ( tile.traversal.allUsedChildrenProcessed ) {
 
 				renderer.queueTileForDownload( tile );
 
@@ -561,11 +572,6 @@ function toggleTiles( tile, renderer ) {
 
 		}
 
-		// save the current status for the next frame
-		tile.traversal.wasSetActive = setActive;
-		tile.traversal.wasSetVisible = setVisible;
-		tile.traversal.usedLastFrame = isUsed;
-
 		// TODO: clean this up since "traversal.active" and "traversal.visible" fields are
 		// overloaded and overused above.
 		// ensure the visible and active fields are set consistently

src/three/plugins/fade/TilesFadePlugin.js

@@ -4,41 +4,43 @@ import { FadeMaterialManager } from './FadeMaterialManager.js';
 import { FadeBatchedMesh } from './FadeBatchedMesh.js';
 
 const HAS_POPPED_IN = Symbol( 'HAS_POPPED_IN' );
-const _fromPos = /* @__PURE__ */ new Vector3();
-const _toPos = /* @__PURE__ */ new Vector3();
-const _fromQuat = /* @__PURE__ */ new Quaternion();
-const _toQuat = /* @__PURE__ */ new Quaternion();
-const _scale = /* @__PURE__ */ new Vector3();
 
-function onUpdateBefore() {
+function tileWasInFrustumLastFrame( tile ) {
 
-	const fadeManager = this._fadeManager;
-	const tiles = this.tiles;
+	// Check if an ancestor was outside the frustum last frame, indicating that this one
+	// would have been, too.
+	let current = tile;
+	while ( current ) {
+
+		if ( current.traversal.wasSetActive ) {
 
-	// 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;
+			return current.traversal.wasInFrustum;
 
-	// 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;
+		}
+
+		current = current.parent;
+
+	}
+
+	return false;
 
 }
 
+const _fromPos = /* @__PURE__ */ new Vector3();
+const _toPos = /* @__PURE__ */ new Vector3();
+const _fromQuat = /* @__PURE__ */ new Quaternion();
+const _toQuat = /* @__PURE__ */ new Quaternion();
+const _scale = /* @__PURE__ */ new Vector3();
+
 function onUpdateAfter() {
 
 	const fadeManager = this._fadeManager;
 	const fadeMaterialManager = this._fadeMaterialManager;
-	const displayActiveTiles = this._displayActiveTiles;
 	const fadingBefore = this._fadingBefore;
 	const prevCameraTransforms = this._prevCameraTransforms;
 	const { tiles, maximumFadeOutTiles, batchedMesh } = this;
 	const { cameras } = tiles;
 
-	// reset the active tiles flag
-	tiles.displayActiveTiles = displayActiveTiles;
-
 	// update fade step
 	fadeManager.update();
 
@@ -51,32 +53,6 @@ function onUpdateAfter() {
 
 	}
 
-	// update the visibility of tiles based on visibility since we must use
-	// the active tiles for rendering fade
-	if ( ! displayActiveTiles ) {
-
-		tiles.visibleTiles.forEach( t => {
-
-			// if a tile is fading out then it may not be traversed and thus will not have
-			// the frustum flag set correctly.
-			const scene = t.engineData.scene;
-			if ( scene ) {
-
-				scene.visible = t.traversal.inFrustum;
-
-			}
-
-			this.forEachBatchIds( t, ( id, batchedMesh, plugin ) => {
-
-				batchedMesh.setVisibleAt( id, t.traversal.inFrustum );
-				plugin.batchedMesh.setVisibleAt( id, t.traversal.inFrustum );
-
-			} );
-
-		} );
-
-	}
-
 	if ( maximumFadeOutTiles < this._fadingOutCount ) {
 
 		// determine whether all the rendering cameras are moving
@@ -125,16 +101,10 @@ function onUpdateAfter() {
 
 		// prevent faded tiles from being unloaded
 		const scene = tile.engineData.scene;
-		const isFadingOut = fadeManager.isFadingOut( tile );
 		tiles.markTileUsed( tile );
 		if ( scene ) {
 
 			fadeMaterialManager.setFade( scene, fadeIn, fadeOut );
-			if ( isFadingOut ) {
-
-				scene.visible = true;
-
-			}
 
 		}
 
@@ -257,18 +227,9 @@ export class TilesFadePlugin {
 
 		};
 
-		this._onTileVisibilityChange = ( { tile, visible } ) => {
-
-			// this function gets fired _after_ all set visible callbacks including the batched meshes
-
-			// revert the scene and fade to the initial state when toggling
-			const scene = tile.engineData.scene;
-			if ( scene ) {
-
-				scene.visible = true;
-
-			}
+		this._onTileVisibilityChange = ( { tile } ) => {
 
+			// reset batched mesh fade state when tile visibility changes
 			this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => {
 
 				batchedMesh.setFadeAt( id, 0, 0 );
@@ -281,7 +242,8 @@ export class TilesFadePlugin {
 
 		this._onUpdateBefore = () => {
 
-			onUpdateBefore.call( this );
+			// store the fade count before the update so we can check whether fading started or stopped
+			this._fadingBefore = this._fadeManager.fadeCount;
 
 		};
 
@@ -400,9 +362,22 @@ export class TilesFadePlugin {
 	setTileVisible( tile, visible ) {
 
 		const fadeManager = this._fadeManager;
+		const wasFading = fadeManager.isFading( tile );
+
+		// Tiles that were off-screen last frame pop in/out without fading
+		if ( ! tileWasInFrustumLastFrame( tile ) ) {
+
+			if ( wasFading ) {
+
+				fadeManager.completeFade( tile );
+
+			}
+
+			return false;
+
+		}
 
 		// track the fade state
-		const wasFading = fadeManager.isFading( tile );
 		if ( fadeManager.isFadingOut( tile ) ) {
 
 			this._fadingOutCount --;
@@ -488,11 +463,6 @@ export class TilesFadePlugin {
 		tiles.forEachLoadedModel( ( scene, tile ) => {
 
 			this._fadeManager.deleteObject( tile );
-			if ( scene ) {
-
-				scene.visible = true; // TODO
-
-			}
 
 		} );