I'm currently toying around with the Cesium KML branch, tweaking and fixing a variety of issues I've come across and I'm hoping I could get a little bit of help with this latest problem (which seems like it's likely just a 1 line fix... but I just can't seem to figure it out).
I'm loading a png image blob ("processGroundOverlay") and the PNG has transparency associated with it... the current code:
var rectangle = new RectangleGraphics();
...
var icon = thePngImageBlob;
material = new ImageMaterialProperty();
material.image = new ConstantProperty(icon);
...
rectangle.material = material;
This results in the entire globe being wrapped in a layer of white, but the PNG contents are properly draped on their location.
I've also tried this without the image blob and loading the png from a url and I get the same results.
How do I set the RectangleGraphics to recognize the transparency in its material?
I would expect this to work since the image material is defined by a diffuse material (RGB) and alpha material (A). Have you tried using the material directly (like this example)? Are you sure the PNG has an alpha channel? Can you share it?
The png definitely does have an alpha channel. If I use the png file as a regular material as shown in the example, transparency works as expected. Since this is a RectangleGraphics rather than just a Rectangle though, I'm having to use Properties rather than just using the material directly (right?). It's appears that when I try to use the ImageMaterialProperty's .image that things seem to go haywire and transparency is no longer respected.
I have attempted to do the following and not use the ImageMaterialProperty... but this does not work at all:
rectangle.material = new ConstantProperty(new Material({
fabric : {
type : 'Image',
uniforms : {
image : icon
}
}
}));
This is causing the following error to be thrown: "Developer Error: clone is a required function."
Ok, I found the problem. Turns out it was actually something entirely different. Because I was loading a large KMZ there was actually another GroundOverlay I had overlooked and that overlay image was coming from an external server. This was causing a cross domain access request which was not allowed. SO, it looks like if you create a RectangleGraphics with an undefined image it causes the white I was seeing.
As a temporary fix, I'm now doing a check on all images (ground overlays and icons) to see if they'd constitute a cross domain request... if they do I don't show that item. Voila, I have everything showing that I had originally expected.
Another option is to use a proxy so that you can retrieve images that don’t have the CORS flag set. This will be a common problem once KML is in Cesium master.
I seem to be having a related issue with transparent areas of an image showing as black in version 1.17
What I did find was if I set the alpha to something less than 1.0 (say 0.9) the transparent areas of the image display OK. Though, I'm not exactly thrilled about leaving the rest of the image at that opacity.
Any ideas?
Thanks.
It sounds like that is related to this issue: https://github.com/AnalyticalGraphicsInc/cesium/issues/3459
I don’t think there is any other workaround at the moment. Setting the alpha to 0.99 shouldn’t be perceptible as transparent but will render the transparent areas correctly.
Thank you Hannah. Only wish I had found that issue before my trial'n error to find the workaround
Coincidentally - I ran into it loading in KMZ, too.
btw - I had a different issue with KMZ loading that I also couldn't find a solution online -- but dealt with path's to (image) files within KMZ -- in particular '\' was replaced with '/' for the 'keys' to an image blob (for uriResolver) and therefore images were not found within the KMZ. I ended up placing a second check within resolveHref as a temp. Somthing like:
var tmpHref = href.replace(/\\/g, "/");
var blob = uriResolver[tmpHref];
if (defined(blob)) {
hrefResolved = true;
href = blob;
}
This issue where transparent images were showing as black has been fixed and will be available in Cesium 1.20. An image loaded from KML will automatically have the transparent property applied correctly.
