Canvas with transparency overlapping another and z-fighting.

[Alberto Acevedo]

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

[Alberto Acevedo]

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

Alberto

[Hannah Pinkos]

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

[Alberto Acevedo]

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

[Hannah Pinkos]

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

[vasc...@aol.com]

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

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.