Hide WebGL globe markers when behind

Question

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:

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

Answer 1

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";