PBR diffuse color seems off

CesiumJS
1

I’m trying to create models which follow a company styling guide. I’ve created a gltf/glb model with a basic PBR material:

"materials":[
   {
      "name":"freshgreen",
      "pbrMetallicRoughness":{
         "baseColorFactor":[
            0.8039215803146362,
            0.929411768913269,
            0.8039215803146362,
            1
         ],
         "roughnessFactor":0,
         "metallicFactor":0
      }
   }
]

For reference the RGB for that color is: 205,237,205 - or #cdedcd in HEX. Here the link to the google color picker with it set: google color picker - Google Search

I uploded this model to cesium ion to see how it looked and it’s a bit off from the style guide. It just looks a bit greyer or bluer. It’s hard to say what exactly- just not green enough?

I get that rendering is not really easy but in this case there is no other lights or environment so to speak of so I would expect it to match the base color factor pretty closely.

I compared the model in a few other viewers and they’re all a bit different really.

Here’s a screen shot for comparison across a few application including Ion

comparison
comparison1048×1001 204 KB

It’s quite clear from this screen shot that there is something not quite right.

I’ve tried tweaking the baseColorFactor to try and get it to render as I want to but I haven’t had any luck.

I know rendering is extremely complicated, however, I’d love to know why this is happening and if there is some way I can counteract it.

2

Whoops forgot to upload an example: here a box with the same base color set
box.glb (1.5 KB)

3

Hi there,

There are a variety of lighting factors in CesiumJS. I believe this apparent blue tint is due to the default settings in CesiumJS attempting to mimic atmospheric lighting. Mainly, image-based lighting gets applied to the model based on a simple environment map with a lot of blue contribution from the sky.

For example, here is box.glb with the default sun lighting and IBL at the default

image
image1682×864 105 KB

and here I have box.glb with a single white directional light and IBL contributions disabled:

image
image1322×884 89.6 KB

That appears to match the base hue fairly closely once I grab a pixel:

image
image1000×902 58.1 KB

4

Nice to see there is a solution!
I am still stuck with the blue tint… I want to stay as close as possible to the original model’s colors without external lighting influence. I had the desired colours with
glTF 1.0 and Cesium 1.96, but now I have the blue tint with
glTF 2.0 and Cesium 1.101.

Can you provide the source code or hints on how to achieve this ?

with a single white directional light and IBL contributions disabled

I tried this that I got from another post

viewer.scene.light = new Cesium.DirectionalLight({
    direction: viewer.scene.camera.directionWC,
    intensity: 1
});
viewer.scene.preRender.addEventListener(function () {
    viewer.scene.light.direction = Cesium.Cartesian3.clone(
        viewer.scene.camera.directionWC,
        viewer.scene.light.direction
    );
});

with different values from
https://cesium.com/learn/ion-sdk/ref-doc/ImageBasedLighting.html
on my model

var model = Cesium.Model.fromGltf({
    //...
    imageBasedLighting: new Cesium.ImageBasedLighting({
        imageBasedLightingFactor: new Cesium.Cartesian2(0, 0),
        luminanceAtZenith: 0
    })
});
5

Perhaps increase the model’s lightColor since there is not longer a contribution from IDL? You can increase the value beyond 1.0 and the contribution from light sources will be scaled accordingly.

If you still not getting the results you’re expecting, perhaps a custom shader will give you the flexibility you need.

I do understand that it’s unexpected that this tint is applied, though I’d expect IDL to be the main contributor to that.