Add fadeRootTiles option

example/fadingTiles.js

@@ -18,6 +18,7 @@ let groundTiles, skyTiles, tilesParent;
 const params = {
 
 	reinstantiateTiles,
+	fadeRootTiles: false,
 	useFade: true,
 	errorTarget: 12,
 	fadeDuration: 0.5,
@@ -73,6 +74,7 @@ function init() {
 
 	const gui = new GUI();
 	gui.add( params, 'useFade' );
+	gui.add( params, 'fadeRootTiles' );
 	gui.add( params, 'errorTarget', 0, 1000 );
 	gui.add( params, 'fadeDuration', 0, 5 );
 	gui.add( params, 'renderScale', 0.1, 1.0, 0.05 ).onChange( v => renderer.setPixelRatio( v * window.devicePixelRatio ) );
@@ -101,6 +103,8 @@ function reinstantiateTiles() {
 	groundTiles.lruCache.maxSize = 1300;
 	groundTiles.errorTarget = 12;
 
+	window.TILES = groundTiles
+
 	skyTiles = new FadeTilesRenderer( 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_sky/0528_0260184_to_s64o256_sky_tileset.json' );
 	skyTiles.fetchOptions.mode = 'cors';
 	skyTiles.lruCache = groundTiles.lruCache;
@@ -124,11 +128,12 @@ function render() {
 	camera.updateMatrixWorld();
 
 	groundTiles.errorTarget = params.errorTarget;
-
+	groundTiles.fadeRootTiles = params.fadeRootTiles;
 	groundTiles.setCamera( camera );
 	groundTiles.setResolutionFromRenderer( camera, renderer );
 	groundTiles.update();
 
+	skyTiles.fadeRootTiles = params.fadeRootTiles;
 	skyTiles.setCamera( camera );
 	skyTiles.setResolutionFromRenderer( camera, renderer );
 	skyTiles.update();

example/src/FadeTilesRenderer.js

@@ -21,7 +21,20 @@ function onTileVisibilityChange( scene, tile, visible ) {
 
 	} else {
 
-		this._fadeManager.fadeIn( scene );
+		// if this is a root tile and we haven't rendered any child tiles yet then pop in
+		// the root tiles immediately rather than fading from nothing
+		const isRootTile = tile.__depthFromRenderedParent === 0;
+		if ( ! isRootTile ) {
+
+			this.initialLayerRendered = true;
+
+		}
+
+		if ( ! isRootTile || ! this.fadeRootTiles || this.initialLayerRendered ) {
+
+			this._fadeManager.fadeIn( scene );
+
+		}
 
 	}
 
@@ -96,6 +109,7 @@ export const FadeTilesRendererMixin = base => class extends base {
 		super( ...args );
 
 		this.maximumFadeOutTiles = 50;
+		this.fadeRootTiles = false;
 
 		const fadeGroup = new Group();
 		const fadeManager = new FadeManager();
@@ -108,6 +122,7 @@ export const FadeTilesRendererMixin = base => class extends base {
 		this.onLoadModel = onLoadModel.bind( this );
 		this.onTileVisibilityChange = onTileVisibilityChange.bind( this );
 
+		this.initialLayerRendered = false;
 		this.prevCameraTransforms = new Map();
 		this.disposeSet = new Set();
 

src/base/traverseFunctions.js

@@ -256,7 +256,6 @@ export function markUsedSetLeaves( tile, renderer ) {
 		tile.__childrenWereVisible = childrenWereVisible;
 		tile.__allChildrenLoaded = allChildrenLoaded;
 
-
 	}
 
 }