Set opacity for Cesium3dTileset while keeping original color

CesiumJS
1

I would like to control the opacity for a Cesium3dTileset while keeping the original color. I can do that if the tileset has only point cloud data using a style rule of
{color: ""rgba(${COLOR}.r * 255, ${COLOR}.g * 255, ${COLOR}.b * 255, " + alpha + ")"}

However COLOR is only defined for point cloud data. It causes an error if there is non point cloud data in the tileset. Is there a way to set just the opacity without having to set the RGB values?

2

Had to use this snippet to get it to work for both point and mesh data:

tileset.style = new Cesium3dTileStyle({
  color:
    "undefined === ${COLOR}.x ? color('white', " +
    alpha +
    " ) : rgba(${COLOR}.r * 255, ${COLOR}.g * 255, ${COLOR}.b *255, " +
    alpha +
    ")",
});

The color white is a special value. See the comment in ColorBlendMode and the example of setting defaults in setting default values for styling. It will render the tileset’s original color value for meshes.

However that does not work for point clouds. See this sandcastle with points that appear white. For that you need to use the ${COLOR} variable provided for point clouds only to get the original color.

The solution expression combines both of these cases with a conditional to check if we have the ${COLOR} variable available.

1 Like
3

@mdc9001

I am glad to see that this has been resolved. Thank you for posting an update!

-Sam

4

I am getting blown out colors rather than transparency with above expression, cannot reproduce on data sets we that arent our inhouse creation. No good idea where to start looking

image
image636Ă—512 129 KB

5

const viewer = new Cesium.Viewer(“cesiumContainer”, {
orderIndependentTranslucency: false
});
seems to help. Is it going to be much slower?