Provide option for immediately process children (#1470)

* Simplify child processing logic

* Limit number of children processed per frame

* Fix traversal

* Update option

* Add comments

* maxProcessedTiles -> maxTilesProcessed

* Add comment

Author: gkjohnson

README.md

@@ -426,6 +426,14 @@ autoDisableRendererCulling = true : Boolean
 
 If true then all tile meshes automatically have their [frustumCulled](https://threejs.org/docs/index.html#api/en/core/Object3D.frustumCulled) field set to false. This is useful particularly when using one camera because the tiles renderer automatically performs it's own frustum culling on visible tiles. If [displayActiveTiles](#displayActiveTiles) is true or multiple cameras are being used then you may consider setting this to false.
 
+### .maxProcessedTiles
+
+```js
+maxProcessedTiles = 250 : Number
+```
+
+The number of tiles to process up to immediately when traversing the tile set to determine what to render. Lower numbers prevent frame hiccups caused by processing too many tiles at once when a new tile set is available while higher values will process tiles more tiles immediately allowing data to be downloaded and data to be displayed sooner.
+
 ### .lruCache
 
 ```js

src/core/plugins/ImplicitTilingPlugin.js

@@ -88,7 +88,6 @@ export class ImplicitTilingPlugin {
 
 			} );
 			tile.children.length = 0;
-			tile.internal.childrenProcessed = 0;
 
 		}
 

src/core/renderer/tiles/Tile.d.ts

@@ -9,7 +9,6 @@ export interface TileInternalData {
 	hasUnrenderableContent: boolean;
 	loadingState: number;
 	basePath: string;
-	childrenProcessed: number;
 	depth: number;
 	depthFromRenderedParent: number;
 }

src/core/renderer/tiles/TilesRendererBase.d.ts

@@ -14,6 +14,7 @@ export class TilesRendererBase {
 	maxDepth : number;
 	loadSiblings : boolean;
 	optimizedLoadStrategy : boolean;
+	maxTilesProcessed : number;
 
 	loadProgress: number;
 

src/core/renderer/tiles/TilesRendererBase.js

@@ -255,6 +255,8 @@ export class TilesRendererBase {
 			used: 0,
 			active: 0,
 			visible: 0,
+
+			tilesProcessed: 0,
 		};
 		this.frameCount = 0;
 
@@ -272,6 +274,7 @@ export class TilesRendererBase {
 		this.maxDepth = Infinity;
 		this.optimizedLoadStrategy = false;
 		this.loadSiblings = true;
+		this.maxTilesProcessed = 250;
 
 	}
 
@@ -515,6 +518,7 @@ export class TilesRendererBase {
 		stats.used = 0;
 		stats.active = 0;
 		stats.visible = 0;
+		stats.tilesProcessed = 0;
 		this.frameCount ++;
 
 		usedSet.forEach( tile => lruCache.markUnused( tile ) );
@@ -767,6 +771,7 @@ export class TilesRendererBase {
 	preprocessNode( tile, tilesetDir, parentTile = null ) {
 
 		this.processedTiles.add( tile );
+		this.stats.tilesProcessed ++;
 
 		if ( tile.content ) {
 
@@ -805,7 +810,6 @@ export class TilesRendererBase {
 			hasUnrenderableContent: false,
 			loadingState: UNLOADED,
 			basePath: tilesetDir,
-			childrenProcessed: 0,
 			depth: - 1,
 			depthFromRenderedParent: - 1,
 		};
@@ -830,7 +834,6 @@ export class TilesRendererBase {
 		// Increment parent's children processed counter
 		if ( parentTile ) {
 
-			parentTile.internal.childrenProcessed ++;
 			tile.internal.depth = parentTile.internal.depth + 1;
 			tile.internal.depthFromRenderedParent = parentTile.internal.depthFromRenderedParent + ( tile.internal.hasRenderableContent ? 1 : 0 );
 
@@ -977,47 +980,49 @@ export class TilesRendererBase {
 
 	}
 
-	ensureChildrenArePreprocessed( tile, immediate = false ) {
+	ensureChildrenArePreprocessed( tile, forceImmediate = this.stats.tilesProcessed < this.maxTilesProcessed ) {
 
 		const children = tile.children;
-		if ( tile.internal.childrenProcessed === children.length ) {
+		if ( children.length === 0 || children[ 0 ].internal ) {
 
 			return;
 
 		}
 
-		for ( let i = 0, l = children.length; i < l; i ++ ) {
+		const processChildren = children => {
 
-			const child = children[ i ];
-			if ( 'traversal' in child ) {
+			for ( let i = 0, l = children.length; i < l; i ++ ) {
 
-				// the child has already been processed
-				continue;
+				this.preprocessNode( children[ i ], tile.internal.basePath, tile );
 
-			} else if ( immediate ) {
 
-				// process the node immediately and make sure we don't double process it
-				this.processNodeQueue.remove( child );
-				this.preprocessNode( child, tile.internal.basePath, tile );
+			}
 
-			} else {
+		};
 
-				// queue the node for processing if it hasn't been already
-				if ( ! this.processNodeQueue.has( child ) ) {
+		// process children immediately up to a max number of tiles during traversal
+		if ( forceImmediate ) {
 
-					this.processNodeQueue.add( child, child => {
+			this.processNodeQueue.remove( tile );
+			processChildren( children );
 
-						this.preprocessNode( child, tile.internal.basePath, tile );
-						this._dispatchNeedsUpdateEvent();
+		} else {
 
-					} );
 
-				}
+			if ( ! this.processNodeQueue.has( tile ) ) {
+
+				this.processNodeQueue.add( tile, tile => {
+
+					processChildren( tile.children );
+					this._dispatchNeedsUpdateEvent();
+
+				} );
 
 			}
 
 		}
 
+
 	}
 
 	// returns the total bytes used for by the given tile as reported by all plugins
@@ -1185,7 +1190,6 @@ export class TilesRendererBase {
 			if ( isExternalTileset ) {
 
 				t.children.length = 0;
-				t.internal.childrenProcessed = 0;
 
 			} else {
 

src/core/renderer/tiles/optimizedTraverseFunctions.js

@@ -28,7 +28,10 @@ function isProcessed( tile ) {
 // Checks whether all children have been processed and are ready to traverse
 function areChildrenProcessed( tile ) {
 
-	return tile.internal.childrenProcessed === tile.children.length && ( ! tile.internal.hasUnrenderableContent || isDownloadFinished( tile.internal.loadingState ) );
+	// all children are processed at once
+	const childrenReady = tile.children.length === 0 || Boolean( tile.children[ 0 ].internal );
+	const contentReady = ! tile.internal.hasUnrenderableContent || isDownloadFinished( tile.internal.loadingState );
+	return childrenReady && contentReady;
 
 }
 

src/core/renderer/tiles/traverseFunctions.js

@@ -33,7 +33,8 @@ function isProcessed( tile ) {
 
 function areChildrenProcessed( tile ) {
 
-	return tile.internal.childrenProcessed === tile.children.length;
+	// all children are processed at once
+	return tile.children.length === 0 || Boolean( tile.children[ 0 ].internal );
 
 }
 

src/three/plugins/QuantizedMeshPlugin.js

@@ -457,7 +457,6 @@ export class QuantizedMeshPlugin {
 
 			} );
 			tile.children.length = 0;
-			tile.internal.childrenProcessed = 0;
 
 		}
 

src/three/plugins/images/ImageOverlayPlugin.js

@@ -446,7 +446,6 @@ export class ImageOverlayPlugin {
 				} );
 
 				parent.children.length = 0;
-				parent.internal.childrenProcessed = 0;
 
 			}