Add BatchedTilesPlugin

PLUGINS.md

@@ -534,6 +534,45 @@ transformLatLonHeightToOrigin( lat, lon, height = 0 ) : void
 
 Transforms the centers the tile set such that the given coordinates and height are positioned at the origin with "X" facing west and "Z" facing north.
 
+## BatchedTilesPlugin
+
+_available in the examples directory_
+
+Plugin that uses three.js' BatchedMesh to limit the number of draw calls required and improve performance. The BatchedMesh geometry and instance size are automatically resized and optimized as new geometry is added and removed. The max number of instances to generate is limited by the max size of a 3d texture.
+
+> [!WARNING]
+> All tile geometry rendered with BatchedMesh will use the same material and only a single material "map" is supported. Only tiles geometry containing a single mesh are supported. Not compatible with other plugins that modify mesh materials or rely on other bespoke mesh data (eg TilesFadePlugin, DebugTilesPlugin, GLTF Metadata extensions).
+
+### .constructor
+
+
+```js
+constructor( options : Object )
+```
+
+Available options are as follows:
+
+```js
+{
+	// WebGLRenderer used for generating a WebGLArrayRenderTarget
+	renderer,
+
+	// The initial number of instances to use for rendering
+	instanceCount: 500,
+
+	// The minimum amount of vertex and index space to save per tile geometry added. If adequate tile space is already allocated
+	// when a new tile geometry is added then it can prevent more expensive geometry resizing and optimization.
+	vertexCount: 1000,
+	indexCount: 1000,
+
+	// The amount to increase the geometry and instance allocation when the operations must occur
+	expandPercent: 0.25,
+
+	// The material to use for the BatchedMesh. The material of the first tile rendered with be used if not set.
+	material: null,
+}
+```
+
 # Controls
 
 ## EnvironmentControls

example/fadingTiles.js

@@ -112,7 +112,10 @@ function reinstantiateTiles() {
 	if ( groundTiles ) {
 
 		groundTiles.dispose();
+		groundTiles.group.removeFromParent();
+
 		skyTiles.dispose();
+		skyTiles.group.removeFromParent();
 
 	}
 

example/googleMapsExample.js

@@ -61,7 +61,6 @@ function reinstantiateTiles() {
 	tiles.registerPlugin( new UpdateOnChangePlugin() );
 	tiles.registerPlugin( new TilesFadePlugin() );
 	tiles.group.rotation.x = - Math.PI / 2;
-	tiles.errorTarget = 50;
 
 	// Note the DRACO compression files need to be supplied via an explicit source.
 	// We use unpkg here but in practice should be provided by the application.

example/src/plugins/batched/ArrayTextureCopyMaterial.js

@@ -0,0 +1,51 @@
+import { MeshBasicMaterial } from 'three';
+
+// A MeshBasicMaterial that supports taking a TextureArray and a layer to render
+export class ArrayTextureCopyMaterial extends MeshBasicMaterial {
+
+	set layer( v ) {
+
+		this._layerUniform.value = v;
+
+	}
+
+	get layer() {
+
+		return this._layerUniform.value;
+
+	}
+
+	constructor( ...args ) {
+
+		super( ...args );
+		this._layerUniform = { value: 0 };
+
+	}
+
+	onBeforeCompile( shader ) {
+
+		shader.uniforms.layer = this._layerUniform;
+
+		shader.fragmentShader = shader.fragmentShader
+			.replace(
+				'#include <map_pars_fragment>',
+				/* glsl */`
+				#ifdef USE_MAP
+					precision highp sampler2DArray;
+					uniform sampler2DArray map;
+					uniform int layer;
+				#endif
+				`,
+			)
+			.replace(
+				'#include <map_fragment>',
+				/* glsl */`
+				#ifdef USE_MAP
+					diffuseColor *= texture( map, vec3( vMapUv, layer ) );
+				#endif
+				`
+			);
+
+	}
+
+}