c1e66c46-ee52-565c-ae90-4cd3f58617d1:EJWbNZ6QA41b2p9CvJ7OQg

Post-Processing Effects: Vignette Intro

Post-Processing Effects: Vignette

Adding Vignette to Your Scene

Vignette Properties

Conclusion

Post Processing Effects: Vignette

Post Processing Effects - Vignette.mp4

Vignette is a useful tool to help focus the viewer’s attention on the center of the screen or to add a soft fade to the edges. The term comes from photography, where vignetting refers to darkening or desaturation towards the edges of an image. 

Games

Film

Automotive

Configure and Optimize Post-Processing Effects for VR

Humble Unity Bundle 2019 - Related Tutorials to Snaps Prototypes Asset Packs

Introduction to 3D Interactive Development - Workshop project files

Introduction to LWRP and Shader Graph for 2D Games--Companion Tutorials (2019.2)

Introduction to Post Processing Stack

Creating a Puzzle Platformer

If you are using Unity 2019.3 or above, click here.

Vignette is a useful tool to help focus the viewer’s attention on the center of the screen or to add a soft fade to the edges. The term comes from photography, where vignetting refers to darkening or desaturation towards the edges of an image.  

Figure 01: Scene without Vignette

Figure 02: Scene with Vignette

To add Vignette to your scene, open the Post Process Volume Profile you have in your Project window.

If Vignette is not already in your list, add it by clicking Add Effect… and Unity > Vignette.

Once it’s in the list, make sure it’s enabled and expand the category to reveal the settings.

Mode: Your choices are Classic or Masked. Classic offers parametric controls for the position, shape, and intensity of the Vignette. Masked mode multiplies a custom texture mask over the screen to create a Vignette effect. This mode can be used to achieve less common Vignette effects.

These are the following controls if you use the Classic mode. (Figure 03) 

Color: This determines the Vignette color. Use the alpha channel for transparency.

Center: This option sets the Vignette center point. The default is 0.5, 0.5, which is the screen center.

Intensity: Drives the amount of vignetting on screen.

Smoothness: Determines the smoothness of the Vignette’s borders.

Roundness: This determines how squared the Vignette is. Lower values will make the Vignette more square, while higher values make it more circular.

Rounded: This toggle determines if the Vignette is perfectly round or if its shape is dependent on the current aspect ratio of the screen.

These are the controls if you use the Masked mode.

Color: Determines the Vignette color. Use the alpha channel for transparency.

Mask: You may use a black and white texture mask as the displayed Vignette; this requires a single channel 8 bit grayscale texture.

Opacity: Determines the opacity of the mask.

Figure 03: Vignette Classic properties

Figure 04: Vignette Masked properties

Vignette can be a powerful tool, not only to draw attention to the center of the screen but also to create different effects in conjunction with the Post Processing Stack. Vignette can imitate what a viewer sees when looking through binoculars or a camera’s viewfinder and it can create the sense of tunnel vision you get from the speed of a moving camera. Familiarize yourself with the settings and play around to see what you come up with. 

Post Processing Effects: Vignette

1. Post-Processing Effects: Vignette Intro

2. Post-Processing Effects: Vignette

3. Adding Vignette to Your Scene

4. Vignette Properties

5. Conclusion

Complete this tutorial