# Adding contrast to loaded models without affecting the skybox texture

**URL:** <https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549>\
**Category:** Questions\
**Created:** [January 16, 2021, 10:38pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549 "2021-01-16T22:38:00Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 21, 2021, 2:35pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/21 "2021-01-21T14:35:37Z")

</div>

It’s like every plane crash. It is always a combination of unhandled or mishandled causes that lead to a disaster, isn’t it?😉  
We are currently suggesting (and willing to help) improving the doc with some further explanation for this type of case… don’t know if we will succeed. Overall the topic (considering all parts) is quite complex…  
But I still find it easier to get these type of answers in/for BJS than many others… and I have tried/experienced many.

Edit: I didn’t answer your question, did I?😉  
I guess you will need both though I admit in your case, I haven’t tried. It’s a matter of logic I suppose. I gave you the last part, because the skybox is a bit ‘special’. It is not just an imported mesh. The other parts remain. Though, since there is a default, I admit that (probably) simply setting the skybox material with the above and of course, ’ skyboxMaterial.imageProcessingConfiguration = new BABYLON.ImageProcessingConfiguration();’ will likely exclude your skybox material from all of your post processing effects (by default).

Edit 2: correction, not all rendering/post-process. I have a lens effect rendering pipeline that (thanks God or BJS, because this is what I wanted) still applies. So, the above will work for issues with SSAO (and by extension, probably, the ‘default rendering pipeline’.)

Edit 3: No, this is only for SSAO. And is also good this way if you ask me. You will need to implement the recom of @Evgeni_Popov if you want not to apply contrast on your skybox. And eventually will need to add my 2 lines of code for the skybox. Hope this helps,

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 21, 2021, 4:01pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/22 "2021-01-21T16:01:08Z")

</div>

I have just tried the same approach with the ‘default rendering pipeline’, trying to reproduce your case but It returned me the error saying that this pipeline cannot be reused. I guess I will let the experts answer your case (and may be propose a different approach). It looks to me like you are trying to apply global settings through the rendering pipeline and next trying to ‘discard’ global when (probably the best approach) would be to apply it on your (mesh) material. Well, I’m sorry, I do not have any better answer at this very moment.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 21, 2021, 8:29pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/23 "2021-01-21T20:29:34Z")

</div>

@mawa thank you for great suggestions 😉  
So I try to do this:

skybox = MeshBuilder.CreateBox(“skyBox”, {size:5000.0}, scene);  
skyboxMaterial = new StandardMaterial(“skyBox”, scene);  
skyboxMaterial.backFaceCulling = false;  
skyboxMaterial.reflectionTexture = skyTexture;  
skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX\_MODE;  
skyboxMaterial.diffuseColor = new Color3(0, 0, 0);  
skyboxMaterial.specularColor = new Color3(0, 0, 0);  
skybox.material = skyboxMaterial;  
skybox.material.imageProcessingConfiguration = new ImageProcessingConfiguration();  
skybox.material.checkReadyOnEveryCall = true;  
skybox.material.\_needDepthPrePass = true;  
kybox.material.imageProcessingConfiguration.exposure = 0.2; // 1 by default  
skybox.material.imageProcessingConfiguration.contrast = 2; // 1 by default

so the imageProcessingConfiguration line definitely changes things, the skybox now becomes kind of washed out, different, less contrasty etc, so that may mean that nothing is being applied to it; that’s interesting

but that happens without needing to use these 2 lines:  
skybox.material.checkReadyOnEveryCall = true;  
skybox.material.\_needDepthPrePass = true;

in fact those 2 lines don’t seem to do anything that i see

and in this new configuration if i then can change the contrast of the skybox with  
the contrast and exposure lines and it does work, great.

But, now comes the but. When I now proceed to change the contrast of a model, either directly to its material or to the default pipeline, again it impacts the skybox, just as before 😉

mlr[mcur].material.imageProcessing.exposure = modelExposure[mcur];  
mlr[mcur].material.imageProcessing.contrast = modelContrast[mcur];  
[//defaultPipeline.imageProcessing.exposure](https://defaultPipeline.imageProcessing.exposure) = modelExposure[mcur]; // 1 by default  
[//defaultPipeline.imageProcessing.contrast](https://defaultPipeline.imageProcessing.contrast) = modelContrast[mcur]; // 1 by default

so same issue as before, no goody

If i find no solution I will have to stay with the solution I have so far, which is to edit the skybox image textures and make them on purpose less bright etc to compensate, very hacky though, not pretty 😉

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 21, 2021, 9:14pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/24 "2021-01-21T21:14:02Z")

</div>

> [@javismiles](#):
>
> skybox.material.checkReadyOnEveryCall = true;  
> skybox.material.\_needDepthPrePass = true;
> 
> in fact those 2 lines don’t seem to do anything that i see

Yes, those lines should have no impact for you. `_needDepthPrePass` (actually it should be `needDepthPrePass` as `_needDepthPrePass` is a private property) simply instructs the system to render first the mesh to the zbuffer before rendering it normally. So that’s something that is not relevant to your problem (except if I miss something). `checkReadyOnEveryCall` is automatically set to `true` when calling `needDepthPrePass=true`, it’s a property you should normally not change yourself. So you are good to remove those 2 lines 🙂

Regarding your other problem, it does work for me. If I change the cameraContrat through another material, the material I explicitely created an image processing configuration retain its values:

> **[Babylon.js Playground](https://playground.babylonjs.com/#0N4SLH%237)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

After 2s, I change the cameraContrat of the “metal” material: the black sphere and the skybox don’t change as they have their own custom image processing instance.

You must have a problem somewhere else if it does not work for you.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 21, 2021, 10:10pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/25 "2021-01-21T22:10:53Z")

</div>

@Evgeni_Popov thank you Evgeni, you are right I must have some other issue in my code, I will try to analyze it more in depth so try to find the problem thank you 🙂

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 8:16am UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/26 "2021-01-22T08:16:22Z")

</div>

You are right (as always). Thanks for the explanation for SSAO though I realized only later that this was not topic. I got lured by the first answer because I was looking for this part. And, yes ‘CheckReadyonEveryCall’ is not required (I wonder why it records this in the first place when you activate needDepthPrePass?)… And your example for this case is very good. I added this straight to my files:)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 22, 2021, 11:47am UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/27 "2021-01-22T11:47:16Z")

</div>

> [@mawa](#):
>
> I wonder why it records this in the first place when you activate needDepthPrePass?

That’s because when setting `needDepthPrePass = true`, the function called sets `checkReadyOnEveryCall` to `true`. As the default value of `checkReadyOnEveryCall` is `false`, the recorder sees this as a delta and add `checkReadyOnEveryCall = true` to the recording.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 22, 2021, 1:16pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/28 "2021-01-22T13:16:37Z")

</div>

@Evgeni_Popov @mawa issues with this  
[https://playground.babylonjs.com/#0N4SLH#7](https://playground.babylonjs.com/#0N4SLH#7)

the difference is that you are creating materials from scratch, in my case I am loading models that already come with PBRmaterials inside, and cannot recreate them

so I repeat what you are doing and it kind of works but I have a big big issue

I set a imageProcessingConfiguration = new ImageProcessingConfiguration(); for both skybox and material of object

and yes they are independent now but

when I change contrast of object with cameracontrast I cannot raise it much because it terribly saturates and it breaks all the colors and looks terrible

this does not happen when contrast is applied in the previous way, and makes it unusable, any tips?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 1:27pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/29 "2021-01-22T13:27:51Z")

</div>

I see. What about using this tweak around

> [@Evgeni\_Popov](#):
>
> By default, all materials share the same image configuration, which is an instance hosted by the scene.

If you were to create an (invisible object in the scene) and apply the same (standard or pbr material as used (or applied to) your imported model, you would be able to play (globally or seperately) on the levels (of diffuse, emissive, etc…). All you would need to do is create a range of suitable materials. I don’t know how many meshes you have (if it is for 3D commerce, are there hundreds of em?) In case, I believe it would be important to get the right method/workflow.

And next, I’d like to mention that ‘contrast’ and ‘exposure’ or ‘brightness’ performed at scene or post processing level is not the same than having a correctly configured material. Yes, you can correct the brightness/exposure and contrast slightly this way, but it will still apply in a linear manner. I believe having a correctly set material is the best way to go.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 22, 2021, 1:30pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/30 "2021-01-22T13:30:32Z")

</div>

@mawa, thank you, that cannot be the way, because i may have a lot of models, my models come from 3d software and their materials are all good, but its normal to have to do final adjustments of their contrast and exposure in babylon.js to adapt to the babylon environment

what i notice, and its the last thing to fix, is that if exposure and contrast values go beyond some thresholds, they just change to terrible ugly colors, is there any setting to prevent this? its kind of odd

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 22, 2021, 1:33pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/31 "2021-01-22T13:33:05Z")

</div>

@mawa @Evgeni_Popov in fact, i really like this solution, now both are independent so i can finally change contrast and exposure of specific model without the skybox changing. So this is great indeed.  
I just don’t know why mmm the material is so sensitive when it approaches some thresholds, I don’t remember this happening when changing the global stuff, in any case maybe this works if i am just careful not to approach those edges

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 1:37pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/32 "2021-01-22T13:37:53Z")

</div>

Yes, well. That’s one of the things I like but also challenge with BJS’s inspector (if you are working with the sliders). I think it is great to be able to set i.e. a value of 2 as a max for texture level. This way I can i.e. make black or white clouds simply playing with the levels. On the other hand, some inputs with the slider (or even to enter as a value, again in the inspector only) can be a bit tricky. I guess what is important since you have so many models and apparently are setting-up a workflow, is that you choose the right option… understand the option that will work for your needs.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 22, 2021, 1:38pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/33 "2021-01-22T13:38:18Z")

</div>

> [@javismiles](#):
>
> in any case maybe this works if i am just careful not to approach those edges

I do think it works, must be something with your materials being sensitive to those parameters.

> [@javismiles](#):
>
> but its normal to have to do final adjustments of their contrast and exposure in babylon.js to adapt to the babylon environment

I would beg to differ here. Adjusting those parameters at the global scene level, yes, to adapt the final rendering to what you want. But adjusting those parameters at the material level I’m not really sure… A 3D artist would know better than me, however.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 1:40pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/34 "2021-01-22T13:40:07Z")

</div>

I agree to your comment on design/material (though I’m still not sure to be a ‘pure’ 3d artist 😉  
Edit: Of course speaking about ‘adjustments’. If a material is wrong in essence, it will remain wrong with whatever ‘adjustment’.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 22, 2021, 1:44pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/35 "2021-01-22T13:44:36Z")

</div>

@Evgeni_Popov @mawa  
adjusting the global scene would be great if it wasnt because the skybox textures are set with a specific level of contrast and exposure and you do have to balance that to the materials of your models, therefore it does make sense to tweak either one (the skybox textures) or the other (the model materials).

What I notice, its interesting, is that if i set a general scene contrast, and then tweak the material of model i can get by ok, dont need to put contrast of material above 2.0; but if scene starts with low contrast, then trying to increse contrast of material of model to 3.0 for exampel just breaks everything and enters into rainbow land

so at this point I would say:

- one solution is my previous solution; dont touch material of models, just edit skybox textures as needed

- the other solution which actually I like is a combination of both; i edit the skybox texture as needed, but then I Set a baseline scene contrast and then change model material contrast as well as needed, this seems to work quite nicely

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 1:53pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/36 "2021-01-22T13:53:18Z")

</div>

Don’t know what to say. There is the tech and there is the human eye. It’s often a matter of compromise, isn’t it?  
May be, if you would be able to set up a PG showing your problem (the level of difference between 2 models), people here could help you find the most appropriate way for your needs…  
Personally, I’m a very visual person. It’s hard for me to figure what your issue really is and next give any valuable input on this. Sry.

---

<div class="post-metadata">

**Author:** ![javismiles](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/javismiles/32/12924_2.png) [@javismiles](https://forum.babylonjs.com/u/javismiles)\
**Post date:** [January 22, 2021, 1:58pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/37 "2021-01-22T13:58:21Z")

</div>

@mawa @Evgeni_Popov thank you, you have already helped a lot, this community really is the most helpful community of this kind that I have ever seen 😉 I think with this latest tests I will manage to tweak it as needed, hopefully 😉

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [January 22, 2021, 1:59pm UTC](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549/38 "2021-01-22T13:59:26Z")

</div>

GL and you are sure welcome any time  
Have a great day, 😃

[Previous page](https://forum.babylonjs.com/t/adding-contrast-to-loaded-models-without-affecting-the-skybox-texture/17549.md?page=1)
