Canvas with transparency overlapping another and z-fighting.

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

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

Alberto

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

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

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

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