Babylon earth with TMS

Jacky_Liu · October 21, 2025, 5:56pm

I am attempting to create an Earth model similar to Cesium, utilizing TMS sliced maps. However, I have encountered issues where the textures do not stitch as expected, and the deformation at the North and South Poles is severe. I have tried adjusting UVs and inverting textures, but I am unable to pinpoint the problem. I believe Babylon can accomplish all of this, but I require assistance. Does anyone have any suggestions in this regard?

earth with TMS

dsaffo · October 21, 2025, 6:45pm

I believe the tile server by default is using a mercator projection which will not work for a sphere, you need a spherical projection like EPSG:4326 or WGS 84.

I dont have a direct fix for your setup but you can take a look at how we did it for the globe prefab in Anu using open layers.

source code (line 144)

textureGlobe Anu Docs

edit: there is a three library that uses slippy tiles like you are trying to do and it looks like they are manually stretching the mercator projection, if I am understanding it right.

github.com/vasturiano/three-slippy-map-globe

src/utils/mercator.js

master


      
          import { scaleLinear } from 'd3-scale';
          import { geoMercatorRaw } from 'd3-geo';
          
          const yMercatorScale = y => 1 - (geoMercatorRaw(0, (0.5 - y) * Math.PI)[1] / Math.PI + 1) / 2;
          const yMercatorScaleClamped = y => Math.max(0, Math.min(1, yMercatorScale(y)));
          const yMercatorScaleInvert = y => 0.5 - geoMercatorRaw.invert(0, (2 * (1 - y) - 1) * Math.PI)[1] / Math.PI;
          
          const convertMercatorUV = (uvs, y0 = 0, y1 = 1) => {
            const offsetScale = scaleLinear().domain([1, 0]).range([y0, y1]).clamp(true);
            const revOffsetScale = scaleLinear().domain([yMercatorScaleClamped(y0), yMercatorScaleClamped(y1)]).range([1, 0]).clamp(true);
            const scale = v => revOffsetScale(yMercatorScaleClamped(offsetScale(v)));
          
            const arr = uvs.array;
            for (let i = 0, len = arr.length; i < len; i+=2) {
              arr[i+1] = scale(arr[i+1]);
            }
            uvs.needsUpdate = true;
          }

HiGreg · October 22, 2025, 12:21am

To wrap a sphere, I think you need what’s called an equirectangular projection. I’m guessing those Mercator equations are implementing the reverse Web Mercator (i.e. to equirectangular). For practical, world-scale purposes, a map using lon/lat in WGS84 or EPSG:4326 should give you a close-enough result.

The end result on a world map is a rectangle with X=Longitude and Y=Latitude.

TMS servers do seem to return in Web Mercator projection:

From gisbox.com

Coordinate system: Usually Web Mercator (EPSG:3857) to achieve compatibility with most online map services (such as Google Maps, Bing Maps).

Edit: on review, it looks like they are mapping uv coordinates on the sphere. Similar to the three.js thread here

HiGreg · October 22, 2025, 12:15pm

I removed the promises and simplified uv handling and just used a single canvas. Not sure this is fully correct, but looks much closer.

There is the big issue of all tiles being updated instead of only those in view.

Also, not sure why the canvas repeatedly resets to all black. I’ll revisit this later.

HiGreg · October 22, 2025, 10:07pm

I still haven’t implemented conversion from mercator, but I think I’ve addressed the updating. I’ve also added options for skipping image download, using a flat map, and drawing image boundaries over the tiles (drawing image boundaries is on by default so you can clearly see the update progress).

I’ve also added max 5 simultaneous images downloads and when the zoom changes, remaining images in the queue are essentially skipped and only images matching the current zoom level are drawn.

It’s much more responsive.

A big improvement to be made would be to only download tiles in the current view. Oh, and fix the projection

Edit: Scaling existing images to new scale so the map doesn’t just disappear when zooming should make this much more usable. I don’t at all like the “flood the server with image requests when zoom changes” that occurs now.

Edit2:

Conversion!

(Continents jump around a little when zooming and loading new tiles. I’m guessing the converion is not quite right)

Because Web Mercator has vertical and horizontal latitude and logitudes, the conversion is made from the zoom level and tile x/y into the canvas upper left x & y and tile width & height on the canvas.

Used google AI to get a tile’s lat/long boundaries from openmap tile x, y, zoom. Then I convert that to canvas x,y,width,height, and draw the image at the correct location on the texture that represents equirectangular coordinates. The texture wraps on a sphere there’s your planet!

Last step would be to only download visible tiles, but I have to think about how to get those max & min lat & lon coordinates.

Jacky_Liu · October 24, 2025, 9:27am

You have given me immense inspiration, and I am profoundly grateful!

Jacky_Liu · October 24, 2025, 9:29am

I will try to understand all of this. Thank you !

HiGreg · October 29, 2025, 11:39am

Playing around with my modifications especially with TMS zoom level 0, 1, and 2, I think it’s clear that my implementation is not quite right. I am linearly stretching each tile.

What needs to happen is to either draw each tile on the canvas that includes stretching using stretching implied by the mercator projection (hard) or modify the uvs on the mesh (easier) or (maybe) convert the uvs when drawing (unnecessary performance hit).

When I get a chance, I’ll update with uv modification of the mesh.

Topic		Replies	Views
How to map projection Questions material	12	1261	November 18, 2020
How can I add height to my tiled map? Questions material	45	1739	November 29, 2020
Textures appear darker than in Blender Questions	9	1929	September 15, 2021
BabylonJS texture problem Questions lighting , material	7	881	March 18, 2020
How big can a babylonjs scene be in meters and Spherical Polar Coordinates on scene Questions	15	2139	June 25, 2019

Babylon earth with TMS

Related topics