TMS Tiled Map Service in Babylon

Demos and projects
1

Inspired by @Jacky_Liu forum post, I’ve honed my modifications of his original code to provide a dynamic loading of TMS tiles from OpenMapServer onto a sphere in Babylon.

Features include:

  1. Dynamic loading of tiles in view
  2. Single texture
  3. Zoom using fov allows close view of globe without zooming through the mesh/sphere

Because only a single texture is used, the useful TMS zoom level is limited. When the texture size would otherwise grow to be bigger than the max specified (or aauto detected by the engine) the scale of tiles is reduced. When the scale is 1/4 or 1/8, it becomes uselessly blurry. You can play around with texture properties (anisotropic filtering, sample mode, etc) and canvas context properties (imageSmoothingEnabled, imageSmoothingQuality) but I haven’t really found any particularly crisp combinations.

Turn on boundaries and text mode 1 to watch the dynamic loading sequences as zoom level changes.

  1. options in code: show text none, xyzoom, or distance from camera
  2. draw sphere or flat map
  3. load/draw images or not
  4. draw boundaries or not
  5. maximum TMS zoom
  6. set maximum simultaneous downloads
  7. set maximum downloads per second
  8. show dots on visible tile corners
  9. set maximum texture size (or auto set)

Am I overlooking any optimizations or features?

8 Likes
2

Ok this is super cool!

1 Like
3

An update to get the projection correct. Now, continents don’t shift around when crossing a zoom level. And added zoom levels 0 and 1.

Uses UV mapping on the sphere, which means decreasing the segments too much on the sphere results in visible distortion of the map. 256 segments on the sphere seems to be good enough, 16 is too low.

4

Can you also limit the mouse radius and speed? I’d love to zoom :slight_smile:

5

Also helps to increase the FOV as you get closer to the globe

6

I am only increasing fov. There is no radius zoom. I modified _computeX function in the camera control to only do fov zooming.

Edit: fov for pinch zoom only. I’ll change mouse wheel zooming to be fov, too. Thank you for input!

2 Likes
7

I’ll hook up my mouse and see what it does. I modified camera control for fov zooming, but maybe that’s only for pinch? The modified function is near or at the bottom of the code.

Edit: confirmed I didn’t change mouse wheel zoom. Mouse wheel still changes radius and not fov.

1 Like
8

Added

  • zoom wheel now modifies fov
  • reduced pan, rotate, and fov sensitivity

Edit:

  • starting distance 2 instead of 3
  • lower minimum fov (higher max zoom)

Better?

3 Likes
9

Far better!!!

10

Interestingly I was looking at tiling the other day too but as a way to make PhotoDomes load faster. I only got as far as clicking on a “tile” making it go high res though was going to look at how to make it work based on zoom and position too.

I don’t know if anything I did would be helpful for you but feel free to have a look and take anything you want :smiley:

1 Like