I'm working on a project to visualize a multi-story building. Each floor in the building is rendered as a rectangle, with a GIF of the floor plan as the rectangle's material.
The problem I'm having is when I stack rectangles/floors on top of each other, the lower floor always overlaps the upper floor:
https://drive.google.com/file/d/0B5Z9Y8dwWqggZkNJRTByanFBbHM/view?usp=sharing
But when you rotate your camera view to view the floors side-on, you can see that indeed there are two distinct shapes, one on top of the other:
https://drive.google.com/file/d/0B5Z9Y8dwWqggTDhCbFktZkFMSWc/view?usp=sharing
In the two images above, the first floor is at ground level, while the second floor is at 50 meters (to exaggerate this effect).
Any help in resolving this would be greatly appreciated.
Update: in my example, the space around the floorplan in the GIF is transparent. If I change the material on the bottom floor/rectangle to a solid color with no alpha (e.g., material: Cesium.Color.RED), the strange overlapping/underlapping effect doesn't happen, and the top floor always visually overlaps the bottom floor as it should.
However, if I add alpha to that solid color to make it a little transparent (e.g., material: Cesium.Color.RED.withAlpha(0.5)), once again the top floor appears to be overlapped by the semi-transparent rectangle at ground level in the viewer.
I can't seem to replicate any of this behavior when both of the rectangles are filled with colors or Cesium-generated patterns, but it occurs regularly when stacking shapes whose surfaces have images. It doesn't matter if the images utilize some kind of transparency or not, it will happen with JPG image surfaces just the same.
Thanks for the write up, this may be a precision issue leading to z-fighting. I actually believe there are already changes in place that will address this in the next release (May 1st). If you can post a small example that recreates the issue, it would let us know for sure.
Hi Matthew, thanks for the response on this.
The script will replicate z issues, have attached my test patterns here as well:
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var MB1 = viewer.entities.add({
name : 'First floor',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-97.57229728801785, 35.38565076034797, -97.56750784102364, 35.38878405782641),
material : '[http://localhost:8000/ztest/testpattern1.jpg](http://localhost:8000/ztest/testpattern1.jpg)'
}
});
var MB2 = viewer.entities.add({
name : 'Floor 2',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-97.57061837513408, 35.38640247015902, -97.56876418569031, 35.38801474708156),
material : '[http://localhost:8000/ztest/testpattern2.jpg](http://localhost:8000/ztest/testpattern2.jpg)',
height : 50,
}
});
viewer.zoomTo(viewer.entities);
