3D Tile Style - Help with color

sergkr · April 5, 2020, 1:28am

Greetings!

I am trying to style my 3D tiles according to the 3D Tile Style spec. However, I am struggling with getting it to look the way I want. Specifically, when using Cesium3DTileStyle, I am finding that the colors are coming out very washed out and “dull” looking, and the material loses much of its specular highlights / reflectivity, as compared to when I don’t rely on Cesium3DTileStyle and simply use the material colors that I hardcode into the model. Even though the colors I specify are exactly the same in both cases, the result looks very different.

Here is a comparison of what the colors look like when I set them directly via glTF material, versus when I specify the same colors via 3D Tile Style:

Notice the specular highlight from the sun, and the (relatively) vibrant colors in the first version.

In the second version, I set the time of day to be the same and aligned the camera view as closely as possible. I specified the same colors via 3D Tile Style, and yet the result appears much more “dull” looking. The material has the same metallic/roughness parameters, except I replaced it with pure white in glTF.

You can also compare these examples live here:

V1 (glTF material):
https://airspace-cesium-demo.s3.amazonaws.com/index.html

V2 (Cesium 3D Tile Style):
https://airspace-cesium-demo.s3.amazonaws.com/index2.html

Any idea why the result looks so different? And is there anything I can do to restore some of the “luster” that was lost when moving to Cesium 3D Tile Style?

I suspect this may have something to do with color blending. I saw documentation for the colorBlendMode property on Cesium3DTileset, which suggests that by default it will blend the color from the material with the color specified in Cesium. Which might explain why it looks a bit “washed out” in the second example, since it’s blending pure white with the actual color I want. I’m not sure if that’s how it works, I’m just speculating here… but based on that, I tried a couple more things.

First I tried setting the property to REPLACE instead of HIGHLIGHT, but it didn’t have any effect. I did see the documentation for Cesium3DTileColorBlendMode, which says that to use REPLACE, you need to set the _3DTILESDIFFUSE semantic. It wasn’t entirely clear, but after doing a little more research, it appears this semantic applies if you’re using the KHR_materials_pbrSpecularGlossiness extension.

So I modified the glTF generation process to use that extension, and also tried adding the “techniques” key to my glTF model. I’m not entirely sure if I did that part right, since I didn’t see this techniques property in the glTF 2.0 spec - I just added it to the root of the model, but not sure if that’s where it goes. But that didn’t seem to have any effect.

Anything else I could try?

omar · April 7, 2020, 5:33pm

Hey, welcome to the Cesium community!

I’m not sure exactly where the color difference is coming from, but I can tell you where to check to see exactly how the material is set up when CesiumJS loads in glTF models. It happens in processPbrMaterials.js:

github.com

CesiumGS/cesium/blob/0298fa0ada6bbaca3f32f58824514c0854a08201/Source/Scene/processPbrMaterials.js#L109


    var extension = value.extensions.KHR_texture_transform;
    generatedMaterialValues[uniformName + 'Offset'] = defaultValue(extension.offset, DEFAULT_TEXTURE_OFFSET);
    generatedMaterialValues[uniformName + 'Rotation'] = defaultValue(extension.rotation, DEFAULT_TEXTURE_ROTATION);
    generatedMaterialValues[uniformName + 'Scale'] = defaultValue(extension.scale, DEFAULT_TEXTURE_SCALE);


    if (defined(value.texCoord) && defined(extension.texCoord)) {
        generatedMaterialValues[uniformName].texCoord = extension.texCoord;
    }
}


function generateTechnique(gltf, material, materialIndex, generatedMaterialValues, primitiveByMaterial, options) {
    var addBatchIdToGeneratedShaders = defaultValue(options.addBatchIdToGeneratedShaders, false);


    var techniquesWebgl = gltf.extensions.KHR_techniques_webgl;
    var techniques = techniquesWebgl.techniques;
    var shaders = techniquesWebgl.shaders;
    var programs = techniquesWebgl.programs;


    var useSpecGloss = isSpecularGlossinessMaterial(material);


    var uniformName;

If there is a difference in what you do with the glTF material and in what the 3D Tiles styling color does, I think it would be in the applyStyle function in Batched3DModel3DTileContent.js. You can see there how it creates the model and what uniforms and properties it sets up.

This looks like a pretty cool visualization! Is this airspace data publicly available?

sergkr · April 7, 2020, 6:39pm

Thanks Omar, that gives me a starting point. I will step through the code and see what I can figure out.

The airspace data is publicly available from the FAA as a set of shapefiles via their 28 Day NASR Subscription:

https://www.faa.gov/air_traffic/flight_info/aeronav/aero_data/NASR_Subscription/

Though the source data is somewhat messy, and it took quite a bit of post-processing to convert the data into something more useful (flattening/merging overlapping regions, cleaning up tiny “slivers”, etc). Once I’m a bit further along, I plan to release the complete visualization, including all the clean up routines, as open source.

omar · April 8, 2020, 4:03pm

This would definitely be very cool to share on the showcases category when it’s ready, especially if others can re-use it in their work!

Michael_Haberler · August 21, 2023, 7:31pm

Hi Sergey,

I’d really appreciate if you could publish the code used to generate the 3D tiles & gltf models!

best regards
Michael