# \[Cesium 1.17\] Cesium.ImageMaterialProperty issue with translucent PNG **URL:** \ **Category:** CesiumJS\ **Created:** [January 24, 2016, 11:29pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628 "2016-01-24T23:29:52Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Benjamin\_Mur](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@Benjamin\_Mur](https://community.cesium.com/u/Benjamin_Mur)\ **Post date:** [January 24, 2016, 11:29pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/1 "2016-01-24T23:29:52Z")
Hi ! i’ve been using Cesium since the begining, i even created this: [www.hereyougo.fr](http://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](mailto:contact@hereyougo.fr) if you know a fix. PS: i REALY prefer using Entities instead of primitives. Best regards. ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [January 25, 2016, 3:29pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/2 "2016-01-25T15:29:14Z")
Hello, Can you please paste a code example? That will help me determine whether or not this is a bug. Thanks, Hannah ---
**Author:** ![Benjamin\_Mur](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@Benjamin\_Mur](https://community.cesium.com/u/Benjamin_Mur)\ **Post date:** [January 25, 2016, 3:40pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/3 "2016-01-25T15:40:17Z")
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. ---
**Author:** ![Benjamin\_Mur](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@Benjamin\_Mur](https://community.cesium.com/u/Benjamin_Mur)\ **Post date:** [January 25, 2016, 3:46pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/4 "2016-01-25T15:46:53Z")
Ok i’ve just try with the 1.16 Version, the problemis there two. I’ll try with the 1.15. ---
**Author:** ![Benjamin\_Mur](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@Benjamin\_Mur](https://community.cesium.com/u/Benjamin_Mur)\ **Post date:** [January 25, 2016, 3:54pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/5 "2016-01-25T15:54:54Z")
Tryed with 1.15, it works perfectly fine. Problems started to appear since the 1.16. I hope i’ve helped a bit. ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [January 25, 2016, 4:12pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/6 "2016-01-25T16:12:52Z")
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](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 ---
**Author:** ![Benjamin\_Mur](https://avatars.discourse-cdn.com/v4/letter/b/e9a140/32.png) [@Benjamin\_Mur](https://community.cesium.com/u/Benjamin_Mur)\ **Post date:** [January 26, 2016, 12:14pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/7 "2016-01-26T12:14:41Z")
Huge thanks to you!! Really you’re the best ! Thanks a lot! You’re all doing a great job with cesium ! ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [January 26, 2016, 3:48pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/8 "2016-01-26T15:48:50Z")
Thanks Benjamin! Always glad to help =) ---
**Author:** ![Thinh\_Ho](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@Thinh\_Ho](https://community.cesium.com/u/Thinh_Ho)\ **Post date:** [March 17, 2016, 3:11pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/9 "2016-03-17T15:11:25Z")
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. ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [March 17, 2016, 3:55pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/10 "2016-03-17T15:55:43Z")
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 ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [March 28, 2016, 5:21pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/11 "2016-03-28T17:21:05Z")
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 ---
**Author:** ![Thinh\_Ho](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@Thinh\_Ho](https://community.cesium.com/u/Thinh_Ho)\ **Post date:** [March 29, 2016, 11:52am UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/12 "2016-03-29T11:52:49Z")
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? ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [March 29, 2016, 2:13pm UTC](https://community.cesium.com/t/cesium-1-17-cesium-imagematerialproperty-issue-with-translucent-png/3628/13 "2016-03-29T14:13:32Z")
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