WEBVTT 1 00:00:05.675 --> 00:00:09.825 Game Advanced Beta type version 1 2 00:00:27.575 --> 00:00:32.225 Hello everyone, this is Park Hyun-sang, and I'm in charge of FPS game development 3 00:00:32.225 --> 00:00:36.125 In the beta version, we are moving into the stage of 4 00:00:36.125 --> 00:00:39.175 finalizing the visual representation of the graphics, 5 00:00:39.175 --> 00:00:42.425 in addition to the functional aspects that were previously focused on 6 00:00:42.775 --> 00:00:46.025 During this process, it's important to understand rendering, 7 00:00:46.025 --> 00:00:49.975 as well as graphic techniques for system optimization, 8 00:00:49.975 --> 00:00:53.475 such as lights, lightmaps, and other methods 9 00:00:53.925 --> 00:00:57.075 Additionally, we will be learning about cutscene direction 10 00:00:57.075 --> 00:01:00.975 to present the content in a more engaging and dynamic way 11 00:01:00.975 --> 00:01:03.675 First, this lesson will cover Shader Graph 12 00:01:03.675 --> 00:01:07.075 and the material creation process 13 00:01:07.875 --> 00:01:11.675 Shaders are often necessary to create visual effects, 14 00:01:11.675 --> 00:01:16.375 as the basic ones provided in the project 15 00:01:16.375 --> 00:01:19.125 may not be sufficient for all needs 16 00:01:19.625 --> 00:01:23.275 Although writing shaders traditionally requires 17 00:01:23.275 --> 00:01:25.625 a different programming language from C hash, 18 00:01:25.625 --> 00:01:29.175 Shader Graph allows you to create shaders 19 00:01:29.175 --> 00:01:33.325 as long as you understand how it works 20 00:01:33.975 --> 00:01:38.425 For this, setting up the Scriptable Rendering Pipeline 21 00:01:38.425 --> 00:01:40.075 is essential 22 00:01:40.075 --> 00:01:44.975 In this lesson, we will explore URP among SRP 23 00:01:44.975 --> 00:01:48.425 the Universal Rendering Pipeline 24 00:01:48.425 --> 00:01:50.675 and create shaders 25 00:01:50.675 --> 00:01:54.725 URP and Shader Graph 26 00:01:54.725 --> 00:01:59.325 Now, for the lecture, we will start by exploring the project creation screen 27 00:01:59.325 --> 00:02:03.525 and gradually learn about the characteristics of SRP 28 00:02:03.525 --> 00:02:06.725 When creating the project, 29 00:02:06.725 --> 00:02:09.125 we set the template to Universal 3D 30 00:02:09.125 --> 00:02:11.625 And there is the acronym SRP, 31 00:02:11.625 --> 00:02:15.925 which stands for Scriptable Rendering Pipeline, 32 00:02:15.925 --> 00:02:21.325 and we commonly refer to this Universal pipeline as URP 33 00:02:21.325 --> 00:02:24.975 We have set up the project with URP 34 00:02:24.975 --> 00:02:29.175 The biggest difference compared to the previous Core3D 35 00:02:29.175 --> 00:02:33.175 is that when you go to the Package Manager in the window, 36 00:02:33.175 --> 00:02:35.125 when creating the project 37 00:02:35.125 --> 00:02:40.175 with Universal or Scriptable Render Pipeline, 38 00:02:40.175 --> 00:02:45.925 the Core RP Library is added first 39 00:02:45.925 --> 00:02:49.375 After that, settings related to the Universal Render Pipeline 40 00:02:49.375 --> 00:02:51.475 are also added 41 00:02:51.475 --> 00:02:55.476 The main reason for using the template is 42 00:02:55.476 --> 00:02:58.776 simply in Core3D, 43 00:02:58.776 --> 00:03:01.626 by adding the package manager, 44 00:03:01.626 --> 00:03:04.176 We can switch the Core3d, 45 00:03:04.176 --> 00:03:07.976 commonly referred to as the built in default project settings 46 00:03:07.976 --> 00:03:10.776 to URP settings 47 00:03:10.776 --> 00:03:16.126 The default settings related to graphic qualities 48 00:03:16.126 --> 00:03:19.526 generated when installed through a template like on the screen 49 00:03:19.526 --> 00:03:22.776 if these were installed 50 00:03:22.776 --> 00:03:27.126 through the package manager in Core3D, 51 00:03:27.126 --> 00:03:31.276 these preset settings won't be there 52 00:03:31.276 --> 00:03:32.976 So, if we were to manually adjust everything, 53 00:03:32.976 --> 00:03:35.576 such as setting 54 00:03:35.576 --> 00:03:38.876 the highest, medium, and lowest resolutions for each item, 55 00:03:38.876 --> 00:03:43.026 it would take a lot of time 56 00:03:43.026 --> 00:03:48.126 So, by using preset values for screen graphic quality 57 00:03:48.126 --> 00:03:53.126 nd adjusting only the specific options as needed, 58 00:03:53.126 --> 00:03:58.326 increasing or decreasing the resolution, 59 00:03:58.326 --> 00:04:01.526 it saves much more time and effort 60 00:04:01.526 --> 00:04:04.676 It will be much more convenient for you to use as well 61 00:04:04.676 --> 00:04:09.726 Additionally, by expanding the package 62 00:04:09.726 --> 00:04:13.526 through things like the Core RP Library, 63 00:04:13.526 --> 00:04:18.376 you will also have access to additional tools, including Shader Graph, 64 00:04:18.376 --> 00:04:21.326 which is the main topic of this lecture 65 00:04:21.326 --> 00:04:25.726 So, we will gradually learn about Shader Graph, 66 00:04:25.726 --> 00:04:27.626 and there are assets we need to use 67 00:04:27.876 --> 00:04:30.526 Among these assets, we will change 68 00:04:30.526 --> 00:04:33.976 the default Standard Shader, 69 00:04:33.976 --> 00:04:38.226 which was set for Core3D, 70 00:04:38.226 --> 00:04:42.176 to the default settings 71 00:04:42.176 --> 00:04:44.676 of the Universal Render Pipeline 72 00:04:44.676 --> 00:04:48.426 If you look here, you can see the hot pink highlight, right? 73 00:04:48.426 --> 00:04:51.226 The hot pink color appearing for the shader 74 00:04:51.226 --> 00:04:53.376 means it's not working properly, 75 00:04:53.376 --> 00:04:56.426 so we need to adjust the settings to ensure 76 00:04:56.426 --> 00:04:58.176 that the shading and lighting are displayed correctly 77 00:04:58.176 --> 00:04:59.926 We will download the RPG/FPS Game Asset 78 00:04:59.926 --> 00:05:04.526 shown on the screen and create a practical example with it 79 00:05:04.526 --> 00:05:07.826 We will now create a practical example 80 00:05:07.826 --> 00:05:12.526 It’s a free asset, but in case viewers watch this video later, 81 00:05:12.526 --> 00:05:17.776 version 2 might be removed from the Asset Store 82 00:05:17.776 --> 00:05:23.376 The creator has version 3 and version 4 of the asset, 83 00:05:23.376 --> 00:05:25.576 in addition to version 2 84 00:05:25.576 --> 00:05:30.776 So, even if the exact screen layout isn't the same, 85 00:05:30.776 --> 00:05:34.226 you should still be able to follow along 86 00:05:34.226 --> 00:05:38.126 with the lesson using these assets 87 00:05:38.126 --> 00:05:42.026 Now, search for RPG FPS in Unity's Package Manager 88 00:05:42.026 --> 00:05:46.676 under My Assets, download version 2, 89 00:05:46.676 --> 00:05:51.376 and import it into your project 90 00:05:51.376 --> 00:05:55.276 Click the Import button, and when the import window appears, 91 00:05:55.276 --> 00:05:57.276 just proceed with the import 92 00:05:57.626 --> 00:06:00.276 In your project folder, 93 00:06:00.276 --> 00:06:02.876 you will find the RPG/FPS Game Asset, 94 00:06:02.876 --> 00:06:06.076 and within it, there is an "Asset Showcase" folder 95 00:06:06.076 --> 00:06:10.426 This showcases the basic setup of the assets, 96 00:06:10.426 --> 00:06:12.576 which, as you can see, 97 00:06:12.576 --> 00:06:16.376 is configured for Core3D and the built in pipeline 98 00:06:16.376 --> 00:06:17.426 The same goes here 99 00:06:17.426 --> 00:06:21.426 You can confirm that the shader is causing an error as it is highlighted in hot pink 100 00:06:21.426 --> 00:06:26.276 Similarly, if you double click to open the Map Version 1 scene, 101 00:06:26.276 --> 00:06:27.976 it will be in the same state 102 00:06:27.976 --> 00:06:30.576 First, to address the error, 103 00:06:30.576 --> 00:06:34.476 select the RPG_FPS_game_asset_industrial folder 104 00:06:34.476 --> 00:06:38.676 Click on the Search by Type icon 105 00:06:38.676 --> 00:06:40.826 and select Material 106 00:06:40.826 --> 00:06:44.476 Then, all the materials in the current asset folder 107 00:06:44.476 --> 00:06:47.126 will be searched 108 00:06:47.126 --> 00:06:49.376 Since we previously selected 109 00:06:49.376 --> 00:06:52.526 the RPG FPS game asset industrial folder, 110 00:06:52.526 --> 00:06:55.326 that's why these materials are appearing in the list 111 00:06:55.326 --> 00:06:58.976 By clicking on it, only the materials 112 00:06:58.976 --> 00:07:04.026 that are inside the folder you selected earlier will be listed 113 00:07:04.026 --> 00:07:07.876 Press Ctrl+A to select all, 114 00:07:07.876 --> 00:07:11.526 then hold Ctrl and deselect Dust Version 1 115 00:07:11.526 --> 00:07:15.076 Deselect "New Material" 116 00:07:15.076 --> 00:07:18.476 and finally, hold Ctrl and deselect "Skybox 117 00:07:18.476 --> 00:07:24.476 With only the assets highlighted in hot pink selected, 118 00:07:24.476 --> 00:07:26.676 go to Edit then to Rendering then to Materials 119 00:07:26.676 --> 00:07:32.126 Select Convert Selected Built in Materials to URP 120 00:07:32.126 --> 00:07:34.376 Just to note, here, 121 00:07:34.376 --> 00:07:37.326 it includes not only the Standard shader 122 00:07:37.326 --> 00:07:39.326 but also Unity's default shaders 123 00:07:39.326 --> 00:07:43.026 for mobile, GUI, and others, 124 00:07:43.026 --> 00:07:46.926 and it will convert all of them 125 00:07:46.926 --> 00:07:49.826 to be compatible with the URP environment 126 00:07:49.826 --> 00:07:52.376 Edit then to Rendering then to Materials 127 00:07:52.376 --> 00:07:54.476 Go ahead and click Convert Selected Built-in Materials to URP 128 00:07:54.476 --> 00:07:57.176 Once you click the Proceed button, 129 00:07:57.176 --> 00:08:00.476 the correct materials will be applied, 130 00:08:00.476 --> 00:08:03.726 and you can see them displayed properly on the screen 131 00:08:03.726 --> 00:08:05.876 Click on Search by Type 132 00:08:05.876 --> 00:08:08.626 and deselect Material to clear the search 133 00:08:08.626 --> 00:08:12.076 Then, we will proceed with learning about materials 134 00:08:12.076 --> 00:08:17.676 and related content for the Shader Graph example before moving on 135 00:08:17.676 --> 00:08:22.276 Let's take a look at the shaders we need to study 136 00:08:22.276 --> 00:08:26.176 First, the shader itself cannot be used 137 00:08:26.176 --> 00:08:30.076 with just the shader data alone 138 00:08:30.076 --> 00:08:35.076 Basically, to render a 3D model on the screen, the mesh, 139 00:08:35.076 --> 00:08:41.727 which determines the shape, and the material, which wraps around it 140 00:08:41.727 --> 00:08:45.027 like a packaging, must be combined 141 00:08:45.027 --> 00:08:48.777 In Unity, if the material field is left empty, 142 00:08:48.777 --> 00:08:51.127 the proper texture representation will not be displayed 143 00:08:51.127 --> 00:08:54.477 Among these, the shader is the most important part, 144 00:08:54.477 --> 00:08:58.777 as it is included within the material 145 00:08:58.777 --> 00:09:05.677 The shader's role is to represent the color of the surface of the object 146 00:09:05.677 --> 00:09:08.527 It may require mathematical formulas 147 00:09:08.527 --> 00:09:11.277 that can be somewhat complex to achieve that 148 00:09:11.277 --> 00:09:14.427 Especially when creating shaders like glass 149 00:09:14.427 --> 00:09:16.727 or cartoon rendering, 150 00:09:16.727 --> 00:09:19.477 where you draw the outlines of objects 151 00:09:19.477 --> 00:09:23.127 and simplify the shadows, 152 00:09:23.127 --> 00:09:26.177 even though the basic PBR shaders 153 00:09:26.177 --> 00:09:29.227 have complex formulas 154 00:09:29.227 --> 00:09:32.927 even if we don't know the complex formulas 155 00:09:32.927 --> 00:09:36.877 because it provides them by default, we can still use them 156 00:09:36.877 --> 00:09:39.127 So, as you can see now, 157 00:09:39.127 --> 00:09:43.477 the shader representing each of these 158 00:09:43.477 --> 00:09:46.677 three textures is using different formulas 159 00:09:46.677 --> 00:09:49.127 But the purpose of those shaders is 160 00:09:49.127 --> 00:09:54.177 ultimately the same, which is to determine the color on the screen 161 00:09:54.177 --> 00:09:57.677 Generally, you can think of the camera 162 00:09:57.677 --> 00:09:59.677 as our eyes instead 163 00:09:59.677 --> 00:10:04.627 In 3D, this principle is implemented exactly as it works in reality 164 00:10:04.627 --> 00:10:08.977 ight from the sun hits the surface of an object, 165 00:10:08.977 --> 00:10:13.927 and the color that hits the surface then enters our eyes 166 00:10:13.927 --> 00:10:17.177 So, the light coming from the sunlight 167 00:10:17.177 --> 00:10:19.727 is commonly referred to as the light vector, 168 00:10:19.727 --> 00:10:21.477 and the direction toward the camera 169 00:10:21.477 --> 00:10:24.127 is called the view vector 170 00:10:24.127 --> 00:10:27.277 Depending on how the shader is written, 171 00:10:27.277 --> 00:10:31.177 expressions like camera vector or camera direction are also used 172 00:10:31.177 --> 00:10:34.877 Anyway, in the end, it's using the vector data type 173 00:10:34.877 --> 00:10:38.727 to mathematically express what color is 174 00:10:38.727 --> 00:10:40.527 etected by our eyes 175 00:10:40.527 --> 00:10:42.477 Vectors are essentially math, after all 176 00:10:42.477 --> 00:10:44.777 And for these mathematical calculations, 177 00:10:44.777 --> 00:10:46.727 what must be necessary? 178 00:10:46.727 --> 00:10:48.527 Programming is necessary 179 00:10:48.527 --> 00:10:53.727 So, the programming involved in creating FPS content, 180 00:10:53.727 --> 00:10:57.027 which we commonly do using languages like C sharp 181 00:10:57.027 --> 00:11:00.227 is often referred to as content programming, 182 00:11:00.227 --> 00:11:02.577 although the term content is usually not attached 183 00:11:02.577 --> 00:11:06.327 However, since the purpose of shaders is very clear, 184 00:11:06.327 --> 00:11:09.627 it is commonly referred to as shader programming 185 00:11:09.627 --> 00:11:14.277 The language traditionally used here is CG 186 00:11:14.277 --> 00:11:20.627 There are various types of shader languages, such as HLSL and GLSL 187 00:11:20.627 --> 00:11:23.477 used in different graphics APIs 188 00:11:23.477 --> 00:11:26.127 Most of the formats are similar 189 00:11:26.127 --> 00:11:31.427 It's just that it has slightly different characteristics from the existing C sharp 190 00:11:31.427 --> 00:11:33.727 So the main focus of this session is that 191 00:11:33.727 --> 00:11:37.677 what we're using is not just a programming language, 192 00:11:37.677 --> 00:11:42.827 but a node based visual script called Shader Graph 193 00:11:42.827 --> 00:11:47.127 Each of these individual blocks is called a node 194 00:11:47.127 --> 00:11:49.277 You can see that there is adding as well 195 00:11:49.277 --> 00:11:53.227 There are also cases where data is represented 196 00:11:53.227 --> 00:11:56.877 as 0 and 1 based on a specific number, like this Step 197 00:11:56.877 --> 00:11:59.727 So when using Shader Graph, 198 00:11:59.727 --> 00:12:06.827 you can smoothly increase the graph 199 00:12:06.827 --> 00:12:09.627 from 0 to 1, like 0, 0.1, 0.2, 0.5, and so on 200 00:12:09.627 --> 00:12:11.777 By using certain functions, the graph's shape 201 00:12:11.777 --> 00:12:17.027 can suddenly change in steps from 0 to 1 202 00:12:17.027 --> 00:12:21.277 If you understand the principles behind 203 00:12:21.277 --> 00:12:24.127 how to manipulate these linear graphs, 204 00:12:24.127 --> 00:12:28.977 you'll be able to adapt quickly and reduce 205 00:12:28.977 --> 00:12:30.977 the effort of learning a language 206 00:12:30.977 --> 00:12:33.477 Here, I'm going to explain 207 00:12:33.477 --> 00:12:36.877 one principle that you must remember 208 00:12:36.877 --> 00:12:39.127 while studying shaders 209 00:12:39.127 --> 00:12:44.377 As you can see, the screen is made up of black, white, and gray 210 00:12:44.377 --> 00:12:47.227 When studying shaders, 211 00:12:47.227 --> 00:12:50.227 black is 0 to put it as numbers 212 00:12:50.227 --> 00:12:56.327 If you express black as a number, it is 0, and white is 1 213 00:12:56.327 --> 00:13:01.777 And in the middle, gray is represented by decimal numbers, 214 00:13:01.777 --> 00:13:04.377 ranging from 0.1 to 0.n, and all the tones made of decimals 215 00:13:04.377 --> 00:13:07.977 are expressed as shades of gray 216 00:13:07.977 --> 00:13:12.977 The image on the far left that you see on the screen 217 00:13:12.977 --> 00:13:15.727 is commonly referred to as a grayscale 218 00:13:15.727 --> 00:13:17.577 It's not just black and white, 219 00:13:17.577 --> 00:13:21.377 but images that have grayscale data in the middle 220 00:13:21.377 --> 00:13:24.527 These are called grayscale images 221 00:13:24.527 --> 00:13:28.877 There are also images made only of black and white 222 00:13:28.877 --> 00:13:31.777 This is also a grayscale 223 00:13:31.777 --> 00:13:35.477 It just has the extreme values of the grayscale 224 00:13:35.477 --> 00:13:38.877 And here, 0.05 combines 225 00:13:38.877 --> 00:13:40.727 with the texture here, 226 00:13:40.727 --> 00:13:44.727 or with another value, to be expressed 227 00:13:44.727 --> 00:13:47.977 So, basically, what you need to remember 228 00:13:47.977 --> 00:13:52.427 is that all the colors we know by name 229 00:13:52.427 --> 00:13:55.227 can be expressed as numbers 230 00:13:55.227 --> 00:13:57.477 Secondly, you may have 231 00:13:57.477 --> 00:14:00.727 heard of 8 bit color 232 00:14:00.727 --> 00:14:04.677 0 to 255 steps, 233 00:14:04.677 --> 00:14:10.077 the represented steps from 0 to 255, 234 00:14:10.077 --> 00:14:14.977 the one commonly referred to as 256 colors 235 00:14:14.977 --> 00:14:19.027 However, when writing shaders, we don't use 255 236 00:14:19.027 --> 00:14:22.577 The numbers are always between 0 and 1 237 00:14:22.577 --> 00:14:25.278 So, if we talk in terms of 8 bit color, 238 00:14:25.278 --> 00:14:29.328 255 becomes 1, and 0 remains 0 239 00:14:29.328 --> 00:14:34.628 Naturally, a value of around 128 in the middle would become 0.5 240 00:14:34.628 --> 00:14:37.528 So, when working with shaders, 241 00:14:37.528 --> 00:14:42.678 you should generally perceive numbers as values between 0 and 1, 242 00:14:42.678 --> 00:14:46.628 and train yourself to immediately associate colors with these numbers 243 00:14:46.628 --> 00:14:50.778 Some level of practice is necessary 244 00:14:50.778 --> 00:14:53.428 to make that connection 245 00:14:53.428 --> 00:14:56.728 Of course, I will explain this through the lecture 246 00:14:56.728 --> 00:14:58.428 To give an example, 247 00:14:58.428 --> 00:15:01.428 the green color you're seeing on the screen is 248 00:15:01.428 --> 00:15:05.628 represented as a vector with the values 249 00:15:05.628 --> 00:15:09.278 0, 1, 0 for the color green 250 00:15:09.278 --> 00:15:13.478 We also use this as a data type called color 251 00:15:13.478 --> 00:15:16.078 while programming in C sharp 252 00:15:16.078 --> 00:15:18.828 When we talk about vector types, 253 00:15:18.828 --> 00:15:23.678 they are represented as X, Y, and Z 254 00:15:23.678 --> 00:15:28.628 The X, Y, Z correspond directly to 255 00:15:28.628 --> 00:15:32.128 the red, green, and blue channels, respectively 256 00:15:32.128 --> 00:15:37.628 This is information related to shaders that you all need to know 257 00:15:37.628 --> 00:15:42.828 It's not that int is generally not used in shaders, but 258 00:15:42.828 --> 00:15:48.378 Generally, most are made of floats, 259 00:15:48.378 --> 00:15:51.478 so you can think of the data types simply 260 00:15:51.478 --> 00:15:54.278 First, in the Asset folder 261 00:15:54.278 --> 00:15:56.928 click the plus button on the screen 262 00:15:56.928 --> 00:16:02.078 and create a folder named FPS Shader 263 00:16:02.078 --> 00:16:05.428 Here, we will create two assets for comparison 264 00:16:05.428 --> 00:16:07.678 First, we will create the basic shader 265 00:16:07.678 --> 00:16:13.828 by going to Create, Shader and to Standard Surface Shader 266 00:16:13.828 --> 00:16:17.228 We won't change the name 267 00:16:17.228 --> 00:16:20.128 Next, right click and go to Create 268 00:16:20.128 --> 00:16:23.278 This time, select the URP 269 00:16:23.278 --> 00:16:26.128 Lit Shader Graph from the Shader Graph options 270 00:16:26.128 --> 00:16:28.278 to create another shader 271 00:16:28.278 --> 00:16:31.178 Similarly, we won't change the name 272 00:16:31.178 --> 00:16:34.228 This is being done for comparison, so it will be deleted later 273 00:16:34.228 --> 00:16:37.728 First, double-click the Surface Shader to open it 274 00:16:37.728 --> 00:16:41.678 As you can see, the shader code is displayed like this 275 00:16:41.678 --> 00:16:46.078 The shader code is not a separate class 276 00:16:46.078 --> 00:16:49.528 As you can see, the name of the shader and the name here 277 00:16:49.528 --> 00:16:53.728 will later appear as folder options when selecting in the material 278 00:16:53.728 --> 00:16:55.128 Inside the Custom folder, 279 00:16:55.128 --> 00:16:59.078 a selection called New Surface Shader will appear 280 00:16:59.078 --> 00:17:01.678 And the Properties section 281 00:17:01.678 --> 00:17:04.728 is where the parameters, 282 00:17:04.728 --> 00:17:06.828 commonly referred to as parameters 283 00:17:06.828 --> 00:17:09.528 that we see through the Inspector window are located 284 00:17:09.528 --> 00:17:13.528 If you look below at the SubShader section, 285 00:17:13.528 --> 00:17:17.478 you can see that the programming is 286 00:17:17.478 --> 00:17:20.978 set up to handle expressions related to color 287 00:17:20.978 --> 00:17:25.928 And at the end, just above the ENDCG, 288 00:17:25.928 --> 00:17:30.378 you'll see o Albedo and the Red, Green, and Blue 289 00:17:30.378 --> 00:17:34.578 If you look further up, you'll see the color data type is represented 290 00:17:34.578 --> 00:17:42.828 as XYZW / RGBA, and choosing only the RGB 291 00:17:42.828 --> 00:17:46.978 values means selecting just those components 292 00:17:46.978 --> 00:17:52.178 So, while we refer to it as XYZW in some cases, 293 00:17:52.178 --> 00:17:55.328 we also refer to it as RGBA in others 294 00:17:55.328 --> 00:17:58.978 This is one of the basic shaders 295 00:17:58.978 --> 00:18:00.978 that we use in Core3D 296 00:18:00.978 --> 00:18:02.628 I will close this now 297 00:18:02.628 --> 00:18:05.578 Now, let's double click the Shader Graph 298 00:18:05.578 --> 00:18:08.978 When you double click the Shader Graph, 299 00:18:08.978 --> 00:18:12.628 the Vertex area and the Fragment area 300 00:18:12.628 --> 00:18:16.178 you can see that it's divided into two areas 301 00:18:16.178 --> 00:18:20.378 Double click this tab to switch to full screen 302 00:18:20.378 --> 00:18:25.078 Let's zoom in a little more by pressing the mouse wheel 303 00:18:25.078 --> 00:18:27.778 In this case, you can think of the Vertex section 304 00:18:27.778 --> 00:18:31.828 as having Shader implied after Vertex 305 00:18:31.828 --> 00:18:33.328 Similarly, Fragment 306 00:18:33.328 --> 00:18:38.828 Has the word Shader omitted 307 00:18:38.828 --> 00:18:42.128 The Vertex section, literally, represents 308 00:18:42.128 --> 00:18:45.528 the points, vertexes of the 3D object 309 00:18:45.528 --> 00:18:48.228 which are connected to form the object 310 00:18:48.228 --> 00:18:51.628 Also, all 3D polygon surfaces 311 00:18:51.628 --> 00:18:55.278 are divided into triangles for calculation 312 00:18:55.278 --> 00:18:57.678 The information from these vertexes 313 00:18:57.678 --> 00:19:00.928 is used to determine the position on the screen 314 00:19:00.928 --> 00:19:02.378 Once the position is determined, 315 00:19:02.378 --> 00:19:06.878 you can draw a green cube on the screen, or 316 00:19:06.878 --> 00:19:10.728 by using specific formulas, 317 00:19:10.728 --> 00:19:14.178 while the object's data remains here, 318 00:19:14.178 --> 00:19:17.878 you can manipulate the visible object’s position, 319 00:19:17.878 --> 00:19:20.778 such as moving it downward or in another direction, 320 00:19:20.778 --> 00:19:27.778 At this determined position, we will color it with a specific color 321 00:19:27.778 --> 00:19:30.128 Or, when the object receives light, 322 00:19:30.128 --> 00:19:34.928 we can create changes in shading, 323 00:19:34.928 --> 00:19:36.978 and all these detailed pixels here 324 00:19:36.978 --> 00:19:38.578 will eventually be converted 325 00:19:38.578 --> 00:19:42.728 into rectangular pixels 326 00:19:42.728 --> 00:19:44.428 In this way, the position of the vertex 327 00:19:44.428 --> 00:19:48.978 determines where to apply a color and the Fragment Shader 328 00:19:48.978 --> 00:19:51.328 is responsible for coloring it 329 00:19:51.328 --> 00:19:55.478 So, in the end, the Vertex Shader 330 00:19:55.478 --> 00:19:59.378 and Fragment Shader that you see on the screen 331 00:19:59.378 --> 00:20:03.178 are part of what we call the rendering pipeline 332 00:20:03.178 --> 00:20:06.128 The rendering pipeline is 333 00:20:06.128 --> 00:20:08.328 a series of steps or procedures 334 00:20:08.328 --> 00:20:10.678 used to render 3D data on the screen 335 00:20:10.678 --> 00:20:12.378 So, one omitted from 336 00:20:12.378 --> 00:20:14.929 the Vertex Shader and the intermediate stage, 337 00:20:14.929 --> 00:20:20.279 which includes the rasterization process that converts to pixels 338 00:20:20.279 --> 00:20:23.979 but this is not an area where the shader is involved 339 00:20:23.979 --> 00:20:29.279 The process of converting the vector information connecting into pixels 340 00:20:29.279 --> 00:20:32.529 that is called Rasterize and after Rasterize 341 00:20:32.529 --> 00:20:35.929 the process of coloring each of the empty space 342 00:20:35.929 --> 00:20:37.729 That is the Fragment Shader 343 00:20:37.729 --> 00:20:41.829 So, the Vertex Shader operates first, then rasterization occurs, 344 00:20:41.829 --> 00:20:45.029 and finally, the Fragment Shader colors the pixels 345 00:20:45.029 --> 00:20:47.829 These sequential steps are 346 00:20:47.829 --> 00:20:51.029 referred to as the rendering pipeline 347 00:20:51.029 --> 00:20:53.529 The Universal part we used 348 00:20:53.529 --> 00:20:56.629 is abbreviated as URP 349 00:20:56.629 --> 00:20:59.429 Universal is devices that are generally used 350 00:20:59.429 --> 00:21:02.329 such as PC, Mobile, VR 351 00:21:02.329 --> 00:21:06.329 that is a rendering pipeline designed to be used universally 352 00:21:06.329 --> 00:21:09.929 You just need to understand what we need to use in this way 353 00:21:09.929 --> 00:21:13.979 Shader programming using Shader Graph 354 00:21:13.979 --> 00:21:18.429 So, the feature we will implement through Shader Graph 355 00:21:18.429 --> 00:21:21.029 this time is the Dissolve effect 356 00:21:21.029 --> 00:21:22.779 The Dissolve effect refers 357 00:21:22.779 --> 00:21:25.429 to an effect where an object 358 00:21:25.429 --> 00:21:29.129 that was previously visible gradually disappears, 359 00:21:29.129 --> 00:21:32.679 part by part, which is commonly referred to as Dissolve 360 00:21:32.679 --> 00:21:36.579 First, let's go back to the Unity screen 361 00:21:36.579 --> 00:21:39.579 and create a Shader Graph for this 362 00:21:39.579 --> 00:21:42.779 This time, I will explain Shader Graph step by step, 363 00:21:42.779 --> 00:21:44.979 including the layout 364 00:21:44.979 --> 00:21:47.479 and components of the screen 365 00:21:47.479 --> 00:21:51.279 First, we will delete the examples we created earlier 366 00:21:51.279 --> 00:21:53.629 and start with an empty state 367 00:21:53.629 --> 00:21:57.929 Right click, then go to Create then to Shader Graph then to URP 368 00:21:57.929 --> 00:22:01.229 Then, select Lit Shader Graph 369 00:22:01.229 --> 00:22:02.979 I usually name Shader Graph files 370 00:22:02.979 --> 00:22:07.329 with the prefix SG, followed by 371 00:22:07.329 --> 00:22:10.779 the effect name, like Dissolve 372 00:22:10.779 --> 00:22:13.079 Let's double click to open it 373 00:22:13.079 --> 00:22:15.829 When the Shader Graph window opens, 374 00:22:15.829 --> 00:22:17.829 I'll explain the three areas step by step, 375 00:22:17.829 --> 00:22:21.329 starting from the left 376 00:22:21.329 --> 00:22:24.029 This is the Properties window 377 00:22:24.029 --> 00:22:26.229 This is also referred to as the Parameters window 378 00:22:26.229 --> 00:22:29.729 When we create materials, 379 00:22:29.729 --> 00:22:31.929 let me quickly select one material as an example 380 00:22:31.929 --> 00:22:33.879 As you can see on the screen, 381 00:22:33.879 --> 00:22:37.729 elements like sliders or other forms 382 00:22:37.729 --> 00:22:40.229 that users can select and change 383 00:22:40.229 --> 00:22:41.879 are all referred to as properties or parameters 384 00:22:41.879 --> 00:22:45.179 The window that manages 385 00:22:45.179 --> 00:22:49.729 these is located on the far left 386 00:22:49.729 --> 00:22:52.979 By default, the second area is the Graph Area 387 00:22:52.979 --> 00:22:54.729 As shown earlier, 388 00:22:54.729 --> 00:22:58.479 here you connect various nodes 389 00:22:58.479 --> 00:23:01.179 to create and express specific colors 390 00:23:01.179 --> 00:23:03.829 The Inspector window is 391 00:23:03.829 --> 00:23:09.329 where you can make detailed changes to the shader's options 392 00:23:09.329 --> 00:23:13.379 Let's start by changing one of the options as an example 393 00:23:13.379 --> 00:23:16.379 In the Graph Inspector, 394 00:23:16.379 --> 00:23:18.779 if you scroll down, 395 00:23:18.779 --> 00:23:22.179 you'll see the Material section, where it's set to Lit 396 00:23:22.179 --> 00:23:25.179 The Lit shader is the basic shader 397 00:23:25.179 --> 00:23:28.029 that is affected by light, 398 00:23:28.029 --> 00:23:30.679 where brightness and darkness are represented 399 00:23:30.679 --> 00:23:35.829 That's right, if it doesn't respond to light, it's Unlit 400 00:23:35.829 --> 00:23:41.529 So, if you look at the main preview window below, 401 00:23:41.529 --> 00:23:44.529 you'll notice that when it's set to Unlit, 402 00:23:44.529 --> 00:23:49.829 it appears as a solid color, while setting it to Lit will show shading effects 403 00:23:50.679 --> 00:23:55.529 Since we need it to gradually disappear, 404 00:23:55.529 --> 00:24:00.329 unlike 3D, we will check the Alpha Clipping option below 405 00:24:00.329 --> 00:24:03.079 to enable the Alpha section 406 00:24:03.079 --> 00:24:05.579 Alpha Clipping refers to a concept 407 00:24:05.579 --> 00:24:08.129 where the object is either visible or invisible 408 00:24:08.129 --> 00:24:12.979 If it's set to 0, you'll notice that it disappears in the main preview 409 00:24:12.979 --> 00:24:15.279 On the other hand, if it's set to 1, it will be visible 410 00:24:15.279 --> 00:24:18.579 As I mentioned earlier, it's based on black and white 411 00:24:18.579 --> 00:24:23.529 The value assigned to Alpha is black (0) when it's not visible 412 00:24:23.529 --> 00:24:25.929 Take a look at the concept of translucency doesn't exist 413 00:24:25.929 --> 00:24:29.229 Through the Alpha Clip Threshold value 414 00:24:29.229 --> 00:24:33.729 if it's greater than 0.5, let's input 0.5 here and see the result 415 00:24:33.729 --> 00:24:37.179 If it's greater than or equal to 0.5, it will be visible 416 00:24:37.179 --> 00:24:42.979 If it's smaller than 0.5, like 0.49, it will not be visible 417 00:24:42.979 --> 00:24:47.429 We will first proceed with the Alpha Clipping state, 418 00:24:47.429 --> 00:24:51.879 where there are only two conditions: visible or not visible 419 00:24:51.879 --> 00:24:53.879 Now, let's save it 420 00:24:53.879 --> 00:24:58.179 Since it's relatively difficult to work while viewing 421 00:24:58.179 --> 00:25:00.979 this shader in the main preview window, 422 00:25:00.979 --> 00:25:03.879 During your development later on, 423 00:25:03.879 --> 00:25:07.129 you can select this shader, right click 424 00:25:07.129 --> 00:25:09.629 and choose Create and to Material 425 00:25:09.629 --> 00:25:12.579 It's better to create a material from the shader you've made 426 00:25:12.579 --> 00:25:14.779 and then work while checking it 427 00:25:14.779 --> 00:25:17.179 in the preview window here 428 00:25:17.179 --> 00:25:20.979 The reason nothing is showing in the preview window right now is 429 00:25:20.979 --> 00:25:24.579 because the Alpha value is set to 0.49, 430 00:25:24.579 --> 00:25:28.029 which is less than 0.5, so it's not visible 431 00:25:28.029 --> 00:25:30.829 So, if you change it back to 1 and press Save, 432 00:25:30.829 --> 00:25:34.079 it will be displayed correctly 433 00:25:34.079 --> 00:25:38.379 And since it's set to Lit, it is being affected by light as well 434 00:25:38.379 --> 00:25:42.929 We will apply some noise to this now 435 00:25:42.929 --> 00:25:45.129 To create the disappearing effect, 436 00:25:45.129 --> 00:25:46.979 let's apply noise 437 00:25:46.979 --> 00:25:50.379 First, middle-click to move it aside 438 00:25:50.379 --> 00:25:54.879 Let's right click on the empty space in the graph area 439 00:25:54.879 --> 00:25:57.080 Then, click Create Node, 440 00:25:57.080 --> 00:26:00.280 and search for Noise here 441 00:26:00.280 --> 00:26:03.480 You'll see the "Simple Noise" option 442 00:26:03.480 --> 00:26:06.280 Select it and double click 443 00:26:06.280 --> 00:26:10.680 then the Simple Noise node is created 444 00:26:10.680 --> 00:26:14.880 First, click the output pin of the Simple Noise node 445 00:26:14.880 --> 00:26:18.580 When a line appears, drag it 446 00:26:18.580 --> 00:26:23.230 to the desired destination and connect it 447 00:26:23.230 --> 00:26:28.430 We can then see the effect immediately in the main preview 448 00:26:28.430 --> 00:26:31.830 To disconnect, click the line in the middle 449 00:26:31.830 --> 00:26:35.930 and press the Del key on your keyboard 450 00:26:35.930 --> 00:26:38.280 This will break the connection and return it to its original state 451 00:26:38.280 --> 00:26:42.130 We're not just using this 452 00:26:42.130 --> 00:26:46.380 to create simple speckled patterns or textures 453 00:26:46.380 --> 00:26:49.980 Instead, we want to make the sphere appear 454 00:26:49.980 --> 00:26:53.730 as if there are holes in it, with parts showing and disappearing 455 00:26:53.730 --> 00:26:57.630 Right now, I've zoomed in by scrolling the mouse wheel up 456 00:26:57.630 --> 00:26:59.730 the noise is too small and dense right now 457 00:26:59.730 --> 00:27:03.930 To make the noise less fine, let's reduce 458 00:27:03.930 --> 00:27:06.330 the Scale value to around 30 459 00:27:06.330 --> 00:27:09.430 You can see that it has been reduced now 460 00:27:09.430 --> 00:27:13.130 By reducing the Scale, 461 00:27:13.130 --> 00:27:15.530 the blotchy pattern now appears larger 462 00:27:15.530 --> 00:27:20.480 In this state, we'll add the noise value 463 00:27:20.480 --> 00:27:23.380 to the Alpha to create a more complex effect, 464 00:27:23.380 --> 00:27:26.730 making it look like there are holes 465 00:27:26.730 --> 00:27:29.280 We will use the "Step" node for this 466 00:27:29.280 --> 00:27:32.280 Let's increase the spacing between the nodes a little 467 00:27:32.280 --> 00:27:34.630 I double clicked the window to make it full screen 468 00:27:34.630 --> 00:27:37.930 and use the space more efficiently 469 00:27:37.930 --> 00:27:42.180 Drag the pin from the Simple Noise node again, 470 00:27:42.180 --> 00:27:46.230 and when the search bar appears, type "Step" to search for the node 471 00:27:46.230 --> 00:27:50.780 Then, you'll see the "Step" node under the Math category in the search results 472 00:27:50.780 --> 00:27:53.380 You can either find the new node by searching, 473 00:27:53.380 --> 00:27:57.430 or right click, go to Create Node, and select the Math category 474 00:27:57.430 --> 00:28:00.680 And under the Round section, you'll find the Step node 475 00:28:00.680 --> 00:28:05.330 You can create it separately like this and connect it later 476 00:28:05.330 --> 00:28:10.630 We will input the noise output into the "in" of the Step node 477 00:28:10.630 --> 00:28:13.930 Now, you can see that 478 00:28:13.930 --> 00:28:16.380 the preview window shows black 479 00:28:16.380 --> 00:28:18.380 What the Step node does is 480 00:28:18.380 --> 00:28:22.280 similar to Alpha Clipping 481 00:28:22.280 --> 00:28:26.030 Alpha Clipping uses 0.5 as a threshold 482 00:28:26.030 --> 00:28:30.630 If the value is greater than 0.5, it will be visible 483 00:28:30.630 --> 00:28:34.680 If it's smaller than 0.5, it will not be visible 484 00:28:34.680 --> 00:28:38.930 Similarly, the Step node creates a linear distribution 485 00:28:38.930 --> 00:28:42.980 from black to white based on the value entering the Edge 486 00:28:42.980 --> 00:28:45.180 You'll see black, dark gray, 487 00:28:45.180 --> 00:28:50.630 gradually lightening to gray, and eventually white 488 00:28:50.630 --> 00:28:53.480 This creates a smooth, 489 00:28:53.480 --> 00:28:56.730 linear gradient from black to white 490 00:28:56.730 --> 00:29:02.180 The Step node forces the value based on 491 00:29:02.180 --> 00:29:05.430 a specific threshold entered into the Edge 492 00:29:05.430 --> 00:29:07.330 This is the main function of the Step node 493 00:29:07.330 --> 00:29:09.880 Since the Edge value is set to 1, 494 00:29:09.880 --> 00:29:14.030 everything smaller than 1 will be forced to 1, 495 00:29:14.030 --> 00:29:16.680 turning everything black in the process 496 00:29:16.680 --> 00:29:21.180 This is why the preview window is showing black 497 00:29:21.180 --> 00:29:26.880 If you input 0.5 as the Edge value, similar to the Alpha Threshold, 498 00:29:26.880 --> 00:29:30.080 you'll see that within the range of the noise, 499 00:29:30.080 --> 00:29:32.580 there will be areas 500 00:29:32.580 --> 00:29:35.430 with white, gray, and black values 501 00:29:35.430 --> 00:29:40.080 Using 0.5 as the threshold, it divides the values into visible and invisible, 502 00:29:40.080 --> 00:29:42.580 essentially rounding the values to black and white 503 00:29:42.580 --> 00:29:46.830 and this creates a sharp distinction between the two, similar to rounding 504 00:29:46.830 --> 00:29:50.280 By connecting the output of the Step node to Alpha, 505 00:29:50.280 --> 00:29:54.380 since both the Threshold value and the Step's Edge value are the same, 506 00:29:54.380 --> 00:29:59.030 you can expect the blotchy pattern to appear in the same way 507 00:29:59.030 --> 00:30:04.280 This time, we will use Ctrl C and Ctrl V to duplicate the Step node 508 00:30:04.280 --> 00:30:10.080 Now, with the connection still intact, 509 00:30:10.080 --> 00:30:14.330 let's change the Step value to 0.7 510 00:30:14.330 --> 00:30:17.780 As a result, the visible area will decrease significantly 511 00:30:17.780 --> 00:30:22.430 You can try values like 0.65 to find an optimal setting 512 00:30:22.430 --> 00:30:25.330 Now we will have the copied Step node referred to as B, 513 00:30:25.330 --> 00:30:29.580 and the original Step node with a value of 0.5 referred to as "A 514 00:30:29.580 --> 00:30:35.630 If you connect the Step from B to Alpha, 515 00:30:35.630 --> 00:30:38.380 the visible white area will be much smaller, 516 00:30:38.380 --> 00:30:42.280 so only a small portion will be visible 517 00:30:42.530 --> 00:30:46.230 We will use the difference between these two 518 00:30:46.230 --> 00:30:50.980 By using the Subtract function to subtract 519 00:30:50.980 --> 00:30:56.830 the narrow visible area from the wider area, 520 00:30:56.830 --> 00:31:01.430 you can create the effect of holes in the middle, 521 00:31:01.430 --> 00:31:04.580 as you can see now, there are multiple holes 522 00:31:04.580 --> 00:31:07.930 This adds additional details to the effect 523 00:31:07.930 --> 00:31:11.880 If you change the Edge value of the Step 524 00:31:11.880 --> 00:31:18.730 in B to 0.55 or 0.6 525 00:31:18.730 --> 00:31:22.730 You will see that the area of the hole changes slightly 526 00:31:22.730 --> 00:31:28.280 Let's set the value to 0.55 and bring it closer to subtract 527 00:31:28.280 --> 00:31:31.980 We will simply refer to the green color as A 528 00:31:31.980 --> 00:31:33.930 and the red color as B 529 00:31:33.930 --> 00:31:37.880 When we subtract a narrow area from a wider area, 530 00:31:37.880 --> 00:31:41.030 we will eventually get a boundary 531 00:31:41.030 --> 00:31:46.481 that appears like a stripe in this region 532 00:31:46.481 --> 00:31:49.081 The orange color is the result of A minus B 533 00:31:49.081 --> 00:31:52.031 So, we will use this result 534 00:31:52.031 --> 00:31:55.381 and later connect it to the Emission section 535 00:31:55.381 --> 00:31:57.281 for this area here 536 00:31:57.281 --> 00:32:00.631 Of course, connecting it now won't cause any significant changes yet 537 00:32:00.631 --> 00:32:03.931 This will need to be mixed with the color later on 538 00:32:03.931 --> 00:32:08.481 So, connect Step A to Alpha, 539 00:32:08.481 --> 00:32:13.231 and for the result of subtracting A and B, 540 00:32:13.231 --> 00:32:16.631 connect it to the Emission for now 541 00:32:16.631 --> 00:32:18.731 You can see 542 00:32:18.731 --> 00:32:21.781 that the boundary area is now showing up in white 543 00:32:21.781 --> 00:32:25.281 The Emissive section has the effect of emitting light, 544 00:32:25.281 --> 00:32:28.181 making it self illuminating 545 00:32:28.181 --> 00:32:32.781 The value that goes into the Emission can support 546 00:32:32.781 --> 00:32:38.381 values greater than 1, not just between 0 and 1 547 00:32:38.381 --> 00:32:40.181 For Base Color, 548 00:32:40.181 --> 00:32:43.081 the range of values is between 0 and 1 549 00:32:43.081 --> 00:32:47.331 for the three colors which are red, green, and blue 550 00:32:47.331 --> 00:32:51.831 Similarly, Emission also takes red, green, and blue, 551 00:32:51.831 --> 00:32:55.581 but for it to emit light, 552 00:32:55.581 --> 00:32:59.531 the values for each color must be greater than 1 553 00:32:59.531 --> 00:33:03.331 Of course, this will be linked with other features 554 00:33:03.331 --> 00:33:05.781 I'll explain later 555 00:33:05.781 --> 00:33:10.831 I'll provide more details after we've established the basic effect 556 00:33:10.831 --> 00:33:13.531 Next, we will add a color to this 557 00:33:13.531 --> 00:33:15.781 Right click, then search for 558 00:33:15.781 --> 00:33:17.981 Create Node Color 559 00:33:17.981 --> 00:33:21.931 You will see the Input category, and under it, select Basic Color 560 00:33:21.931 --> 00:33:27.481 he color values that go into this range from 0 to 1 by default, 561 00:33:27.481 --> 00:33:31.781 but since it's 8 bit color, the maximum value is 255 562 00:33:31.781 --> 00:33:35.681 We can also express this range from 0 to 1 563 00:33:35.681 --> 00:33:37.731 So, to better align with 564 00:33:37.731 --> 00:33:41.131 the overall context of the lesson, we will set the values 565 00:33:41.131 --> 00:33:44.931 from 0 to 1 and proceed with the rest of the steps 566 00:33:44.931 --> 00:33:48.481 Since RGB is expressed from 0 to 1, 567 00:33:48.481 --> 00:33:53.081 when red, green, and blue are all set 568 00:33:53.081 --> 00:33:56.031 to 100%, it results in white 569 00:33:56.031 --> 00:33:58.281 However, if you input 570 00:33:58.281 --> 00:34:01.431 a value greater than 1, such as 3, 571 00:34:01.431 --> 00:34:04.881 it will still be normalized back to 1, as you can see 572 00:34:04.881 --> 00:34:08.231 Now, let's change the node mode from Default 573 00:34:08.231 --> 00:34:12.331 to HDR in the Color node 574 00:34:12.331 --> 00:34:15.931 When you click on it, there's an additional field called Intensity 575 00:34:15.931 --> 00:34:18.931 at the bottom, which represents the intensity of the color 576 00:34:18.931 --> 00:34:22.431 Let's change how we view the RGB values from 0 to 1 577 00:34:22.431 --> 00:34:25.881 If you want to emit red light, 578 00:34:25.881 --> 00:34:29.481 in HDR mode, increasing the Intensity value will help 579 00:34:29.481 --> 00:34:31.381 Let's try setting it to 5 580 00:34:31.381 --> 00:34:35.431 Now, let's connect it to the Emission 581 00:34:35.431 --> 00:34:37.531 Since it's showing red, 582 00:34:37.531 --> 00:34:39.531 but just by looking at the main preview, 583 00:34:39.531 --> 00:34:42.881 it might be difficult to tell 584 00:34:42.881 --> 00:34:45.581 if it's actually emitting light or not 585 00:34:45.581 --> 00:34:49.681 To properly see the light emitting effect, 586 00:34:49.681 --> 00:34:54.381 you'll need to place it directly in the Scene and check it there 587 00:34:54.381 --> 00:34:57.331 Let's save the shader first 588 00:34:57.331 --> 00:35:00.081 Then, go to File and to New Scene 589 00:35:00.081 --> 00:35:05.881 select SRP and choose Standard (URP) and click Create 590 00:35:05.881 --> 00:35:09.581 In the Scene View below, you'll notice that 591 00:35:09.581 --> 00:35:13.481 by default, there's the Global Volume section 592 00:35:13.481 --> 00:35:18.281 already has the Bloom effect applied by default 593 00:35:18.281 --> 00:35:20.781 The Bloom effect helps 594 00:35:20.781 --> 00:35:23.581 the light stand out more 595 00:35:23.581 --> 00:35:26.231 After, adding a Sphere object, and then 596 00:35:26.231 --> 00:35:28.131 onto this sphere object, 597 00:35:28.131 --> 00:35:32.081 the Dissolve effect from the Shader Graph, 598 00:35:32.081 --> 00:35:36.431 drag it to connect the two 599 00:35:36.431 --> 00:35:38.081 Now, in the Game view preview, 600 00:35:38.081 --> 00:35:40.531 you should be able to see the light emitting 601 00:35:40.531 --> 00:35:43.031 If you double click, it's emitting light 602 00:35:43.031 --> 00:35:47.031 If you turn off the Bloom effect in the Global Volume, 603 00:35:47.031 --> 00:35:49.231 the light will disappear, as shown here 604 00:35:49.231 --> 00:35:52.731 The Bloom effect needs to be enabled in conjunction 605 00:35:52.731 --> 00:35:54.731 with this to create the spreading, glowing effect 606 00:35:54.731 --> 00:35:57.931 I increased the light intensity for explanation, 607 00:35:57.931 --> 00:36:02.381 but let's reduce the Intensity value 608 00:36:02.381 --> 00:36:05.131 to 3 to make the light less intense 609 00:36:05.131 --> 00:36:07.731 We will use Multiply to subtract 610 00:36:07.731 --> 00:36:15.131 from the color output, then multiply it 611 00:36:15.131 --> 00:36:18.831 Afterward, connect the result of the subtraction to B 612 00:36:18.831 --> 00:36:22.731 Now, let's input this into the Emission 613 00:36:22.731 --> 00:36:24.031 and save it 614 00:36:24.031 --> 00:36:28.781 Now, you should be able to see that only the boundary is emitting light 615 00:36:28.781 --> 00:36:30.831 What we need to do is 616 00:36:30.831 --> 00:36:34.731 not just keep these values for ourselves, 617 00:36:34.731 --> 00:36:36.681 To make it easier for others to use, 618 00:36:36.681 --> 00:36:39.681 instead of opening the Shader Graph every time 619 00:36:39.681 --> 00:36:43.731 and telling them which nodes to use, 620 00:36:43.731 --> 00:36:47.781 we need to change these values into properties so they can be 621 00:36:47.781 --> 00:36:50.081 managed conveniently in the Inspector window 622 00:36:50.081 --> 00:36:51.981 If you want to allow others 623 00:36:51.981 --> 00:36:55.631 to easily change the intensity 624 00:36:55.631 --> 00:36:58.281 or color of the light 625 00:36:58.281 --> 00:37:01.331 select the color node and right click, 626 00:37:01.331 --> 00:37:04.931 and you'll see the option Convert To and Property 627 00:37:04.931 --> 00:37:09.981 When you click on it, a color property will appear in the Properties window on the left 628 00:37:09.981 --> 00:37:13.781 This color property now shows the red color 629 00:37:13.781 --> 00:37:18.331 with an Intensity value of around 3, as we set 630 00:37:18.331 --> 00:37:24.081 Similarly, if you want to convert the Noise Scale value to a property, 631 00:37:24.081 --> 00:37:28.381 right click and select Convert To Property, however, this won't work 632 00:37:28.381 --> 00:37:31.282 We can't convert it right away 633 00:37:31.282 --> 00:37:34.282 So, drag the Scale node out, 634 00:37:34.282 --> 00:37:39.032 and from the Input section, select Basic then Float 635 00:37:39.032 --> 00:37:42.932 Set the selected value to the default of 30, 636 00:37:42.932 --> 00:37:47.132 then right click and choose Convert To Property 637 00:37:47.132 --> 00:37:50.332 This will create a Float property, 638 00:37:50.332 --> 00:37:51.982 and as you can see, 639 00:37:51.982 --> 00:37:55.282 the node is naturally connected 640 00:37:55.282 --> 00:37:58.282 However, naming it Float or Color may not 641 00:37:58.282 --> 00:38:01.382 make it clear where it's used, so it's a good idea 642 00:38:01.382 --> 00:38:04.332 to rename them appropriately based on their purpose 643 00:38:04.332 --> 00:38:05.782 So, select the property 644 00:38:05.782 --> 00:38:08.982 and change the name to EmissiveColor 645 00:38:08.982 --> 00:38:13.532 For the Float property, let's rename it to NoiseScale 646 00:38:13.532 --> 00:38:16.482 The same applies to the Edge value in the Step node 647 00:38:16.482 --> 00:38:18.732 Another way to create a property is 648 00:38:18.732 --> 00:38:21.582 by clicking the plus button in the Properties window 649 00:38:21.582 --> 00:38:25.182 and creating the desired value 650 00:38:25.182 --> 00:38:30.032 Ultimately, you need to be able to input the value into the node 651 00:38:30.032 --> 00:38:34.382 If you look behind the Edge field, you'll see that the value is set to 1 652 00:38:34.382 --> 00:38:37.932 This means that a Float value is being used 653 00:38:37.932 --> 00:38:43.732 And for UV, the (2) indicates that two Floats, 654 00:38:43.732 --> 00:38:46.932 or a Vector 2, are being used 655 00:38:46.932 --> 00:38:50.232 In the Color field, you'll see that it says Vector 4, 656 00:38:50.232 --> 00:38:53.682 So, if you want to input a value into the Edge, 657 00:38:53.682 --> 00:38:58.732 click the plus button in the Properties window and select Float 658 00:38:58.732 --> 00:39:02.382 Create a Float property and name it DissolveVal 659 00:39:02.382 --> 00:39:04.432 Set the default value to 0, 660 00:39:04.432 --> 00:39:07.182 then drag it over and connect it 661 00:39:07.732 --> 00:39:10.632 Let's drag the noise further away 662 00:39:10.632 --> 00:39:15.682 Having both DissolveVal and Dissolve Edge Value 663 00:39:15.682 --> 00:39:19.432 managing those two separately 664 00:39:19.432 --> 00:39:21.782 could make it more complicated 665 00:39:21.782 --> 00:39:25.032 So, let's create one more Float value 666 00:39:25.032 --> 00:39:28.882 Next, name this Float value DissolveEdge 667 00:39:28.882 --> 00:39:31.082 The difference between 668 00:39:31.082 --> 00:39:38.532 the Step values in A and B was 0.05, 669 00:39:38.532 --> 00:39:42.482 with values of 0.5 and 0.55 670 00:39:42.482 --> 00:39:48.332 Set the default value of the DissolveEdge Float property to 0.05 671 00:39:48.332 --> 00:39:51.982 The value in Step B should be greater than the value in Step A 672 00:39:51.982 --> 00:39:57.632 Take the DissolveVal value and subtract a node to connect it to Add A, 673 00:39:57.632 --> 00:40:00.432 then add the Dissolve Edge value 674 00:40:00.432 --> 00:40:09.682 So, by adding 0.5 and 0.05, the value becomes 0.55, 675 00:40:09.682 --> 00:40:14.332 and when you set DissolveVal to 0.5, 676 00:40:14.332 --> 00:40:17.832 the results we've created earlier are now available as properties 677 00:40:17.832 --> 00:40:21.032 allowing others to modify them as well 678 00:40:21.032 --> 00:40:23.582 After saving, if you go to the material, 679 00:40:23.582 --> 00:40:27.682 you'll see the properties listed like this, 680 00:40:27.682 --> 00:40:31.932 If we set the DissolveVal close to 0, 681 00:40:31.932 --> 00:40:37.932 the shape will be fully visible 682 00:40:37.932 --> 00:40:44.082 As the DissolveVal increases, the object will gradually disappear, 683 00:40:44.082 --> 00:40:47.532 and when it reaches 1, it will completely vanish 684 00:40:47.532 --> 00:40:51.182 If you want to limit the range 685 00:40:51.182 --> 00:40:55.832 of the DissolveVal to avoid overly excessive values, 686 00:40:55.832 --> 00:40:58.532 select the property node and, 687 00:40:58.532 --> 00:41:02.882 in the mode, use a slider 688 00:41:02.882 --> 00:41:06.882 to set the Min and Max values between 0 and 1 689 00:41:06.882 --> 00:41:08.832 After saving, he value will change to a slider 690 00:41:08.832 --> 00:41:13.632 When set to 0, the object will be fully visible, and 1, it will gradually dissolve 691 00:41:13.632 --> 00:41:17.782 you can use the Scale value to adjust 692 00:41:17.782 --> 00:41:20.132 the density of the noise pattern like this 693 00:41:20.132 --> 00:41:23.882 whether it should appear thicker 694 00:41:23.882 --> 00:41:26.432 or thinner, 695 00:41:26.432 --> 00:41:29.332 We can also adjust the thickness of the edge 696 00:41:29.332 --> 00:41:31.582 A value of 0.01 would be too thin, 697 00:41:31.582 --> 00:41:35.282 but setting it to around 0.03 will give you a thinner edge 698 00:41:35.282 --> 00:41:38.682 Now, in the Scene View, 699 00:41:38.682 --> 00:41:42.582 you should be able to see the object 700 00:41:42.582 --> 00:41:44.382 with the dissolve effect applied 701 00:41:44.382 --> 00:41:47.582 In this section, we explored the features of URP 702 00:41:47.582 --> 00:41:50.682 and the differences in project settings 703 00:41:50.682 --> 00:41:52.682 compared to the existing Core3D 704 00:41:52.682 --> 00:41:56.882 Additionally, by using the Shader Graph package, 705 00:41:56.882 --> 00:41:59.432 which can be expanded with URP, 706 00:41:59.432 --> 00:42:01.632 we learned how to create custom shaders 707 00:42:01.632 --> 00:42:03.582 beyond the default ones, 708 00:42:03.582 --> 00:42:06.582 allowing for more diverse 709 00:42:06.582 --> 00:42:10.032 and dynamic effects in shader programming 710 00:42:10.782 --> 00:42:15.082 This concludes the lecture on Shader Graph 711 00:42:15.082 --> 00:42:15.732 URP and Shader Graph 712 00:42:15.732 --> 00:42:16.332 SRP (Scriptable Rendering Pipeline) 713 00:42:16.332 --> 00:42:16.982 Unity's new feature for controlling rendering-related functions through C sharp 714 00:42:16.982 --> 00:42:17.582 URP (Universal Rendering Pipeline) 715 00:42:17.582 --> 00:42:18.232 A rendering pipeline used universally across PC, mobile, VR, and other platforms 716 00:42:18.232 --> 00:42:18.832 URP features Core RP Library added 717 00:42:18.832 --> 00:42:19.482 Add settings for the Universal pipeline 718 00:42:19.482 --> 00:42:20.082 The Shader Graph is included in the package and installed automatically 719 00:42:20.082 --> 00:42:20.582 Shader Graph: Programming to determine the color of pixels on the screen in a material 720 00:42:20.582 --> 00:42:21.082 A package distributed by Unity to implement shader functionality through nodes, not code 721 00:42:21.082 --> 00:42:21.582 Shader Graph Asset-Property Window: Create and manage property items Inspector Window: Set the selected node's and shader's properties 722 00:42:21.582 --> 00:42:22.082 Graph Area: The actual programming area where the calculated results are connected to the Vertex and Fragment items 723 00:42:22.082 --> 00:42:22.582 Shader Graph Setup: Download and import the RPG/FPS Game Asset from the Asset Store 724 00:42:22.582 --> 00:42:23.082 After selecting RPG_FPS_game_asset_industrial, click the Search by Type icon and select Material 725 00:42:23.082 --> 00:42:23.582 Select only the hot pink elements from the Materials, then go to Edit Rendering to Materials and select "Convert Selected Built-in Materials to URP 726 00:42:23.582 --> 00:42:24.082 After confirming the correct output of the Material, click the Search by Type icon and uncheck the Material 727 00:42:24.082 --> 00:42:24.582 Create a new folder in the Assets folder in the Project window and name it FPS Shader 728 00:42:24.582 --> 00:42:25.082 Right click on FPS Shader, then select Create - Shader Graph - URP - Lit Shader Graph 729 00:42:25.082 --> 00:42:25.582 To implement a dissolve effect using Shader Graph 730 00:42:25.582 --> 00:42:26.082 Dissolve: An effect where an object gradually disappears in parts 731 00:42:26.082 --> 00:42:26.582 After Rrght-click on FPS_Shader, then select Create - Shader Graph - URP - Lit Shader Graph 732 00:42:26.582 --> 00:42:27.082 After naming it SG Dissolve, double-click to open the graph window. Right-click on the empty area of the graph and select Create Node Simple Noise 733 00:42:27.082 --> 00:42:27.582 After creating the Simple Noise node, connect it to Alpha and set the Scale value to 30 734 00:42:27.582 --> 00:42:28.082 Create a Step node and connect the output pin of the Simple Noise node Set the Edge value of the Step node to 0.5 and connect the Step node to Alpha 735 00:42:28.082 --> 00:42:28.582 Copy and paste the Step node, then set the Edge value to 0.55 736 00:42:28.582 --> 00:42:29.082 Create a Subtract node, then connect the original Step node to the A input and Connect the copied Step node to the B input 737 00:42:29.082 --> 00:42:29.582 Connect the Subtract node to Emission Create a Color node and change the mode from Default to HDR 738 00:42:29.582 --> 00:42:30.082 Set the RGB values to (1, 0, 0) and the Intensity value to 3, then connect the Color node to Emission 739 00:42:30.082 --> 00:42:30.582 Select Standard(URP) in File New Scene and then create it 740 00:42:30.582 --> 00:42:31.082 Click the plus button in the Hierarchy window, then select 3D Object Sphere 741 00:42:31.082 --> 00:42:31.582 Drag and drop Shader Graph_SG_Dissolve from the Project window onto the Sphere in the Hierarchy 742 00:42:31.582 --> 00:42:32.082 Create a Multiply node and connect it to the Color node and the Subtract node 743 00:42:32.082 --> 00:42:32.582 Move the Scale item of the Simple Noise node outside, then create a Float node 744 00:42:32.582 --> 00:42:33.082 Set the selected value of the Float node to 30, then right click and select Convert To Property 745 00:42:33.082 --> 00:42:33.582 In the Property window, click (+) and select Float Name it DissolveVal and set the Default value to 0.05 746 00:42:33.582 --> 00:42:34.082 Drag the DissolveVal property into the graph area and connect it to the Edge of the Step A node 747 00:42:34.082 --> 00:42:34.582 Create another Float node, name it DissolveEdge, and set the Default value to 0.5 748 00:42:34.582 --> 00:42:35.082 Create an Add node, then connect DissolveVal to Add A and DissolveEdge to Add: B 749 00:42:35.082 --> 00:42:35.582 Change the property values to observe the dissolve effect