Hide HTML Overlay when behind globe

CesiumJS
1

Hi all,

Is there a way to make HTML overlays disappear when behind the earth?

In the sandcastle, when you spin the globe around, the HTML overlay still appears even when behind the globe. Is there a way to detect the longitude bounds of what the user is looking at and conditionally show the HTML overlay if it’s within those bounds?

This is what I’ve tried so far (in the sandcastle):

var htmlOverlay = document.getElementById(‘htmlOverlay’);

var scratch = new Cesium.Cartesian2();

viewer.scene.preRender.addEventListener(function() {
// my code

var viewRect = viewer.camera.computeViewRectangle();

var east = Cesium.Math.toDegrees(viewRect.east);

var west = Cesium.Math.toDegrees(viewRect.west);

console.log("east: " + east + ", west: " + west);
// end my code

var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);

var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);

if (Cesium.defined(canvasPosition)) {

htmlOverlay.style.top = canvasPosition.y + ‘px’;

htmlOverlay.style.left = canvasPosition.x + ‘px’;

}

});

``

The problem with this is that as soon as the user zooms out to see space, east becomes 180 and west becomes -180 which are the full longitude bounds of the entire earth, not just the half that you are looking at.

Is there another method I can use to get the view of the earth?

Thanks.

Cesium version 1.50

2

I know billboards support this feature, if you check out this example:

Is what you’re doing something that can be done with billboards? I was going to suggest a clever hack would be to create a billboard in the same position, and check if that billboard is in view and hide your overlay accordingly, but I think whether it’s in view is something that’s computed in a shader so it might be hard to dig that information out.