From 7ea052a5de357f16fb5410e19ba6023db2af177c Mon Sep 17 00:00:00 2001
From: Garrett Johnson <garrett.kjohnson@gmail.com>
Date: Fri, 22 Dec 2023 14:23:11 +0900
Subject: [PATCH] Add support rendering the load order of tiles (#429)

---
 example/index.js                |  4 +++-
 src/index.js                    | 14 +-------------
 src/three/DebugTilesRenderer.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/example/index.js b/example/index.js
index 1eb80768b..4c01a0a3d 100644
--- a/example/index.js
+++ b/example/index.js
@@ -10,6 +10,7 @@ import {
 	RANDOM_COLOR,
 	RANDOM_NODE_COLOR,
 	CUSTOM_COLOR,
+	LOAD_ORDER,
 	GLTFCesiumRTCExtension,
 } from '../src/index.js';
 import {
@@ -284,7 +285,8 @@ function init() {
 		IS_LEAF,
 		RANDOM_COLOR,
 		RANDOM_NODE_COLOR,
-		CUSTOM_COLOR
+		CUSTOM_COLOR,
+		LOAD_ORDER,
 
 	} );
 	debug.open();
diff --git a/src/index.js b/src/index.js
index 9bdc0c4ac..607baaafc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,16 +1,4 @@
-export {
-	DebugTilesRenderer,
-	NONE,
-	SCREEN_ERROR,
-	GEOMETRIC_ERROR,
-	DISTANCE,
-	DEPTH,
-	RELATIVE_DEPTH,
-	IS_LEAF,
-	RANDOM_COLOR,
-	RANDOM_NODE_COLOR,
-	CUSTOM_COLOR,
-} from './three/DebugTilesRenderer.js';
+export * from './three/DebugTilesRenderer.js';
 
 export { TilesRenderer } from './three/TilesRenderer.js';
 export { B3DMLoader } from './three/B3DMLoader.js';
diff --git a/src/three/DebugTilesRenderer.js b/src/three/DebugTilesRenderer.js
index 5f8b00b8a..4c214008a 100644
--- a/src/three/DebugTilesRenderer.js
+++ b/src/three/DebugTilesRenderer.js
@@ -7,6 +7,7 @@ import { EllipsoidRegionLineHelper } from './objects/EllipsoidRegionHelper.js';
 const ORIGINAL_MATERIAL = Symbol( 'ORIGINAL_MATERIAL' );
 const HAS_RANDOM_COLOR = Symbol( 'HAS_RANDOM_COLOR' );
 const HAS_RANDOM_NODE_COLOR = Symbol( 'HAS_RANDOM_NODE_COLOR' );
+const LOAD_TIME = Symbol( 'LOAD_TIME' );
 
 function emptyRaycast() {}
 
@@ -20,6 +21,7 @@ export const IS_LEAF = 6;
 export const RANDOM_COLOR = 7;
 export const RANDOM_NODE_COLOR = 8;
 export const CUSTOM_COLOR = 9;
+export const LOAD_ORDER = 10;
 
 const _sphere = new Sphere();
 export class DebugTilesRenderer extends TilesRenderer {
@@ -214,6 +216,17 @@ export class DebugTilesRenderer extends TilesRenderer {
 		const errorTarget = this.errorTarget;
 		const colorMode = this.colorMode;
 		const visibleTiles = this.visibleTiles;
+		let sortedTiles;
+		if ( colorMode === LOAD_ORDER ) {
+
+			sortedTiles = Array.from( visibleTiles ).sort( ( a, b ) => {
+
+				return a[ LOAD_TIME ] - b[ LOAD_TIME ];
+
+			} );
+
+		}
+
 		visibleTiles.forEach( tile => {
 
 			const scene = tile.cached.scene;
@@ -377,6 +390,13 @@ export class DebugTilesRenderer extends TilesRenderer {
 							break;
 
 						}
+						case LOAD_ORDER: {
+
+							const value = sortedTiles.indexOf( tile );
+							this.getDebugColor( value / ( sortedTiles.length - 1 ), c.material.color );
+							break;
+
+						}
 
 					}
 
@@ -388,6 +408,14 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 	}
 
+	parseTile( buffer, tile, ext ) {
+
+		tile[ LOAD_TIME ] = performance.now();
+
+		return super.parseTile( buffer, tile, ext );
+
+	}
+
 	setTileVisible( tile, visible ) {
 
 		super.setTileVisible( tile, visible );