Chromatic Aberration: <\/strong>Chromatic aberration disperses colors along the dark and light areas of an image. This may remind you of wearing the 3D glasses with the red and blue lenses.<\/p>\n Vignette: <\/strong>The vignette property creates a dark edge that goes all around the screen. The intensity of this effect changes how much of the edges darken.<\/p>\n Film Grain: <\/strong>Almost exactly as the name of the effect implies, this places an old-school-styled film grain over the image. You can adjust the thickness and intensity of the grains to get the exact look you’re going for.<\/p>\n Lens Distortion: <\/strong>This effect simulates real-world distortion caused by an actual camera lens. Depending on the values given, you can achieve a wider field of view. This can also be handy for creating a scene from the perspective of a fish.<\/p>\n Color Adjustment: <\/strong>This effect will be separated into three sliders that represent the red, green, and blue values. Changing any of these will tint the image color based on the values given.<\/p>\n Now that you\u2019re familiar with some post-processing effects, it’s time to create a project that puts them to use. Start by creating a new project within the Unity Hub.<\/p>\n Figure 1: Creating a new project.<\/strong><\/p>\n The Universal Render Pipeline <\/em>template will be used this time because it already has a scene created and everything needed for implementing post-processing effects. Give the project a name and set a location for it, then create the project.<\/p>\n Figure 2: Using the Universal Render Pipeline <\/em>template<\/strong><\/p>\n As mentioned before, this project template comes with a post-processing volume already created for you. A post-processing volume is an object that determines the area in which post-processing effects are applied. In this project’s case, the volume has already been set to Global<\/em>, meaning it will affect the entire scene regardless of your current location. Select the Post-process Volume<\/em> in the Hierarchy<\/em>, and look at the Inspector<\/em>. There’s a button for adding an override, which means you can add to the list of post-processing effects that you control and not leave it up to the app. It already has the bloom and vignette effects added, so use this button to add Chromatic<\/em> Aberration<\/em>, Film<\/em> Grain<\/em>, Lens<\/em> Distortion<\/em>, and Color Adjustments<\/em>. Click Post-processing<\/em> to see the list.<\/p>\n Figure 3: Adding post-processing overrides.<\/strong><\/p>\n It’s not enough that you add these effects to the volume, however. You also have to enable the properties you want to change. Expand each effect using the arrow icons, then enable the following:<\/p>\n If, after project completion, you decide you want to modify other values in code, make sure the corresponding properties are enabled first. Also, go ahead and set the intensity for Bloom<\/em> to zero, and the intensity for Film Grain<\/em> to 1.<\/p>\n Figure 4: All default values for the post-processing volume<\/strong><\/p>\n Now comes the process of creating the user interface that will allow manipulating the post-processing values in real-time. This has a lot of parts to it, so one object’s creation will be described in detail, with the remaining objects listed out in a table complete with the object type and its coordinates.<\/p>\n For this example object, create a slider for controlling the post-processing volume\u2019s bloom value. First, in the Hierarchy <\/em>window, click the Create <\/em>button and choose UI->Slider<\/em>. Name the object BloomSlider<\/em>.<\/p>\n Figure 5: Creating a new slider.<\/strong><\/p>\n If it\u2019s not already set, change the view to 2D to more easily view and edit the UI. Then zoom out with your mouse wheel.<\/p>\n Figure 6: Changing to 2D view<\/strong><\/p>\n Make sure the BloomSlider <\/em>object is selected, then navigate to the Inspector. <\/em>There will be a Rect Transform <\/em>component listed, which controls the object\u2019s location and size. Change the values seen in figure 7. Note: these values may differ based on the size of your Game <\/em>window and screen resolution.<\/p>\n Figure 7: Setting Rect Transform <\/em>values.<\/strong><\/p>\n All the objects listed in Table 1 follow the same creation process listed above. The Text, Toggle, Dropdown, <\/em>and Button <\/em>objects are all found in the same UI <\/em>menu when creating an object.<\/p>\n Object Name<\/strong><\/p>\n<\/td>\n Object Type<\/strong><\/p>\n<\/td>\n Pos X<\/strong><\/p>\n<\/td>\n Pos Y<\/strong><\/p>\n<\/td>\n Width<\/strong><\/p>\n<\/td>\n Height<\/strong><\/p>\n<\/td>\n<\/tr>\n BloomText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 310<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n BloomSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 280<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n ChromaticAberationText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 240<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n ChromaticAberationSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 210<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n VignetteText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 170<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n VignetteToggle<\/p>\n<\/td>\n Toggle<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 130<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n FilmGrainText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 80<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n FilmGrainDropdown<\/p>\n<\/td>\n Dropdown<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 50<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n LensDistortionText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n 10<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n LensDistortionSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n -20<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n ColorAdjustmentText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n -80<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n RedText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 665<\/p>\n<\/td>\n -120<\/p>\n<\/td>\n 60<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n RedSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 780<\/p>\n<\/td>\n -120<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n GreenText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 665<\/p>\n<\/td>\n -150<\/p>\n<\/td>\n 60<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n GreenSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 780<\/p>\n<\/td>\n -150<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n BlueText<\/p>\n<\/td>\n Text<\/p>\n<\/td>\n 665<\/p>\n<\/td>\n -170<\/p>\n<\/td>\n 60<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n BlueSlider<\/p>\n<\/td>\n Slider<\/p>\n<\/td>\n 780<\/p>\n<\/td>\n -170<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 20<\/p>\n<\/td>\n<\/tr>\n ResetButton<\/p>\n<\/td>\n Button<\/p>\n<\/td>\n 750<\/p>\n<\/td>\n -250<\/p>\n<\/td>\n 160<\/p>\n<\/td>\n 30<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Table 1: All UI objects with positions and size.<\/strong><\/p>\n A few of these objects will need their default properties changed before creating code. You can get through this part faster by selecting all text objects at once and changing any properties to a value all objects will have. Press the Ctrl key before clicking your additional objects to modify all of them at the same time. First, in order to increase the text readability, it is advised you change the colors to black (by default they\u2019re a grey color) and change their font size and style. This is done by selecting the text object, navigating to the Inspector<\/em>, finding the Text <\/em>component, and changing the various properties from there.<\/p>\n Figure 8: Setting the UI text.<\/strong><\/p>\n T<\/strong>he VignetteToggle has a separate child <\/em>object for its text label. To edit it, you\u2019ll need to show VignetteToggle\u2019s child objects by expanding it in the Hierarchy. Find Label<\/em>, and change the text, font style, and color from there.<\/p>\n Next, some sliders, the toggle, and the drop-down menu will need their defaults adjusted. The LensDistortionSlider <\/em>object must have a minimum value of -1, a maximum value of 1, and a default value of 0. Set the maximum value for the BloomSlider object to 10, and the default value for the red, green, and blue sliders to 1. The VignetteToggle only needs one change; make sure the IsOn property is set to false, and the toggle will be ready.<\/p>\n Figure 9: LensDistortionSlider <\/em>default values.<\/strong><\/p>\n Finally, you\u2019ll need to add and edit all needed options in the drop-down menu, as seen in figure 10. Use the + button to add as many options as needed. Be sure to also change the names of those options as well to match the list available in the Film Grain override.<\/p>\n Figure 10: Full list of options for Film Grain.<\/strong><\/p>\n The UI is finally finished and ready for use. Of course, a script will be needed in order for the UI to do anything. Navigate to the Assets <\/em>window and right-click it. Choose Create->C# Script<\/em>, then give it a name such as PostProcessRuntimeEffects<\/em>. Double click the new script to open the script in Visual Studio.<\/p>\n To get started, making sure you\u2019re using the following namespaces:<\/p>\n The critical items are I\u2019ll break this down a bit. First, vol <\/em>is what will allow you to override the current post-processing effects with that of the user\u2019s selection. From there, you\u2019ll have all the different UI elements that the user can manipulate. Finally, each post-processing class object will be used to store the user\u2019s values and then transfer that data over to the post-processing stack.<\/p>\n The Once you\u2019ve obtained that information, you\u2019ll need to set up a listener for when the user adjusts any of the values presented to them in the UI. This is done by first calling each UI element\u2019s This concludes the In a nutshell, whenever the user changes any post-processing values, this function is called to update the values within the post-processing stack. For some effects, it\u2019s as simple as calling the parameter in question and setting its value to the user\u2019s selection. However, in this example, two of the effects being changed are a little more involved. Both the film grain and color adjustments require the Now, as fun as it will be to move all the sliders around and create some wild effects, at some point a user may want to go back to the default look and start from scratch. This is where the Notice that you\u2019re just changing the values in each UI element and not the post-processing volume directly. Remember that the That takes care of everything on the coding side. All that remains is to tell Unity where all the UI elements and post-processing volume are, finishing the single button setup, and then the project should be ready to run. Save the code, close up Visual Studio, and head back to your Unity project.<\/p>\n Select the Main Camera <\/em>object and attach the now finished PostProcessingRuntimeEffects <\/em>script to it by clicking and dragging the script into the Inspector <\/em>window. You may want to lock the Inspector window by clicking the padlock icon at the top right.<\/p>\n Figure 11: Attaching a script component<\/strong><\/p>\n All the empty fields you see on the newly attached script component will need to be filled in. The Vol <\/em>field is for the post-processing volume, so click and drag that object into this field.<\/p>\n Figure 12: Adding Post-process Volume <\/em>to Vol <\/em>field<\/strong><\/p>\n The previous step also applies to all the UI elements. Just click and drag all UI objects into their corresponding fields. The ResetButton <\/em>and the text objects are exceptions, as the script does not work with those directly.<\/p>\n Once all fields are set, select the ResetButton <\/em>object. Remember the ResetSettings <\/em>function in the script? This function will need to be added to the button\u2019s On Click <\/em>event list. To do this, start by clicking the + button in the On Click <\/em>event list. This is what will allow the button to perform your code on click.<\/p>\n Figure 13: Adding a new On Click <\/em>event.<\/strong><\/p>\n Next, drag the Main Camera <\/em>into the object field. This is for pointing the event in the direction of the object with the correct script component attached.<\/p>\n Figure 14: Setting the Main Camera <\/em>as the object to find the script component from<\/strong><\/p>\n Next, click on the No Function <\/em>drop-down. Then choose PostProcessRuntimeEffects->ResetSettings<\/em>. Once you have that selected, the button will know which function to perform.<\/p>\n Figure 15: Setting On Click <\/em>event to perform ResetSettings<\/em><\/strong><\/p>\n That\u2019s everything! Now you can run the project using the play button at the top of the editor, then adjust the post-processing volume to your liking. The project template that is being used also comes with basic camera controls while running the app. You can move around the scene using the W, A, S, and D keys and rotate the camera by right-clicking your mouse and dragging. You can also go up or down using the Q and E keys.<\/p>\n Figure 16: The app in action.<\/strong><\/p>\n Users enjoy having options and being allowed to tweak aspects of an app to their liking. This can extend all the way to the visual elements of the application. By allowing customization, the user can make the app feel like \u201ctheirs\u201d and can aid in creating a unique experience for the user. While the project demonstrated this application in a gaming context, the concept can be applied to various other kinds of apps. The changes allowed don\u2019t have to be for purely visual appeal either. Designed correctly, changing these visual effects can have practical benefits as well, such as making certain colored objects more visible under a different color scheme. Either way, the ability to tweak settings to a user\u2019s liking is something anyone can appreciate.<\/p>\nSetting up the Unity project<\/h2>\n
![\"Image](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-2.jpeg\")
<\/p>\n![\"Universal](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-3.jpeg\")
<\/p>\n![\"Adding](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-4.jpeg\")
<\/p>\n\n
![\"All](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-5.jpeg\")
<\/p>\n![\"create](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-6.jpeg\")
<\/p>\n![\"change](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-7.jpeg\")
<\/p>\n![\"setting](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-8.jpeg\")
<\/p>\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ![\"change](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-9.jpeg\")
<\/p>\n![\"LensDistortionSlider](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-10.jpeg\")
<\/p>\n![\"Full](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-11.jpeg\")
<\/p>\nPostProcessRuntimeEffects<\/h2>\n
using UnityEngine;\r\nusing UnityEngine.Rendering;\r\nusing UnityEngine.Rendering.Universal;\r\nusing UnityEngine.UI;<\/pre>\n
UnityEngine.UI<\/code> and the two Rendering<\/code> namespaces, with the latter helping you change post-processing effects. Next, add the following to the class:<\/p>\npublic Volume vol;\r\npublic Slider bloomSlider;\r\npublic Slider chromaticAberrationSlider;\r\npublic Toggle vignetteToggle;\r\npublic Dropdown filmGrainDropdown;\r\npublic Slider lensDistortionSlider;\r\npublic Slider redSlider;\r\npublic Slider greenSlider;\r\npublic Slider blueSlider;\r\nBloom bloom;\r\nChromaticAberration chromaticAberration;\r\nVignette vignette;\r\nFilmGrain filmGrain;\r\nLensDistortion lensDistortion;\r\nColorAdjustments colorAdjustment;<\/pre>\n
Update<\/code> method that was created automatically can be deleted, as it will not be used here. Moving on to the Start<\/code> method, you\u2019ll need to initially populate those objects with the information currently stored in the post-processing volume. Unity will acquire the volume\u2019s profile, and then more specifically the effect you wish to get and place the found information in the corresponding object that you\u2019ll specify.<\/p>\nvol.profile.TryGet<Bloom>(out bloom);\r\nvol.profile.TryGet<ChromaticAberration>(out chromaticAberration);\r\nvol.profile.TryGet<Vignette>(out vignette);\r\nvol.profile.TryGet<FilmGrain>(out filmGrain);\r\nvol.profile.TryGet<LensDistortion>(out lensDistortion);\r\nvol.profile.TryGet<ColorAdjustments>(out colorAdjustment);<\/pre>\n
onValueChanged<\/code> function and then adding the listener from there. For the sake of simplicity, the same method will be used for all UI listeners. The method in question, PostProcessValueChange()<\/code>, will be created momentarily.<\/p>\nbloomSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nchromaticAberrationSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nvignetteToggle.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nfilmGrainDropdown.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nlensDistortionSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nredSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\ngreenSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });\r\nblueSlider.onValueChanged.AddListener(delegate { PostProcessValueChange(); });<\/pre>\nStart<\/code> method, leaving the PostProcessValueChanged<\/code> method mentioned earlier and a method assigned to the ResetButton\u2019s <\/em>onClick<\/code> event. Since PostProcessValueChanged<\/code> is where the app takes the user\u2019s input and changes the post-processing settings, this will be a good function to take care of next.<\/p>\nvoid PostProcessValueChange()\r\n{\r\nbloom.intensity.value = bloomSlider.value;\r\nchromaticAberration.intensity.value = chromaticAberrationSlider.value;\r\nlensDistortion.intensity.value = lensDistortionSlider.value;\r\nvignette.rounded.value = vignetteToggle.isOn;\r\nFilmGrainLookupParameter filmGrainParam = new\r\n FilmGrainLookupParameter((FilmGrainLookup)filmGrainDropdown.value);\r\n \tfilmGrain.type.Override((FilmGrainLookup)filmGrainParam);\r\nColor newColor = new Color(redSlider.value, greenSlider.value,\r\n blueSlider.value);\r\ncolorAdjustment.colorFilter.Override(newColor);\r\n}<\/pre>\nOverride<\/code> function to, as the name implies, override the current value. Before you can do that, though, you must first create objects of the correct type, enter the data they need, and then use that as the argument for the Override <\/em>function. Those with a basic familiarity with Unity development will recognize the Color <\/em>class and how it constructs a new color using red, green, and blue values between zero and one. The more uncommon FilmGrainLookupParameter<\/code> class is used by Unity to identify which film grain type to use from its list. All it needs is the drop-down menu\u2019s value to search with, and then Override <\/em>will handle the rest.<\/p>\nResetButton<\/code> object comes in. Click this button, and every value will be set to its defaults.<\/p>\npublic void ResetSettings()\r\n{\r\n \tbloomSlider.value = 0;\r\n \tchromaticAberrationSlider.value = 0;\r\n \tlensDistortionSlider.value = 0;\r\n \tvignetteToggle.isOn = false;\r\n \tfilmGrainDropdown.value = 0;\r\n \tredSlider.value = 1;\r\n \tgreenSlider.value = 1;\r\n \tblueSlider.value = 1;\r\n}<\/pre>\nPostProcessValueChanged<\/code> method is called anytime a UI element\u2019s value is changed. Not only are you still updating the post-processing volume with new data, but you\u2019re also setting the UI elements back to how they were when the app started.<\/p>\nFinishing Touches<\/h2>\n
![\"Attaching](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-12.jpeg\")
<\/p>\n![\"Adding](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-13.jpeg\")
<\/p>\n![\"Adding](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/graphical-user-interface-application-teams-desc.jpeg\")
<\/p>\n![\"Setting](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-14.jpeg\")
<\/p>\n![\"Setting](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-15.jpeg\")
<\/p>\n![\"post](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2021\/07\/word-image-16.jpeg\")
<\/p>\nPost-processing effects in Unity<\/h2>\n