GeoJSONOverlay, MVTOverlay: Improved redraw performance (#1588)

* Track visible regions

* Fix tracking

* Adjust redraw logic

* Only redraw visible tiles

* Add dirty tracking

* Progressive updates

* Add new priority queue function, flush

* Cleanup

* Adjust GeoJSONOverlay redraw logic

* Update d.ts

* Cleanup

* Remove empty line

Author: gkjohnson

src/core/renderer/utilities/PriorityQueue.d.ts

@@ -9,6 +9,7 @@ export class PriorityQueue {
 	get running(): boolean;
 
 	sort() : void;
+	flush( item : any ) : any;
 	has( item : any ) : boolean;
 	add( item : any, callback : ( item : any ) => any ) : Promise< any >;
 	remove( item : any ) : void;

src/core/renderer/utilities/PriorityQueue.js

@@ -305,6 +305,54 @@ export class PriorityQueue {
 
 	}
 
+	/**
+	 * Immediately runs the callback for the given item, removing it from the queue.
+	 * Does nothing if the item is not queued.
+	 * @param {any} item
+	 * @returns {Promise<any>|any}
+	 */
+	flush( item ) {
+
+		const { items, callbacks } = this;
+		const index = items.indexOf( item );
+		if ( ! callbacks.has( item ) ) {
+
+			return;
+
+		}
+
+		const { callback, resolve, reject } = callbacks.get( item );
+		callbacks.delete( item );
+		items.splice( index, 1 );
+
+		let result;
+		try {
+
+			result = callback( item );
+
+		} catch ( err ) {
+
+			reject( err );
+			return;
+
+		}
+
+		if ( result instanceof Promise ) {
+
+			result
+				.then( resolve )
+				.catch( reject );
+
+		} else {
+
+			resolve( result );
+
+		}
+
+		return result;
+
+	}
+
 	/**
 	 * Schedules a deferred call to `tryRunJobs` via `schedulingCallback`.
 	 */

src/three/plugins/images/ImageOverlayPlugin.js

@@ -87,6 +87,7 @@ export class ImageOverlayPlugin {
 		this.processQueue = null;
 		this._onUpdateAfter = null;
 		this._onTileDownloadStart = null;
+		this._onTileVisibilityChange = null;
 		this._virtualChildResetId = 0;
 		this._bytesUsed = new WeakMap();
 
@@ -222,8 +223,20 @@ export class ImageOverlayPlugin {
 
 		};
 
+		this._onTileVisibilityChange = ( { tile, visible } ) => {
+
+			this.overlayInfo.forEach( ( { tileInfo }, overlay ) => {
+
+				const info = tileInfo.get( tile );
+				overlay.setRegionVisible( info.range, visible );
+
+			} );
+
+		};
+
 		tiles.addEventListener( 'update-after', this._onUpdateAfter );
 		tiles.addEventListener( 'tile-download-start', this._onTileDownloadStart );
+		tiles.addEventListener( 'tile-visibility-change', this._onTileVisibilityChange );
 
 		this.overlays.forEach( overlay => {
 
@@ -403,6 +416,8 @@ export class ImageOverlayPlugin {
 		} );
 
 		tiles.removeEventListener( 'update-after', this._onUpdateAfter );
+		tiles.removeEventListener( 'tile-download-start', this._onTileDownloadStart );
+		tiles.removeEventListener( 'tile-visibility-change', this._onTileVisibilityChange );
 
 		this.resetVirtualChildren( true );
 
@@ -1110,6 +1125,12 @@ export class ImageOverlayPlugin {
 
 		}
 
+		if ( tile.traversal.visible ) {
+
+			overlay.setRegionVisible( info.range, true );
+
+		}
+
 		// if the image projection is outside the 0, 1 uvw range or there are no textures to draw in
 		// the tiled image set the don't allocate a texture for it.
 		let target = null;
@@ -1306,6 +1327,7 @@ export class ImageOverlay {
 		this._whenReady = null;
 		this.isReady = false;
 		this.isInitialized = false;
+		this._visibleRegionCounts = new Map();
 
 	}
 
@@ -1383,6 +1405,32 @@ export class ImageOverlay {
 
 	}
 
+	setRegionVisible( range, visible ) {
+
+		const { _visibleRegionCounts } = this;
+		const key = range.join( '_' );
+		let entry = _visibleRegionCounts.get( key );
+		if ( ! entry ) {
+
+			entry = { range: [ ...range ], count: 0 };
+			_visibleRegionCounts.set( key, entry );
+
+		}
+
+		entry.count += visible ? 1 : - 1;
+
+		if ( entry.count < 0 ) {
+
+			throw new Error();
+
+		} else if ( entry.count === 0 ) {
+
+			_visibleRegionCounts.delete( key );
+
+		}
+
+	}
+
 }
 
 /**
@@ -1682,6 +1730,10 @@ export class GeoJSONOverlay extends ImageOverlay {
 		super( options );
 		this.imageSource = new GeoJSONImageSource( options );
 
+		this._redrawQueue = new PriorityQueue();
+		this._redrawQueue.maxJobs = 4;
+		this._redrawQueue.priorityCallback = () => 0;
+
 	}
 
 	_init() {
@@ -1727,9 +1779,52 @@ export class GeoJSONOverlay extends ImageOverlay {
 
 	}
 
+	setRegionVisible( range, visible ) {
+
+		super.setRegionVisible( range, visible );
+
+		if ( visible ) {
+
+			const { _redrawQueue } = this;
+			const key = range.join( '_' );
+			if ( _redrawQueue.has( key ) ) {
+
+				_redrawQueue.flush( key );
+
+			}
+
+		}
+
+	}
+
 	redraw() {
 
-		this.imageSource.redraw();
+		const {
+			imageSource,
+			_redrawQueue,
+			_visibleRegionCounts,
+		} = this;
+
+		for ( const { range } of _visibleRegionCounts.values() ) {
+
+			imageSource.redraw( ...range );
+
+		}
+
+		imageSource.forEachItem( ( _, args ) => {
+
+			const key = args.join( '_' );
+			if ( ! _visibleRegionCounts.has( key ) && ! _redrawQueue.has( key ) ) {
+
+				_redrawQueue.add( key, () => {
+
+					imageSource.redraw( ...args );
+
+				} );
+
+			}
+
+		} );
 
 	}
 

src/three/plugins/images/MVTOverlay.js

@@ -2,6 +2,7 @@
 import { ImageOverlay } from './ImageOverlayPlugin.js';
 import { MVTImageSource } from './sources/MVTImageSource.js';
 import { PMTilesImageSource } from './sources/PMTilesImageSource.js';
+import { PriorityQueue } from '3d-tiles-renderer/core';
 
 /**
  * @callback MVTGetStyleCallback
@@ -64,6 +65,10 @@ export class MVTOverlay extends ImageOverlay {
 		super( options );
 		this.imageSource = options.imageSource ?? new MVTImageSource( options );
 
+		this._redrawQueue = new PriorityQueue();
+		this._redrawQueue.maxJobs = 4;
+		this._redrawQueue.priorityCallback = () => 0;
+
 	}
 
 	_init() {
@@ -140,9 +145,52 @@ export class MVTOverlay extends ImageOverlay {
 
 	}
 
+	setRegionVisible( range, visible ) {
+
+		super.setRegionVisible( range, visible );
+
+		if ( visible ) {
+
+			const { _redrawQueue } = this;
+			const key = range.join( '_' ) + '_' + this.calculateLevel( range );
+			if ( _redrawQueue.has( key ) ) {
+
+				_redrawQueue.flush( key );
+
+			}
+
+		}
+
+	}
+
 	redraw() {
 
-		this.imageSource.redraw();
+		const {
+			imageSource,
+			_redrawQueue,
+			_visibleRegionCounts,
+		} = this;
+
+		for ( const { range } of _visibleRegionCounts.values() ) {
+
+			imageSource.redraw( ...range, this.calculateLevel( range ) );
+
+		}
+
+		imageSource.forEachItem( ( _, args ) => {
+
+			const key = args.join( '_' );
+			if ( ! _visibleRegionCounts.has( key ) && ! _redrawQueue.has( key ) ) {
+
+				_redrawQueue.add( key, () => {
+
+					imageSource.redraw( ...args );
+
+				} );
+
+			}
+
+		} );
 
 	}
 

src/three/plugins/images/sources/GeoJSONImageSource.js

@@ -122,15 +122,17 @@ export class GeoJSONImageSource extends RegionImageSource {
 
 	}
 
-	redraw() {
+	redraw( ...args ) {
 
-		this._updateCache( true );
-		this.forEachItem( ( tex, args ) => {
+		const tex = this.get( ...args );
+		if ( ! tex ) {
 
-			this._drawToCanvas( tex.image, args );
-			tex.needsUpdate = true;
+			return;
 
-		} );
+		}
+
+		this._drawToCanvas( tex.image, args );
+		tex.needsUpdate = true;
 
 	}