Unity 2021 Shaders and Effects Cookbook - John P. Doran - E-Book

Unity 2021 Shaders and Effects Cookbook E-Book

John P. Doran

0,0
32,39 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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:

EPUB
MOBI

Seitenzahl: 389

Veröffentlichungsjahr: 2021

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Unity 2021 Shaders and Effects Cookbook

Fourth Edition

Over 50 recipes to help you transform your game into a visually stunning masterpiece

John P. Doran

BIRMINGHAM—MUMBAI

Unity 2021 Shaders and Effects Cookbook

Fourth Edition

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

Contributors

About the author

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.

About the reviewers

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.

Table of Contents

Preface

Chapter 1: Post Processing Stack

Technical requirements

Installing the Post Processing Stack

Getting ready

How to do it...

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

Getting ready

How to do it...

How it works...

Mimicking real life with bloom and anti-aliasing

Getting ready

How to do it...

How it works...

Setting the mood with color grading

Getting ready

How to do it...

Creating a horror game look with fog

Getting ready

How to do it...

How it works...

Chapter 2: Creating Your First Shader

Technical requirements

Creating a basic Standard Shader

Getting ready

How to do it...

How it works...

There's more...

Adding properties to a shader

Getting ready

How to do it...

How it works...

See also

Using properties in a Surface Shader

How to do it...

How it works...

There's more...

See also

Chapter 3: Working with Surface Shaders

Technical requirements

Implementing diffuse shading

Getting ready

How to do it...

How it works...

Accessing and modifying packed arrays

How to do it...

There's more...

See also

Creating a shader with normal mapping

Getting ready

How to do it...

How it works...

There's more...

Creating a Holographic Shader

Getting ready

How to do it...

How it works...

There's more...

See also

Chapter 4: Working with Texture Mapping

Technical requirements

Adding a texture to a shader

Getting ready

How to do it...

How it works...

There's more...

See also

Scrolling textures by modifying UV values

Getting ready

How to do it...

How it works...

Creating a transparent material

Getting ready

How to do it...

How it works...

Packing and blending textures

Getting ready

How to do it...

How it works...

Creating a circle around your terrain

Getting ready…

How to do it...

How it works...

There's more…

Chapter 5: Understanding Lighting Models

Technical requirements

Creating a custom diffuse lighting model

Getting ready

How to do it...

How it works...

Creating a toon shader

Getting ready

How to do it...

How it works...

There's more...

Creating a Phong Specular type

Getting ready

How to do it...

How it works...

Creating a Blinn-Phong Specular type

Getting ready

How to do it...

How it works...

See also

Creating an Anisotropic Specular type

Getting ready

How to do it...

How it works...

Chapter 6: Physically Based Rendering

Technical requirements

Understanding the metallic setup

Getting ready

How to do it...

How it works...

See also

Adding transparency to PBR

Getting ready

How to do it...

See also

Creating mirrors and reflective surfaces

Getting ready

How to do it...

How it works...

See also

Baking lights into your scene

Getting ready

How to do it...

How it works...

See also

Chapter 7: Vertex Functions

Technical requirements

Accessing a vertex color in a Surface Shader

Getting ready

How to do it…

How it works…

There's more…

Animating vertices in a Surface Shader

Getting ready

How to do it…

How it works…

Extruding your models

Getting ready

How to do it…

How it works…

There's more…

Implementing a snow shader

Getting ready

How to do it…

How it works…

See also

Implementing a volumetric explosion

Getting ready

How to do it…

How it works…

There's more…

See also

Chapter 8: Fragment Shaders and Grab Passes

Technical requirements

Understanding Vertex and Fragment Shaders

Getting ready

How to do it…

How it works…

There's more…

See also

Using grab passes to draw behind objects

Getting ready

How to do it…

How it works…

There's more…

Implementing a Glass Shader

Getting ready

How to do it…

How it works…

There's more…

Implementing a Water Shader for 2D games

Getting ready

How to do it…

How it works…

Chapter 9: Mobile Shader Adjustment

Technical requirements

Techniques to make shaders more efficient

Getting ready

How to do it...

How it works...

Profiling your shaders

Getting ready

How to do it...

How it works...

There's more...

Modifying our shaders for mobile

Getting ready

How to do it...

How it works...

Chapter 10: Screen Effects with Unity Render Textures

Technical requirements

Setting up a screen effects script system

Getting ready

How to do it...

How it works...

There's more...

Using brightness, saturation, and contrast with screen effects

Getting ready

How to do it...

How it works...

Using basic Photoshop-like Blend Modes with screen effects

Getting ready

How to do it...

How it works...

There's more...

Using the Overlay Blend Mode with screen effects

How to do it...

How it works...

Chapter 11: Gameplay and Screen Effects

Technical requirements

Creating an old movie screen effect

Getting ready

How to do it...

How it works...

See also

Creating a night-vision screen effect

Getting ready

How to do it...

How it works...

There's more...

Chapter 12: Advanced Shading Techniques

Technical requirements

Using Unity's built-in CgInclude files

Getting ready

How to do it...

How it works...

There's more...

Making your shader work in a modular way with CgInclude

Getting ready

How to do it...

How it works...

Implementing a Fur Shader

Getting ready

How to do it...

How it works...

There's more...

Implementing Heatmaps with arrays

Getting ready

How to do it...

How it works...

Chapter 13: Shader Graph – 2D

Technical requirement

Creating a URP-based Shader Graph project

How to do it...

How it works...

Implementing a simple Shader Graph

Getting ready

How to do it...

How it works...

Exposing properties to the Inspector via Shader Graph

Getting ready

How to do it...

How it works...

Creating a Sprite Outline Shader

Getting ready

How to do it...

How it works...

Chapter 14: Shader Graph – 3D

Technical requirements

Implementing a glowing highlight system

Getting ready

How to do it...

How it works...

Portal Shaders in Unity

Getting ready

How to do it...

How it works...

Creating custom Shader Graph functions

Getting ready

How to do it...

How it works...

Other Books You May Enjoy

Chapter 1: Post Processing Stack

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 fog

Technical requirements

You 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.

Installing the Post Processing Stack

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.

Getting ready

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.

How to do it...

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.

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

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

Getting ready

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

How to do it...

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!

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.

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.

Mimicking real life with bloom and anti-aliasing

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

Getting ready

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

How to do it...

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

How it works...

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.

Setting the mood with color grading

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

Getting ready

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

How to do it...

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.

Creating a horror game look with fog

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.

Getting ready

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

How to do it...

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 name it HorrorProfile.Select the Post-process volume object and, from the Inspector window, go to the Post-processing Volume component and assign the Profile property to HorrorProfile.Unlike the previous settings, though, the fog settings are located in the Lighting window, which can be accessed by going to Window | Rendering | Lighting Settings.

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

How it works...

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.

Chapter 2: Creating Your First Shader

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 Shader

Technical requirements

The 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.

Creating a basic Standard Shader

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