Translucent BillboardGraphics

CesiumJS
1

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

2

Unfortunately, the translucecyByDistance has the exact same issue.

3

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? This will apply a darker overlay without showing the content behind.

Thanks,

Gabby

4

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

5

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

Thanks,

Gabby