Canvas with transparency overlapping another and z-fighting.

CesiumJS
1

I’m assigning canvases (images) to rectangle primitives. When I have one canvas overlapping another, the canvas that is below is partially hidden by the canvas that is on top (see attached snapshot). The part that is partially hidden corresponds to the section of the canvas on top that is transparent. I have to use primitives instead of entities because I have to constantly update the material with the updated canvas and the updates cause flickering when using entities. I’m thinking of replacing the rectangle primitive with the custom singleTileImageryProvider that takes a canvas to see if that solves the issue. Is this a z fight issue? Is there a workaround to avoid the issue?

The code when assigning the canvas to the rectangle primitive is below:

var oRectangle = Cesium.Rectangle.fromDegrees(args.data.geoTL.x, args.data.geoBR.y, args.data.geoBR.x, args.data.geoTL.y);
var material = Cesium.Material.fromType(‘Image’, {image: args.data.image}); //--------------> canvas
var options = {
rectangle: oRectangle,
ellipsoid: Cesium.Ellipsoid.WGS84,
asynchronous: false,
show: true,
id: args.id,
material: material
};

var multiPointRectangle = new Cesium.RectanglePrimitive(options);

viewer.scene.primitives.add(multiPointRectangle);

Thanks,

Alberto

canvas overlapping.png

2

I tried by replacing the RectanglePrimitive with a RectangleGeometry and the overlapping issues are till present.

Alberto

3

Hello,

We don’'t currently have great support for z-indexing. As a work around for now, try setting the height of whichever rectangle you want to be on top to a small value.

Best,

Hannah

4

Hanna,

I verified and the issue does not happens in Cesium version 1.14. The issue started happening when I upgraded to version 1.16. I’m going to try in version1.15 and version 1.17 and I will let you know the outcome. I cannot use the workaround you are suggesting because my project has no notion of the z ordering of the shapes that are rendered on the map. This is why we are using canvas with transparency to be able to see the intersection of the areas on the map when the canvas overlap…

Thanks,

Alberto

5

Alberto,

If upgrading doesn’t fix your problem, you can try using GroundPrimitives for your rectangles. GroundPrimitives have better support for overlapping geometry, as you can see in this demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=development/Ground%20Primitive.html&label=Development

Best,

Hannah

6

Hanna,

Setting the alpha value that you suggested to a related issue fixed the the problem for me.

material = this.Material.fromType(‘Image’, {

                image : args.data.image,

                alpha: 0.99

Thanks for your help,

Alberto

7

@hannah is it still the case that cesium doesn’t have good zIndex support?