ImageProcessing vignette and color space

I want to add vignette to my scene, but I’m encountered an issue: it changes the whole result color.
Especially node material, example:

I read the page: Image Processing | Babylon.js Documentation
Tried scene.enablePrePassRenderer().disableGammaTransform = true; but has no effect.

Now I see it’s related to color space but I’m still confused:

  1. Why not add vignette to the screen result directly, instead of changing the color?
  2. Why not process the image on the screen result directly. At lease when nothing in imageProcessing is enabled, the result should not be changed.

cc @Deltakosh

Can you provide a playground of your actual issue?

@Deltakosh You can see the playground above. The NM version is fading. My case is NM too.

Besides NM, the default playground’s (a ball and a ground) color is changed too. But it seems that I can get it back through convert clear color to linear and set disableGammaTransform to true.

So how can I make the whole color consistent when I enable image processing vignette?Like DoF or other post processing. When the value is small or large enough, it looks like the original one.

I will provide more demos tomorrow.

1 Like

yeah I need a far simpler PG to help :slight_smile:

1 Like

hi, thers is a simpler pg illustrating yuqian’s problem. https://playground.babylonjs.com/#J9H084#344

cc @Deltakosh

So by default with standard/pbr/background materials there is a shortcut to apply image processing directly in the material shader.

In NME the material does not do the same.

When you run the default rendering pipeline in hdr mode, it would expect all inputs to be in linear space, not gamma to support hdr. In this case you could change your nme material to output linear data instead of gamma ones.

the clear color (as the process is fullscreen) is also in the wrong space in this case.

If you are sure to only use gamma output in the materials of your scene you could tweak it this way:

drp.imageProcessing.fromLinearSpace = false

1 Like