ImageOverlayPlugins: Move tile composition to a separate class (#1413)

* Add region image source

* Enable use of region source

* Updates

* Update all overlays

* Small updates

* Simplify ranges so they are always normalized

* Cleanup

* Fixes

* Simplify

* Remove renderer

* Cleanup

* Use resolution

* Add "TiledImageOverlay"

* Updates

* Clean up overlay initialization

* Remove need for "countTilesInRnge"

* Add support for "none" projection scheme

* Fix lint

* Steps towards removing use of "tiling

* More simplification

* Updates

* Rearrange some dependencies

* Remove unused dispose call

* Simplify use of aspect ratio

* Use "processedTiles" where possible

* Fix memory leak

* Remove parent tile drawing

* Defer to "Overlay" implementation for texture fetch

* memory leak fixes

* Update geojson example

* Add prepare logic to allow for loading data without creating and composing a texture

* rearrange

* Fix lint issue

* GeoJSONOverlay: Convert to use "region" directly

* Add a separate "lock" and "get" function

* Remove need for "meshRange"

* Remove "rangeMarked" field

* Remove prepare functions

* Remove comments

* Fix geojson overlay

* simplification

* Remove passing level to the overlay

* Lint fix

* lint fix

* Geojson split update

* Add pass through for geojson overlay fields

* Add ability to redraw the geojson

* Fix up url

* Add an animation to projection demo

Author: gkjohnson

example/r3f/projection.jsx

@@ -11,23 +11,38 @@ import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeome
 
 const tilesetUrl = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json';
 
-// construct a shape via geojson
-const shape = [];
-for ( let i = 0; i < 100; i ++ ) {
+// Function to generate animated shape
+function generateShape( rotation, amplitudeScale, target = null ) {
 
-	const x = Math.sin( Math.PI * 2 * i / 100 );
-	const y = Math.cos( Math.PI * 2 * i / 100 );
-	const len = Math.sin( 10 * 2 * Math.PI * i / 100 ) * 10 + 75;
+	if ( target === null ) {
 
-	shape.push( [ x * len, y * len ] );
+		target = new Array( 100 )
+			.fill()
+			.map( () => new Array( 2 ) );
+
+	}
+
+	for ( let i = 0; i < 100; i ++ ) {
+
+		const angle = Math.PI * 2 * i / 100;
+		const x = Math.sin( angle + rotation );
+		const y = Math.cos( angle + rotation );
+		const len = Math.sin( 10 * angle ) * 10 * amplitudeScale + 75;
+
+		target[ i ][ 0 ] = x * len;
+		target[ i ][ 1 ] = y * len;
+
+	}
+
+	return target;
 
 }
 
 const geojson = {
 	type: 'Feature',
 	geometry: {
 		type: 'Polygon',
-		coordinates: [ shape ],
+		coordinates: [ generateShape( 0, 1 ) ],
 	},
 };
 
@@ -77,7 +92,7 @@ function Scene() {
 
 	}, [ boxMesh ] );
 
-	useFrame( () => {
+	useFrame( state => {
 
 		if ( overlay && boxMesh ) {
 
@@ -86,6 +101,18 @@ function Scene() {
 
 		}
 
+		if ( overlay ) {
+
+			// animate the geojson shape
+			const time = state.clock.getElapsedTime();
+			const rotation = time * Math.PI * 2.0 * 0.1;
+			const amplitudeScale = Math.sin( time * 5 );
+
+			generateShape( rotation, amplitudeScale, geojson.geometry.coordinates[ 0 ] );
+			overlay.imageSource.redraw();
+
+		}
+
 	} );
 
 	return (
@@ -127,7 +154,6 @@ function App() {
 
 	return (
 		<Canvas
-			frameloop='demand'
 			camera={ {
 				position: [ 0, 40, 35 ],
 			} }