search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.97k stars 293 forks source link

Polar regions stretching/pinching #111

Open DavidMulder0 opened 2 years ago

DavidMulder0 commented 2 years ago

What methods can be employed to minimize the stretching/pinching in the polar regions:

image

Source: https://globe.gl/example/custom-globe-styling/

Any advice would be incredibly welcome, as I have been struggling with this for awhile. There seem to be countless of ways to achieve this in general, but I think my wild-goose chase into the source of three-globe might not be the right direction to go.

Main semi-successful attempt I had was my first attempt where I tried to pre stretch my texture to account for the future warping, but that was only half successful as I did it by hand.

vasturiano commented 2 years ago

@DavidMulder0 thanks for reaching out. That's an interesting question.

I also don't how to improve that visual artifact. But I do know that it's likely beyond the scope of globe.gl. More related to the realm of ThreeJS itself and how it behaves when applying an image texture as material to a SphereGeometry.

I wouldn't bother with checking the code of three-globe, as it won't yield anything too helpful here. But if you want to check the section that does this sphere imaging, it's here: https://github.com/vasturiano/three-globe/blob/6c38406b684083919fc2a584a3018bc6df869f16/src/layers/globe.js#L97-L100

In the case you dive deeper into this and figure out a solution, I would love to hear. Perhaps there's a way to configure the material map so that it minimizes this effect.