32,39 €
Shaders enable you to create powerful visuals for your game projects. However, creating shaders for your games can be notoriously challenging with various factors such as complex mathematics standing in the way of attaining the level of realism you crave for your shaders.
The Unity 2021 Shaders and Effects Cookbook helps you overcome that with a recipe-based approach to creating shaders using Unity. This fourth edition is updated and enhanced using Unity 2021 features and tools covering Unity's new way of creating particle effects with the VFX Graph. You'll learn how to use VFX Graph for advanced shader development. The book also features updated recipes for using Shader Graph to create 2D and 3D elements. You'll cover everything you need to know about vectors, how they can be used to construct lighting, and how to use textures to create complex effects without the heavy math. You'll also understand how to use the visual-based Shader Graph for creating shaders without any code.
By the end of this Unity book, you'll have developed a set of shaders that you can use in your Unity 3D games and be able to accomplish new effects and address the performance needs of your Unity game development projects. So, let's get started!
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 389
Veröffentlichungsjahr: 2021
Over 50 recipes to help you transform your game into a visually stunning masterpiece
John P. Doran
BIRMINGHAM—MUMBAI
Copyright © 2021 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Publishing Product Manager: Pavan Ramchandani
Senior Editor: Mark Dsouza
Content Development Editor: Divya Vijayan
Technical Editor: Saurabh Kadave
Copy Editor: Safis Editing
Project Coordinator: Manthan Patel
Proofreader: Safis Editing
Indexer: Manju Arasan
Production Designer: Aparna Bhagat
First published: June 2013
Second edition: February 2016
Third edition: June 2018
Fourth edition: October 2021
Production reference: 1141021
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-83921-862-0
www.packt.com
To my daughter, Johanna Mai Doran, and to my wife, Hien, for being my loving partner throughout our joint life journey.
– John P. Doran
John P. Doran is a passionate and seasoned technical game designer, software engineer, and author who is currently based in Songdo, South Korea. His passion for game development began at an early age.
For over a decade, John has gained extensive hands-on expertise in game development, working in various roles ranging from game designer to lead UI programmer in teams consisting of just himself to over 70 people in student, mod, and professional game projects, including working at LucasArts on Star Wars: 1313. Additionally, John has worked in game development education teaching in Singapore, South Korea, and the United States at schools including the DigiPen Institute of Technology and Bradley University. To date, he has authored over 10 books on game development.
John is currently an instructor at George Mason University Korea. Prior to his present ventures, he was an award-winning videographer.
I want to thank everyone at Packt for their assistance in the book-creation process, especially Pavan Ramchandani, Divij Kotian, Divya Vijayan, and Rohit Rajkumar. I am also grateful for the great advice and suggestions from my technical reviewers, Floris Groen and Kenneth Lammers. I'm incredibly proud of this edition of the book, and I hope everyone else is too.
Floris Groen is an experienced software engineer and shader expert from the Netherlands. He taught himself how to use graphics APIs in his late teens and went on to become a graphics programmer. He has worked in the gaming industry, as well as in architectural visualization, where he contributed to several game titles and software products. During that time, he has coded two rendering engines as part of successful commercial software. Floris is currently working on bringing digital humans to life by using a context-sensitive procedural animation system combined with realistic shaders and lighting. In the past, he has volunteered as a coach for an initiative to get more women into the tech industry.
Kenneth Lammers has over 15 years of experience in the gaming industry, working as a character artist, technical artist, technical art director, and programmer. Throughout his career, he has worked on titles such as Call of Duty 3, Crackdown 2, Alan Wake, and Kinect Star Wars. He currently owns and operates Ozone Interactive with his business partner, Noah Kaarbo. Together, they have worked with clients such as Amazon, Eline Media, IGT, and Microsoft. Kenny has worked for Microsoft Games Studios, Activision, and Surreal, and has recently gone out on his own, operating CreativeTD and Ozone Interactive. Kenny authored the first edition of Unity Shaders and Effects Cookbook by Packt Publishing and was very happy to be a part of the writing, updating, and reviewing of this book.
It's great to write your own shaders and effects and fine-tune your project so that it looks just the way that you want it to, and this is what we will be spending the majority of the book looking into. However, it's also good to point out that Unity already comes with some prebuilt ways to get some of the more common effects that users like to have; users can implement these effects by using the Post Processing Stack.
For those who just want to get something up and running, the Post Processing Stack can be an excellent way for you to tweak the appearance of your game without having to write any additional code. Using the Post Processing Stack can also be useful in showing you what shaders can do and how they can improve your game projects as, behind the scenes, the Post Processing Stack provides several shaders as well as scripts that are applied to the screen via the aptly named screen shader.
In this chapter, we will cover the following recipes:
Installing the Post Processing StackGetting a filmic look using grain, vignetting, and depth of fieldMimicking real life with bloom and anti-aliasingSetting the mood with color gradingCreating a horror game look with fogYou can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/Unity-2021-Shaders-and-Effects-Cookbook-Fourth-Edition/tree/main/Shaders-and-Effects-Cookbook-2021/Assets/Chapter%2001.
Before we can use the Post Processing Stack, we must get it from the Package Manager. A Unity package is a single file that contains various assets that can be used in Unity, similar to a ZIP file. Previously, Unity used the Asset Store to share these files with users, but with time, the Package Manager has been added to give users an easy way to get free content from Unity. We will be using the Package Manager again in Chapter 13, Shader Graph – 2D, but for now, we will be using it for the Post Processing package that it contains.
To get started with this recipe, you will need to have Unity running and have created a new project with the 3D template. This chapter also requires you to have an environment to work from. The code files provided with this book contain a .unitypackage file called Chapter1_StartingPoint.unitypackage in the Unity Packages folder. It contains a basic scene and content for creating the scene with Unity's Standard Assets.
Open the Chapter 1 | Starting Point scene inside the Asset | Chapter 01 | Scenes folder from the Project browser. If all goes well, you should see something like this from the Game tab:
Figure 1.1 – Starting point scene
This is a simple environment that will allow us to easily see how changes that have been made with post-processing effects can modify how things are drawn on the screen.
Note
If you are interested in learning how to create the environment we've used here, check out my previous book, Unity 5.x Game Development Blueprints, also available from Packt Publishing.
To get started, follow these steps:
Open Package Manager by going to Window | Package Manager:Figure 1.2 – The Package Manager
From the Packages dropdown at the top left, select the Unity Registry option to display a list of all of the possible packages that are there. Once the list populates with all of the choices, select the Post Processing option:Figure 1.3 – Post Processing selected
Note
If you know the name of the package you are looking for, you can also find packages by typing their name in the search bar at the top right of the menu.
Figure 1.4 – Search bar of Package Manager
From there, at the bottom right of the menu, click on the Install button. You may need to wait for a while for it to finish downloading the content. Once it has finished downloading, you should see a checkmark to the right of the Post Processing option, which shows that it has been installed:Figure 1.5 – Post Processing package installed
Close the Packages tab and go back to the Scene window to see the level. Then, from the Hierarchy window, select the object that has our Camera component attached to it. We are doing this because the Post Processing Stack needs to know which screen we want to modify. If you are using your own project, you can select the MainCamera object that comes with the default Unity scene, but the example project that is being used has Camera located as a child of the FPSController object. To select it, go to the Hierarchy window and then click on the arrow next to the name to extend the object's children. Then, select the FirstPersonCharacter object:Figure 1.6 – FirstPersonCharacter selected
Upon selecting this object, you should see that the Inspector window is now showing information about the FirstPersonCharacter object, including what components are attached to it:Figure 1.7 – The Inspector window with FirstPersonCharacter selected
This object has a Camera component attached to it, which is in charge of drawing what it is pointing at to the Game tab when the game starts:
Note
You can double-click on a game object in the Hierarchy tab to zoom the camera from the Scene tab onto the object's location. This makes it very easy to find things, even in a large game level.
Figure 1.8 – The Scene view after double-clicking on the FirstPersonCharacter object
With the object selected and our Camera component attached to it, we need to add the Post-processing Behavior component to the object by going to Component | Rendering | Post-process Layer. Once added, you should be able to see the component in the Inspector window if you scroll down:Figure 1.9 – The Post-process Layer component
The Post-process Layer component is responsible for rendering post-processing effects to a camera so that they're visible in our game. It requires us to be inside of a Post-process Volume that has a Layer defined on it.
With that in mind, go to the top right of the Unity interface and select the Layers dropdown. This will show a list of all of the current layers in the game. From there, select Add Layers….The Inspector window will now show the Tags & Layers menu. Once opened, click on the arrow to expand the Layers section. From there, under one of the empty User Layer options, type in PostProcessing:Figure 1.10 – Adding a custom User Layer
Note
It is possible to type in any name you would want for this layer, so long as you assign that same layer to the volumes later.
From the Hierarchy window, select the FirstPersonCharacter object once again to update the Inspector window. From the Inspector window, scroll down to the Post-Process Layer component, select the dropdown to the right of the Layer property, and select PostProcessing:Figure 1.11 – Assigning Volume Layer
This tells the component which objects we want to affect the screen with post-processing effects. When setting this, an object must have its Layer property set to PostProcessing to have its effects visible by this camera.
To create a Post-process Volume, go to the GameObject menu and select 3D Object | Post-process Volume:Figure 1.12 – Creating a Post-process Volume
From there, go to the Inspector window and change the Layer property to PostProcessing. Finally, to make it easier to work with, change Position to 0, 0, 0. Then, under the Post-process Volume component, check the Is Global property:Figure 1.13 – Assigning the Is Global property
Notice that there is a Profile property for the volume. This property will contain information about how we wish to modify the screen. By checking Is Global, we are saying that this information should always be drawn by the Post-process Layer object. By unchecking it, the effects would only be visible from a certain distance from where the volume has been placed, as dictated by the trigger collider attached to the object. Depending on the game, this could allow you to drastically modify how the game appears in certain areas, but we only care about getting the visual effect at this point.
Now that we have installed the Post Processing Stack, 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 creators were trying to emulate the B-movie zombie films that the games are based on:
Figure 1.14 – The final result of the filmic look
Make sure you have completed the Installing the Post Processing Stack recipe before starting this one.
Follow these steps to get a filmic look using grain, vignetting, and depth of field:
First, we must create a new Post Processing Profile by going to the Project window. From there, right-click within the Assets | Chapter 1 folder and selecting Create | Post-processing Profile. Once selected, we can rename the item. Go ahead and set the name to FilmicProfile:Figure 1.15 – Creating FilmicProfile
Note
If you don't enter the name correctly, you can rename an item from the Project tab by clicking on the name and then clicking it again. Alternatively, you can right-click on the item and select Rename or hit F2 on your keyboard.
Once the profile is created, you will notice that, when selected, the Inspector window now contains a button that says Add effect..., which will allow us to augment what is normally drawn on the screen.From the Hierarchy tab, select the Post-process Volume object again. Then, from the Inspector tab, go to the Post-process Volume component and assign the Profile property to FilmicProflie, which we just created, by dragging and dropping it from the Project window over the property and then letting go:Figure 1.16 – Assigning the Profile of Post-process Volume
Note
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.
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:Figure 1.17 – Adding the Grain effect to Post-process Volume
By default, you'll see that everything is grayed out. To have the options affect anything, you have to click on the checkbox on the left-hand side of the options to enable them. You can quickly turn them all on or off by pressing the All or None buttons at the top left of the option.
To see the differences in what we are doing, switch to the Game view by selecting that tab. In our case, check the Intensity option and set it to 1.0. Then, check the Size property and set it to 1.0. Afterward, switch to the Game tab to see a representation of what our tweaks have done:Figure 1.18 – Representation of the Grain effect
You will notice that the screen has become much fuzzier than before.
We want to have a more subtle effect here, so we will decrease Intensity to 0.2, set Size to 0.3, and uncheck the Colored option:Figure 1.19 – Altering the Grain effect
This will change the effect of the grain effect so that it looks like this:
Figure 1.20 – Changing the Grain effect
Note
Unlike how users typically work in Unity, due to Post Processing Profiles being files, 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.
The next property we want to tweak is the Vignette property, which will add blackened edges around the screen. Click on Add effect... and select Unity | Vignette. Open the properties, enable the Intensity property, and set it to 0.5. Afterward, enable and set Smoothness to 0.35:Figure 1.21 – Creating a Vignette effect
Adding this effect will make the screen look like this:
Figure 1.22 – Visual of the Vignette effect
Next, select Add effect... again and, this time, select Unity | Depth of Field. Expand the Depth of Field option if needed. It may be difficult to see the change right off the bat, but change Focus Distance to 6 and Focal Length to 80:Figure 1.23 – Adjusting the Depth of Field values
Afterward, if you look at the Scene view, you should notice that the grass in front of the background and the mountain in the distance is now blurred:
Figure 1.24 – Adding the Depth of Field effect
Now, if we go into the game itself and move around, we should see our filmic look in action:Figure 1.25 – 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!
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.
Note
For more information about 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.
Note
For more information about the vignette effect, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Vignette.
The depth of field setting 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.
Note
For more information about the depth of field effect, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Depth-of-Field.
The bloom optical effect aims to mimic the imaging effects of real-world cameras, where things in areas with lights will glow along the edges, thus overwhelming the camera. The bloom effect is very distinctive and you've likely seen it employed in areas in a game that are magical or heaven-like:
Figure 1.26 – The final result of using bloom and anti-aliasing
Make sure you have completed the Installing the Post Processing Stack recipe before starting this one.
To add the bloom and anti-aliasing effect, follow these steps:
First, we must create a new Post-processing Profile by right-clicking within the Assets folder in the Project window and then selecting Create | Post-processing Profile. Once selected, we can rename the item. Go ahead and set the name to BloomProfile.Select the Post-process volume object and, from the Inspector window, go to the Post Processing Volume component and assign the Profile property to BloomProfile.Afterward, select the Game tab (if it hasn't been selected already) to see the results of the changes we are about to make.Select the Add effect... button and select Unity | Bloom. Once the effect has been added to the Overrides section of the Post-process Volume component, select the arrow to open its properties. Check the Intensity property and set it to 3. Afterward, check and set Threshold to 0.75 and Soft Knee to 0.1:Figure 1.27 – Adding a Bloom effect
This will give us the following effect:
Figure 1.28 – Visual of the Bloom effect
Next, select the object with the Post Process Layer component attached to it (in this example, it is the FPSController | FirstPersonCharacter object) and, from the Inspector tab, scroll down to the Post-process Layer component. From there, change the Anti-aliasing property's dropdown to Fast Approximate Anti-aliasing (FXAA):Figure 1.29 – Adjusting the Mode value of Anti-aliasing
Afterward, save your scene and hit the Play button to check out your project:Figure 1.30 – The final result of using bloom and anti-aliasing
As we mentioned previously, the bloom filter will make bright things even brighter while adding a glow to lighter areas. In this recipe, you may have noticed that the path is much lighter than it was previously. We can do this to ensure that players will follow the path to get to the next section of gameplay.
Note
For more information about bloom, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Bloom.
Anti-aliasing attempts to reduce the appearance of aliasing, which is the effect of lines appearing jagged on the screen. Any time anything is sampled below the Nyquist frequency, aliasing will occur. This is because the display the player is using to play the game doesn't have a high enough resolution to be displayed properly. Anti-aliasing will combine colors with nearby lines to remove their prominence, but at the cost of the game appearing somewhat blurry.
Note
For more information about anti-aliasing and what each mode means, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Anti-aliasing.
One of the best ways to easily change the mood of a scene is by changing the colors a scene uses. One of the best examples of this can be seen in the Matrix series of films, where the real world is always blue-tinted, while the computer-generated world is always tinted green. We can emulate this in our games by using color grading:
Figure 1.31 – The final result of using color grading
Make sure you have completed the Installing the Post Processing Stack recipe before starting this one.
To add color grading, follow these steps:
First, we must create a new Post-processing Profile by right-clicking within the Assets folder in the Project window and then selecting Create | Post-processing Profile. Once selected, we can rename the item. Go ahead and set it to ColorProfile.Select the Post-process Volume object in the Hierarchy window and, from the Inspector window, go to the Post-processing Volume component and assign the Profile property to ColorProfile.Afterward, select the Game tab (if it hasn't been selected already) to see the results of the changes to be made.Select the Add effect... button and select Unity | Color Grading. Check the Mode property at the very top of the Color Grading section and set it to Low Definition Range:Figure 1.32 – Assigning Low Definition Range for Mode
From there, you'll see several properties that can be used to adjust the colors on the screen, similar to how Photoshop's hue/saturation menu works. Check the Temperature property and set it to 30. Afterward, set Hue Shift to -20 and Saturation to 15:Figure 1.33 – Adjusting the properties of Color Grading
From the Scene view, we will see the following output:
Figure 1.34 – Visual effect of the Color Grading properties
After making these changes, dive into the game and move around to see what it looks like when playing it:Figure 1.35 – The final result of using color grading
Notice how the previously very green environment is now much warmer and more yellow than before. Using techniques like this, environments can simulate different times of the year, such as fall, with minimal effort when it comes to creating new art assets.
Note
For more information about the color grading effect, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Color-Grading.
One of the types of games that best utilizes the features of the Post Processing Stack is the horror genre. Using things such as depth of field to hide scary objects, as well as static to make the screen more menacing, can help set your game firmly in the right place and provide the mood you are going for.
Make sure you have completed the Installing the Post Processing Stack recipe before starting this one.
Tip
You may see the Lighting window open as a separate window on your screen. If you would like, you can drag and drop the top tab into another section of the Unity editor to dock it to another section. I place it next to the Inspector window so that I can easily switch between the various options.
From there, select the Environment option at the top. Scroll to the bottom until you reach the Other Settings option. Once there, check Fog and set the Color property to a value that is close to the skybox. I used the following settings:Figure 1.36 – The Color menu
Note
If you know the hex values of the color from your graphic editing software, such as Photoshop, you can just type it in the Hexadecimal property of the Color window.
Next, change Mode toExponential andDensity to 0.03:Figure 1.37 – Enabling Fog in our scene
As you can see, it's already much more spooky than it was previously, but there are still more options that we can change:
Figure 1.38 – Visual of Fog in our scene
Open HorrorProfile again by selecting it from the Project window and go to the Inspector window. Press the Add effect... button and select Unity | Ambient Occlusion. Check the Mode option and select Scalable Ambient Obscurance. Afterward, change Intensity to 2 and Radius to 20:Figure 1.39 – Adding an Ambient Occlusion effect
This will provide us with the following visual change:
Figure 1.40 – Effect after adding Ambient Occlusion
Lighting often has a big effect on the theme of a scene as well. If you are using the example map, select the Directional Light object in the Hierarchy tab and, from the Inspector tab, under the Light component, change Intensity to 0.5 and adjust Color to something darker. (I used the same color that I did in Step 4, with a HEX of 576E92.) Save your game and then start it to see the effect of all of these changes:Figure 1.41 – The final result of our horror look
Ambient occlusion is a shading and rendering technique that's used to calculate how exposed each point in a scene is to ambient lighting. In this instance, the Ambient Occlusion option will calculate areas that should have additional shadows. Since our scene is filled with trees, this will make the undersides much darker than they were previously.
Note
For more information about the Ambient Occlusion effect, check out https://github.com/Unity-Technologies/PostProcessing/wiki/Ambient-Occlusion. If you are interested in looking into the other options that the Post Processing Stack has, check out https://github.com/Unity-Technologies/PostProcessing/wiki. If you're interested in looking at the most up-to-date version of the code, check out https://github.com/Unity-Technologies/Graphics/tree/master/com.unity.postprocessing.
This chapter will cover some of the more common diffuse techniques found in today's game development shading pipelines. Let's imagine a cube that has been painted white uniformly in a 3D environment with directional light. Even if the color that's been used is the same on each face, they will all have different shades of white on them, depending on the direction that the light is coming from and the angle that we are looking at it from. This extra level of realism is achieved in 3D graphics through the use of shaders, special programs that are mostly used to simulate how light works. A wooden cube and a metal one may share the same 3D model, but what makes them look different is the shader that they use.
This chapter will introduce you to shader coding in Unity. If you have little to no previous experience with shaders, this chapter is what you need to understand what shaders are, how they work, and how to customize them. By the end of this chapter, you will have learned how to build basic shaders that perform basic operations. This chapter also covers some debugging information to help in case there are errors in your shaders. Armed with this knowledge, you will be able to create just about any Surface Shader.
In this chapter, we will cover the following recipes:
Creating a basic Standard ShaderAdding properties to a shaderUsing properties in a Surface ShaderThe code files for this chapter can be found at https://github.com/PacktPublishing/Unity-2021-Shaders-and-Effects-Cookbook-Fourth-Edition/tree/main/Shaders-and-Effects-Cookbook-2021/Assets/Chapter%2002.
In Unity, when we create a GameObject, we attach additional functionality through the use of components. Every GameObject is required to have a Transform component; there are several components included in Unity already, and we create components of our own when we write scripts that extend from MonoBehaviour.
All the objects that are part of a game contain several components that affect their look and behavior. While scripts determine how objects should behave, renderers decide how they should appear on the screen. Unity comes with several renderers, depending on the type of object that we are trying to visualize; every 3D model typically has a MeshRenderer