Metallic gltf model material reflecting blue

CesiumJS
1

Hi all,

image
image552×1078 127 KB

I’ve been trying out the latest Cesium and loading some new gltf 2 models in. I’ve been playing around with metallic textures to get a foil-like effect. Something that has me stumped is that when I load these models into Cesium they always seem to reflect a bluish hue. When I view the model in Blender or other viewers such as https://gltf-viewer.donmccurdy.com/ the material reflects as normal so I’m convinced it’s coming from the scene. This maybe makes sense on an object orbiting over the earth, but in my case of a lunar satellite i’d like to eliminate the bluish light. Any clue where to look to modify this?

Thanks!

2

I’ve created a simple sandcastle to show what I mean

image
image780×592 71.4 KB

It’s a fully metallic surface. In a scene with atmosphere and fog disabled, no imagery provider, and globe base color set to gray. The part I’m curious of if there’s some ability to control the hue of the globe I’m seeing reflected in the surface.

3

Hi @malaretv,

This is due to the default settings for image-based lighting that get applied to the model. If no environment map is provided, it defaults to using a procedural IBL that assumes a highly simplified Earth-like atmosphere.

ImageBasedLighting (e.g. model.imageBasedLighting) doesn’t have any parameters for controlling the procedural IBL colors (only the brightness). However, you can provide your own environment map and spherical harmonic coefficients. See the Image-Based Lighting Sandcastle for an example. The example includes instructions on how to generate the coefficients from an environment map, though note that the instructions may be a bit out of date.

As far as I know, CesiumJS unfortunately doesn’t have a way to capture an environment map from the camera’s perspective. I would suggest looking around for an environment map of the moon’s surface, that might be a reasonable approximation if the goal is to make a metallic material.

Best,
Peter

1 Like
4

Thanks Peter

I’m relatively naive when it comes to 3D graphics so really appreciate the help. Will look into the custom environment map approach. One more question – could CustomShaders also be an option here to get around using the default procedural IBL? In other words, could I use CustomShaders to load a modified version of the proceduralIBL step here with the colors I want

Thanks again Peter!

5

Hi @malaretv,

It’s certainly possible to use CustomShader to add custom lighting code, though note that such a shader will usually require internal shader variables that may be subject to change in future releases. (see this issue. how to manage what shader builtins are available in CustomShader? · Issue #10182 · CesiumGS/cesium · GitHub). If you try this workaround, a couple of points to note:

  1. To turn off the built-in procedural IBL completely, set imageBasedLighting.imageBasedLightingFactor to (0, 0).
  2. Then in your custom shader, compute your own version of procedural IBL. looking at how the overall lighting stage works, you want to add the result to the basic physically-based rendering (PBR) calculation. It feels a bit unusual, but setting material.emissive = customIBL() would add the color correctly. You could also use the more typical material.diffuse or material.specular, but then the PBR code would further modify the result.

Best,
Peter

1 Like