ImageOverlayPlugin: Fix Mercator overlay (#1538)

* Add fix

* Fix mercator case

* Fix the mercator projection

* Cleanup

Author: gkjohnson

src/three/plugins/images/ImageOverlayPlugin.js

@@ -120,8 +120,6 @@ export class ImageOverlayPlugin {
 
 			}
 
-			// TODO: we could prioritize by overlay order here to ensure consistency
-
 		};
 
 		// save variables
@@ -710,11 +708,6 @@ export class ImageOverlayPlugin {
 			// create a sphere bounding volume
 			if ( tile.boundingVolume.box || tile.boundingVolume.sphere ) {
 
-				// TODO: we create a sphere even when a region is present because currently the handling of region volumes
-				// is a bit flaky especially at small scales. OBBs are generated which can be imperfect resulting rays passing
-				// through tiles. The same may be the case with frustum checks. In theory, though, we should not need a sphere
-				// bounds if a region bounds are present.
-
 				// compute the sphere center
 				_box
 					.setFromObject( result, true )
@@ -1010,13 +1003,13 @@ export class ImageOverlayPlugin {
 
 			} else if ( tile.boundingVolume.region ) {
 
-				// If the tile has a region bounding volume then mark the tiles to preload
+				// If the tile has a region bounding volume then mark the tiles to preload, clamped to the extents of
+				// the overlay image
 				const [ minLon, minLat, maxLon, maxLat ] = tile.boundingVolume.region;
-				const range = overlay.projection.toNormalizedRange( [ minLon, minLat, maxLon, maxLat ] );
+				let range = [ minLon, minLat, maxLon, maxLat ];
+				range = overlay.projection.clampToBounds( range );
+				range = overlay.projection.toNormalizedRange( range );
 
-				// TODO: locking the texture here causes compositing to happen immediately which can be performance intensive,
-				// particularly in cases like GeoJSON loader. Ideally the compositing / final drw step to "lock" would be deferred
-				// as well, just like the tile image loads.
 				info.range = range;
 				overlay.lockTexture( range, tile );
 
@@ -1101,8 +1094,7 @@ export class ImageOverlayPlugin {
 
 			}
 
-			( { range, uvs } = getMeshesCartographicRange( meshes, ellipsoid, _matrix, projection ) );
-			range = projection.toNormalizedRange( range );
+			( { range, uvs } = getMeshesCartographicRange( meshes, ellipsoid, _matrix, projection, info.range ) );
 			heightInRange = true;
 
 		}
@@ -1113,10 +1105,6 @@ export class ImageOverlayPlugin {
 			info.range = range;
 			overlay.lockTexture( range, tile );
 
-		} else {
-
-			range = info.range;
-
 		}
 
 		// if the image projection is outside the 0, 1 uvw range or there are no textures to draw in

src/three/plugins/images/overlays/utils.js

@@ -101,7 +101,7 @@ function getGeometryCartographicChannel( geometry, geomToEllipsoidMatrix, ellips
 
 }
 
-export function getMeshesCartographicRange( meshes, ellipsoid, meshToEllipsoidMatrix = null, projection = null ) {
+export function getMeshesCartographicRange( meshes, ellipsoid, meshToEllipsoidMatrix = null, projection = null, normalizedRange = null ) {
 
 	// find the lat / lon ranges
 	let minLat = Infinity;
@@ -138,18 +138,21 @@ export function getMeshesCartographicRange( meshes, ellipsoid, meshToEllipsoidMa
 
 	} );
 
-	let clampedRange = [ minLon, minLat, maxLon, maxLat ];
 	if ( projection !== null ) {
 
-		// Clamp the lat lon range to the bounds of the projection scheme. Note that clamping the data
-		// allows for "stretching" the texture look at the edges of the projection which leads to a nicer
-		// looking overlay. Eg at the poles of a web-mercator projection - otherwise there will be gaps
-		// that show the underlying tile data. It's arguable which one is better but in all supported
-		// ellipsoid projections (Web mercator, equirect) the projection ranges always span the entire
-		// globe range.
-		// const clampedRange = [ minLon, minLat, maxLon, maxLat ];
-		clampedRange = projection.clampToBounds( [ minLon, minLat, maxLon, maxLat ] );
-		const [ minU, minV, maxU, maxV ] = projection.toNormalizedRange( clampedRange );
+		// Clamp the mesh vertex range to the projection's valid bounds (e.g. ~±85° for Mercator) to
+		// avoid NaN UV values for vertices that fall outside the projection range. This also stretches
+		// the texture at the projection boundary rather than leaving gaps.
+
+		// takes generate a normalized range if not already provided
+		if ( normalizedRange === null ) {
+
+			normalizedRange = projection.clampToBounds( [ minLon, minLat, maxLon, maxLat ] );
+			normalizedRange = projection.toNormalizedRange( normalizedRange );
+
+		}
+
+		const [ minU, minV, maxU, maxV ] = normalizedRange;
 		uvs.forEach( uv => {
 
 			for ( let i = 0, l = uv.length; i < l; i += 3 ) {
@@ -158,7 +161,9 @@ export function getMeshesCartographicRange( meshes, ellipsoid, meshToEllipsoidMa
 				const lat = uv[ i + 1 ];
 				const h = uv[ i + 2 ];
 
-				const [ u, v ] = projection.toNormalizedPoint( lon, lat );
+				let [ u, v ] = projection.toNormalizedPoint( lon, lat );
+				u = MathUtils.clamp( u, 0, 1 );
+				v = MathUtils.clamp( v, 0, 1 );
 				uv[ i + 0 ] = MathUtils.mapLinear( u, minU, maxU, 0, 1 );
 				uv[ i + 1 ] = MathUtils.mapLinear( v, minV, maxV, 0, 1 );
 				uv[ i + 2 ] = MathUtils.mapLinear( h, minHeight, maxHeight, 0, 1 );
@@ -171,7 +176,7 @@ export function getMeshesCartographicRange( meshes, ellipsoid, meshToEllipsoidMa
 
 	return {
 		uvs,
-		range: clampedRange,
+		range: normalizedRange,
 		region: [ minLon, minLat, maxLon, maxLat, minHeight, maxHeight ],
 	};
 

src/three/plugins/images/utils/ProjectionScheme.js

@@ -235,8 +235,8 @@ export class ProjectionScheme {
 
 		const [ minX, minY, maxX, maxY ] = clampBounds;
 		result[ 0 ] = MathUtils.clamp( result[ 0 ], minX, maxX );
-		result[ 1 ] = MathUtils.clamp( result[ 1 ], minY, maxY );
 		result[ 2 ] = MathUtils.clamp( result[ 2 ], minX, maxX );
+		result[ 1 ] = MathUtils.clamp( result[ 1 ], minY, maxY );
 		result[ 3 ] = MathUtils.clamp( result[ 3 ], minY, maxY );
 
 		return result;