Panoglobe - 3D Route Visualizer

Showcase
1

Hello community,
today I want to share a personal longtime project with you.
It´s a 3D Globe Visualization showing GPS routes with some points-of-interest.

I started in 2014 and consider this a v1 release, although the early versions already looked close.
It took me some time to get the Userinterface mobile-friendly and the Animations right, and I dont think it will ever be done. Please let me know if something feels weird or doesn´t work out for you, it is still in active development.

If you want to learn a little bit more about the history/dev-environment (no code/breakdown), I have this writeup in a gist:

Special thanks to these guys for sharing their knowledge and helping me :slight_smile:
(remember, this was pre discourse/discord age)

  • While building this I crawled Stackoverflow and found a lot of helpful Answers from WestLangley.
  • The important necessary Math is from Lee Stemkoski and his examples.
  • Some great resources were found in @makc3d blog posts about Labels and country-geometry.
8 Likes
2

Hi,

This is a very nice visualization; thank you for sharing it with us!

If you’re still checking this account, I have a question: were there any special considerations you made when doing the texture mapping onto a sphere? I have looked through almost a dozen “Earth” examples in three.js and they all unfortunately seem to suffer from a distortion in the way the texture/image is wrapped onto the sphere. Continents are stretched unnaturally large and the North and South poles seem to be located on the back side of the sphere instead of straight up and down. A side-by-side comparison with a known accurate map, e.g. Apple or Google Maps, shows the distortion clearly, but nobody seems to have noticed the problem in the other examples.

Your project, by contrast, is the only one I’ve found so far that avoids this problem and presents an accurate wrapping of the equirectangular Earth image onto a sphere. I can study the code you’ve shared on GitHub to figure out how you did it, but if you happen to remember how you solved the problem, I would much appreciate any advice you have.

Thanks!
J

3

Good observation, you are right about the distortion. Many examples use a Sphere geometry for a globe where you get more Points at the poles and bigger polygons around the center.

The secret is using the Icosahedron-geometry where all vertices are evenly distributed around. Im also displacing the vertices according to earth actual heights which looks better with more detail (means more vertices where the continents are).
In wireframe it looks like this:

grafik
grafik1346×1179 215 KB

4

Thanks for sharing the trick on using the Icosahedron geometry to evenly space the vertices. I will definitely use that with my projects going forward.

Unfortunately, I am still seeing the map distortion in my code that I notice in most of the examples online. Here is a short example of some code I’ve used:

const geometry = new THREE.IcosahedronBufferGeometry(0.8, 32)

const textureLoader = new THREE.TextureLoader();
texture = textureLoader.load(‘earth_equirectangular.png’);
texture.mapping = THREE.EquirectangularReflectionMapping;

const material = new THREE.MeshBasicMaterial( { map: texture } );
sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

Here is a screenshot of Panoglobe side-by-side with a rendering of the code above. You can see that the land masses are too large in the right image:

Africa_Panoglobe_vs_simple_example
Africa_Panoglobe_vs_simple_example1920×940 162 KB

Here is the 2d image I used in threejs (a simplified equirectangular Earth map):

earth_equirectangular
earth_equirectangular1920×960 135 KB

I’ve seen discussions on StackExchange (based on your write-up above) of using custom shaders, envMaps, and other modifications, but I haven’t been able to get any of them to work quite right. I’ll continue troubleshooting, but if something obvious jumps out at you, I’d appreciate any thoughts you have.

Thanks,
J

5

I tried the map. Nothing wrong with it. It is just a matter of how far the perspective camera is. Here is a demo with animated camera distance (actually the FOV is animated, and the distance is calculated to keep consistent globe size). You can see how the continents get “deformed”.

https://codepen.io/boytchev/pen/PorpNVp

image

My suggestion is: just pick the FOV and distance that make you happy.

3 Likes
6

Thanks for your response and for correctly pointing out that the problem was with the perspective camera settings and not the texture mapping. I was able to reproduce your results in my project.

The settings that would make me happy would be the ones that produce a physically accurate view of the Earth as seen from space. Your demo shows that lowering the FOV decreases the distortions I was seeing, so that helps move me in the right direction.

1 Like