Stacking Graphics While Using Disable Depth Test Distance

CesiumJS
1

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

Stacking graphics on an entity using the eyeOffset doesn’t seem to be working with disable depth test distance set to the max.

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

I’m trying to get the label in front of the point, like this.

https://cesiumjs.org/releases/1.37/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=7b226fc7ac91b0688af44fa8a166f739

//jshint asi:true, quotmark:single

var viewer = new Cesium.Viewer(‘cesiumContainer’)
var ds = new Cesium.CustomDataSource()

//viewer.scene.globe.depthTestAgainstTerrain = true

viewer.dataSources.add(ds)

var ppa = ds.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
point: {
pixelSize: 30,
color: Cesium.Color.CORNFLOWERBLUE,
outlineColor: Cesium.Color.BLUEVIOLET,
outlineWidth: 3,
//disableDepthTestDistance: Number.POSITIVE_INFINITY
},
label: {
text : ‘Philadelphia’,
fillColor: Cesium.Color.DEEPPINK ,
eyeOffset: new Cesium.Cartesian3(0, 0, -1000),
//disableDepthTestDistance: Number.POSITIVE_INFINITY
}
})

``

Looks great! Now, can we do this with depth testing turned on? Let’s try:

https://cesiumjs.org/releases/1.37/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=ded189a1ce3a5515a7546ada47cd3952

//jshint asi:true, quotmark:single

var viewer = new Cesium.Viewer(‘cesiumContainer’)
var ds = new Cesium.CustomDataSource()

viewer.scene.globe.depthTestAgainstTerrain = true

viewer.dataSources.add(ds)

var ppa = ds.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
point: {
pixelSize: 30,
color: Cesium.Color.CORNFLOWERBLUE,
outlineColor: Cesium.Color.BLUEVIOLET,
outlineWidth: 3,
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
label: {
text : ‘Philadelphia’,
fillColor: Cesium.Color.DEEPPINK ,
eyeOffset: new Cesium.Cartesian3(0, 0, -1000),
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
})

``

Oh no! We haven’t gotten the text in front of the point. Is there any way to do this?

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

I’m trying to achieve the above result of label text in front of point/billboard with depth testing turned on (for other entities, but not these).

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

Cesium 1.37, Window, FF 58 and Chrome 62

2

Hi there,

Yes, this is an issue with depthTestAgainstTerrain and billboards and labels. We’re tracking it on GitHub here. I’ll bump that thread, and we’ll notify this thread when it gets fixed. In the meantime, contributions are always welcome if you have the time!

Thanks,

Gabby

3

This is a slightly different issue, I think. The linked GitHub issue is for “depthTestAgainstTerrain”, not “disableDepthTestDistance”.

In the the case posted here, depth testing is being turned OFF, not on as the post implies. The graphics in question are being pushed forwards against the near plane, to be effectively “in front of everything” to disable depth testing. You can’t use eyeOffset to affect that, since they’re clamped there at the near plane. Your eyeOffset setting is overwritten by that clamping.

I don’t know of a good fix for this, to control what 2D systems call “Z-ordering” for 2D elements in the 3D scene. Basically the 2D elements should have their own single-point (all fragments or none) depth testing and their own draw order scheme of some kind.

           --Ed.
4

Thanks Ed!

B, we are interested in tackling the displayed z-ordering of entities soon. We are tracking that in this issue on GitHub.

Thanks,

Gabby

5

Hi all,

The issue #2694 mentioned in this thread has just been closed and may resolve your issue. Look for the change in the next release of Cesium or get it now in the master branch on GitHub https://github.com/AnalyticalGraphicsInc/cesium.

Thank!

Gabby