Overruling feature color with a Cesium3DTileStyle

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I'm loading 3D tiles in Cesium that already have some color themselves. Now I want to color the primitives/geometry within these tiles with a color based on properties (such as year of construction etc.). This works, but the original color of the feature still shines through.

I have tried different things, such as setting the colorBlendAmount to different values, setting the colorBlendMode to different settings etc.

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

This is the basic function I wrote to add new layers to the viewer:

function addTileSet(url) {
  var tileset = new Cesium.Cesium3DTileset({
    url: url
    // colorBlendAmount: 0,
    // colorBlendMode: Cesium.Cesium3DTileColorBlendMode.HIGHLIGHT //MIX REPLACE HIGHLIGHT
  });
  viewer.scene.primitives.add(tileset);
  // viewer.zoomTo(tileset); // optional zoom to added layer
  return tileset;
}

And with a function like this I try to apply color to the geometry:
This function will now just set a static color. I pass in a tileset and the color I want the buildings to be.

function colorByHeight(tileset, color) {
  tileset.style = new Cesium.Cesium3DTileStyle({
    color: `color("\{color\}"\)\`,     backgroundEnabled: 'false'     // conditions: \[     // \['{height} >= 300', 'rgba(45, 0, 75, 0.5)'],
    // ['\{height\} >= 200', 'rgb\(102, 71, 151\)'\],     // \['{height} >= 100', 'rgb(170, 162, 204)'],
    // ['\{height\} >= 50', 'rgb\(224, 226, 238\)'\],     // \['{height} >= 25', 'rgb(252, 230, 200)'],
    // ['\{height\} >= 10', 'rgb\(248, 176, 87\)'\],     // \['{height} >= 5', 'rgb(198, 106, 11)'],
    // ['true', 'rgb(127, 59, 8)']
    // ]
    // }
  });
}

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

I need the original color to be replaced by the color according to the attribute.

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

I'm using the latest Cesium version on Windows 10 with the Chrome browser.

2

So there’s two things here. The first is that by default the supplied color will be multiplied with the original color, so setting it to the REPLACE blend mode is the right thing.

https://cesiumjs.org/Cesium/Build/Documentation/Cesium3DTileColorBlendMode.html#Cesium3DTileColorBlendMode

The other thing to note on that page is what it says about using the _3DTILESDIFFUSE semantic. This is how the styling language knows which color is the diffuse, so it can be replaced.

Does your tileset contain glTF models? If so, are they glTF 1.0 or 2.0? If it’s 1.0 you might need to define that semantic. If it’s glTF 2.0 I think it should work, but if it isn’t please let me know. Providing the sample tileset you’re using to test would also help.