Essentially, I updated the sandcastle billboard demo by adding a polyline which intersects the billboard. As I scroll the earth around, the line changes how it is displayed. The main issue is part of the line through the billboard will disappear as the globe is moved around.
Is there a known issue here or a better way to go about drawing a line through a billboard (layering of renderable objects, a different type of object, etc.)?
Thanks for any help in advance.
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
// A simple polyline with two points.
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : Cesium.Cartesian3.fromDegreesArray([-120.0, 40.0,
-110.0, 30.0])
}),
material : Cesium.Material.fromType('Color', {
color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
})
});
billboards.add({
image : '../images/Cesium_Logo_overlay.png',
position : Cesium.Cartesian3.fromDegrees(-115.59777, 35.03883)
});
This is caused because the application is using depth testing, which will make anything below the terrain surface height to be hidden. If you disable this by adding the line
scene.globe.depthTestAgainstTerrain = false;
``
below the var scene line, then the line will no longer be hidden. An alternative would be to add an offset to the z-values of the positions to avoid them being underground.
From this thread its shown that disabling depth testing reduces performance, but its a simpler fix if you’re just using a Sandcastle example.
So I tried putting in that one-liner about disabling depth testing but it still produced the same result.
When drawing a line through a billboard, the line is sometimes complete and sometimes incomplete depending on the current position of the camera. The incomplete potion of the line is always over some part of the billboard. Dragging the globe around causes the gap in the line to grow and shrink. This error can be seen using the little bit of code above in the Billboards Sandcastle demo. I have a more complicated use case but the code snippet above distills the issue into its simplest case.
I see what you’re talking about now. The one-liner doesn’t fix this. I think I was half right with my original post, the real problem is the z-ordering of the two objects. During the conversion from degrees the billboard gets a slightly higher z-height, so it gets drawn on top of the line. The actual original image used for that billboard has white space as a rectangular border, which blocks some of the line from view as you’ve seen. I found a post from one of the main Cesium guys from this month that said it doesn’t currently have good support for z-ordering anything except imagery layers, but it is on the long-term roadmap with no current ETA.
Now to fix your immediate problem I added a couple lines of code that subtract off a bit of the z-coordinate from the billboard to put it behind the line. Add these lines right below the code snippet from your original post:
var bb = billboards.get(0);
bb.position = new Cesium.Cartesian3(bb.position.x, bb.position.y, bb.position.z - 70000);
``
This might start failing again if you zoom really far out, but its pretty easy to mess around with the offset to get the result you want. Obviously this isn’t an ideal way to get around this, but its the best I can come up with until some more official support is added.
