1

I'm in the process of building a WebGL Globe using OGL (a lightweight webgl library, way smaller than Three.js) and found a way to place markers on the globe, from lat/long coordinates.

It works perfectly and it looks very nice but I am now struggling to "hide" them when they are visually behind the globe. Right now they are still visible even though we should not see them as seen below:

enter image description here

What would be the way to calculate that? And/or if it can't be done, another way could be to show them sticking around the globe to show that some markers are available further.

Here is a working CodeSandbox demo: Globe

flks
  • 610
  • 10
  • 28

1 Answers1

2

Your transform code is a 3D transform, but you only use the x and y coordinates to display the projected labels. You can use the 3rd coordinate to determine if you're in front or behind the sphere.

A quick patch to your code to do as you wish was this:

markerEl.style.display = screenVector[2] < 0.83 ? "block" : "none";
Blindy
  • 65,249
  • 10
  • 91
  • 131
  • This is black magic! Thanks a lot. Could you explain me a little more how you got to this conclusion and why this value? – flks Sep 23 '22 at 16:24
  • 1
    Conclusion is easy, transforms are 3D, you were just not using the 3rd dimension. Value is harder, it was trial and error. More careful examination of the library would have determined it directly, but I've never used it before (or javascript and webgl in general for that matter), so I just threw values at it until it worked lol – Blindy Sep 23 '22 at 16:32