MVT Annotations: Improve raycast performance (#1635)

* Add bvh for perf improvement

* Improve processing step

* Convert to generator, use ObjectBVH for acceleration

* Improve object bvh perf, precalculate resolution

* Add comments

* Small improvements

* Cleanup

* Fix objectbvh genertion

* Small fixes

* Remove empty line

Author: gkjohnson

example/three/annotationsExample.js

@@ -25,6 +25,7 @@ import {
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 import { AnnotationPoints } from './src/plugins/mvt/AnnotationPoints.js';
+import { MeshBVHPlugin } from './src/plugins/MeshBVHPlugin.js';
 
 // CDN source for the icons
 const MAKI_BASE = 'https://cdn.jsdelivr.net/npm/@mapbox/maki@8/icons/';
@@ -132,13 +133,13 @@ function reinstantiateTiles() {
 	} );
 
 	tiles = new TilesRenderer();
-	tiles.accelerateRaycast = false;
 	tiles.registerPlugin( new UpdateOnChangePlugin() );
 	tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: import.meta.env.VITE_ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
 	tiles.registerPlugin( new GLTFExtensionsPlugin( {
 		dracoLoader: new DRACOLoader().setDecoderPath( 'https://unpkg.com/three@0.153.0/examples/jsm/libs/draco/gltf/' )
 	} ) );
 	tiles.registerPlugin( new TilesFadePlugin() );
+	tiles.registerPlugin( new MeshBVHPlugin() );
 	tiles.registerPlugin( new MVTAnnotationsPlugin( {
 		overlay,
 		camera,

example/three/src/plugins/MeshBVHPlugin.js

@@ -0,0 +1,109 @@
+import { MeshBVH, ObjectBVH, acceleratedRaycast } from 'three-mesh-bvh';
+
+/**
+ * Demo plugin that synchronously builds a three-mesh-bvh BVH for every mesh
+ * in each loaded tile & a full-tileset BVH. Attach the plugin before loading
+ * tiles so BVHs are available immediately in processTileModel / load-model callbacks.
+ */
+export class MeshBVHPlugin {
+
+	constructor() {
+
+		this.name = 'MESH_BVH_PLUGIN';
+		this.tiles = null;
+		this.objectBvh = null;
+		this.needsUpdate = true;
+
+	}
+
+	init( tiles ) {
+
+		this.tiles = tiles;
+
+		// events
+		this._onLoadModel = ( { scene } ) => {
+
+			scene.traverse( c => {
+
+				if ( c.isMesh ) {
+
+					c.geometry.boundsTree = new MeshBVH( c.geometry );
+					c.raycast = acceleratedRaycast;
+
+				}
+
+			} );
+
+		};
+
+		this._onDisposeModel = ( { scene } ) => {
+
+			scene.traverse( c => {
+
+				if ( c.isMesh ) {
+
+					c.geometry.boundsTree = null;
+
+				}
+
+			} );
+
+		};
+
+		this._onVisibilityChange = () => {
+
+			// TODO: a dynamic BVH would be best here to save time & memory thrash
+			this.needsUpdate = true;
+
+		};
+
+		// registration
+		tiles.addEventListener( 'load-model', this._onLoadModel );
+		tiles.addEventListener( 'dispose-model', this._onDisposeModel );
+		tiles.addEventListener( 'tile-visibility-change', this._onVisibilityChange );
+
+		// replace the raycast function, re-computing the object bvh if needed
+		tiles.group.raycast = ( ...args ) => {
+
+			if ( this.needsUpdate || ! this.objectBvh ) {
+
+				this.objectBvh = new ObjectBVH( tiles.group );
+				this.needsUpdate = false;
+
+			}
+
+			this.objectBvh.raycast( ...args );
+			return false;
+
+		};
+
+		// initialize existing scenes
+		tiles.forEachLoadedModel( ( scene ) => {
+
+			this._onLoadModel( { scene } );
+
+		} );
+
+	}
+
+	dispose() {
+
+		const { tiles } = this;
+
+		// revert to the prototype chain raycast
+		delete tiles.group.raycast;
+
+		// remove events
+		tiles.removeEventListener( 'load-model', this._onLoadModel );
+		tiles.removeEventListener( 'dispose-model', this._onDisposeModel );
+		tiles.removeEventListener( 'tile-visibility-change', this._onVisibilityChange );
+
+		tiles.forEachLoadedModel( ( scene ) => {
+
+			this._onDisposeModel( { scene } );
+
+		} );
+
+	}
+
+}

package-lock.json

@@ -81,9 +81,9 @@
   "author": "Garrett Johnson <garrett.kjohnson@gmail.com>",
   "license": "Apache-2.0",
   "dependencies": {
+    "@mapbox/vector-tile": "^2.0.3",
     "pbf": "^4.0.1",
-    "pmtiles": "^4.3.2",
-    "@mapbox/vector-tile": "^2.0.3"
+    "pmtiles": "^4.3.2"
   },
   "devDependencies": {
     "@babel/preset-modules": "^0.1.6",
@@ -113,6 +113,7 @@
     "lil-gui": "^0.21.0",
     "postprocessing": "^6.36.4",
     "three": "^0.170.0",
+    "three-mesh-bvh": "^0.9.10",
     "typescript": "^5.6.0",
     "typescript-eslint": "^8.48.1",
     "vite": "^8.0.16",