[Cesium 1.17] Cesium.ImageMaterialProperty issue with translucent PNG

CesiumJS
1

Hi !

i’ve been using Cesium since the begining, i even created this: www.hereyougo.fr

I used to display some ellipses with translucent PNG with the Cesium.ImageMaterialProperty.

Is used to render is well, since i switch to the 1.17 version of cesium.

Now, the translucent parts of the PNG are white.

But, if i use a primitive, it will work.

I really prefer using the entity API instead of the primitive API.

Did you already know this issue? have you planed to fix it?

I’ll try with the 1.16 version wich has some of the features i want (terrain exageration for instance).

Hope this bug is only there in the 1.17.

Please catch me at contact@hereyougo.fr if you know a fix.

PS: i REALY prefer using Entities instead of primitives.

Best regards.

2

Hello,

Can you please paste a code example? That will help me determine whether or not this is a bug.

Thanks,

Hannah

3

Hi

Here is a sample:

var toto = ellipseDS.entities.add({

position : new Cesium.CallbackProperty(function(){

return position;

}, false),

show: true,

ellipse : {

semiMinorAxis : new Cesium.CallbackProperty(function(){

return radiusToto;

}, false),

semiMajorAxis : new Cesium.CallbackProperty(function(){

return radiusToto;

}, false),

material : new Cesium.ImageMaterialProperty({

image : “img/toto.png”

})

}

});

All the variables are correctly created, the ellipse is created, but there is a probleme with the PNG rendering.

This code hasn’t changed since cesium 1.14, and it worked perfectly fine with this version, so i think it’s a bug in the 1.17 version.

I’ll try to test with the 1.16 just to narrow down the version where it started.

4

Ok i’ve just try with the 1.16 Version, the problemis there two.

I’ll try with the 1.15.

5

Tryed with 1.15, it works perfectly fine.

Problems started to appear since the 1.16.

I hope i’ve helped a bit.

6

Thanks for all the info! I can confirm this is a bug that was introduced in 1.16. I’ve submitted an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3459
For now, as a work around, the image will render correctly if you add an alpha value to the material. Here is an example:

viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-100, 40),
show: true,
ellipse : {
semiMinorAxis : 500000,
semiMajorAxis : 1000000,
material : new Cesium.ImageMaterialProperty({
image : ‘…/images/Cesium_Logo_overlay.png’,
alpha: 0.99
})
}
});

``

Best,

Hannah

7

Huge thanks to you!!

Really you’re the best !

Thanks a lot!

You’re all doing a great job with cesium !

8

Thanks Benjamin! Always glad to help =)

9

We are also experiencing this issue when we upgraded from Cesium 1.13 to 1.19. We use CZML… Would this work?

(polygon.material)

“material”: {
“image”: {
“image”: {
“uri”:“data:image/png;base64,<…>”
}
},
“alpha”:(Is this the right attribute location?)
}

``

Thank you.

10

I think your alpha value is in the wrong place. This should work:

“material” : {
“image” : {
“image” : {
“uri” : “…/images/Cesium_Logo_Color.jpg”
},
“alpha” : 0.9
}
}

``

Best,

Hannah

11

Hello,

This issue was just fixed and will be available in the upcoming Cesium 1.20 release, available on April 1st.

From your CZML, set the material.image.transparent property to true:

“material” : {
“image” : {
“image” : {
“uri” : “…/images/Cesium_Logo_Color.png”
},
“transparent” : true
}
}

``

Best,

Hannah

12

Great! Thank you for the heads up!

The ‘alpha’ attribute seem to work great also. We initially ran into the problem because our data provider modifies the original image with an alpha value and that gets encoded and sent out to Cesium. We changed it so that the data provider sends out the original image (no alpha, encoded) with the ‘alpha’ attribute in the CZML. I assume this would still work with the 1.20, right?

13

The ‘alpha’ attribute is actually going to be deprecated in 1.20 and removed in 1.21. This is because I added a color attribute that you can use to tint the image. The ImageMaterialProperty will now get the alpha value from material.image.color.a

So it will still work in 1.20, but you will have to either use transparent: true or color: { rgba: [1.0, 1.0, 1.0, alpha] } for 1.21

Best,

Hannah