Image processing post process (e.g. vignette) incompatible with water material?

When applying image processing post process like vignette over a scene containing the water material, the post process affects the shading of the water material differently than other scene elements.

PG water with vignette https://playground.babylonjs.com/#1SLLOJ#1405


Notice dark vignette is overly affecting the color of the water at the horizon. It should blend better with the skybox material as it does in the original below, even if there is a vignette overlaid.

PG water without vignette https://playground.babylonjs.com/#1SLLOJ#1402

I’m not sure I understand, it seems ok to me.

From another view point (directly above), we can see the vignette process is drawing a round spot on the picture:

Depending on the colors of the picture, some areas will be darkened more than others, as in your picture where the blue of the sea is darker than the blue of the sky.

If going below the sea, to make it disappear:

Those pictures seem ok to me, so your one should be ok too.

It’s subtle, but there is a difference :slight_smile:

Here’s some more screen grabs.

From the PGs, you can see at the horizon, where the water meets the skybox, without a vignette the water blends well into the skybox as it’s reflecting the white horizon above. But with the vignette, the vignette color of black seems to be tinting the reflected white of the water MORE than the white of the skybox horizon, so that there’s a stark difference between the water and sky (it’s no longer well blended).

And here’s what it looks like in my application. You can see a clear line at the horizon where the water plane ends after a vignette is applied.
vignette-water-bug-01

If the vignette is a true POST process it should be treating all scene pixels the same, not tinting some materials more than others.

I suspect there’s something about the water material that is getting rendered or blended AFTER post processes are applied, but I don’t know for sure.

I hope this makes things clearer.

Ok, I think I understand what happens.

The image processing is applied to all the intermediate rendering as well to the final rendering, so you end up having two image processing applied to the water (the intermediate passes are the ones that generate the reflection and refraction textures).

What you need is to apply an image processing a single time, at the very end of the rendering. To do that, you should se a DefaultRenderingPipeline and enable the vignette there:

https://playground.babylonjs.com/#1SLLOJ#1407

One caveat here: the water material is applying a convertion to linear space that it should not do, as the reflection/refraction textures are already generated in linear space. The easiest (only) way I found to disable that is to disable the image processing configuration of the water by doing water._imageProcessingConfiguration = null;

1 Like

Thanks @Evgeni_Popov I can see that your PG works but in my code I don’t have access to water._imageProcessingConfiguration = null

Property '_imageProcessingConfiguration' is private and only accessible within class 'WaterMaterial'

You can do (water as any)._imageProcessingConfiguration = null.

1 Like

Thanks so much @Evgeni_Popov ! This was driving me nuts for a while but water._imageProcessingConfiguration = null; was the solution I needed.

Thanks for the tip about accessing private props in TS. I wasn’t aware of it before. Very useful.