Billboard clipping when 3D Terrain enabled.

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Billboard clipping when 3D Terrain enabled.

After seeing this blog post : https://cesium.com/blog/2018/07/30/billboards-on-terrain-improvements/ I’m looking to understand how this works.

In the blog post it seems it works well.

Whether or not is used :

heightReference : Cesium.HeightReference.CLAMP_TO_GROUND

is makes no difference and the billboard is still being clipped.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

Go to terrain picker and be sure to enable Cesium World Terrain to reproduce

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

1.65

Annotation 2020-01-31 125949.png
Annotation 2020-01-31 125949.png874×477 434 KB

2

The blog post doesn’t do anything special to make it work, but notice that it mentions this is activated only when the camera is close enough to the billboard.

For your case, it would help to move the vertical origin to the bottom:

verticalOrigin: Cesium.VerticalOrigin.BOTTOM

``

Here’s a modified Sandcastle that does this. Let me know if this works better for you.

What kind of project are you doing with Cesium?

3

Thanks for the suggestion.
However using VerticalOrigin Bottom won’t work in my situation as I have other elements interacting with the billboard.

For example:

I have a polyline ending at the billboard point. So you can imagine a polyline ending point with a circle billboard center on the end.

However, if I set the billboard to be vert. org. : bottom , then it will look strange not the desired effect. See screenshot.

In my other example, I have billboards that have a height of 0.

While its true when you said the clipping feature is only activated upon zooming in enough, however it doesn’t seem to be the case for certain conditions.

Perhaps when there is a height of zero. See my other screenshot.

I imagine there is no way around this other than to do multiple extra offsets.

Capture.PNG

Capture2.PNG

4

I ran into this problem recently as well, using smaller billboards helps but not by much.

5

did you try viewer.scene.globe.depthTestAgainstTerrain = true;

see Cesium Sandcastle, the bottom one in the drop down menu.
or set the height of your billboard as (long, lat, altitude) and make the altitude adjustment until its above the terrain. Maybe either of those will help.

6

One thing is to set it for the global viewer, but there’s also the option to set it per billboard. See;

https://cesium.com/learn/cesiumjs/ref-doc/BillboardGraphics.html#disableDepthTestDistance

Cheers,

Alex

1 Like