# Translucent BillboardGraphics

**URL:** <https://community.cesium.com/t/translucent-billboardgraphics/6330>\
**Category:** CesiumJS\
**Created:** [December 5, 2017, 3:13pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330 "2017-12-05T15:13:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Scott\_Haynes](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_haynes/32/2063_2.png) [@Scott\_Haynes](https://community.cesium.com/u/Scott_Haynes)\
**Post date:** [December 5, 2017, 3:13pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330/1 "2017-12-05T15:13:50Z")

</div>

**1. A concise explanation of the problem you’re experiencing.**

We are using 2525B symbol icons on billboards to represent units on the globe. As the units are damaged, I’ve been setting the alpha of the billboard’s color(white) to make the unit translucent. This works well until you have several units stacked in the same area. The stacked units appear white. I’m looking for an alternate solution to avoid the white appearance. I don’t think I want to change the translucecyByDistance? Or should I just set that so that the camera is always far or always near?

**2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.**

\*\*// \*\*DEFAULT\_BILLBOARD\_COLOR = Cesium.Color.WHITE

var healthColor = DEFAULT\_BILLBOARD\_COLOR.withAlpha( Math.max( 0.10, value / 100.0) );

var billboard = node.cesiumObj.billboard;

if ( billboard.color.setValue ) {

billboard.color.setValue( healthColor );

}

**3. Context. Why do you need to do this? We might know a better way to accomplish your goal.**

**Described above.**

**4. The Cesium version you’re using, your operating system and browser.**

**Windows 10, Chrome v62, Cesium 1.40**

![whiteUnitIcons.png](https://global.discourse-cdn.com/cesium/original/1X/cf0592c5306f04ec5e018f8469923c5977264264.png)

---

<div class="post-metadata">

**Author:** ![Scott\_Haynes](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_haynes/32/2063_2.png) [@Scott\_Haynes](https://community.cesium.com/u/Scott_Haynes)\
**Post date:** [December 5, 2017, 4:21pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330/2 "2017-12-05T16:21:07Z")

</div>

Unfortunately, the translucecyByDistance has the exact same issue.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [December 6, 2017, 9:54pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330/3 "2017-12-06T21:54:06Z")

</div>

Hi Scott,

Setting the alpha to something translucent will always display the content behind that billboard. so I don’t think the white can be avoided when stacked. Can you set the color to a gray maybe, like [Cesium.Color.DARKGRAY](http://Cesium.Color.DARKGRAY)? This will apply a darker overlay without showing the content behind.

Thanks,

Gabby

---

<div class="post-metadata">

**Author:** ![Scott\_Haynes](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_haynes/32/2063_2.png) [@Scott\_Haynes](https://community.cesium.com/u/Scott_Haynes)\
**Post date:** [December 11, 2017, 7:29pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330/4 "2017-12-11T19:29:05Z")

</div>

I tried changing to DARKGRAY, but the results were undesirable. I did however find an alternative solution which is working quite nicely. I’m loading the images into a canvas and then set the alpha of the background color to zero based upon percentage of health.

Scott

![drainUnitIcons.png](https://global.discourse-cdn.com/cesium/original/2X/4/4b21a2ac5467ad07cc059c85e2d82cefde2eee62.png)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [December 12, 2017, 9:13pm UTC](https://community.cesium.com/t/translucent-billboardgraphics/6330/5 "2017-12-12T21:13:11Z")

</div>

Sorry my suggestion didn’t work for you, but thank you for updating with a better solution!

Thanks,

Gabby