Vignette with narrow transition

Hello guys,

I am playing around with the vignette effect but unfortunately I am not able to adjust it in order to have a nice transition between canvas and website.

1: This is the similar to the default vignette.
2: I can achieve this by increasing the vignetteWeight.
3: This is what I want to achieve.

Is it possible to do this? I want to include the model to a website but the transition should be smooth.

In my image processing pipeline I can adjust the color, weight, cameraFOV, stretch and blendMode. I set the vignetteColor to white because the website’s background is white as well. Since the transition should be completely white at the edges of the canvas I pick the opaque blendMode. stretch is not necessary. So only weight and cameraFOV are left.

It seems that a high cameraFOV and low weight equals a low cameraFOV and high weight. How am I able to achieve example 3 in my image above? The center where the model is shouldn’t be touch by the vignette. Just at the edges of the canvas should be a transition from white to transparent.

I appreciate your help. Thank you.


I would say the easiest in your case would be a custom post process. You could build it with the node material editor : How To use the Node Material - Babylon.js Documentation