search

vasturiano / react-globe.gl

React component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/react-globe.gl/example/world-population/
MIT License
904 stars 156 forks source link

Make Globe Transparent with Hex Bins - View Attached Image #178

Open gianniszonia opened 4 months ago

gianniszonia commented 4 months ago

Hi! Thank you so much for the globe, it is truly amazing and i also donated some money to you for your hard work :)

I am trying to make the globe background image transparent so that I can see the bars (hex bins) on the other side of the globe too (see image at the very bottom). I am making my image a bit transparent but it does not seem to work because the actual globe is black.

I tried everything such as using globeMaterial and making the globe transparent with lower opacity but then i end up with this which shows the bars starting from the center of the globe.

GlobeOld 2

I also tried using using a background image of just the land on the earth using this image - https://commons.wikimedia.org/wiki/File:Land_shallow_topo_alpha_2048.png - but all I achieve is seeing just the land and then black everywhere else.

The funny thing is that I managed to do it years ago but I lost my code and I can not find it. And it shouldn't be difficult because i was much worse in Javascript back then. I have included a picture of the globe I created back then so that you can see what i mean by Transparent Globe.

GlobeOld

gianniszonia commented 4 months ago

@vasturiano Any ideas? :)

vasturiano commented 2 weeks ago

@gianniszonia thanks for reaching out and sorry for the delay in responding here.

I've just made a change in the underlying lib three-globe which solves this issue altogether. It uses conditions in the side material fragment shaders that hides the portion of the bins underneath the surface of the globe.

So, if you upgrade your dependency tree to use v2.34.2 of the three-globe module you should have this issue solved.