WEBVTT 1 00:00:04.925 --> 00:00:08.925 Realistic Integrated Level Design 2 2 00:00:24.025 --> 00:00:25.275 Hello 3 00:00:25.275 --> 00:00:28.875 I’m Kwangwook Tak, and I’ll be leading this lecture 4 00:00:28.875 --> 00:00:33.325 Today, we’ll learn how to apply materials 5 00:00:33.325 --> 00:00:36.075 to surfaces created using whiteboxing 6 00:00:37.025 --> 00:00:39.675 First, through an example of coloring an apartment 7 00:00:39.675 --> 00:00:43.425 we’ll understand the concept and application of materials 8 00:00:43.425 --> 00:00:46.925 Then, through a practical exercise of texturing 9 00:00:46.925 --> 00:00:50.225 we’ll learn how to apply materials 10 00:00:50.225 --> 00:00:54.225 Material Creation and Application 11 00:00:54.225 --> 00:00:57.025 We’ll start by creating and applying materials to walls 12 00:00:57.025 --> 00:00:59.025 Before painting the walls 13 00:00:59.025 --> 00:01:02.525 let’s first understand the principles behind materials 14 00:01:02.525 --> 00:01:05.575 Most 3D modeling programs 15 00:01:05.575 --> 00:01:10.925 like Unreal Engine, Blender, 3D MAX, or MAYA 16 00:01:10.925 --> 00:01:12.675 follow a similar structure 17 00:01:12.675 --> 00:01:15.875 to display objects 18 00:01:15.875 --> 00:01:22.375 These programs use meshes to construct shapes with points, lines, and planes 19 00:01:22.375 --> 00:01:27.476 and materials to represent textures using numbers or images 20 00:01:27.476 --> 00:01:32.126 These two components are essential for expressing 21 00:01:32.126 --> 00:01:33.976 3D objects in a 3D space 22 00:01:33.976 --> 00:01:36.226 They are indispensable 23 00:01:36.226 --> 00:01:39.876 for visual representation in 3D environments 24 00:01:39.876 --> 00:01:42.076 regardless of the program 25 00:01:42.076 --> 00:01:43.926 In Unreal Engine 26 00:01:43.926 --> 00:01:46.726 there’s also an element called collision 27 00:01:46.726 --> 00:01:50.026 which defines areas for detecting impacts 28 00:01:50.026 --> 00:01:51.826 Including collision 29 00:01:51.826 --> 00:01:54.776 these elements form an actor 30 00:01:54.776 --> 00:01:59.976 combined with components that handle various functionalities 31 00:01:59.976 --> 00:02:02.776 Among these, we will focus on materials 32 00:02:02.776 --> 00:02:08.926 Let’s start by applying an orange color to the living room 33 00:02:08.926 --> 00:02:12.526 To create a color, you need a material 34 00:02:12.526 --> 00:02:15.526 Open the content drawer 35 00:02:15.526 --> 00:02:19.326 and create a new folder 36 00:02:19.326 --> 00:02:25.376 Name the folder Materials 37 00:02:25.376 --> 00:02:28.876 That's our Materials folder 38 00:02:28.876 --> 00:02:32.226 Since we’ll frequently use the content drawer 39 00:02:32.226 --> 00:02:34.126 click Dock in Layout 40 00:02:34.126 --> 00:02:37.276 to keep it visible at all times 41 00:02:37.276 --> 00:02:39.226 So we have it here all the time 42 00:02:39.226 --> 00:02:42.076 Inside the Materials folder 43 00:02:42.076 --> 00:02:44.526 let’s create an asset 44 00:02:44.526 --> 00:02:46.176 You can either right-click on an empty space 45 00:02:46.176 --> 00:02:50.076 or click the Add button and select Material 46 00:02:50.076 --> 00:02:53.976 I’ll use the right-click method to create the material 47 00:02:53.976 --> 00:02:59.476 and name it M_Orange 48 00:02:59.476 --> 00:03:02.176 Once the material is created, we need to set it 49 00:03:02.176 --> 00:03:05.376 to hold the orange color 50 00:03:05.376 --> 00:03:07.526 Double-click the material 51 00:03:07.526 --> 00:03:11.376 to open the Material Editor 52 00:03:12.376 --> 00:03:15.426 I’ll maximize the editor window for easier navigation 53 00:03:15.426 --> 00:03:20.176 On the left, you’ll see a preview of the material 54 00:03:20.176 --> 00:03:22.226 and below it is the details panel 55 00:03:22.226 --> 00:03:25.226 for managing various settings 56 00:03:25.226 --> 00:03:27.476 The central area 57 00:03:27.476 --> 00:03:30.576 which we’ll use the most 58 00:03:30.576 --> 00:03:33.276 is called the graph 59 00:03:33.276 --> 00:03:37.226 This empty space is called the material graph 60 00:03:37.226 --> 00:03:39.476 In the graph, there’s a yellow box 61 00:03:39.476 --> 00:03:41.976 containing various data points 62 00:03:41.976 --> 00:03:45.326 which we refer to as nodes 63 00:03:45.926 --> 00:03:49.926 Nodes can be moved by clicking and dragging 64 00:03:49.926 --> 00:03:55.526 Right-clicking and dragging moves the entire graph 65 00:03:55.526 --> 00:03:58.126 as you see, like this 66 00:03:58.126 --> 00:04:01.226 while left-clicking moves individual nodes 67 00:04:01.226 --> 00:04:04.726 Right-click and drag 68 00:04:04.726 --> 00:04:06.126 to move everything 69 00:04:06.126 --> 00:04:09.977 The node we see here 70 00:04:09.977 --> 00:04:15.927 is the final node that determines how the material will appear 71 00:04:15.927 --> 00:04:18.427 It includes several options 72 00:04:19.977 --> 00:04:22.977 Scroll and it zooms in and out 73 00:04:22.977 --> 00:04:27.977 Scroll while pressing Ctrl to zoom in more 74 00:04:27.977 --> 00:04:30.577 We see here Base Color, Metallic 75 00:04:30.577 --> 00:04:32.927 Specular, and Roughness 76 00:04:32.927 --> 00:04:35.527 Among these, we’ll focus on Base Color 77 00:04:35.527 --> 00:04:38.577 Next to Base Color is a square box 78 00:04:38.577 --> 00:04:43.527 Click on it to select a color 79 00:04:43.527 --> 00:04:47.527 Let’s choose an orange color 80 00:04:47.527 --> 00:04:51.227 The selected color is displayed 81 00:04:51.227 --> 00:04:54.227 in the lower-right corner 82 00:04:54.227 --> 00:04:56.477 It's a little too yellow now 83 00:04:56.477 --> 00:05:01.627 Let's mix in some red to get a closer orange tone 84 00:05:01.627 --> 00:05:05.077 and click OK to get that orange color 85 00:05:05.077 --> 00:05:06.877 The material preview will 86 00:05:06.877 --> 00:05:09.127 also update to show the orange color 87 00:05:09.127 --> 00:05:12.777 After creating the material 88 00:05:12.777 --> 00:05:16.527 be sure to click Apply at the top 89 00:05:16.527 --> 00:05:18.227 to confirm the changes 90 00:05:19.427 --> 00:05:22.627 Once applied 91 00:05:22.627 --> 00:05:24.977 you’ll notice an asterik icon next to the name 92 00:05:24.977 --> 00:05:28.927 indicating that there are unsaved changes 93 00:05:28.927 --> 00:05:32.077 or that it hasn't saved after a change 94 00:05:32.077 --> 00:05:38.627 Apply literally means to apply it in the system 95 00:05:38.627 --> 00:05:42.177 The asterisk means 96 00:05:42.177 --> 00:05:46.327 that you will save this in the drive 97 00:05:46.327 --> 00:05:47.377 to put it roughly 98 00:05:47.377 --> 00:05:51.027 Clicking the save icon on the left 99 00:05:51.027 --> 00:05:56.577 will record the changes to the hard drive 100 00:05:56.577 --> 00:05:59.477 and remove the asterisk from the name 101 00:05:59.477 --> 00:06:03.627 By following these steps, applying and saving 102 00:06:03.627 --> 00:06:07.227 you can ensure smooth progress without errors 103 00:06:07.227 --> 00:06:10.477 Now we have the orange color applied 104 00:06:10.477 --> 00:06:13.277 From here, you can either 105 00:06:13.277 --> 00:06:16.527 minimize this window or, like me 106 00:06:16.527 --> 00:06:19.077 you can dock the window to the side of the level 107 00:06:19.077 --> 00:06:21.527 I can easily switch back and forth 108 00:06:22.377 --> 00:06:24.827 Back to the apartment level 109 00:06:26.277 --> 00:06:30.877 if you check the content browser 110 00:06:30.877 --> 00:06:33.577 you’ll see the material with the orange color 111 00:06:33.577 --> 00:06:37.777 Now, we can paint this material onto the wall 112 00:06:37.777 --> 00:06:44.677 It’s simple, just drag and drop 113 00:06:44.677 --> 00:06:47.527 You can drag and drop the material onto 114 00:06:47.527 --> 00:06:50.727 any area inside the level 115 00:06:51.928 --> 00:06:55.578 Alternatively, if you select a wall 116 00:06:55.578 --> 00:06:57.628 on the right side, in the Details panel 117 00:06:57.628 --> 00:07:00.428 there is an option called Surface Material 118 00:07:00.428 --> 00:07:03.278 Geometry Brush Actor allows you 119 00:07:03.278 --> 00:07:07.028 to select each surface individually like this 120 00:07:07.028 --> 00:07:11.178 Depending on what you select, the options might change 121 00:07:11.178 --> 00:07:13.878 For the surface you have selected 122 00:07:13.878 --> 00:07:18.078 in the Surface Material section 123 00:07:18.078 --> 00:07:20.878 you’ll see an element labeled as None 124 00:07:20.878 --> 00:07:22.228 Onto this None field 125 00:07:22.228 --> 00:07:25.878 drag and drop the material, and it will be applied 126 00:07:25.878 --> 00:07:27.778 to the selected surface 127 00:07:28.728 --> 00:07:32.478 Let’s now look at the adjacent wall 128 00:07:32.478 --> 00:07:34.078 Click on this wall 129 00:07:34.078 --> 00:07:36.228 We drag and dropped it here 130 00:07:36.228 --> 00:07:37.878 but you can also 131 00:07:37.878 --> 00:07:40.878 search for None here 132 00:07:40.878 --> 00:07:47.628 Let's try the name M_Orange, and it's here 133 00:07:47.628 --> 00:07:52.728 So you can select this M_Orange here to apply 134 00:07:52.728 --> 00:07:54.428 So there are three ways to do this 135 00:07:54.428 --> 00:07:59.078 Drag and drop 136 00:07:59.078 --> 00:08:00.478 or, at this wall 137 00:08:00.478 --> 00:08:06.028 Click on this wall 138 00:08:06.028 --> 00:08:10.178 drag and drop on Surface Material 139 00:08:10.178 --> 00:08:14.428 it is not yet divided, which we'll change later 140 00:08:14.428 --> 00:08:19.228 Then, selecting this surface, click on None 141 00:08:19.228 --> 00:08:25.678 search for the asset you created, and insert it 142 00:08:25.678 --> 00:08:28.128 There are various ways to do this 143 00:08:30.528 --> 00:08:34.528 Let’s complete the living room with all the walls 144 00:08:34.528 --> 00:08:38.078 For the inner room, we’ll also add color 145 00:08:38.078 --> 00:08:41.278 but this time, let’s go with a bluish tone 146 00:08:41.278 --> 00:08:47.428 To create the blue tone, we apply like so 147 00:08:47.428 --> 00:08:57.778 and then change the orange color to blue 148 00:08:57.778 --> 00:09:01.378 Apply and Save 149 00:09:02.278 --> 00:09:05.128 Not only does the color change on the selected surface 150 00:09:05.128 --> 00:09:08.928 but all materials that had the orange color applied 151 00:09:08.928 --> 00:09:11.478 will change to blue 152 00:09:11.878 --> 00:09:14.478 What we can learn from this 153 00:09:14.478 --> 00:09:19.928 is that materials are shared 154 00:09:19.928 --> 00:09:26.328 Material assets are shared across multiple actors 155 00:09:27.378 --> 00:09:29.278 Let's undo the change 156 00:09:34.078 --> 00:09:35.879 and restore the color 157 00:09:35.879 --> 00:09:38.579 If we want to apply blue 158 00:09:38.579 --> 00:09:41.479 only to this wall, what should we do? 159 00:09:41.479 --> 00:09:44.929 We need to create a new material 160 00:09:44.929 --> 00:09:52.479 Right-click, a new material, and let’s name it M_Blue 161 00:09:52.479 --> 00:09:55.654 Double-click to open it 162 00:09:58.079 --> 00:10:03.429 and just like before, change the Base Color to blue 163 00:10:03.429 --> 00:10:06.879 We’re only changing the Base Color here 164 00:10:06.879 --> 00:10:10.779 but in many cases, when you search on Google 165 00:10:10.779 --> 00:10:13.479 you'll find many Unreal tutorials 166 00:10:13.479 --> 00:10:19.779 In previous versions, before Unreal Engine 5.2 167 00:10:19.779 --> 00:10:24.729 you couldn't change the color after this Base Color 168 00:10:24.729 --> 00:10:26.979 or any slots to change the number 169 00:10:26.979 --> 00:10:31.579 after Metallic or Specular 170 00:10:32.479 --> 00:10:37.879 You couldn't set the value for this node 171 00:10:38.629 --> 00:10:41.629 So what did we do? 172 00:10:41.629 --> 00:10:48.429 We had to drag this value to this pin 173 00:10:48.429 --> 00:10:55.379 So let's try the old-fashioned way 174 00:10:55.379 --> 00:10:58.629 It's been something used recently 175 00:10:58.629 --> 00:11:03.279 so you must also know about this method 176 00:11:03.279 --> 00:11:04.979 Let's try it 177 00:11:04.979 --> 00:11:07.829 Let’s bring in a node 178 00:11:07.829 --> 00:11:10.979 to define color values 179 00:11:10.979 --> 00:11:14.229 Right-click on the background 180 00:11:14.229 --> 00:11:21.429 and search for Constant3Vector 181 00:11:21.429 --> 00:11:24.779 You’ll see a node called Constant3Vector 182 00:11:24.779 --> 00:11:27.979 which you can click to create 183 00:11:27.979 --> 00:11:34.879 This Constant3Vector node uses three color channels 184 00:11:34.879 --> 00:11:38.579 commonly referred to as RGB 185 00:11:38.579 --> 00:11:40.229 to represent digital colors 186 00:11:40.229 --> 00:11:43.129 These channels are Red, Green, and Blue 187 00:11:43.129 --> 00:11:46.979 The three channels, Red, Green, and Blue 188 00:11:46.979 --> 00:11:52.979 are stored in variables labeled X, Y, and Z 189 00:11:52.979 --> 00:11:55.229 and are used to define the colors 190 00:11:55.229 --> 00:11:58.079 To put it simply, X contains the red channel 191 00:11:58.079 --> 00:11:59.829 Y contains the green channel 192 00:11:59.829 --> 00:12:04.979 and Z contains the blue channel 193 00:12:04.979 --> 00:12:11.929 This means the RGB channels are stored as values 194 00:12:11.929 --> 00:12:16.229 in these variables and then passed to the Base Color 195 00:12:16.229 --> 00:12:19.729 Of course, you can input values for each channel directly 196 00:12:19.729 --> 00:12:23.279 but you can also double-click the black area below 197 00:12:23.279 --> 00:12:25.580 to select a color, like so 198 00:12:28.730 --> 00:12:30.030 You can select it like so 199 00:12:30.030 --> 00:12:33.480 When you click OK, the color will change accordingly 200 00:12:33.480 --> 00:12:37.630 and the RGB channel values 201 00:12:37.630 --> 00:12:39.880 will immediately be applied 202 00:12:39.880 --> 00:12:44.630 Now, to connect these values to the Base Color 203 00:12:45.780 --> 00:12:49.280 we use the white pin at the top, on the right 204 00:12:49.280 --> 00:12:54.180 This on the right is the output pin 205 00:12:54.180 --> 00:12:58.630 while pins on the left side of a node are input pins 206 00:12:58.630 --> 00:13:01.130 Data in Unreal Engine 207 00:13:01.130 --> 00:13:03.530 typically flows from left to right 208 00:13:03.530 --> 00:13:06.230 Nodes flow from left to right 209 00:13:06.230 --> 00:13:09.330 much like how we read text 210 00:13:09.330 --> 00:13:13.130 That's the data flow in Unreal Engine 211 00:13:13.130 --> 00:13:17.430 This means the right pin on a node 212 00:13:17.430 --> 00:13:22.130 outputs data to the right 213 00:13:22.130 --> 00:13:25.630 and the Base Color input pin is located 214 00:13:25.630 --> 00:13:31.330 on the left side of the node, which accepts data input 215 00:13:31.330 --> 00:13:35.180 or accepts the data flow 216 00:13:35.180 --> 00:13:37.980 So an out pin brings it out 217 00:13:37.980 --> 00:13:43.030 into the input pin like so, see? 218 00:13:43.030 --> 00:13:45.830 Once connected, the previous information is replaced 219 00:13:45.830 --> 00:13:48.330 and the new data from 220 00:13:48.330 --> 00:13:51.130 the connected node is applied 221 00:13:51.130 --> 00:13:54.080 This method is the most commonly used approach 222 00:13:54.080 --> 00:13:56.780 When you click Apply and Save 223 00:13:58.080 --> 00:14:03.580 you will see that a blue material has been created 224 00:14:03.580 --> 00:14:06.580 Drag and drop this material to apply it 225 00:14:06.580 --> 00:14:11.580 and apply it to the interior 226 00:14:16.030 --> 00:14:17.330 The blue interior looks much better 227 00:14:17.330 --> 00:14:20.080 than having a red interior 228 00:14:20.080 --> 00:14:22.580 so we will leave it like this 229 00:14:22.580 --> 00:14:28.130 Let’s use the same method to design the larger room 230 00:14:28.130 --> 00:14:32.430 For this room, we will create a yellow material 231 00:14:32.430 --> 00:14:35.530 Right-click to create a new material 232 00:14:35.530 --> 00:14:39.680 and name it M_Yellow 233 00:14:39.680 --> 00:14:42.680 Double-click the material, right-click 234 00:14:42.680 --> 00:14:45.380 to add a Constant3Vector node 235 00:14:45.380 --> 00:14:48.380 and choose a yellow color 236 00:14:50.130 --> 00:14:52.280 Connect the yellow 237 00:14:52.280 --> 00:14:54.330 to the Base Color, and you will see 238 00:14:54.330 --> 00:14:57.030 it changed to yellow 239 00:14:57.030 --> 00:15:02.280 Click Apply and Save 240 00:15:03.280 --> 00:15:07.331 then apply this yellow material 241 00:15:07.331 --> 00:15:10.981 to the surfaces like so 242 00:15:10.981 --> 00:15:14.731 Each color requires its own material 243 00:15:14.731 --> 00:15:17.931 as we now understand 244 00:15:17.931 --> 00:15:20.331 We also noticed earlier 245 00:15:20.331 --> 00:15:24.281 that there are several parameters 246 00:15:24.281 --> 00:15:26.331 in the material 247 00:15:26.331 --> 00:15:28.581 other than the Base Color 248 00:15:28.581 --> 00:15:32.431 Let’s briefly examine 249 00:15:32.431 --> 00:15:34.881 what these parameters mean 250 00:15:34.881 --> 00:15:38.881 In the final node, there are multiple 251 00:15:38.881 --> 00:15:41.781 input slots for various values 252 00:15:41.781 --> 00:15:43.681 They're for inputs 253 00:15:43.681 --> 00:15:46.431 This node does not output data 254 00:15:46.431 --> 00:15:49.531 since it is the final node 255 00:15:50.931 --> 00:15:52.781 that determines 256 00:15:52.781 --> 00:15:56.031 how the material will appear 257 00:15:56.031 --> 00:15:58.781 Essentially, this node takes 258 00:15:58.781 --> 00:16:05.031 the parameter values, processes them through calculations 259 00:16:05.031 --> 00:16:10.031 and determines the final appearance of the material 260 00:16:10.031 --> 00:16:11.681 In this node 261 00:16:11.681 --> 00:16:14.781 are calculations or functions 262 00:16:14.781 --> 00:16:17.581 that determine the presentation 263 00:16:17.581 --> 00:16:22.031 These calculations or functions 264 00:16:22.031 --> 00:16:25.481 inside the node are often referred to 265 00:16:25.481 --> 00:16:27.481 as shaders 266 00:16:27.481 --> 00:16:29.231 Shaders are usually written as code 267 00:16:29.231 --> 00:16:32.881 When parameter values are input into a node 268 00:16:32.881 --> 00:16:38.031 the calculations inside the shader 269 00:16:38.031 --> 00:16:44.581 are executed to generate a result 270 00:16:44.581 --> 00:16:47.281 which is then applied to the material 271 00:16:47.281 --> 00:16:54.331 Unreal Engine uses a system called PBR 272 00:16:54.331 --> 00:16:58.331 which stands for Physically Based Rendering 273 00:16:58.331 --> 00:17:04.181 as the foundation for shader calculations 274 00:17:04.181 --> 00:17:09.831 In reality, light particles 275 00:17:09.831 --> 00:17:12.331 hit the surface of an object to reach the eyes 276 00:17:12.331 --> 00:17:16.381 PBR replicates how light interacts with surfaces 277 00:17:16.381 --> 00:17:17.981 in the real world 278 00:17:17.981 --> 00:17:23.531 Light particles hit the surface of an object 279 00:17:23.531 --> 00:17:25.381 undergoing calculations 280 00:17:25.381 --> 00:17:28.831 through complex physical formulas in the shader 281 00:17:28.831 --> 00:17:34.981 and displaying the result through the camera 282 00:17:34.981 --> 00:17:37.981 allowing us to perceive the material of the object 283 00:17:37.981 --> 00:17:41.331 It depicts reality as it is 284 00:17:41.331 --> 00:17:47.781 The PBR system enables highly realistic renderings 285 00:17:47.781 --> 00:17:52.932 In the past, these complex physical calculations were not possible 286 00:17:52.932 --> 00:17:55.582 especially in real-time engines 287 00:17:55.582 --> 00:17:59.182 They were only used in rendering programs like 3D MAX 288 00:17:59.182 --> 00:18:03.982 Maya, or Blender for creating images or videos 289 00:18:03.982 --> 00:18:06.632 However, with advancements in computer performance 290 00:18:06.632 --> 00:18:10.832 and optimized shader code 291 00:18:10.832 --> 00:18:14.682 things have been improved 292 00:18:14.682 --> 00:18:18.582 for real-time engines like Unreal Engine 293 00:18:18.582 --> 00:18:22.732 to now produce results close to real-world appearances 294 00:18:22.732 --> 00:18:27.182 Beyond enabling realistic renderings 295 00:18:27.182 --> 00:18:29.282 PBR has another major advantage 296 00:18:29.282 --> 00:18:33.532 It allows almost all materials used in everyday life 297 00:18:33.532 --> 00:18:38.082 to be represented with a single shader 298 00:18:38.082 --> 00:18:42.482 It is by being able to add values to the nodes 299 00:18:42.482 --> 00:18:45.132 By adjusting the parameters in the node 300 00:18:45.132 --> 00:18:50.732 you can represent real-life materials 301 00:18:50.732 --> 00:18:53.332 that we see every day, such as 302 00:18:53.332 --> 00:18:56.032 plastic, wood, stone, and metal 303 00:18:56.032 --> 00:19:00.182 In the past, different shaders were used 304 00:19:00.182 --> 00:19:03.282 to represent various materials 305 00:19:03.282 --> 00:19:04.832 Since each different shader 306 00:19:04.832 --> 00:19:07.832 required different parameters 307 00:19:07.832 --> 00:19:09.582 even for the same material 308 00:19:09.582 --> 00:19:14.032 it sometimes required different values 309 00:19:14.032 --> 00:19:16.332 depending on the location 310 00:19:16.332 --> 00:19:19.782 This made the production process highly inefficient 311 00:19:19.782 --> 00:19:22.232 Consistency in graphics was also lacking 312 00:19:22.232 --> 00:19:26.132 However, with the introduction of the PBR system 313 00:19:26.132 --> 00:19:27.732 it became possible to use one shader 314 00:19:27.732 --> 00:19:31.082 to represent a variety of materials with consistency 315 00:19:31.082 --> 00:19:33.932 improving content quality 316 00:19:33.932 --> 00:19:35.382 The PBR rendering system 317 00:19:35.382 --> 00:19:38.982 used in real-time engines 318 00:19:38.982 --> 00:19:40.732 allows the creation 319 00:19:40.732 --> 00:19:44.382 of many materials by changing 320 00:19:44.382 --> 00:19:47.182 only a few key elements 321 00:19:47.182 --> 00:19:49.532 The key elements 322 00:19:50.782 --> 00:19:55.432 are Base Color, Metallic 323 00:19:55.432 --> 00:20:00.582 and Roughness, as seen in the final node 324 00:20:00.582 --> 00:20:03.932 These three components alone 325 00:20:03.932 --> 00:20:07.482 can represent almost any material in the world 326 00:20:07.482 --> 00:20:09.882 This is a distinctive feature of 327 00:20:09.882 --> 00:20:12.132 the PBR system in Unreal Engine 328 00:20:12.132 --> 00:20:16.032 Let us take a closer look at the main elements 329 00:20:16.032 --> 00:20:17.932 Base Color, Metallic, and Roughness 330 00:20:17.932 --> 00:20:19.832 Base Color represents 331 00:20:19.832 --> 00:20:23.682 the color 332 00:20:23.682 --> 00:20:27.632 the inherent color of a material 333 00:20:27.632 --> 00:20:30.532 Let's continue with yellow 334 00:20:30.532 --> 00:20:32.182 Let's zoom in a little 335 00:20:32.182 --> 00:20:36.733 The Base Color is essentially the fundamental color 336 00:20:36.733 --> 00:20:39.883 input into the material 337 00:20:39.883 --> 00:20:45.683 expressed through the RGB values 338 00:20:45.683 --> 00:20:51.433 Metallic represents the material’s metallic property 339 00:20:51.433 --> 00:20:57.683 It determines whether a material is metal or not 340 00:20:57.683 --> 00:21:00.383 If the Metallic value is set to 0 341 00:21:00.383 --> 00:21:02.633 and this 0 means that 342 00:21:02.633 --> 00:21:06.633 the material is not metal 343 00:21:07.583 --> 00:21:11.533 If it is set to 1 344 00:21:11.533 --> 00:21:14.333 the material is fully metallic 345 00:21:14.333 --> 00:21:17.733 The value 1 represents 100 percent 346 00:21:17.733 --> 00:21:21.633 so 1 is a pure metal material 347 00:21:21.633 --> 00:21:24.683 It is either metal or not 348 00:21:25.583 --> 00:21:29.733 Aside from 0 or 1 349 00:21:29.733 --> 00:21:37.333 intermediate values, such as 0.5, can also be used 350 00:21:38.983 --> 00:21:44.433 But -1, or something lower than 0 351 00:21:44.433 --> 00:21:48.583 you can use it, but under 0 352 00:21:48.583 --> 00:21:51.483 is all read as the same 0 353 00:21:51.483 --> 00:21:55.183 So even with -1, it's still a 0 354 00:21:55.183 --> 00:21:59.383 Similarly, values above 1, such as 2 355 00:21:59.383 --> 00:22:04.383 are treated as 1 356 00:22:04.383 --> 00:22:09.533 Even with 2, it applies the value of 1 for Metallic 357 00:22:09.533 --> 00:22:11.533 External nodes can 358 00:22:11.533 --> 00:22:16.333 also provide input for these values 359 00:22:16.333 --> 00:22:17.933 For Base Color 360 00:22:17.933 --> 00:22:21.333 it require three values, X, Y, and Z 361 00:22:21.333 --> 00:22:24.033 It needed three channels for the RGB 362 00:22:24.033 --> 00:22:26.333 Metallic, as you can see 363 00:22:26.333 --> 00:22:28.933 requires only a single numeric value 364 00:22:28.933 --> 00:22:33.583 You simply need to bring in a node that holds one number 365 00:22:33.583 --> 00:22:35.233 Right-click 366 00:22:35.233 --> 00:22:37.733 and search for Constants 367 00:22:37.733 --> 00:22:40.433 This will generate a node 368 00:22:40.433 --> 00:22:45.733 where you can input a single value into the Value field 369 00:22:46.833 --> 00:22:50.083 Connect this node to Metallic 370 00:22:50.083 --> 00:22:53.483 and the node’s current value is set to 0 371 00:22:53.483 --> 00:22:56.383 With a value of 0 for Metallic 372 00:22:56.383 --> 00:23:00.133 the material is displayed 373 00:23:00.133 --> 00:23:02.183 as non-metallic 374 00:23:02.183 --> 00:23:07.183 We have Metallic, and Roughness below that 375 00:23:07.183 --> 00:23:13.133 Roughness defines the surface’s texture 376 00:23:13.133 --> 00:23:17.934 specifically whether it is rough or smooth 377 00:23:17.934 --> 00:23:21.634 Currently, Roughness is set to 0.5 378 00:23:21.634 --> 00:23:24.534 meaning it is moderately rough 379 00:23:24.534 --> 00:23:25.784 Let’s adjust this value to the extreme 380 00:23:25.784 --> 00:23:27.784 If Roughness is set to 1 381 00:23:27.784 --> 00:23:31.784 it signifies that the surface is completely rough, like Metallic 382 00:23:31.784 --> 00:23:34.484 Over of equal to 1 is at 100 percent 383 00:23:34.484 --> 00:23:38.334 A rough surface scatters light 384 00:23:38.334 --> 00:23:41.634 due to its uneven texture 385 00:23:41.634 --> 00:23:47.984 resulting in a matte or diffuse appearance 386 00:23:47.984 --> 00:23:50.334 To understand this better, consider the opposite 387 00:23:50.334 --> 00:23:53.134 If Roughness is set to 0 388 00:23:53.134 --> 00:23:57.684 the surface is very smooth, reflecting light directly 389 00:23:57.684 --> 00:24:00.884 and creating a shiny effect, similar to glass 390 00:24:00.884 --> 00:24:02.684 So it is very smooth 391 00:24:02.684 --> 00:24:08.284 The material reflects surrounding light perfectly 392 00:24:08.284 --> 00:24:11.384 resulting in a highly polished surface 393 00:24:11.384 --> 00:24:13.434 If you combine this with a Metallic value of 1 394 00:24:13.434 --> 00:24:16.284 it becomes even more apparent 395 00:24:17.834 --> 00:24:21.834 It is completely metallic with Roughness 0 396 00:24:21.834 --> 00:24:25.934 meaning it is a perfectly smooth 397 00:24:25.934 --> 00:24:28.584 and reflective metal ball 398 00:24:28.584 --> 00:24:31.734 If Roughness is set to 1 399 00:24:31.734 --> 00:24:38.134 it is metallic but takes on a very rough texture 400 00:24:38.134 --> 00:24:43.034 Roughness, like Metallic, only requires a single numeric value 401 00:24:43.034 --> 00:24:46.834 You can duplicate the Constants node using Ctrl+C and Ctrl+V 402 00:24:46.834 --> 00:24:50.484 to quickly provide a value for Roughness as well 403 00:24:51.334 --> 00:24:54.934 Try changing Metallic value, 1, to 0 404 00:24:54.934 --> 00:25:00.984 The material will transform into the shiny yellow metal sphere we saw earlier 405 00:25:00.984 --> 00:25:03.984 By adjusting just these three values 406 00:25:03.984 --> 00:25:06.884 you can represent any material in the world 407 00:25:06.884 --> 00:25:12.734 If we apply the changes and save them 408 00:25:12.734 --> 00:25:17.434 the apartment will now be displayed with a metallic look 409 00:25:17.434 --> 00:25:19.434 This result, however, feels unnatural 410 00:25:20.734 --> 00:25:24.434 Let us adjust the values to better suit the room 411 00:25:24.434 --> 00:25:30.284 It's not metallic, so set Metallic to 0 and Roughness to 0.5 412 00:25:30.284 --> 00:25:33.584 Let's keep the bedroom slightly glossy 413 00:25:33.584 --> 00:25:36.234 by setting Roughness to 0.3 414 00:25:36.234 --> 00:25:39.984 This creates a material with a slightly shiny surface 415 00:25:43.384 --> 00:25:51.034 Compared to the kitchen, this area will appear glossier 416 00:25:51.034 --> 00:25:54.234 That's how we can see the result like so 417 00:25:54.234 --> 00:25:59.134 Now, for the blue material, set Roughness to 1 418 00:25:59.134 --> 00:26:02.485 to create a completely rough texture 419 00:26:02.485 --> 00:26:07.385 This results in 420 00:26:07.385 --> 00:26:11.435 a very matte wall texture 421 00:26:11.435 --> 00:26:15.435 Image Textures 422 00:26:15.435 --> 00:26:22.685 Now, let us apply a wood texture 423 00:26:22.685 --> 00:26:29.835 to the floor instead of a plain color 424 00:26:30.285 --> 00:26:35.385 Right-click to create a new material and name it M_Wood 425 00:26:35.385 --> 00:26:37.485 So far, we have used 426 00:26:37.485 --> 00:26:40.535 Constant3Vector for Base Color 427 00:26:40.535 --> 00:26:43.285 and one numerical value for 428 00:26:43.285 --> 00:26:46.585 each Metallic and Roughness 429 00:26:46.585 --> 00:26:48.485 using Constants nodes 430 00:26:48.485 --> 00:26:51.535 It was all numbers 431 00:26:51.535 --> 00:26:55.985 But Unreal Engine materials 432 00:26:55.985 --> 00:26:59.685 can also use images in addition to numbers 433 00:27:00.735 --> 00:27:04.385 Let us add a wood image 434 00:27:04.385 --> 00:27:07.885 Open the Content Drawer by pressing Ctrl and Spacebar 435 00:27:07.885 --> 00:27:14.385 In the Starter Content section under Textures, you will see 436 00:27:14.385 --> 00:27:18.185 various resources provided by Unreal Engine 437 00:27:18.185 --> 00:27:21.435 They are for us to use 438 00:27:21.435 --> 00:27:26.685 Scroll down, and you will see wood textures 439 00:27:26.685 --> 00:27:29.335 like Wood Oak and Walnut 440 00:27:29.335 --> 00:27:30.685 One more Walnut here 441 00:27:30.685 --> 00:27:34.885 A darker Walnut, and a brighter wood tone 442 00:27:34.885 --> 00:27:37.385 We will be using 443 00:27:37.385 --> 00:27:40.985 this Oak, the brown wood 444 00:27:40.985 --> 00:27:43.985 Drag and drop this texture 445 00:27:43.985 --> 00:27:46.835 into the empty space 446 00:27:48.185 --> 00:27:52.535 This creates a Texture Sample node 447 00:27:52.535 --> 00:27:57.635 with the wood image loaded inside 448 00:27:57.635 --> 00:28:00.435 In the Details panel of the selected node 449 00:28:00.435 --> 00:28:03.085 you can see 450 00:28:03.085 --> 00:28:06.535 that the texture is properly assigned 451 00:28:08.035 --> 00:28:13.485 Take the white RGB pin of the node 452 00:28:13.485 --> 00:28:15.835 and connect to to Base Color 453 00:28:15.835 --> 00:28:19.835 As shown in the preview 454 00:28:19.835 --> 00:28:25.235 the wood image is applied 455 00:28:25.235 --> 00:28:27.485 right to the material’s color 456 00:28:27.485 --> 00:28:30.435 Apply the changes and save them 457 00:28:30.435 --> 00:28:34.035 Come back, and you will see 458 00:28:34.035 --> 00:28:36.735 the material with the wood image applied 459 00:28:36.735 --> 00:28:41.285 Drag and drop the material onto the floor to use it 460 00:28:41.285 --> 00:28:43.885 Then we see the result like so 461 00:28:43.885 --> 00:28:47.886 Unreal materials can incorporate images as well as numerical values 462 00:28:47.886 --> 00:28:53.136 Similarly, Metallic and Roughness 463 00:28:53.136 --> 00:28:58.586 can use black-and-white images 464 00:28:58.586 --> 00:29:01.336 so define values, like these images 465 00:29:02.786 --> 00:29:07.436 Unreal Engine materials express numbers through colors 466 00:29:07.436 --> 00:29:10.686 They speak of a color through numbers 467 00:29:10.686 --> 00:29:17.186 For example, 0 is represented as black, and 1 is as white 468 00:29:17.186 --> 00:29:19.686 Let's see it 469 00:29:19.686 --> 00:29:21.536 by double-clicking on it 470 00:29:21.536 --> 00:29:24.936 White areas represent a value of 1 471 00:29:24.936 --> 00:29:28.036 and black areas represent a value of 0 472 00:29:28.036 --> 00:29:30.436 That's how this understands each 473 00:29:30.436 --> 00:29:33.486 Gray areas fall between these extremes 474 00:29:33.486 --> 00:29:36.836 such as 0.3 or 0.5, in between 0 and 1 475 00:29:36.836 --> 00:29:39.736 You can use these images 476 00:29:39.736 --> 00:29:43.136 to input numerical values into the material 477 00:29:43.136 --> 00:29:48.136 For a shinier floor, reduce the Roughness value 478 00:29:48.136 --> 00:29:51.836 to around 0.3, so that it shines 479 00:29:51.836 --> 00:29:55.986 To make it even shinier, you could lower it to 0.2 480 00:29:55.986 --> 00:29:59.586 This creates a glossy finish 481 00:29:59.586 --> 00:30:04.186 Apply and save the changes 482 00:30:04.186 --> 00:30:10.286 to see the floor appear shiny, see? 483 00:30:10.286 --> 00:30:13.486 Currently, the floor texture looks a bit dense 484 00:30:13.486 --> 00:30:18.186 Go to the Details panel of the Geometry Brush 485 00:30:18.186 --> 00:30:21.136 where you can adjust the applied material 486 00:30:21.136 --> 00:30:27.086 Look below and find Surface Properties 487 00:30:27.086 --> 00:30:30.386 Use the Scale values 488 00:30:30.386 --> 00:30:38.436 to change the U and V values from 1 to 2 489 00:30:40.036 --> 00:30:43.636 Or, make it more drastic and set them to 5 490 00:30:45.836 --> 00:30:51.286 After applying the changes, the texture will appear larger 491 00:30:51.286 --> 00:30:53.586 You can also adjust the scale 492 00:30:53.586 --> 00:30:58.636 You can use Scale to adjust 493 00:30:58.636 --> 00:31:01.186 the size of the material applied to this side 494 00:31:01.186 --> 00:31:09.186 It's too big, so let's use 3 and press Apply 495 00:31:09.186 --> 00:31:11.536 I think this is good enough 496 00:31:11.536 --> 00:31:13.736 You can use the Rotate value 497 00:31:13.736 --> 00:31:18.636 to rotate the material, see? 498 00:31:18.636 --> 00:31:20.586 I find this more usable 499 00:31:20.586 --> 00:31:24.086 That's it for what we have, see? 500 00:31:24.086 --> 00:31:25.686 Returning to the wood material 501 00:31:25.686 --> 00:31:28.486 we learned how to use an image 502 00:31:28.486 --> 00:31:32.687 in the Base Color slot to represent material textures 503 00:31:32.687 --> 00:31:36.387 We have covered Base Color, Metallic, and Roughness 504 00:31:36.387 --> 00:31:40.687 which are the three fundamental PBR elements 505 00:31:40.687 --> 00:31:46.537 Now, let us explore additional elements 506 00:31:46.537 --> 00:31:50.337 Below Base Color, Metallic, and Roughness 507 00:31:50.337 --> 00:31:54.437 you will find a property called Emissive Color 508 00:31:54.437 --> 00:31:58.987 Let us revisit the yellow material 509 00:31:58.987 --> 00:32:01.787 to discuss it here 510 00:32:01.787 --> 00:32:04.237 Emissive Color refers to self-illumination 511 00:32:04.237 --> 00:32:07.987 or material emits light on its own 512 00:32:07.987 --> 00:32:10.287 Currently, no color is assigned to 513 00:32:10.287 --> 00:32:12.787 the Emissive Color property 514 00:32:12.787 --> 00:32:16.487 You could add a color here 515 00:32:16.487 --> 00:32:18.637 Or you can select a color like this 516 00:32:18.637 --> 00:32:20.887 For example, let us input yellow 517 00:32:20.887 --> 00:32:25.737 Input yellow, press OK 518 00:32:27.787 --> 00:32:35.737 You will see the material emitting a yellow light 519 00:32:36.137 --> 00:32:37.887 This self-illumination 520 00:32:37.887 --> 00:32:45.687 is similar to how a monitor screen emits light 521 00:32:45.687 --> 00:32:48.787 to brighten its surroundings 522 00:32:48.787 --> 00:32:53.137 Unlike external light sources, this is light 523 00:32:53.137 --> 00:32:57.237 emitted directly from the material itself 524 00:32:57.237 --> 00:33:01.137 Emissive is essentially a self-illuminating 525 00:33:01.137 --> 00:33:03.387 a very bright material property 526 00:33:03.387 --> 00:33:07.587 That was self-illuminating Emissive Color 527 00:33:07.587 --> 00:33:10.837 I'll reset the Emissive Color property 528 00:33:10.837 --> 00:33:13.137 Reducing the alpha to 0 529 00:33:14.987 --> 00:33:22.787 or setting it to black will remove the emission 530 00:33:22.787 --> 00:33:26.787 Next, another common element 531 00:33:26.787 --> 00:33:29.387 is an element called Normal 532 00:33:29.387 --> 00:33:32.887 Normal is one of the most frequently used elements 533 00:33:32.887 --> 00:33:36.237 and is typically defined using textures 534 00:33:36.237 --> 00:33:38.787 rather than numerical values 535 00:33:38.787 --> 00:33:42.187 In the Starter Content, you may have 536 00:33:42.187 --> 00:33:44.637 noticed these purple textures 537 00:33:44.637 --> 00:33:47.787 These are used as Normal maps 538 00:33:47.787 --> 00:33:50.937 which can define the Normal property of a material 539 00:33:50.937 --> 00:33:55.137 Let us use one of these textures 540 00:33:57.487 --> 00:34:00.487 such as the Ground Moss texture 541 00:34:00.487 --> 00:34:04.487 with its pronounced bumps 542 00:34:04.487 --> 00:34:06.737 and connect it to the Normal slot 543 00:34:06.737 --> 00:34:10.237 By connecting Normal, you can see 544 00:34:10.237 --> 00:34:15.788 that the material now appears bumpy 545 00:34:17.488 --> 00:34:20.288 as though it has uneven surfaces 546 00:34:20.288 --> 00:34:24.288 Let's see the same thing in a rectangle 547 00:34:24.288 --> 00:34:28.288 Hold the Alt key and click 548 00:34:28.288 --> 00:34:30.338 on the connection line to disconnect 549 00:34:30.788 --> 00:34:35.438 Without Normal, we see a flat surface of the mesh 550 00:34:35.438 --> 00:34:40.138 This mesh is flat without any bumps 551 00:34:40.138 --> 00:34:41.838 No grooves at all 552 00:34:41.838 --> 00:34:44.838 The wireframe also reveals the same 553 00:34:44.838 --> 00:34:46.388 You can't see it well now 554 00:34:46.388 --> 00:34:49.588 The wireframe also shows that a surface 555 00:34:49.588 --> 00:34:53.088 is constructed with just a few flat polygons 556 00:34:53.088 --> 00:34:55.838 These rectangles are all polygons 557 00:34:55.838 --> 00:34:58.038 Other polygons are also two triangles 558 00:34:58.038 --> 00:35:00.138 both of which are flat 559 00:35:00.138 --> 00:35:02.388 For actual bumps and grooves 560 00:35:02.388 --> 00:35:07.588 a higher polygon count would be necessary 561 00:35:07.588 --> 00:35:10.738 They would make the grooves 562 00:35:10.738 --> 00:35:12.738 meaning, a lot of polygons 563 00:35:12.738 --> 00:35:14.988 However, increasing that 564 00:35:14.988 --> 00:35:16.888 would also increase the computational load 565 00:35:16.888 --> 00:35:19.138 reducing performance 566 00:35:19.138 --> 00:35:20.688 for the gameplay 567 00:35:20.688 --> 00:35:22.688 It has to calculate all the polygons 568 00:35:22.688 --> 00:35:24.638 To address this 569 00:35:24.638 --> 00:35:27.438 we use a technique called Normal mapping 570 00:35:27.438 --> 00:35:29.788 By applying a Normal map to a flat surface 571 00:35:29.788 --> 00:35:32.888 or the maps with some 572 00:35:32.888 --> 00:35:35.738 special information 573 00:35:36.788 --> 00:35:40.188 the polygon number remains the same 574 00:35:40.188 --> 00:35:44.938 but the texture creates the illusion 575 00:35:44.938 --> 00:35:46.838 of bumps under lighting 576 00:35:46.838 --> 00:35:51.838 See, it looks like it is rough inside 577 00:35:53.088 --> 00:35:57.488 That's what Normal Map does 578 00:35:57.488 --> 00:36:01.488 This blue or purple map here 579 00:36:01.488 --> 00:36:04.538 is called Normal Map 580 00:36:06.088 --> 00:36:10.388 Normal maps essentially trick the computer 581 00:36:10.388 --> 00:36:13.938 into rendering a flat surface 582 00:36:13.938 --> 00:36:15.888 as though it has texture 583 00:36:15.888 --> 00:36:21.188 This clever method allows for realistic detail 584 00:36:22.038 --> 00:36:25.938 without adding computational complexity 585 00:36:25.938 --> 00:36:31.338 Applying and saving the changes 586 00:36:31.338 --> 00:36:35.188 you can see that the bumpy effect 587 00:36:35.188 --> 00:36:38.038 has been successfully applied to the material 588 00:36:38.038 --> 00:36:40.388 Now, let us extend this technique 589 00:36:40.388 --> 00:36:46.938 to the floor’s wood material using Normal 590 00:36:47.888 --> 00:36:52.738 In the textures, you will find a Normal map 591 00:36:52.738 --> 00:36:56.188 associated with the oak wood texture, next to Oak 592 00:36:56.188 --> 00:37:01.838 Let's connect Normal texture to Wood 593 00:37:02.939 --> 00:37:08.539 Connecting this oak Normal map to the Normal slot 594 00:37:08.539 --> 00:37:13.389 of the wood material enhances the texture 595 00:37:13.389 --> 00:37:15.989 making the surface rough and more realistic 596 00:37:15.989 --> 00:37:19.689 The surface also appears as though 597 00:37:19.689 --> 00:37:22.639 it has grooves between the wood panels 598 00:37:22.639 --> 00:37:25.889 That's also what this enables 599 00:37:28.289 --> 00:37:31.939 Applying and saving this change 600 00:37:31.939 --> 00:37:39.939 will result in a slightly textured floor surface 601 00:37:39.939 --> 00:37:47.289 enhancing its realism, see? Like so 602 00:37:48.989 --> 00:37:51.789 Since the texture in the main bedroom is so bumpy 603 00:37:51.789 --> 00:37:54.889 the texture on the floor isn’t very noticeable 604 00:37:54.889 --> 00:37:58.289 Let’s remove the yellow material for now 605 00:37:58.289 --> 00:38:04.339 The Material Editor is designed to allow you 606 00:38:04.339 --> 00:38:06.689 to freely manipulate and experiment with nodes 607 00:38:06.689 --> 00:38:09.189 While we’ve kept things simple so far 608 00:38:09.189 --> 00:38:13.189 if you check the Materials folder within the Starter Content 609 00:38:13.189 --> 00:38:18.039 you’ll find many materials pre-created by Unreal Engine 610 00:38:18.039 --> 00:38:21.739 Let’s double-click one to take a closer look 611 00:38:22.639 --> 00:38:25.289 You’ll see that it also has a final node 612 00:38:25.289 --> 00:38:29.539 with various nodes feeding into it 613 00:38:29.539 --> 00:38:33.189 Zooming out 614 00:38:33.189 --> 00:38:38.989 you’ll notice an extensive network of connected nodes 615 00:38:38.989 --> 00:38:41.289 all leading to the final node 616 00:38:41.289 --> 00:38:44.839 Using these complex node configurations 617 00:38:44.839 --> 00:38:49.889 you can create materials that are much more detailed 618 00:38:49.889 --> 00:38:54.889 realistic, natural, and aesthetically pleasing 619 00:38:54.889 --> 00:38:56.889 This approach is something worth exploring 620 00:38:56.889 --> 00:39:00.739 more deeply if you want to dive further into material creation 621 00:39:01.639 --> 00:39:03.839 For now, let’s apply some of 622 00:39:03.839 --> 00:39:08.789 the pre-made materials from Unreal Engine to the apartment 623 00:39:08.789 --> 00:39:13.339 For instance, since this area is a bathroom 624 00:39:13.339 --> 00:39:15.539 we can apply a concrete tile texture that fits well 625 00:39:15.539 --> 00:39:18.889 Like this, maybe this? 626 00:39:19.639 --> 00:39:25.139 Or this concrete tile 627 00:39:25.139 --> 00:39:28.639 Let's give it the appearance of tiles 628 00:39:29.389 --> 00:39:32.539 Such textures also work well for areas like balconies 629 00:39:39.889 --> 00:39:46.990 For the exterior walls, a brick material would be a good choice 630 00:39:51.190 --> 00:39:55.890 Let’s apply it in a brighter area, like this 631 00:39:57.240 --> 00:39:59.790 Feel free to experiment with 632 00:39:59.790 --> 00:40:02.390 different materials to achieve your desired results 633 00:40:02.390 --> 00:40:06.590 I’ll use a brick material to structure 634 00:40:06.590 --> 00:40:09.840 the exterior of the building, yeah? 635 00:40:12.040 --> 00:40:17.640 Apply colors and textures as densely 636 00:40:17.640 --> 00:40:19.390 or sparingly as you wish 637 00:40:19.390 --> 00:40:22.190 Be sure to apply them to all parts 638 00:40:22.190 --> 00:40:25.840 Now that we’ve applied various materials 639 00:40:27.390 --> 00:40:30.640 after this coloring work 640 00:40:30.640 --> 00:40:33.890 let’s move on to the entrance areas 641 00:40:33.890 --> 00:40:36.190 such as doors and windows 642 00:40:36.190 --> 00:40:41.090 Let's add the frames for these 643 00:40:41.090 --> 00:40:44.440 In the Starter Content under the Props folder 644 00:40:44.440 --> 00:40:48.840 you’ll find various assets provided by Unreal Engine 645 00:40:48.840 --> 00:40:52.990 We’ll use these to make the space look more complete 646 00:40:52.990 --> 00:40:55.590 For example, there’s an asset called SM_Doorframe 647 00:40:55.590 --> 00:40:57.790 which represents a door frame 648 00:40:57.790 --> 00:41:00.840 Dragging and dropping this asset 649 00:41:00.840 --> 00:41:04.790 places it into the scene 650 00:41:04.790 --> 00:41:06.940 It's too large, so we’ll scale it down 651 00:41:06.940 --> 00:41:12.240 First, let’s rotate it and adjust its size 652 00:41:14.290 --> 00:41:17.340 Since the snap increment is set too high 653 00:41:17.340 --> 00:41:21.140 click on the snap 654 00:41:21.140 --> 00:41:26.290 Let’s reduce it to a smaller unit, like 0.1 655 00:41:26.290 --> 00:41:36.890 allowing finer adjustments 656 00:41:36.890 --> 00:41:39.390 After adjusting, reduce the snap increment 657 00:41:39.390 --> 00:41:45.840 further to 0.0625 for more precision 658 00:41:47.390 --> 00:41:51.940 Adjust the frame along the Y-axis to fit the space 659 00:41:53.640 --> 00:41:59.790 Maybe bigger? That's it 660 00:42:01.640 --> 00:42:05.740 Now, let’s make the frame thinner 661 00:42:05.740 --> 00:42:08.140 along the X-axis to fit better 662 00:42:10.890 --> 00:42:12.540 The door frame seems appropriately placed now 663 00:42:12.540 --> 00:42:15.940 The Props folder also contains a door asset called SM_Door 664 00:42:15.940 --> 00:42:20.440 Drag and drop it into the scene 665 00:42:20.990 --> 00:42:24.240 and adjust its size to fit the frame 666 00:42:28.040 --> 00:42:33.541 Rotate it by 90 degrees so it aligns perfectly when closed 667 00:42:33.541 --> 00:42:36.691 Then, adjust the size slightly 668 00:42:42.641 --> 00:42:46.841 and leave the door slightly ajar 669 00:42:46.841 --> 00:42:48.891 That's it for the entrance door 670 00:42:50.191 --> 00:42:55.191 Besides the front door, there are also window frame assets 671 00:42:58.291 --> 00:42:59.991 Let’s use the Window Frame asset 672 00:42:59.991 --> 00:43:02.791 Bring in the Window Frame 673 00:43:02.791 --> 00:43:10.141 Drag, resize, move 674 00:43:10.141 --> 00:43:14.541 and position the frame appropriately 675 00:43:14.541 --> 00:43:17.391 to fit the space 676 00:43:20.491 --> 00:43:24.341 We have frames for windows too 677 00:43:24.341 --> 00:43:31.691 This is Glass Window for the glass part of the window 678 00:43:31.691 --> 00:43:37.391 It's tall by default, so scale it down and position it like so 679 00:43:38.041 --> 00:43:46.141 Let's resize it and put it to the center 680 00:43:46.941 --> 00:43:48.941 It may not be too apparent now 681 00:43:48.941 --> 00:43:52.891 but it will reflect light realistically when viewed from outside 682 00:43:52.891 --> 00:43:57.391 or when light shines through it from the inside 683 00:43:57.391 --> 00:44:03.241 Adding window frames and doors to spaces 684 00:44:03.241 --> 00:44:07.991 like small rooms, bathrooms, the master bedroom 685 00:44:07.991 --> 00:44:10.291 or balconies will make the apartment look better 686 00:44:11.441 --> 00:44:16.141 Place door frames, window frames, doors 687 00:44:16.141 --> 00:44:19.741 and even glass props in the balcony 688 00:44:19.741 --> 00:44:24.091 That's it for this apartment, which looks nice 689 00:44:24.641 --> 00:44:28.741 Instead of having sharp and abrupt transitions 690 00:44:28.741 --> 00:44:31.641 you can use objects to hide awkward areas 691 00:44:31.641 --> 00:44:36.241 and achieve a more natural and convincing design 692 00:44:36.241 --> 00:44:40.891 This approach is a crucial aspect of level design 693 00:44:40.891 --> 00:44:43.991 And that completes the design 694 00:44:43.991 --> 00:44:47.541 Let’s summarize what we learned today 695 00:44:47.541 --> 00:44:48.141 Material Creation and Application Understanding Materials 696 00:44:48.141 --> 00:44:48.741 Graph: A workspace for visual scripting tasks such as arranging or connecting nodes 697 00:44:48.741 --> 00:44:49.391 Final Node: A node that receives parameter values, processes them, and displays the final result 698 00:44:49.391 --> 00:44:49.991 Shader: A set of calculations contained within a node 699 00:44:49.991 --> 00:44:50.641 Constant3Vector: A node for retrieving color values 700 00:44:50.641 --> 00:44:51.241 Constants: A node for storing a single numeric value 701 00:44:51.241 --> 00:44:51.841 Core Elements of Material Representation Base Color: Represents the inherent color of an object 702 00:44:51.841 --> 00:44:52.491 Metallic: Defines the metallic property of the material Roughness: Determines the smoothness or roughness of the surface 703 00:44:52.491 --> 00:44:53.491 Types and Applications of Image Textures 704 00:44:53.491 --> 00:44:54.491 Image Texture Features You can input images into the Base Color to represent materials 705 00:44:54.491 --> 00:44:55.491 Materials provided by Unreal Engine can be applied to your projects 706 00:44:55.491 --> 00:44:56.491 Image Texture Applications Emissive Color: Creates an effect where the material emits light on its own 707 00:44:56.491 --> 00:44:57.491 Normal Map: Allows for the representation of bumpy or uneven surfaces without increasing the polygon count