PBR Material Texture Lacks Vibrancy

Questions
,
1

Babylon’s PBR Material with HDR lighting doesn’t render as vibrant colors (lacks saturation) as the original texture.

Here is an example of albedo texture used.

And here is the PG using the same texture with PBR Material. (please comment out AO texture to see the difference - it gets lighter, but still lacking the vibrant colors of the original albedoTexture.

Could there be a setting for this? cc @sebavan or @PatrickRyan ?

2

I suppose this is not a question but rather a request for change.
I suppose if you wanted to approach this result with what we already have, it wouldn’t be mine to tell you how to.
Anyway, I often use the trick of increasing the directIntensity while lowering the env tex level (to compensate). Additionally, I use to push the contrast a little while using tone mapping. In the end I can come pretty close to the effect of more ‘vibrant’ color.

Now, if you ask me an additional setting for vibrance would be very welcomed. Providing it would work as ‘vibrance’ is supposed to work.

2 Likes
3

@PatrickRyan can probably help with this ?

4

@ecoin, when approaching textures and lighting your scene, unless you apply your albedo texture to an unlit material, you will never have an exact match for your texture due to the lighting and tone mapping contributions in your scene. In looking at your scene, the IBL you are using is fairly neutral with desaturated grey tones, which will have an effect on the vibrancy of your texture as the grey tones will contribute to the final render. To give an example, I dropped several different IBLs into your scene to illustrate what happens:

image
image1920×1920 357 KB

The image shows a box around the area of the texture displayed on the mesh and each version is labeled with the lighting variant. Here are the variations:

  1. This is the mesh as it renders in the base scene you supplied
  2. The first thing I noticed is that you had a hemispheric light in the scene. You can bring back a little of the warmth in the base color by tinting the light. In this case the color is a slightly warm white (252, 245, 200) which can warm the colors in the albedo back up.
  3. This is what the mesh looks like without the hemispheric which gives it a little more directionality in the light since the hemispheric does not even things out anymore. Each example beyond this one is going to be the IBL alone without the hemispheric light.
  4. This is our basic studio lighting. We don’t have as much grey in this HDRI as in the original, so the colors are a little less influenced, but since the background is largely black, when we mip out to the required roughness, we will have introduced greys back in. But this light is fairly unbiased.
  5. The Flower Road HDRI is a typical outdoor image with large blue sky and sun, but the ground is largely warm reddish tones of a dirt road. You can see the top of the mesh is much cooler than the bottom which is much warmer.
  6. The Lythwood Lounge HDRI is a very warm, interior space with some natural light bouncing in from the windows. The overall effect is to warm and saturate the colors on the mesh.
  7. Studio Garden has grass below and a tree canopy above. While it is surrounded by green, it is more a blue-green in the HDRI, so the overall effect is cooler.
  8. Old Bus Depot HDRI is also fairly neutral, but I did bump up the saturation and hue shift very slightly warmer than the original image. This is a more even lighting while being warmer than anything with a lot of blue in the image.

All of these images are from Poly Haven and I tried to choose several lighting conditions to illustrate how the IBL is always going to influence the albedo texture of your PBRMaterial. Beyond the particular IBL you use in your scene, you will also need to pay attention to your tone mapping. We have a standard tone mapping for Babylon.js, but you may want to use a different tone mapping like ACES Filmic. If this is the case, you should apply the tone mapping to the scene as you are designing the lighting environment as the final look will be greatly affected.

Aside from authoring your IBL to be a specific color temperature or setting your tone mapping, if you find at the end of the day that your render is simply too desaturated or you want to make an overall shift in the scene render, you can always apply a LUT. In this sense, you can create a color grading texture (LUT) just to increase the scene saturation and apply it as a post process to the final render. You can create any number of looks with a LUT, some quite extreme..

Updated scene with lighting variations

I hope this helps explain what is going on, but if not feel free to ping me back.

6 Likes
5

Thank you so much, Patrick, for such resourceful explanation!

I specifically added Hemispheric light to boost the saturation to the max possible (disabling Hemi made it worse), to compare against the same set of textures + HDR env file sample in 3D mode in PolyHaven (they use Threejs). For some reason, they have a lot more accurate color correction than Babylon. From source code, they don’t seem to have extra light, unless it is embedded in gltf file.

These are the kind of settings I’m looking to apply by default.

How can I adjust this in code? (the post process docs page you linked to does not mention it, and I wasn’t able to find anything with Google related to Babylon). This PG I did made no difference setting it to ACES tonemapping):

    var postprocess = scene.imageProcessingConfiguration
    engine.setHardwareScalingLevel(0.5);   
    postprocess.toneMappingType = BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES;

The goal is to get similar results to Threejs out of the box, and then make it even better with more accurate lighting and color correction. Perhaps Poly example had some other analytical lights added?

I’m building a standardized asset library, so no manual tweaking per scene is possible. The solution must be universal - the default base line that works for all textures with all HDR files.

6

You should ask them how they are setting up the environment, which tone mapping they use, etc… Without that you are not comparing apples to apples

7

Here is a tonemapped version with exposure if you need the code: https://playground.babylonjs.com/#YIU90M#785

1 Like