Project Web Mercator Tiles to Sphere with ShaderMaterial

.gitignore

@@ -7,3 +7,5 @@ pnpm-lock.yaml
 yarn.lock
 
 examples/assets/
+
+.history/

build/geo-three.cjs

@@ -2,29 +2,29 @@
 
 var three = require('three');
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 }
 
 class MapProvider {
@@ -168,16 +168,7 @@ class MapNode extends three.Mesh {
             }
             try {
                 const image = yield this.mapView.provider.fetchTile(this.level, this.x, this.y);
-                if (this.disposed) {
-                    return;
-                }
-                const texture = new three.Texture(image);
-                texture.generateMipmaps = false;
-                texture.format = three.RGBAFormat;
-                texture.magFilter = three.LinearFilter;
-                texture.minFilter = three.LinearFilter;
-                texture.needsUpdate = true;
-                this.material.map = texture;
+                yield this.applyTexture(image);
             }
             catch (e) {
                 if (this.disposed) {
@@ -189,6 +180,20 @@ class MapNode extends three.Mesh {
             this.material.needsUpdate = true;
         });
     }
+    applyTexture(image) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.disposed) {
+                return;
+            }
+            const texture = new three.Texture(image);
+            texture.generateMipmaps = false;
+            texture.format = three.RGBAFormat;
+            texture.magFilter = three.LinearFilter;
+            texture.minFilter = three.LinearFilter;
+            texture.needsUpdate = true;
+            this.material.map = texture;
+        });
+    }
     nodeReady() {
         if (this.disposed) {
             console.warn('Geo-Three: nodeReady() called for disposed node.', this);
@@ -391,12 +396,32 @@ class UnitsUtils {
     static mapboxAltitude(color) {
         return (color.r * 255.0 * 65536.0 + color.g * 255.0 * 256.0 + color.b * 255.0) * 0.1 - 10000.0;
     }
+    static getTileSize(zoom) {
+        const maxExtent = UnitsUtils.MERCATOR_MAX_EXTENT;
+        const numTiles = Math.pow(2, zoom);
+        return 2 * maxExtent / numTiles;
+    }
+    static tileBounds(zoom, x, y) {
+        const tileSize = UnitsUtils.getTileSize(zoom);
+        const minX = -UnitsUtils.MERCATOR_MAX_EXTENT + x * tileSize;
+        const minY = UnitsUtils.MERCATOR_MAX_EXTENT - (y + 1) * tileSize;
+        return [minX, tileSize, minY, tileSize];
+    }
+    static mercatorToLatitude(zoom, y) {
+        const yMerc = UnitsUtils.MERCATOR_MAX_EXTENT - y * UnitsUtils.getTileSize(zoom);
+        return Math.atan(Math.sinh(yMerc / UnitsUtils.EARTH_RADIUS));
+    }
+    static mercatorToLongitude(zoom, x) {
+        const xMerc = -UnitsUtils.MERCATOR_MAX_EXTENT + x * UnitsUtils.getTileSize(zoom);
+        return xMerc / UnitsUtils.EARTH_RADIUS;
+    }
 }
 UnitsUtils.EARTH_RADIUS = 6371008;
 UnitsUtils.EARTH_RADIUS_A = 6378137.0;
 UnitsUtils.EARTH_RADIUS_B = 6356752.314245;
 UnitsUtils.EARTH_PERIMETER = 2 * Math.PI * UnitsUtils.EARTH_RADIUS;
 UnitsUtils.EARTH_ORIGIN = UnitsUtils.EARTH_PERIMETER / 2.0;
+UnitsUtils.MERCATOR_MAX_EXTENT = 20037508.34;
 
 class MapPlaneNode extends MapNode {
     constructor(parentNode = null, mapView = null, location = QuadTreePosition.root, level = 0, x = 0, y = 0) {
@@ -674,7 +699,44 @@ class MapSphereNodeGeometry extends three.BufferGeometry {
 
 class MapSphereNode extends MapNode {
     constructor(parentNode = null, mapView = null, location = QuadTreePosition.root, level = 0, x = 0, y = 0) {
-        super(parentNode, mapView, location, level, x, y, MapSphereNode.createGeometry(level, x, y), new three.MeshBasicMaterial({ wireframe: false }));
+        let bounds = UnitsUtils.tileBounds(level, x, y);
+        const vertexShader = `
+		varying vec3 vPosition;
+
+		void main() {
+			vPosition = position;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+		}
+		`;
+        const fragmentShader = `
+		#define PI 3.1415926538
+		varying vec3 vPosition;
+        uniform sampler2D uTexture;
+		uniform vec4 mercatorBounds;
+
+		void main() {
+			// this could also be a constant, but for some reason using a constant causes more visible tile gaps at high zoom
+			float radius = length(vPosition);
+
+			float latitude = asin(vPosition.y / radius);
+    		float longitude = atan(-vPosition.z, vPosition.x);
+
+			float mercator_x = radius * longitude;
+			float mercator_y = radius * log(tan(PI / 4.0 + latitude / 2.0));
+			float y = (mercator_y - mercatorBounds.z) / mercatorBounds.w;
+			float x = (mercator_x - mercatorBounds.x) / mercatorBounds.y;
+
+			vec4 color = texture2D(uTexture, vec2(x, y));
+			gl_FragColor = color;
+		}
+		`;
+        let vBounds = new three.Vector4(...bounds);
+        const material = new three.ShaderMaterial({
+            uniforms: { uTexture: { value: new three.Texture() }, mercatorBounds: { value: vBounds } },
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader
+        });
+        super(parentNode, mapView, location, level, x, y, MapSphereNode.createGeometry(level, x, y), material);
         this.applyScaleNode();
         this.matrixAutoUpdate = false;
         this.isMesh = true;
@@ -694,12 +756,24 @@ class MapSphereNode extends MapNode {
         const range = Math.pow(2, zoom);
         const max = 40;
         const segments = Math.floor(MapSphereNode.segments * (max / (zoom + 1)) / max);
-        const phiLength = 1 / range * 2 * Math.PI;
-        const phiStart = x * phiLength;
-        const thetaLength = 1 / range * Math.PI;
-        const thetaStart = y * thetaLength;
+        const lon1 = x > 0 ? UnitsUtils.mercatorToLongitude(zoom, x) + Math.PI : 0;
+        const lon2 = x < range - 1 ? UnitsUtils.mercatorToLongitude(zoom, x + 1) + Math.PI : 2 * Math.PI;
+        const phiStart = lon1;
+        const phiLength = lon2 - lon1;
+        const lat1 = y > 0 ? UnitsUtils.mercatorToLatitude(zoom, y) : Math.PI / 2;
+        const lat2 = y < range - 1 ? UnitsUtils.mercatorToLatitude(zoom, y + 1) : -Math.PI / 2;
+        const thetaLength = lat1 - lat2;
+        const thetaStart = Math.PI - (lat1 + Math.PI / 2);
         return new MapSphereNodeGeometry(1, segments, segments, phiStart, phiLength, thetaStart, thetaLength);
     }
+    applyTexture(image) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const textureLoader = new three.TextureLoader();
+            const texture = textureLoader.load(image.src, function () { });
+            this.material.uniforms.uTexture.value = texture;
+            this.material.uniforms.uTexture.needsUpdate = true;
+        });
+    }
     applyScaleNode() {
         this.geometry.computeBoundingBox();
         const box = this.geometry.boundingBox.clone();