With depthTestAgainstTerrain eq. true but Entity or Primitive are not covered by globe

[wewindy]

There is an eg.

sandcastle 1.107

box.webm

Code:

const viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.globe.depthTestAgainstTerrain = true;

const redBox = viewer.entities.add({
  name: "Red box with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, -200000.0),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

viewer.zoomTo(viewer.entities);

I have tried to use Primitive API, but still:

Platform Info.

Platform 1

Windows 11 22H2
Intel i5 13600K with Intel UHD 770 GraphicCard Inside
Browser：Mircosoft Edge 114.0.1823.58 & Chrome 114.0.5735.199

WebGL Report

Platform 2

Windows 11 22H2
AMD R7-7735HS with AMD Radeon RX 680M GraphicCard Inside
Browser：Mircosoft Edge 114.0.1823.58 & Chrome 114.0.5735.199

WebGL Report

[wewindy]

There is a Primitive's example:

sandcastle 1.107

checkboard.webm

[wewindy]

CesiumJS 1.103 and below do not have this problem.
PTAL @ggetz

[ggetz]

Thanks for the report @onsummer! I believe this has to do with async behavior and #6991.

To test, log the value of depthTestAgainstTerrain after a promise has resolved, and you'll see that the value is false.

await viewer.zoomTo(viewer.entities);
console.log(viewer.scene.globe.depthTestAgainstTerrain);

[wewindy]

Thanks to reply, I try to set globe.depthTestAgainstTerrain = true; in a resolved promise or directly setTimeout after adding entity or primitive:

scene.primitives.add(/* ... */);

setTimeout(() => { 
  scene.globe.depthTestAgainstTerrain = true; 
}, 0)
// or
Promise.resolve(0).then(() => { 
  scene.globe.depthTestAgainstTerrain = true; 
})

that will work, but is there a better solution?