Book Image

Unity 2018 Shaders and Effects Cookbook - Third Edition

By : John P. Doran, Alan Zucconi
Book Image

Unity 2018 Shaders and Effects Cookbook - Third Edition

By: John P. Doran, Alan Zucconi

Overview of this book

Since their introduction to Unity, shaders have been seen as notoriously difficult to understand and implement in games. Complex mathematics has always stood in the way of creating your own shaders and attaining the level of realism you crave. Unity 2018 Shaders and Effects Cookbook changes that by giving you a recipe-based guide to creating shaders using Unity. It will show you everything you need to know about vectors, how lighting is constructed with them, and how textures are used to create complex effects without the heavy math. This book starts by teaching you how to use shaders without writing code with the post-processing stack. Then, you’ll learn how to write shaders from scratch, build up essential lighting, and finish by creating stunning screen effects just like those in high-quality 3D and mobile games. You'll discover techniques, such as normal mapping, image-based lighting, and animating your models inside a shader. We'll explore how to use physically based rendering to treat light the way it behaves in the real world. At the end, we’ll even look at Unity 2018’s new Shader Graph system. With this book, what seems like a dark art today will be second nature by tomorrow.
Table of Contents (14 chapters)

Getting a filmic look using grain, vignetting, and depth of field

Now that we have the Post Processing Stack installed, we can create our first Post-processing Volume. The new Post Processing Stack relies on using volumes that describe how things should be drawn, either globally or within a certain area.

One of the most common appearances people like projects to have is that of a film. This is used quite frequently in titles such as the Uncharted series and Grand Theft Auto V. It's also used quite effectively in the Left 4 Dead series, as its creator are trying to emulate the B-movie zombie films that the games are based on.

Getting ready

Make sure you have completed the Installing the Post Processing Stack recipe before starting this one.

How to do it...

  1. We first create a new Post Processing Profile by right-clicking within the Assets | Chapter 1 folder in the Project window and then selecting Create | Post Processing Profile. Once selected, it will allow us to rename the item. Go ahead and set the name to FilmicProfile:
If you happen to not enter the name correctly, you can rename an item from the Project tab by clicking on the name and then clicking again.
  1. Once created, you should notice that, when selected, the Inspector window will now contain a button that says Add effect... (as you can see in the preceding image), which will allow us to augment what is normally drawn on the screen.
  2. From the Hierarchy tab, select the Post-process Volume object again and from the Inspector tab go to the Post Process Volume component and assign the Profile property to the FilmicProflie we just created:

Notice that, once the Profile has been set, the Add effect... button shows up here as well. We can use this at either place and the changes will be saved in the file.

  1. To get started, click on the Add effect... button and select the Unity | Grain option. By default, you'll only see the Grain option with a check, so click on the arrow to expand its contents:

By default, you'll see that everything is greyed out. In order to have it affect anything, you have to click on the checkbox on the left-hand side. You can quickly turn them all on or off by pressing the All or None buttons on the screen.

  1. In our case, check the Intensity option and set it to 0.2. Then, check the Size property and set it to 0.3. Afterward, switch to the Game tab to see a representation of what our tweaks have done:
  1. You will notice that the screen has become much fuzzier than before. Decrease the Intensity to 0.2, the Size to 0.3, and uncheck the Colored option.
Unlike how users typically work in Unity, due to Post Processing Profiles being filed, you can modify them while playing your game and, upon stopping the game, the values are still saved. This can be useful for tweaking values to achieve the exact look that you're after.
  1. The next property we want to tweak is the Vignette property. Note the blackened edges around the screen. Click on Add effect... and select Unity | Vignette. Open up the properties and change the Intensity to 0.5 and the Smoothness to 0.35:
  1. Next, select Add effect... again and, this time, select Unity | Depth of Field. Check the Depth of Field option. It may be difficult to see a change right off the bat, but change the Focus Distance to 6 and Focal Length to 80 and you should notice the grass in front of the background and the mountain in the distance are now blurred:
  1. Now, if we go into the game itself, you should see our filmic look in action:
The final result of the filmic look

And with that, we now have a scene that looks much more like a film than what we had to begin with!

How it works...

Each time we add an effect to a Post-processing Volume, we are overriding what would normally be put onto the screen.

If you've been to a movie theater that still uses film, you may have noticed how there were little specks in the filmstock while the film was playing. The grain effect simulates this film grain, causing the effect to become more pronounced the more the movie is played. This is often used in horror games to obscure the player's vision.

For more information on the grain effect, check out: https://github.com/Unity-Technologies/PostProcessing/wiki/Grain.

In the film world, vignetting can be an unintended effect of using the wrong type of lens for the type of shot you are trying to achieve or the aspect ratio that you are shooting for. In game development, we typically use vignetting for dramatic effect or to have players focus on the center of the screen by darkening and/or desaturating the edges of the screen compared to the center.

For more information on the vignette effect, check out: https://github.com/Unity-Technologies/PostProcessing/wiki/Vignette.

The depth of field setting basically determines what is blurry and what isn't. The idea is to have items of importance in focus while items in the background are not.

For more information on the depth of field effect, check out: https://github.com/Unity-Technologies/PostProcessing/wiki/Depth-of-Field.