Adding contrast to loaded models without affecting the skybox texture

Good day,
I have models loaded and around them an skybox texture with clouds.

My issue is that my loaded models need some extra contrast punch, which I can give them with this:
defaultPipeline.imageProcessing.contrast = 2.0; // 1 by default

That works great for the models themselves, but the problem is that this also impacts the cloud texture in the skybox which then becomes all saturated towards white

How can I bring more contrast to my models without impacting the skybox texture?

thank you :slight_smile:

By default, ImageProcessingPostProcess, StandardMaterial and PBRMaterial share the same configuration object (The one from the scene). This means that if you change a value on scene.imageProcessingConfiguration or directly on ImageProcessingPostProcess, StandardMaterial or PBRMaterial, this will affect all entities sharing the same configuration.
You can also decide to instantiate your own configuration and affect it to your material or to your postprocess with postProcess.imageProcessingConfiguration = new BABYLON.ImageProcessingConfiguration() . In this case, you will be able to configure this object independently. - How To Use Post Processes | Babylon.js Documentation

Or you may try to use scene.environmentIntensity() instead of pipeline - Scene | Babylon.js Documentation

3 Likes

Thank you @labris, This did answer my small issue with SSAO and my Skybox & clouds layers :smiley:
Glad I came here visiting this post :stuck_out_tongue_winking_eye:

2 Likes

@labris thank you very much for your help, I am just not sure how to apply what you suggest,

so I want to take this code:

var defaultPipeline = new DefaultRenderingPipeline( "DefaultRenderingPipeline", true, // is HDR? scene, scene.cameras ); defaultPipeline.imageProcessing.contrast = 1.35; // 1 by default

and say now change it to this:
var postProcess = new ImageProcessingPostProcess("processing", 1.0, camera); postProcess.imageProcessingConfiguration = new ImageProcessingConfiguration()
to apply contrast just to the model, not to the scene, but how?
the documentation doesnt really show, as far as I can see, how to then apply the effect to just 1 model for example

than you for your help :slight_smile:

@labris so to apply it to just a specific model i am trying this but doesnt work so far

var postProcess = new ImageProcessingPostProcess(“processing”, 1.0, camera);
postProcess.imageProcessingConfiguration = new ImageProcessingConfiguration();
mymodel.postProcess.contrast = 3.35;

I’ll try to make some example later.

Here is another way to exclude skybox - How I can exclude skybox from SSAO - Questions & Answers - HTML5 Game Devs Forum

@labris thank you very much, i checked that link, using a double camera seems quite complex, hopefully there is an easier solution with the single camera ooops

Did you try to use scene.environmentIntensity() instead of pipeline?
You can check if it suits your needs with Inspector settings (IBL Intensity, the last one at the screenshot)

@labris i wanted to try that but i dont see how to use that in the code? what is the code command?

For example,
scene.environmentIntensity = 1.5;

@labris what i need is to change contrast, not intensity, I dont think that intensity will help; I found this though:
var wood = new BABYLON.PBRMaterial(“wood”, scene);
wood.reflectionTexture = hdrTexture;
wood.directIntensity = 1.5;
wood.environmentIntensity = 0.5;
wood.specularIntensity = 0.3;
wood.cameraExposure = 0.9;
wood.cameraContrast = 1.6;

maybe this helps, can I apply individually this cameraContrast to change the individual contrast of a mesh applying this to the material of a mesh?

Yes, you can apply it to individual materials.
But I would better edit all textures in some 3D/2D content editor, it is easier.

@labris no, this works
mesh.material.cameraContrast = 2.6;

but it applies it again also to the skybox, which is really crazy…,

editing textures is not the way, I just want to add Contrast to the mesh, that has nothing to do with editing the textures,
there must be an easy way to add more contrast Only to the mesh and nothing else around it :slight_smile:

You may check this example - https://playground.babylonjs.com/#0N4SLH#1
I didn’t notice changes at skybox when tweaking the material settings.

@labris I can see it, but how do you add contrast? if I do it with camera contrast again it impacts the surroundings, see:
https://playground.babylonjs.com/#0N4SLH#3

wood.cameraContrast = 5.6;

i can see reflections etc, but what I need is contrast, what is the command for contrast in that context? because cameraContrast surely doesnt work

@labris there is no other command, just cameraContrast, what i really do not get is how is it possible that a command like cameraContrast applied to a specific material of a specific mesh also impacts the surrounding skybox, it doesnt make any sense, isnt this some kind of a design mistake?

@labris for now as I dont find a solution, I am taking the 6 files of the skybox texture and just making them darker etc to compensate for the change of scene contrast, a bad solution but so far I dont see any other way

By default, all materials share the same image configuration, which is an instance hosted by the scene. So, if you change any value of image configuration (like cameraContrast) through any material, it will in fact change the image configuration of the scene image configuration, and because this is shared by all the materials, all materials will be impacted.

You can create a specific image configuration for a given material by doing mat.imageProcessingConfiguration = new BABYLON.ImageProcessingConfiguration();. This way, changing image parameters for this material will only update this material and not all materials of the scene.

See:

https://playground.babylonjs.com/#0N4SLH#5

2 Likes

I might have had a similar question at one point:

Do I understand that your problem is with your skybox and with SSAO? Like you want not to apply SSAO on your skybox (or skybox material), right? Did you try activating ‘Need depth prepass’ on your skybox material? You can try it in the PG and it will record this:

{“materials”:[{“checkReadyOnEveryCall”:true,"_needDepthPrePass":true,"__state":{“id”:“default material”}}]}

You can add this to your skybox mat:
skyboxMaterial.checkReadyOnEveryCall = true;
skyboxMaterial._needDepthPrePass = true;

It worked for me. (thanks to @labris and @Evgeni_Popov explanations :smiley: :smiley:

Edit: I’m not sure about an eventual impact for performance making this call and prepass… is there? there must be. Nothing I’d really noticed in my case…

1 Like

@Evgeni_Popov @mawa thank you to both of you :slight_smile: I was about to try today what Evgeni suggests but what you explain mawa is very interesting. Yes my issue is the following:

  • say people in my app can load models, say there are 30 different models, they all have different needs in regards to contrast-exposure so I apply different contrast exposure settings after each of them loads
  • but I dont want to impact the surrounding skybox texture (clouds or whatever)

so do you mean that if i do this:
skyboxMaterial.checkReadyOnEveryCall = true;
skyboxMaterial._needDepthPrePass = true;

the skybox texture will not receive the contrast-exposure changes applied to the material of the individual models?

thats the issue yeah