Tiles and culling

Questions
1

Hi,
I am working on a project, this is a view like you were in space. You can move around like on Google Maps, but you are inside the sphere. The sphere has the map mapped inside it. And it works well.

However, I would like to add a map that is very large (1.18 GB). I would like to:

  • create a script that cuts the image into as many tiles as necessary (with zoom support)
  • only load the tiles that are in the view (or close to it) (culling?) also manage the right tiles for zooming.

I made a prototype https://codesandbox.io/p/sandbox/festive-golick-ksyfyw with only a reduced version of the map in one piece (25Mo) if you want to see more. I’m new to Three.js and open to any suggestions.

Do you have any links for using tiles and culling I could use as a reference?

1 Like
2

More for convex planets instead of concave sky, but maybe you can adapt this library from Garrett Johnson ( the three expert of many essentials “spatial tools” :grin: ):
https://github.com/NASA-AMMOS/3DTilesRendererJS
Also it can handle large dataset

2 Likes
3

If the original map is a 1.18 GB image on disk (in JPG format or similar), I think you’re going to have a challenging time just finding software that can open the image. What is the original map, and/or how was it created? Could you go more directly to tiled images somehow, without that?

Reading up a bit about the image pyramids and spatial indexes used for geospatial tiling like 3D Tiles, Web Mercator tiling, etc. might be helpful.

Especially if you’re new to three.js, I might suggest to start with just a cube skybox, 6 textures each at 2–4k resolution square. With the right image projection, the corners of the cube should not be visible. Once you have that working you could think about subdividing visible sides of the cube further, from 1 → 4 → 16 → 4N textures per side, as the user zooms in. :slight_smile:

2 Likes
4

I’m going to read that, thx

5

Thanks for your message, the skybox was another option, I’ll see how to do it like this.

6

I agree with @donmccurdy that if you don’t need the resolution then I would just create a lower resolution equirectangular map or skybox for background rendering.

If you do want the high resolution for something like a high detail image explorer then something like Web Mercator tiling (as mentioned), TMS, or Deep Zoom (though it may now be defunct) formats would be the way to go. The 3d tiles render project supports loading TMS / Web Mercator data as a sphere shape for globe rendering, which could be adapted to behave like a sky sphere if the rendered tile side were reversed and camera placed inside the sphere.

Here’s a quick video showing the concept. Note that the map is flipped, of course, so that would have to be handled, and this is using OrbitControls, which has some quirks for a use case like this. A custom control scheme would be better:

4 Likes