How to implement "vignette effect" properly?

Hi, I’m trying to implement a “vignette post effect”, according to this source code:

Everything looks simple, but it’s obvious that I’m not just turning on the “vignette effect” with this code. When I remove the code for “vignette”, anti-aliasign is on, but this post-effect turns off AA. Personally, I think this code turns also another setting on or off. AA is probably only the most noticeable feature. The image seems more light, like in fog… My question is, is there a way to turn on JUST-ONLY the vignette-post-effect and nothing else/more? Thanks you for your answer - your time.

1 Like

I personally see no other side effects from setting “vignetteEnabled” to false.

AA is not on by default , well msaa is there , but samples are 1 , so docs say that is the same as “off” SO I cant imagine how you see it switching on and off?

to actually see AA add something like :

postProcess.samples = 4;

the docs mention there is a native MSAA already active via webgl , this from babylon is a post process then on top of that …

I dont know the finer details but all I can say is that :

  1. What ever that mentioned native is doing - its not good enough , I see jaggies
  2. changing the samples value of the post process to something above 1 enables the post process AA and removes the jaggies
  3. The vignette does not interact with this at all to me.
2 Likes

You’ll also want to use a clear color in linear space, as mentioned in the second point here: Using the Default Rendering Pipeline | Babylon.js Documentation


ImageProcessing examples | Babylon.js Playground (babylonjs.com)

2 Likes

When I use the code that you write and when I simultaneously use the code what described by shaderbytes - the result looks much better and more like the original without the “VignettePostProcessEffect”. But the GUI elements which I haveve also - are clearly lighter and it is clear that something else is different. Interestingly, when I apply the change (VignetteOn) in InspectorTool of Babylon.js, the result is perfect, interesting.

To have the UI unaffected by post processing, you have to create a separate camera for it, like: ImageProcessing examples | Babylon.js Playground (babylonjs.com). @sebavan and I were talking about a method to make that simpler, so I’m going to implement it soon.

Actually Unity Engine suffers the same issue. If you use post process and want UI to not be affected you need to have a dedicated camera for the UI.

This can be a desired or un desired circumstance and it does entail more processing power mostly. eg … While you might not want all the post process of the scene camera, you might still want AA on the UI as well … so then you would be doing AA post process twice for each camera.

Hello, This is exactly the problem. When I set “Vignette” in the SCENE EXPLORER/INSPECTOR tool, absolutely everything is displayed correctly and also GUI is displayed properly. That’s the most interesting part.

Can you show a screenshot of where you’re setting it? :thinking:

When I set everything see the attached picture, there is no problem.

Oooh, ok, this is the material image processing, it’s a bit different from the PostProcess effects as it’s applied during the material rendering and not as a separate effect afterwards.

lol, thanks :slight_smile: