Merge pull request #202 from NASA-AMMOS/debug-color-callback

DebugTilesRenderer: Add 'getDebugColor' function

README.md

@@ -574,6 +574,14 @@ maxDebugDistance = - 1 : Number
 
 The distance value that represents white when rendering with `DISTANCE` [colorMode](#colorMode). If `maxDebugDistance` is `-1` then the radius of the tile set is used.
 
+### .getDebugColor
+
+```js
+getDebugColor : ( val : Number, target : Color ) => void
+```
+
+The function used to map a [0, 1] value to a color for debug visualizations. By default the color is mapped from black to white.
+
 ## PriorityQueue
 
 Piority-sorted queue to prioritize file downloads and parsing.

src/three/DebugTilesRenderer.d.ts

@@ -16,14 +16,11 @@ export class DebugTilesRenderer extends TilesRenderer {
 	displayBoxBounds : Boolean;
 	displaySphereBounds : Boolean;
 	colorMode : ColorMode;
-	
-	/** Debug color min value, default 'black' */
-	minDebugColor : Color;
-	/** Debug color max value, default 'white' */
-	maxDebugColor : Color;
 
 	maxDebugDepth : Number;
 	maxDebugDistance : Number;
 	maxDebugError : Number;
 
+	getDebugColor : ( val: Number, target: Color ) => void;
+
 }

src/three/DebugTilesRenderer.js

@@ -41,8 +41,12 @@ export class DebugTilesRenderer extends TilesRenderer {
 		this.maxDebugDepth = - 1;
 		this.maxDebugDistance = - 1;
 		this.maxDebugError = - 1;
-		this.minDebugColor = new Color( 'black' );
-		this.maxDebugColor = new Color( 'white' );
+
+		this.getDebugColor = ( value, target ) => {
+
+			target.setRGB( value, value, value );
+
+		};
 
 		this.extremeDebugDepth = - 1;
 		this.extremeDebugError = - 1;
@@ -194,8 +198,6 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 		}
 
-		const minDebugColor = this.minDebugColor;
-		const maxDebugColor = this.maxDebugColor;
 		const errorTarget = this.errorTarget;
 		const colorMode = this.colorMode;
 		const visibleTiles = this.visibleTiles;
@@ -263,14 +265,14 @@ export class DebugTilesRenderer extends TilesRenderer {
 						case DEPTH: {
 
 							const val = tile.__depth / maxDepth;
-							c.material.color.copy( minDebugColor ).lerpHSL( maxDebugColor, val );
+							this.getDebugColor( val, c.material.color );
 							break;
 
 						}
 						case RELATIVE_DEPTH: {
 
 							const val = tile.__depthFromRenderedParent / maxDepth;
-							c.material.color.copy( minDebugColor ).lerpHSL( maxDebugColor, val );
+							this.getDebugColor( val, c.material.color );
 							break;
 
 						}
@@ -283,7 +285,7 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 							} else {
 
-								c.material.color.copy( minDebugColor ).lerpHSL( maxDebugColor, val );
+								this.getDebugColor( val, c.material.color );
 
 							}
 							break;
@@ -292,7 +294,7 @@ export class DebugTilesRenderer extends TilesRenderer {
 						case GEOMETRIC_ERROR: {
 
 							const val = Math.min( tile.geometricError / maxError, 1 );
-							c.material.color.copy( minDebugColor ).lerpHSL( maxDebugColor, val );
+							this.getDebugColor( val, c.material.color );
 							break;
 
 						}
@@ -301,7 +303,7 @@ export class DebugTilesRenderer extends TilesRenderer {
 							// We don't update the distance if the geometric error is 0.0 so
 							// it will always be black.
 							const val = Math.min( tile.__distanceFromCamera / maxDistance, 1 );
-							c.material.color.copy( minDebugColor ).lerpHSL( maxDebugColor, val );
+							this.getDebugColor( val, c.material.color );
 							break;
 
 						}
@@ -309,11 +311,12 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 							if ( ! tile.children || tile.children.length === 0 ) {
 
-								c.material.color.copy( maxDebugColor );
+								this.getDebugColor( 1.0, c.material.color );
+
 
 							} else {
 
-								c.material.color.set( minDebugColor );
+								this.getDebugColor( 0.0, c.material.color );
 
 							}
 							break;