WEBVTT 1 00:00:04.825 --> 00:00:08.925 Realistic Commons Position Dissolve 2 00:00:23.525 --> 00:00:26.475 Hello, this is Hyunsang Park 3 00:00:26.475 --> 00:00:28.975 In this session, we'll discuss how to visualize 4 00:00:28.975 --> 00:00:32.325 using position values 5 00:00:32.325 --> 00:00:34.925 Position values typically refer to 6 00:00:34.925 --> 00:00:39.025 Vector3 data, which consists of 7 00:00:39.025 --> 00:00:41.675 the three axes: X, Y, and Z 8 00:00:41.675 --> 00:00:45.575 We'll use a function called dot product with Vector3 9 00:00:45.575 --> 00:00:50.275 to transform it into a grayscale image of black and white 10 00:00:50.275 --> 00:00:52.475 This will allow us to create 11 00:00:52.475 --> 00:00:56.075 a dissolve effect where objects gradually 12 00:00:56.075 --> 00:00:58.725 fade in or out in the desired direction 13 00:00:59.125 --> 00:01:03.525 You will learn how the inner product, a mathematical operation used in mathematics 14 00:01:03.525 --> 00:01:07.975 can be used for visual effects 15 00:01:07.975 --> 00:01:11.975 Creating Materials and Bounding Boxes 16 00:01:11.975 --> 00:01:15.625 Let's start by creating a new folder 17 00:01:15.625 --> 00:01:17.025 New Folder 18 00:01:17.025 --> 00:01:21.826 PositionDissolve 19 00:01:21.826 --> 00:01:27.976 Next, create a material named M_PosDissolve 20 00:01:27.976 --> 00:01:32.326 and open it in the editor 21 00:01:32.326 --> 00:01:34.676 This material will primarily be used to create the dissolve 22 00:01:34.676 --> 00:01:37.626 fading effect 23 00:01:37.626 --> 00:01:41.026 we'll change the Blend Mode to Masked 24 00:01:41.026 --> 00:01:45.476 Generally, with Masked, when you use a texture 25 00:01:45.476 --> 00:01:47.576 like Noise from the Starter Content 26 00:01:47.576 --> 00:01:50.626 you can connect it to the Opacity Mask 27 00:01:50.626 --> 00:01:53.876 With the Opacity Mask 28 00:01:53.876 --> 00:01:57.076 areas in white will be visible 29 00:01:57.076 --> 00:01:59.126 while areas in black will be transparent 30 00:01:59.126 --> 00:02:01.926 creating a cutout effect 31 00:02:01.926 --> 00:02:04.326 The mask uses mid-range values as a threshold 32 00:02:04.326 --> 00:02:09.276 but doesn't strictly apply at 0.5 33 00:02:09.276 --> 00:02:11.526 If we lower the threshold to 0.4 34 00:02:11.526 --> 00:02:13.876 It's not based entirely on the middle 35 00:02:13.876 --> 00:02:17.026 Around 0.3 36 00:02:17.026 --> 00:02:20.276 the visibility transitions are determined 37 00:02:20.276 --> 00:02:25.426 not based exactly on 0.5 38 00:02:25.426 --> 00:02:27.326 What we're going to do next is 39 00:02:27.326 --> 00:02:32.076 to Add the area that will be masked here 40 00:02:32.076 --> 00:02:36.876 and if we set the Add value to -1, it will not be visible at all 41 00:02:36.876 --> 00:02:39.726 Even at 0, much of the object won't be visible 42 00:02:39.726 --> 00:02:42.126 At 1, it will be fully visible 43 00:02:42.126 --> 00:02:52.426 By gradually transitioning through values 44 00:02:52.426 --> 00:02:56.126 like -1, -0.5, -0.1, and 0.1 and eventually reaching 1 45 00:02:56.126 --> 00:03:00.576 we'll create an effect where the object gradually appears or disappears 46 00:03:00.576 --> 00:03:04.026 However, the basis for this effect 47 00:03:04.026 --> 00:03:05.676 won't rely on textures 48 00:03:05.676 --> 00:03:09.226 or noise patterns 49 00:03:09.226 --> 00:03:13.926 I'm going to make it so that I can disappear from top to bottom 50 00:03:13.926 --> 00:03:16.276 from left to right 51 00:03:16.276 --> 00:03:18.776 or even choose the direction 52 00:03:18.776 --> 00:03:22.476 in which I disappear 53 00:03:22.476 --> 00:03:27.526 We have demonstrated how the object disappears based on the texture's pattern 54 00:03:27.526 --> 00:03:29.076 The key focus of this session is 55 00:03:29.076 --> 00:03:32.776 to show that even position values 56 00:03:32.776 --> 00:03:35.876 can be utilized in the shader 57 00:03:35.876 --> 00:03:39.526 to create various effects 58 00:03:39.526 --> 00:03:42.526 This will be the core of this lecture 59 00:03:42.526 --> 00:03:45.426 We need a specific node 60 00:03:45.426 --> 00:03:49.026 to gradually disappear in a single direction 61 00:03:49.026 --> 00:03:52.426 such as top-to-bottom 62 00:03:52.426 --> 00:03:55.476 or bottom-to-top 63 00:03:55.476 --> 00:03:59.226 First, disconnect the current connection 64 00:03:59.226 --> 00:04:00.676 from the Opacity Mask 65 00:04:00.676 --> 00:04:04.026 so that the object is fully visible 66 00:04:04.026 --> 00:04:05.977 Let's put this aside for a moment 67 00:04:05.977 --> 00:04:09.877 Next, right-click in the material editor and search for Bound 68 00:04:09.877 --> 00:04:13.127 You'll see a variety of bounding-related options 69 00:04:13.127 --> 00:04:15.677 From these, create 70 00:04:15.677 --> 00:04:22.977 the BoundingBoxBased_0-1_UVW node under the Coordinates 71 00:04:22.977 --> 00:04:26.377 First, connect to the Emissive Color 72 00:04:26.377 --> 00:04:29.377 to check its behavior 73 00:04:29.377 --> 00:04:31.577 You'll notice it creates a colorful gradient 74 00:04:31.877 --> 00:04:34.277 This effect remains consistent 75 00:04:34.277 --> 00:04:36.727 whether applied to a plain 76 00:04:36.727 --> 00:04:41.227 Even if you change it to a box shape, it's still maintained 77 00:04:41.227 --> 00:04:43.977 One thing to consider is 78 00:04:43.977 --> 00:04:46.477 how the colors correspond 79 00:04:46.477 --> 00:04:49.927 to the axis directions 80 00:04:49.927 --> 00:04:52.977 The direction of the axis is shown like this on the lower left 81 00:04:52.977 --> 00:04:56.827 So if you look at it now, you can see that it gradually goes 82 00:04:56.827 --> 00:04:59.977 and changes to a yellow color 83 00:04:59.977 --> 00:05:03.377 As you go up like this, at this end 84 00:05:03.377 --> 00:05:06.827 is what we call Cyan, a color like blue-green 85 00:05:06.827 --> 00:05:12.427 On the other end is Magenta, and on this side is something like Blue 86 00:05:12.427 --> 00:05:17.127 and at the last end is White 87 00:05:17.127 --> 00:05:20.427 You can see that 88 00:05:20.777 --> 00:05:24.827 Here, the first thing that we can use these colors for 89 00:05:24.827 --> 00:05:27.577 that we learned that colors 90 00:05:27.577 --> 00:05:29.677 can be converted into numbers 91 00:05:29.677 --> 00:05:32.277 For example, if it's Yellow 92 00:05:32.277 --> 00:05:39.677 in RGB, Red and Green are 1 and Blue is 0 93 00:05:39.677 --> 00:05:42.477 we call it Yellow 94 00:05:42.477 --> 00:05:45.427 Blue would be 0, 0, 1 95 00:05:45.427 --> 00:05:51.277 For magenta, the coordinates are Red 1, Green 0, Blue 1 96 00:05:51.277 --> 00:05:54.977 For Cyan, the coordinates are 0, 1, 1 97 00:05:54.977 --> 00:05:56.877 This is how the coordinates are 98 00:05:56.877 --> 00:06:01.127 White would, of course, be 1, 1, 1 99 00:06:01.127 --> 00:06:06.377 Each of these can correspond to Red, Green, and Blue 100 00:06:06.377 --> 00:06:10.727 but they can also be X, Y, and Z 101 00:06:10.727 --> 00:06:14.977 So, it goes to the X-axis based on 102 00:06:14.977 --> 00:06:16.477 the gizmo at the bottom right 103 00:06:16.477 --> 00:06:21.227 I will draw the color in red again 104 00:06:21.227 --> 00:06:24.577 It goes like this, and as it continues 105 00:06:24.577 --> 00:06:29.577 the Y component increases from 0 to 1 106 00:06:29.577 --> 00:06:31.427 Blue is the same 107 00:06:31.427 --> 00:06:36.977 As it goes up, it increases from 0 to 1 108 00:06:36.977 --> 00:06:38.627 The same goes for Y 109 00:06:38.627 --> 00:06:39.927 If you think about this 110 00:06:39.927 --> 00:06:42.977 I'll even draw a picture and explain it 111 00:06:42.977 --> 00:06:48.077 he picture also increases from 0 to 1 as you go this way 112 00:06:48.077 --> 00:06:52.678 So if I explain based on the end that I'm indicating now 113 00:06:52.678 --> 00:06:54.828 this direction where the arrows started 114 00:06:54.828 --> 00:06:58.628 the corner closest to the gizmo 115 00:06:58.628 --> 00:07:03.628 the coordinate values ​​here would be 0, 1, 0 116 00:07:03.628 --> 00:07:06.578 That's because it's the end in the direction of the picture 117 00:07:06.578 --> 00:07:09.978 and the X-axis goes 118 00:07:09.978 --> 00:07:12.278 from 0 to 1 from left to right 119 00:07:12.278 --> 00:07:16.628 so the X-axis here would be 0, and the height would also be 0 120 00:07:16.628 --> 00:07:19.428 In this way, each color 121 00:07:19.428 --> 00:07:22.828 can correspond with a coordinate value 122 00:07:22.828 --> 00:07:27.528 So we usually draw this as the area 123 00:07:27.528 --> 00:07:29.678 of ​​the overall box of the object itself 124 00:07:29.678 --> 00:07:33.978 even if we say it's a sphere, we'll draw it as a circle like this 125 00:07:33.978 --> 00:07:37.228 The highest part of this circle will be there 126 00:07:37.228 --> 00:07:39.678 and there will be the lowest part 127 00:07:39.678 --> 00:07:44.628 Since it's two-dimensional if we make it an axis, the middle would be 0.5 on the X-axis 128 00:07:44.628 --> 00:07:49.878 the very end on the X-axis would be, and the outermost would be 129 00:07:49.878 --> 00:07:53.228 If we were to express this point as a coordinate value 130 00:07:53.228 --> 00:07:55.728 it would be 1, 0.5 131 00:07:55.728 --> 00:08:00.978 Likewise, the edge would be 0, 0.5. X, Y 132 00:08:00.978 --> 00:08:06.078 below this, would be 0.5, 1, above this, would be 0.5 133 00:08:06.078 --> 00:08:08.928 there would be 0, and here would be 1 134 00:08:08.928 --> 00:08:14.578 If we mark the highest points of the object 135 00:08:14.578 --> 00:08:19.478 and draw lines here vertically and horizontally 136 00:08:19.478 --> 00:08:21.378 a box will appear 137 00:08:21.378 --> 00:08:25.128 We call these things bounding boxes 138 00:08:25.128 --> 00:08:30.028 No matter the size of this object, the smallest is 0 139 00:08:30.028 --> 00:08:32.128 and the largest is 1 140 00:08:32.128 --> 00:08:34.678 The smallest is 0, the largest is 1 141 00:08:34.678 --> 00:08:38.578 Of course, we usually refer to this as Raw Data 142 00:08:38.578 --> 00:08:42.778 If the diameter is 5 143 00:08:42.778 --> 00:08:45.128 this would be 0 144 00:08:45.128 --> 00:08:48.928 and since the diameter is 5, this would be the location of 5 145 00:08:48.928 --> 00:08:51.128 There's also 5 above and 0 below 146 00:08:51.128 --> 00:08:54.478 It would be 2.5, 0 and 2.5, 5 147 00:08:54.478 --> 00:08:58.278 The minimum and maximum values ​​for the Y-axis 148 00:08:58.278 --> 00:09:01.478 The minimum and maximum points 149 00:09:01.478 --> 00:09:04.928 in terms of height are often referred to as normalized 150 00:09:04.928 --> 00:09:08.828 The normalized data of the Raw Data 151 00:09:08.828 --> 00:09:13.028 is the bounding box from 0 to 1 152 00:09:13.028 --> 00:09:17.878 For reference, UVW is 153 00:09:17.878 --> 00:09:21.178 another name for X, Y, Z 154 00:09:21.178 --> 00:09:23.528 and of course, it corresponds to RGB 155 00:09:23.528 --> 00:09:25.928 If we have the bounding box values 156 00:09:25.928 --> 00:09:31.328 we can create a gradient in the desired direction 157 00:09:31.328 --> 00:09:33.379 Here, a change in color 158 00:09:33.379 --> 00:09:35.979 means a change in number 159 00:09:35.979 --> 00:09:39.979 The part where white is 1, and the color 160 00:09:39.979 --> 00:09:41.729 close to 0 at the end of the edge 161 00:09:41.729 --> 00:09:44.929 becomes clearer and will contain 0 in any component 162 00:09:45.579 --> 00:09:49.379 Here, too, if you look at it like this 163 00:09:49.379 --> 00:09:50.929 So here, on the opposite side 164 00:09:50.929 --> 00:09:55.779 of white at the edge, it's 0, 0, 0 165 00:09:55.779 --> 00:09:58.679 Here, all the coordinates are 0, 0, 0 166 00:09:58.679 --> 00:10:01.379 Here, all the coordinates are 1, 1, 1 167 00:10:01.379 --> 00:10:06.429 That's why if you look at it like this, the blue is moving to the side 168 00:10:06.429 --> 00:10:09.029 The green is coming up from the bottom 169 00:10:09.029 --> 00:10:12.429 and the fact that the colors are gradually changing means whether the green component is changing 170 00:10:12.429 --> 00:10:14.979 the blue or red component is changing 171 00:10:14.979 --> 00:10:20.479 or whatever the value is changing 172 00:10:20.479 --> 00:10:24.529 We previously received each component separately 173 00:10:24.529 --> 00:10:27.479 about normal map blending 174 00:10:27.479 --> 00:10:30.179 but it is already separated here 175 00:10:30.179 --> 00:10:32.879 If we compare the red value 176 00:10:32.879 --> 00:10:35.179 like this, when viewed from above 177 00:10:35.179 --> 00:10:40.679 you need to align the coordinate base like this 178 00:10:40.679 --> 00:10:43.729 If you do this, the starting point here is 0 179 00:10:43.729 --> 00:10:46.579 and the edge as it goes to the end becomes 1 180 00:10:46.579 --> 00:10:48.829 So here it is white 181 00:10:48.829 --> 00:10:50.629 and the edge doesn't look black 182 00:10:50.629 --> 00:10:53.929 but only a very thin area is black, so it's black 183 00:10:53.929 --> 00:10:55.979 Then, what if we put 184 00:10:55.979 --> 00:10:58.929 this as is in the Opacity Mask? 185 00:10:58.929 --> 00:11:02.329 It will come out as if it is cut in half 186 00:11:02.329 --> 00:11:05.779 Then, if we continue to use Add here 187 00:11:05.779 --> 00:11:10.379 and if we add -0.5 here and add it, it will become shorter 188 00:11:10.379 --> 00:11:14.029 and if we add -0.7, it will disappear 189 00:11:14.029 --> 00:11:18.979 And if we add -0.1 here, it will come out again 190 00:11:18.979 --> 00:11:25.129 If we compare when Add is 0, 0.2, 0.3 191 00:11:25.129 --> 00:11:29.079 and finally 0.5 192 00:11:29.079 --> 00:11:30.929 all the other sides are filled 193 00:11:30.929 --> 00:11:34.229 so we can determine whether it disappears or appears 194 00:11:34.229 --> 00:11:36.929 by adding the direction 195 00:11:36.929 --> 00:11:40.579 The larger the added value, the better it is visible 196 00:11:40.579 --> 00:11:44.279 The lower the added value, the less visible it is 197 00:11:44.279 --> 00:11:46.729 So, to check it in the Instance 198 00:11:46.729 --> 00:11:50.129 we create a Scalar Parameter 199 00:11:50.129 --> 00:11:54.579 This is called VisibleVal 200 00:11:54.579 --> 00:11:59.179 Let's create one like this, then connect and save 201 00:12:00.579 --> 00:12:05.429 We've instanced the material we created 202 00:12:09.429 --> 00:12:11.879 and are now comparing it to a plane 203 00:12:11.879 --> 00:12:17.930 You move the VisibleVal value like this 204 00:12:17.930 --> 00:12:21.580 The box is the same 205 00:12:28.530 --> 00:12:34.530 The sphere is the same 206 00:12:36.280 --> 00:12:39.430 In this way, all objects will move in the direction I want 207 00:12:39.430 --> 00:12:43.030 more precisely, in the direction of the world 208 00:12:44.830 --> 00:12:47.230 To confirm that they disappear in this direction 209 00:12:47.230 --> 00:12:51.530 we use Place Actors, and here we have the Shapes item 210 00:12:51.530 --> 00:12:53.730 Here, let's place the cubes like this 211 00:12:53.730 --> 00:12:57.280 so that you can see the direction 212 00:12:58.080 --> 00:13:00.230 Press F to focus 213 00:13:00.230 --> 00:13:02.230 Then, let's apply the material instance 214 00:13:02.230 --> 00:13:05.580 that we created 215 00:13:05.580 --> 00:13:07.580 If you adjust the VisibleVal value 216 00:13:07.580 --> 00:13:11.130 along the X-axis where the object is placed 217 00:13:11.130 --> 00:13:14.380 and the X-axis of the gizmo, you can see it strected and shrunk 218 00:13:14.380 --> 00:13:16.380 along the X-axis 219 00:13:16.380 --> 00:13:19.230 What if we rotate this? 220 00:13:19.230 --> 00:13:22.880 If we rotate it like this, the direction of the X-axis in the world 221 00:13:22.880 --> 00:13:26.680 will point towards this side according to the grid on the floor 222 00:13:26.680 --> 00:13:28.780 This means the X-axis now 223 00:13:28.780 --> 00:13:31.530 The direction of the arrow is that we rotated the object 224 00:13:31.530 --> 00:13:34.680 and the direction we are looking at now has changed 225 00:13:34.680 --> 00:13:36.980 When the VisibleVal value changes 226 00:13:36.980 --> 00:13:41.130 it is not affected by the world direction in this way 227 00:13:41.130 --> 00:13:45.880 but is affected by 228 00:13:45.880 --> 00:13:47.880 the X and Y values ​​that the object has 229 00:13:47.880 --> 00:13:50.630 so we often refer to this state 230 00:13:50.630 --> 00:13:54.180 as a local bound 231 00:13:54.180 --> 00:13:57.680 The way the computer recognizes the object with this coordinate value 232 00:13:57.680 --> 00:14:00.930 is called the object's Pivot 233 00:14:00.930 --> 00:14:03.430 It calculates based on the reference point 234 00:14:03.430 --> 00:14:05.130 and based on that, it determines 235 00:14:05.130 --> 00:14:07.030 whether it is along the X-axis, Y-axis, or Z-axis 236 00:14:07.030 --> 00:14:08.730 These are the things considered 237 00:14:08.730 --> 00:14:11.530 We often refer to things based on the object's reference point 238 00:14:11.530 --> 00:14:14.730 such as direction or coordinates 239 00:14:14.730 --> 00:14:18.830 as local space 240 00:14:18.830 --> 00:14:24.830 So, the bound maximum and minimum values ​​are based on local space 241 00:14:24.830 --> 00:14:28.980 We commonly refer to these as Min and Max values 242 00:14:28.980 --> 00:14:32.130 So, no matter which way you turn the object 243 00:14:32.130 --> 00:14:35.630 it will be visible or invisible 244 00:14:35.630 --> 00:14:38.130 in its direction 245 00:14:38.130 --> 00:14:40.780 Now, let's go back to the material window 246 00:14:40.780 --> 00:14:45.230 and point out one problem that occurs later 247 00:14:45.230 --> 00:14:47.580 Right now 248 00:14:47.580 --> 00:14:51.480 based on Unreal, Red is X-axis 249 00:14:51.480 --> 00:14:56.030 So, I made it go back and forth between visible and invisible 250 00:14:56.030 --> 00:14:59.331 based on the red channel 251 00:14:59.331 --> 00:15:03.231 The problem is, what if I want to 252 00:15:03.231 --> 00:15:05.681 change the direction of this Dissolve? 253 00:15:05.681 --> 00:15:08.181 If I don't want to go back and forth 254 00:15:08.181 --> 00:15:10.781 front and back 255 00:15:10.781 --> 00:15:14.531 but rather up and down using top and down 256 00:15:14.531 --> 00:15:17.031 making it visible and invisible 257 00:15:17.031 --> 00:15:20.331 or if I want to make it visible and invisible 258 00:15:20.331 --> 00:15:22.881 in a diagonal direction that combines these two 259 00:15:22.881 --> 00:15:26.431 then as it is now, since the red channel is the same 260 00:15:26.431 --> 00:15:31.181 I'd have to create a Dissolve material for each direction 261 00:15:31.181 --> 00:15:34.681 But it's 360 degrees, so we can't do all of them 262 00:15:34.681 --> 00:15:39.731 So, we're going to create a simple formula and use it 263 00:15:39.731 --> 00:15:43.731 Direction Manipulation and Various Effects Using the Dot Product 264 00:15:43.981 --> 00:15:45.981 Move the nodes slightly aside 265 00:15:45.981 --> 00:15:49.281 then hold Alt and click to disconnect the current links 266 00:15:49.281 --> 00:15:53.831 Next, create a Vector Parameter 267 00:15:53.831 --> 00:15:57.331 and name it Direction 268 00:15:57.331 --> 00:15:59.431 As mentioned earlier 269 00:15:59.431 --> 00:16:01.431 the color values in the node 270 00:16:01.431 --> 00:16:07.431 can represent directions such as front, back, right, left, top, and down 271 00:16:07.431 --> 00:16:13.181 using the RGB channels to indicate directions 272 00:16:13.181 --> 00:16:17.231 That's why this itself tells us the direction 273 00:16:17.231 --> 00:16:20.231 by using this value 274 00:16:20.231 --> 00:16:23.431 We will find out using the Dot operation 275 00:16:23.431 --> 00:16:28.431 also known as the Dot Product 276 00:16:28.431 --> 00:16:31.281 So, let's make the Direction value red 277 00:16:31.281 --> 00:16:32.881 so that the basic value 278 00:16:32.881 --> 00:16:35.431 and click OK 279 00:16:35.431 --> 00:16:39.231 Let's connect this to the Emissive Color 280 00:16:39.231 --> 00:16:41.581 and temporarily turn off the Opacity Mask 281 00:16:41.581 --> 00:16:44.681 As I said earlier 282 00:16:44.681 --> 00:16:47.731 if you look at the X-axis, you can see that the gradient matches 283 00:16:47.731 --> 00:16:49.731 the direction that extends 284 00:16:49.731 --> 00:16:53.431 along the X-axis 285 00:16:53.431 --> 00:16:57.731 You can refer to math books 286 00:16:57.731 --> 00:17:03.181 and other specific calculation methods for Dot operations later 287 00:17:03.181 --> 00:17:07.481 The way I'm going to explain here is that Dot operations 288 00:17:07.481 --> 00:17:09.531 are used a lot 289 00:17:09.531 --> 00:17:15.631 in shaders when comparing directions 290 00:17:15.631 --> 00:17:18.981 The principle is that the Direction value transmitted to us 291 00:17:18.981 --> 00:17:23.431 based on a reference called A 292 00:17:23.431 --> 00:17:26.281 is compared to the reference, commonly referred to as Direction 293 00:17:26.281 --> 00:17:28.531 It's comparing the Direction 294 00:17:28.531 --> 00:17:32.781 So, let's say the reference vector points upwards 295 00:17:32.781 --> 00:17:36.531 Of course, the unit here is 1 296 00:17:36.531 --> 00:17:39.331 And if there's a vector here 297 00:17:39.331 --> 00:17:41.431 that's exactly 1 diagonally like this 298 00:17:41.431 --> 00:17:44.132 or if there's a vector tilted at 45 degrees 299 00:17:44.132 --> 00:17:45.932 it's drawn a little long 300 00:17:45.932 --> 00:17:50.582 This direction is attached to the standard as it is 301 00:17:50.582 --> 00:17:54.432 This is attached like this and compared 302 00:17:54.432 --> 00:17:56.832 It asks 303 00:17:56.832 --> 00:17:59.982 what percent position you are at from the standard 304 00:17:59.982 --> 00:18:04.432 I'll erase it and redraw it by lying down under 45 degrees 305 00:18:04.432 --> 00:18:09.132 If you draw a 1 vector of 45 degrees, it's roughly like this 306 00:18:09.132 --> 00:18:12.632 When this standard is 1 307 00:18:12.632 --> 00:18:17.482 it's also said that the direction of the comparison vector is projected like this 308 00:18:17.482 --> 00:18:23.082 What percent position is this of the current vector? 309 00:18:23.082 --> 00:18:26.082 Basically, a 45-degree angle 310 00:18:26.082 --> 00:18:31.282 is roughly at a position of 0.717 311 00:18:31.282 --> 00:18:35.832 So you can see that it's 312 00:18:35.832 --> 00:18:37.882 This means we can quantify this 313 00:18:37.882 --> 00:18:41.932 in different directions 314 00:18:41.932 --> 00:18:44.632 compared to the standard 315 00:18:44.632 --> 00:18:46.732 Using Dot operation 316 00:18:46.732 --> 00:18:51.282 if we include the picture values ​​here in the same context 317 00:18:51.282 --> 00:18:53.332 let's compare it like this 318 00:18:53.332 --> 00:18:56.782 X 1, Y 1 means 319 00:18:56.782 --> 00:18:59.832 1 on the X-axis and Y-axis 320 00:18:59.832 --> 00:19:02.532 That's why this diagonal vector comes out 321 00:19:02.532 --> 00:19:06.032 That's why the gradient goes from here to the end 322 00:19:06.032 --> 00:19:08.582 and it becomes this gradient 323 00:19:08.582 --> 00:19:12.182 Let's check it out on an actual Instance 324 00:19:12.182 --> 00:19:14.232 Save this 325 00:19:14.232 --> 00:19:18.082 Go back to the material, make the node the same as before 326 00:19:18.082 --> 00:19:21.482 in the Global Vector Parameter 327 00:19:21.482 --> 00:19:24.082 and click Apply or Save 328 00:19:24.082 --> 00:19:27.782 to edit the Direction parameter 329 00:19:27.782 --> 00:19:32.182 and VisibleVal in the material Instance 330 00:19:32.182 --> 00:19:34.732 Let's go to the instance screen 331 00:19:34.732 --> 00:19:38.332 and put it in a box so that you can easily see the direction 332 00:19:38.332 --> 00:19:40.382 Activate Direction 333 00:19:40.382 --> 00:19:44.332 Here, VisibleVal will be 0 334 00:19:44.332 --> 00:19:48.032 If you look at this now, red and green are each 1 335 00:19:48.032 --> 00:19:51.382 and if you increase it according to VisibleVal 336 00:19:51.382 --> 00:19:54.182 if it continues to have values ​​greater than 1 337 00:19:54.182 --> 00:19:55.582 it will just become white 338 00:19:55.582 --> 00:20:01.182 So, if you gradually decrease it, you can see that 339 00:20:01.182 --> 00:20:06.582 the direction of the gradient decreases in a constant diagonal direction 340 00:20:06.582 --> 00:20:11.382 In this way, of course, if you connect this to the Opacity Mask 341 00:20:11.382 --> 00:20:12.382 Save it 342 00:20:12.382 --> 00:20:17.982 We can make it disappear in the direction we want 343 00:20:17.982 --> 00:20:19.582 And make it visible 344 00:20:21.632 --> 00:20:26.482 If you slightly decrease the channel drawn at an ambiguous angle in this direction 345 00:20:28.833 --> 00:20:32.483 we can see that the direction 346 00:20:32.483 --> 00:20:37.183 is off by a slight 45 degrees 347 00:20:41.083 --> 00:20:44.633 So, based on these properties 348 00:20:44.633 --> 00:20:47.883 we're going to create a dissolve effect 349 00:20:47.883 --> 00:20:52.733 but right now, the border is too clean 350 00:20:52.733 --> 00:20:54.483 As you can see 351 00:20:55.283 --> 00:20:58.133 we're back in the material editor screen 352 00:20:58.133 --> 00:21:01.133 First, let's create a Noise node 353 00:21:01.133 --> 00:21:02.783 This Noise node here 354 00:21:02.783 --> 00:21:05.233 is based on the World Position value 355 00:21:05.233 --> 00:21:06.983 and there's a node here 356 00:21:06.983 --> 00:21:09.533 called World Position that you can search for 357 00:21:09.533 --> 00:21:12.683 I'll explain one problem that arises 358 00:21:12.683 --> 00:21:15.733 when you use this node 359 00:21:15.733 --> 00:21:17.033 before I go ahead and do it 360 00:21:17.033 --> 00:21:20.133 First, let's connect this to Emissive Color 361 00:21:20.133 --> 00:21:21.833 Then, as you can see now 362 00:21:21.833 --> 00:21:25.433 you can see that very small noise is generated 363 00:21:25.433 --> 00:21:28.933 To make this pattern a little bigger 364 00:21:28.933 --> 00:21:33.333 let's add Multiply to Position 365 00:21:33.333 --> 00:21:36.183 For B, we'll extract the output like this 366 00:21:36.183 --> 00:21:40.883 and create a node called Noise Scale with a Scalar Parameter 367 00:21:40.883 --> 00:21:43.383 with a parameter 368 00:21:43.383 --> 00:21:47.483 of 0.03 as the default value 369 00:21:47.483 --> 00:21:51.233 If we connect this to World Position 370 00:21:51.233 --> 00:21:55.083 the pattern will be a little bigger 371 00:21:55.083 --> 00:21:58.833 This problem occurs when we create a Dissolve effect 372 00:21:58.833 --> 00:22:01.383 using World Position 373 00:22:01.383 --> 00:22:05.133 I will show you by actually placing 374 00:22:05.133 --> 00:22:06.333 this actor on the level 375 00:22:06.333 --> 00:22:08.683 First, in the Third Person Map 376 00:22:08.683 --> 00:22:12.233 let's drag and drop the cube from the Shapes item 377 00:22:12.233 --> 00:22:15.883 Then, if we apply the instance we created 378 00:22:15.883 --> 00:22:20.733 to this cube like this, it will disappear 379 00:22:20.733 --> 00:22:24.933 It will disappear while taking the shape of this noise pattern 380 00:22:24.933 --> 00:22:28.983 but since we are using World Position, even if the object moves 381 00:22:28.983 --> 00:22:33.233 you can see that the noise pattern itself 382 00:22:33.233 --> 00:22:36.133 is fixed on the world 383 00:22:36.133 --> 00:22:39.483 Likewise, even if the object rotates 384 00:22:39.483 --> 00:22:41.833 you can see that the noise pattern 385 00:22:41.833 --> 00:22:43.783 is fixed like this 386 00:22:44.633 --> 00:22:47.383 Back to the Material Editor window 387 00:22:47.383 --> 00:22:49.783 Don’t worry about the Input item 388 00:22:49.783 --> 00:22:53.483 in the Noise item called World Position here 389 00:22:53.483 --> 00:22:56.433 and search for Local Position separately 390 00:22:56.433 --> 00:22:59.283 and connect it to Multiply 391 00:22:59.283 --> 00:23:03.333 using the Local Position node instead of World Position 392 00:23:03.333 --> 00:23:05.483 If you apply it and look at the actual effect 393 00:23:05.483 --> 00:23:09.884 since it is now applied based on the Local Position value 394 00:23:09.884 --> 00:23:13.884 you can see that it moves 395 00:23:13.884 --> 00:23:16.934 as one with the object 396 00:23:16.934 --> 00:23:19.134 when it rotates or moves 397 00:23:20.434 --> 00:23:24.034 Let's erase World Position for the moment 398 00:23:24.034 --> 00:23:29.084 and input 0.03 as the Scale value of Local Position 399 00:23:29.084 --> 00:23:32.384 Add this Noise again 400 00:23:32.384 --> 00:23:35.234 and connect it to the Dot 401 00:23:35.234 --> 00:23:40.334 Let's erase what's connected to VisibleVal 402 00:23:40.334 --> 00:23:44.634 We'll organize this connected Add 403 00:23:44.634 --> 00:23:47.484 later into an item called Step with VisibleVal 404 00:23:47.484 --> 00:23:49.534 When you connect Step in VisibleVal 405 00:23:49.534 --> 00:23:52.134 it's automatically connected to Y 406 00:23:52.134 --> 00:23:56.684 The result of the Dot operation and the Noise 407 00:23:56.684 --> 00:23:59.634 will be connected to the X of the node called Step by Add 408 00:23:59.634 --> 00:24:02.034 and then connect with Opacity Mask 409 00:24:02.334 --> 00:24:06.034 It has been connected like this Now, save this 410 00:24:06.034 --> 00:24:08.634 and go to the instance window 411 00:24:08.634 --> 00:24:12.084 Let's increase the value of the VisibleVal 412 00:24:14.134 --> 00:24:18.084 You can see it gradually disappearing 413 00:24:19.634 --> 00:24:22.784 Suppose you look closely at the Direction of disappearance 414 00:24:22.784 --> 00:24:28.484 In that case, you can see that the degree of disappearance and density differ 415 00:24:28.484 --> 00:24:34.884 depending on the Direction we specified in advance in the Direction item 416 00:24:35.984 --> 00:24:38.534 If you enter a value greater than 1 417 00:24:38.534 --> 00:24:41.784 in the Direction item here 418 00:24:41.784 --> 00:24:45.684 the degree of disappearance will be a little odd 419 00:24:48.884 --> 00:24:54.084 If you look, you can see that the degree to which it disappears 420 00:24:54.084 --> 00:24:57.384 depends on how much we set the value of Direction 421 00:24:57.384 --> 00:25:01.234 Just like VisibleVal changes 422 00:25:01.984 --> 00:25:04.134 changing the value of Direction 423 00:25:04.134 --> 00:25:07.284 has the same effect 424 00:25:07.284 --> 00:25:10.334 as changing VisibleVal 425 00:25:11.084 --> 00:25:14.834 First, let me explain why this happens 426 00:25:14.834 --> 00:25:17.134 Basically, the output value 427 00:25:17.134 --> 00:25:20.384 of a bounding box is from 0 to 1 428 00:25:20.384 --> 00:25:24.234 So, if there is a box, it goes from 0 to 1 429 00:25:24.234 --> 00:25:27.284 It would be 1, 0 or 1, 1 430 00:25:27.284 --> 00:25:30.484 Then, the longest diagonal length 431 00:25:30.484 --> 00:25:33.134 would be about 1.4 432 00:25:33.134 --> 00:25:35.434 Since we apply the root of 2 to this 433 00:25:35.434 --> 00:25:39.434 on the other hand, if the vector to be compared is not a unit vector 434 00:25:39.434 --> 00:25:41.684 but a long vector like this 435 00:25:41.684 --> 00:25:45.034 and we calculate it as a percentage 436 00:25:45.034 --> 00:25:48.484 it could be twice 437 00:25:48.484 --> 00:25:51.934 or three times larger than the original length 438 00:25:51.934 --> 00:25:54.934 That's why we need to organize 439 00:25:54.934 --> 00:25:56.285 this direction as well 440 00:25:56.285 --> 00:25:58.385 Let's temporarily push back the Direction node 441 00:25:58.385 --> 00:26:03.035 so that the length here becomes 1 442 00:26:03.035 --> 00:26:06.185 regardless of the direction 443 00:26:06.185 --> 00:26:11.985 Normalize from the node here, connect it like this 444 00:26:11.985 --> 00:26:14.235 and save it 445 00:26:14.235 --> 00:26:18.885 Now, let's temporarily set it so that only half is visible in the instance window 446 00:26:18.885 --> 00:26:25.835 Even if we change the green value here a lot 447 00:26:25.835 --> 00:26:33.185 you can see that this value keeps decreasing 448 00:26:33.185 --> 00:26:39.385 and remains constant as long as it is greater than 0 449 00:26:39.385 --> 00:26:42.685 Of course, if this goes to a negative value 450 00:26:42.685 --> 00:26:45.535 the direction will naturally change 451 00:26:45.535 --> 00:26:48.185 In that case, the direction will change 452 00:26:48.185 --> 00:26:51.685 but now, as you can see now 453 00:26:51.685 --> 00:26:54.585 no matter how much the value increases 454 00:26:54.585 --> 00:26:58.935 of course, the direction value increases slightly 455 00:26:58.935 --> 00:27:02.785 so when you go once in X and this much in Y 456 00:27:02.785 --> 00:27:07.535 and when you go once in X and this much in Y 457 00:27:07.535 --> 00:27:11.285 the direction itself is slightly different at this angle 458 00:27:11.285 --> 00:27:13.285 So the direction is a bit off 459 00:27:13.285 --> 00:27:15.935 Even if it becomes 40, 50, or 100 460 00:27:15.935 --> 00:27:18.885 it doesn't change the visible range enough 461 00:27:18.885 --> 00:27:20.435 to drastically change it 462 00:27:20.435 --> 00:27:22.685 I organized the values ​​like this 463 00:27:22.685 --> 00:27:24.435 The Step node 464 00:27:24.435 --> 00:27:27.035 also organizes these values 465 00:27:27.035 --> 00:27:31.635 One of the reasons we put a negative value in VisibleVal is that 466 00:27:31.635 --> 00:27:35.435 the Noise item here outputs a value 467 00:27:35.435 --> 00:27:39.335 ranging from negative to positive 468 00:27:39.335 --> 00:27:40.935 Since the value range is wide 469 00:27:40.935 --> 00:27:44.485 nodes that recognize values ​​greater than 1 470 00:27:44.485 --> 00:27:46.135 like Emissive Color, don't matter 471 00:27:46.135 --> 00:27:48.185 But, like Opacity Mask 472 00:27:48.185 --> 00:27:51.085 nodes that recognize values ​​between 0 and 1 473 00:27:51.085 --> 00:27:55.285 should be organized with the values later 474 00:27:55.285 --> 00:27:57.135 What the Step node does is 475 00:27:57.135 --> 00:27:59.885 based on an arbitrary value that I set 476 00:27:59.885 --> 00:28:02.135 if it's smaller than this value 477 00:28:02.135 --> 00:28:04.035 I'll set it to X 478 00:28:04.035 --> 00:28:06.235 If a value that's smaller than the arbitrary value that I set 479 00:28:06.235 --> 00:28:10.085 let's say, X, then it's unconditionally set to 0 480 00:28:10.085 --> 00:28:12.235 And if a value larger than X is input 481 00:28:12.235 --> 00:28:14.835 it's unconditionally set to 1 no matter the value 482 00:28:14.835 --> 00:28:21.135 It also plays a role in organizing values ​​between 0 and 1 483 00:28:21.135 --> 00:28:22.985 That's why, if you use a Step node 484 00:28:22.985 --> 00:28:26.735 the passed value will be stabilized 485 00:28:26.735 --> 00:28:29.285 between 0 and 1 without any other nodes 486 00:28:29.285 --> 00:28:31.685 I'll continue expressing 487 00:28:31.685 --> 00:28:35.385 Let's set the value of the VisibleVal node to around 0.5 488 00:28:35.385 --> 00:28:38.286 and see the range where it disappears 489 00:28:38.286 --> 00:28:41.186 If you make it around 0.5, these things that gradually disappear 490 00:28:41.186 --> 00:28:45.436 will become more noticeable, like 0.6 491 00:28:45.436 --> 00:28:50.486 But if you look closely at the other side, you can see it pierced like this 492 00:28:50.486 --> 00:28:53.336 This is because the basic property of 3D objects 493 00:28:53.336 --> 00:28:57.286 is to draw only the front side 494 00:28:57.286 --> 00:29:01.036 You can select the master node here 495 00:29:01.036 --> 00:29:03.136 or click on the margin 496 00:29:03.136 --> 00:29:06.586 If you check the option that says Two Sided 497 00:29:06.586 --> 00:29:12.286 you can see that there is a surface even if 498 00:29:12.286 --> 00:29:15.186 you go inside this where it says to draw both the front and back 499 00:29:15.186 --> 00:29:17.636 So, if you look at the side that has not disappeared yet 500 00:29:17.636 --> 00:29:19.986 it will not look like a wall blocks it 501 00:29:19.986 --> 00:29:21.736 and you can use this option 502 00:29:21.736 --> 00:29:26.486 If you look at it now, the front and back colors are the same 503 00:29:26.486 --> 00:29:28.636 The front and back colors are the same 504 00:29:28.636 --> 00:29:31.936 but to express them in different colors 505 00:29:31.936 --> 00:29:34.736 right-click here 506 00:29:34.736 --> 00:29:38.986 and create two color nodes 507 00:29:38.986 --> 00:29:45.986 Using Constant3Vector, paste them with Ctrl+C, V 508 00:29:45.986 --> 00:29:50.186 Set one to a random value of red, and for the color distinction 509 00:29:50.186 --> 00:29:54.736 set the other color to green to make it easier to distinguish 510 00:29:54.736 --> 00:29:56.586 It might look a little tacky 511 00:29:56.586 --> 00:30:00.636 We will mix these two using Lerp 512 00:30:00.636 --> 00:30:05.686 At this time, the mixing standard will be done 513 00:30:05.686 --> 00:30:12.186 through a node called TwoSidedSign 514 00:30:12.186 --> 00:30:13.886 If we connect this like this 515 00:30:13.886 --> 00:30:16.586 and complete it with Emissive Color 516 00:30:16.586 --> 00:30:22.086 the front will be recognized as green, and the inside 517 00:30:22.086 --> 00:30:24.136 will be recognized as red 518 00:30:24.836 --> 00:30:30.986 But strictly speaking, the value of TwoSidedSign itself is -1 519 00:30:30.986 --> 00:30:33.786 where -1 refers to the back side 520 00:30:33.786 --> 00:30:35.436 Let's zoom in a little 521 00:30:35.436 --> 00:30:41.536 The front is 1, and the back side is -1 522 00:30:41.536 --> 00:30:43.986 If we input a negative value to Lerp 523 00:30:43.986 --> 00:30:48.136 the value becomes distorted, and the saturation increases a bit 524 00:30:48.136 --> 00:30:52.136 so we will use a node called Saturate 525 00:30:52.136 --> 00:30:55.386 to stabilize the value 526 00:30:55.986 --> 00:31:00.536 So, I made a visual distinction by making a difference in color 527 00:31:00.536 --> 00:31:04.336 between the front and the inside, the outside and the inside 528 00:31:04.336 --> 00:31:06.886 Later, I will put in 529 00:31:06.886 --> 00:31:09.386 another texture image that matches here 530 00:31:09.386 --> 00:31:12.836 and change it to a color that matches 531 00:31:12.836 --> 00:31:15.236 For now, I left it like this for the color distinction 532 00:31:15.236 --> 00:31:18.186 Let's say you bring one of these brick images 533 00:31:18.186 --> 00:31:20.636 from the texture section in the starter content 534 00:31:20.636 --> 00:31:24.337 and connect it to the Base Color 535 00:31:24.337 --> 00:31:27.987 Since you need to express the texture, you will need a normal map 536 00:31:27.987 --> 00:31:29.437 in addition to this Base Color 537 00:31:29.437 --> 00:31:32.837 I will try connecting the normal map like this 538 00:31:32.837 --> 00:31:35.137 Even if you connect the colors 539 00:31:35.137 --> 00:31:41.187 it is expressed as if a faint trace is left on the current green 540 00:31:41.187 --> 00:31:43.987 The fact that green is expressed means that 541 00:31:43.987 --> 00:31:47.487 the green node is the problem 542 00:31:47.487 --> 00:31:50.637 and since a color value is given to the Emissive Color 543 00:31:50.637 --> 00:31:52.387 the Base Color is ignored 544 00:31:52.387 --> 00:31:56.137 and the color connected to the Emissive Color is visible 545 00:31:56.137 --> 00:31:59.187 So, if you want to show the Base Color 546 00:31:59.187 --> 00:32:02.387 make the color Emissive black 547 00:32:02.387 --> 00:32:06.487 and you will be able to see the base color like this 548 00:32:06.487 --> 00:32:10.137 Likewise, this red color is not completely bright red 549 00:32:10.137 --> 00:32:14.237 but I'll change it slightly to a slightly darker brown 550 00:32:14.237 --> 00:32:15.887 I'll make it darker 551 00:32:15.887 --> 00:32:19.337 This is because black is not expressed well 552 00:32:19.337 --> 00:32:24.187 This kind of brown matches the image of the bricks 553 00:32:24.187 --> 00:32:25.687 If I lower the saturation a little more 554 00:32:25.687 --> 00:32:27.987 I'll get a color that matches a little more like this 555 00:32:28.837 --> 00:32:31.987 For the texture, choose something similar to the texture we want to express 556 00:32:31.987 --> 00:32:37.287 and for Lerp A, choose something that matches the Base Color 557 00:32:37.287 --> 00:32:39.437 The one that goes into Lerp B is black 558 00:32:39.437 --> 00:32:42.037 In fact, black has a value of 0 559 00:32:42.037 --> 00:32:44.237 so a separate node is unnecessary 560 00:32:44.237 --> 00:32:45.987 Even if you erase this with Delete 561 00:32:45.987 --> 00:32:49.937 if you input 0 as the value going into Lerp B 562 00:32:49.937 --> 00:32:51.287 it will become black 563 00:32:51.287 --> 00:32:54.687 so we made a simple setting like this 564 00:32:54.687 --> 00:32:56.287 for texture expression 565 00:32:56.287 --> 00:33:00.587 Right-click on the color that will be visible on the back side 566 00:33:00.587 --> 00:33:02.837 Here, use Convert to Parameter 567 00:33:02.837 --> 00:33:06.887 and name it BackSideColor 568 00:33:06.887 --> 00:33:08.687 You can apply it later 569 00:33:08.687 --> 00:33:11.887 when you change the texture in the parameter 570 00:33:11.887 --> 00:33:14.337 Likewise, right-click on the texture 571 00:33:14.337 --> 00:33:17.687 Convert it to a Parameter, and name it BaseTex 572 00:33:17.687 --> 00:33:20.987 Do the same for the normal map, Convert to Parameter 573 00:33:20.987 --> 00:33:24.337 and name it BaseNormal 574 00:33:24.337 --> 00:33:27.687 So, the texture we create 575 00:33:27.687 --> 00:33:31.037 is not just a box made of a single color 576 00:33:31.037 --> 00:33:33.587 or a simple basic shape 577 00:33:33.587 --> 00:33:36.987 but if we apply these, we can apply them 578 00:33:36.987 --> 00:33:38.587 to more complex objects 579 00:33:39.287 --> 00:33:40.237 Save 580 00:33:40.237 --> 00:33:44.287 Saturate also explains that the value range 581 00:33:44.287 --> 00:33:46.487 is from 0 to 1 582 00:33:46.487 --> 00:33:50.687 I'll show you this in the instance window when it gradually disappears 583 00:33:50.687 --> 00:33:52.487 I will make it gradually disappear 584 00:33:52.487 --> 00:33:55.937 but it's a bit boring 585 00:33:55.937 --> 00:33:58.937 when it gradually disappears like this 586 00:33:58.937 --> 00:34:02.587 So, I will create a slightly glowing effect here 587 00:34:02.587 --> 00:34:05.488 Let's pull the node back a bit 588 00:34:05.488 --> 00:34:08.688 I'm going to look at the stain pattern 589 00:34:08.688 --> 00:34:10.738 in this half-visible state 590 00:34:10.738 --> 00:34:15.288 I'll simply draw the current stain pattern in green 591 00:34:15.288 --> 00:34:18.488 The stain pattern is captured like this 592 00:34:18.488 --> 00:34:21.438 Let's assume that we will add 593 00:34:21.438 --> 00:34:24.538 a slightly glowing effect to the edge of this stain 594 00:34:24.538 --> 00:34:27.238 Let's assume that the glowing effect 595 00:34:27.238 --> 00:34:30.638 is only on the edge of the glowing effect 596 00:34:30.638 --> 00:34:33.438 as if some texture is burning 597 00:34:33.438 --> 00:34:37.438 and we need to create a function that selects the area 598 00:34:37.438 --> 00:34:39.038 where the glow should be 599 00:34:39.038 --> 00:34:41.388 So, let's take a good look at 600 00:34:41.388 --> 00:34:44.538 the change in value 601 00:34:44.538 --> 00:34:46.638 using VisibleVal and Step 602 00:34:46.638 --> 00:34:49.688 When it's 0.6, it's the current boundary 603 00:34:49.688 --> 00:34:52.838 If this value becomes 0.7 604 00:34:52.838 --> 00:34:56.788 or 0.8, the visible area 605 00:34:56.788 --> 00:34:58.638 Let's cover this for a moment 606 00:34:58.638 --> 00:35:01.588 It will decrease little by little like this 607 00:35:01.588 --> 00:35:10.538 It becomes 0.9, and as the value increases 608 00:35:10.538 --> 00:35:13.338 from 0.5 to 0.6, 0.7, 0.8, 0.9 609 00:35:13.338 --> 00:35:17.088 you can see that the visible area decreases 610 00:35:17.088 --> 00:35:21.388 So, let's create a node called Add here 611 00:35:21.388 --> 00:35:23.338 The value to be Add 612 00:35:23.338 --> 00:35:26.888 is set to Edge using a Scalar Parameter 613 00:35:26.888 --> 00:35:29.838 so that it can find the boundary 614 00:35:29.838 --> 00:35:35.138 Copy the Step node with Ctrl+C, V 615 00:35:35.138 --> 00:35:41.188 and then connect what goes into A like this to Step Y 616 00:35:41.188 --> 00:35:45.538 And this Noise texture 617 00:35:45.538 --> 00:35:47.638 I'll bring the Noise effect as it is 618 00:35:47.638 --> 00:35:51.138 and connect it to Step X and the one above it 619 00:35:51.138 --> 00:35:56.438 For explanation, the Step connected only to VisibleVal is marked as Wide 620 00:35:56.438 --> 00:35:58.788 indicating a wide area 621 00:35:58.788 --> 00:36:02.838 The Step added to the Edge is called Thin 622 00:36:02.838 --> 00:36:06.238 so we will indicate that this is a narrow area 623 00:36:06.238 --> 00:36:13.238 Then, if we want to find this boundary 624 00:36:13.238 --> 00:36:18.138 we can eventually subtract only the narrow red area 625 00:36:18.138 --> 00:36:21.438 from the wide green area in the broad area 626 00:36:21.438 --> 00:36:23.838 and we can get an image 627 00:36:23.838 --> 00:36:26.688 that is like a thin band that should be bright 628 00:36:26.688 --> 00:36:30.138 So, using Subtract 629 00:36:30.138 --> 00:36:35.588 Subtract the narrow area from the wide area and the thin area 630 00:36:35.588 --> 00:36:37.238 If you set it like this 631 00:36:37.238 --> 00:36:40.388 and bring it to the Opacity Mask 632 00:36:40.388 --> 00:36:44.388 the Edge value is currently 0, so we subtracted the same value 633 00:36:44.388 --> 00:36:46.838 o, in fact, no area is visible 634 00:36:46.838 --> 00:36:51.339 Let's make the Edge value weak to about 0.03 635 00:36:51.339 --> 00:36:53.289 Now, let's erase the sketch on the screen 636 00:36:53.289 --> 00:36:56.289 and then you can see a very thin band 637 00:36:56.289 --> 00:36:58.939 like this on the screen 638 00:36:58.939 --> 00:37:02.039 If the Edge value becomes much larger 639 00:37:02.039 --> 00:37:05.789 like 0.05 or 0.1 640 00:37:05.789 --> 00:37:09.439 you can see that it gets thicker 641 00:37:09.439 --> 00:37:14.139 This band-like area is the Lerp item 642 00:37:14.139 --> 00:37:16.789 we connected to Emissive Color in Lerp later 643 00:37:16.789 --> 00:37:20.739 We'll connect it to Lerp again 644 00:37:20.739 --> 00:37:22.939 Since we are currently seeing 645 00:37:22.939 --> 00:37:25.989 the value 1 646 00:37:25.989 --> 00:37:28.639 we can specify a color to make it shine brightly 647 00:37:28.639 --> 00:37:31.739 where it will be visible on the Lerp band 648 00:37:31.739 --> 00:37:33.889 Using Vector Parameter 649 00:37:33.889 --> 00:37:37.239 name the node Emissive Color 650 00:37:37.239 --> 00:37:40.089 and set the Default Value for this node 651 00:37:40.089 --> 00:37:45.089 to red 8, green 1, and blue 0.2 652 00:37:45.089 --> 00:37:46.839 to make it shine brightly 653 00:37:46.839 --> 00:37:50.939 We will pass the result of the subtraction to Alpha 654 00:37:50.939 --> 00:37:53.039 Then, Lerp will occur twice 655 00:37:53.039 --> 00:37:55.789 Lerp for the front and back 656 00:37:55.789 --> 00:37:59.639 So we painted the back with a single color like this 657 00:37:59.639 --> 00:38:03.189 then Lerp this brightly shining area again 658 00:38:03.189 --> 00:38:07.239 and connect it to Emissive Color 659 00:38:07.239 --> 00:38:12.239 You can see that the band part shines brightly like this 660 00:38:12.239 --> 00:38:16.189 In this state, these holed parts should not be visible 661 00:38:16.189 --> 00:38:20.039 Of course, we need to show a wide area 662 00:38:20.039 --> 00:38:24.289 so we will reconnect Wide Step to the Opacity Mask 663 00:38:24.289 --> 00:38:26.339 Now, as you can see 664 00:38:26.339 --> 00:38:30.589 the brightly shining area 665 00:38:30.589 --> 00:38:33.939 the area where the Base Color is visible inside 666 00:38:33.939 --> 00:38:38.089 and the area visible from the back side 667 00:38:38.089 --> 00:38:41.589 are all separated 668 00:38:41.589 --> 00:38:42.489 Save 669 00:38:42.489 --> 00:38:46.939 Let's preview this in the instance window 670 00:38:46.939 --> 00:38:50.239 We activated NoiseScale and Edge values 671 00:38:50.239 --> 00:38:54.439 as well as EmissiveColor and BackSideColor 672 00:38:54.439 --> 00:38:59.239 And we've also done Base Color, Texture, and Normal 673 00:38:59.239 --> 00:39:01.089 With all the items activated 674 00:39:01.089 --> 00:39:06.189 we can set VisibleVal to be invisible, visible 675 00:39:06.189 --> 00:39:13.189 and visible or invisible according to 676 00:39:13.189 --> 00:39:16.389 the arbitrary direction we specified 677 00:39:16.389 --> 00:39:19.889 If the value increases according to the Edge value 678 00:39:19.889 --> 00:39:23.189 you can see that the thickness of the Edge 679 00:39:23.189 --> 00:39:25.839 gets thicker 680 00:39:25.839 --> 00:39:28.489 But if it's too thin 681 00:39:28.489 --> 00:39:30.789 it looks small when you look at it from afar 682 00:39:30.789 --> 00:39:33.190 so it's better to have a little thickness 683 00:39:33.190 --> 00:39:35.440 Let's express it with a little thickness 684 00:39:35.440 --> 00:39:36.840 Through Noise Scale 685 00:39:36.840 --> 00:39:41.440 if you increase the Noise Scale value, it gets bigger 686 00:39:41.440 --> 00:39:44.040 so the Noise gets smaller 687 00:39:44.040 --> 00:39:45.840 It looks like a star when you look at it from afar 688 00:39:45.840 --> 00:39:49.590 If you make the Noise value a little bigger than the negative value 689 00:39:49.590 --> 00:39:53.140 like 0.03 690 00:39:53.140 --> 00:39:57.290 it looks like it's torn 691 00:39:57.290 --> 00:40:03.490 Instead of the bricks here, there are other textures you may want 692 00:40:03.490 --> 00:40:07.140 preferably ones that can be used as a set, such as normal maps 693 00:40:07.140 --> 00:40:09.690 If there is something like this lawn 694 00:40:09.690 --> 00:40:15.790 connect it to BaseTex 695 00:40:15.790 --> 00:40:19.440 and BaseNormal differently 696 00:40:19.440 --> 00:40:23.440 In this way, it's like the grass is 697 00:40:23.440 --> 00:40:27.540 slowly burning away and disappearing 698 00:40:27.540 --> 00:40:34.890 which was originally flat 699 00:40:34.890 --> 00:40:39.040 No matter what kind of mesh it is 700 00:40:39.040 --> 00:40:41.540 it does not lose its directionality 701 00:40:41.540 --> 00:40:44.790 and we can express the disappearing direction 702 00:40:44.790 --> 00:40:47.990 from top to bottom 703 00:40:47.990 --> 00:40:49.890 or from bottom to top 704 00:40:49.890 --> 00:40:55.790 and determine the direction in which it disappears 705 00:40:55.790 --> 00:41:02.890 In this way, I used the coordinate values ​​that the object has 706 00:41:02.890 --> 00:41:05.790 for Local Position and Noise 707 00:41:05.790 --> 00:41:08.990 and also used it as a bounding box 708 00:41:09.290 --> 00:41:12.890 We learned about the principle of 709 00:41:12.890 --> 00:41:17.440 transitioning naturally in various directions 710 00:41:17.440 --> 00:41:20.640 using the position value, Local Position, of a 3D object 711 00:41:20.640 --> 00:41:25.940 If you understand how to visualize the mathematical formula called the inner product 712 00:41:25.940 --> 00:41:29.590 you can apply it to create various effects 713 00:41:29.590 --> 00:41:31.640 not just Dissolve 714 00:41:31.640 --> 00:41:36.140 Let's wrap up by summarizing what we've learned in this session 715 00:41:36.140 --> 00:41:37.440 Thank you 716 00:41:37.940 --> 00:41:38.540 Create Material and Bounding Box 717 00:41:38.540 --> 00:41:39.090 Create Material Create M_PosDissolve Material 718 00:41:39.090 --> 00:41:39.640 Blend Mode: Change it to Masked 719 00:41:39.640 --> 00:41:40.190 Create BoundingBoxBased_0-1_UVW Node 720 00:41:40.190 --> 00:41:40.740 Connect RGB value to Emissive Color, you can see the color applied according to the coordinate value 721 00:41:40.740 --> 00:41:41.290 Create Bounding Box Height (Z axis) is blue, left and right (Y axis) is green, front and back (X axis) is red 722 00:41:41.290 --> 00:41:41.840 Create Scalar Parameter node (VisibleVal) 723 00:41:41.840 --> 00:41:42.390 Connect bounding box node and Add to Opacity Mask 724 00:41:42.390 --> 00:41:42.940 Make it a material instance and check that it Dissolve with directionality by value 725 00:41:42.940 --> 00:41:43.490 Direction Change and Various Effects Using Inner Product 726 00:41:43.490 --> 00:41:44.090 Noise effect Create Local Position node and connect to Multiply 727 00:41:44.090 --> 00:41:44.640 Add Noise node and Dot result Connect Add to Step X and connect Step result to Opacity Mask 728 00:41:44.640 --> 00:41:45.190 If the vector to be compared is much larger than the reference, normalization is required Set the default value of VisibleVal node to 0.5 729 00:41:45.190 --> 00:41:45.740 Color and Texture Expression Create 2 Constant3Vector nodes 730 00:41:45.740 --> 00:41:46.290 Connect 2 Constant3Vectors to Lerp A and B, respectively 731 00:41:46.290 --> 00:41:46.840 Import T_Brick_Clay_Old_D from StarterContent - Textures folder and connect it to Base Color 732 00:41:46.840 --> 00:41:47.390 Set the color connected to Lerp A to match the Base Color 733 00:41:47.390 --> 00:41:47.940 Delete the node connected to Lerp B and set the Lerp B value to 0 734 00:41:47.940 --> 00:41:48.590 Make the Dissolve Edge Shine 735 00:41:48.590 --> 00:41:49.190 Create an Add connected to VisibleVal 736 00:41:49.190 --> 00:41:49.840 Create a new Step node and connect the Add result to Step Y 737 00:41:49.840 --> 00:41:50.440 Connect the Add result connected to the Noise node to Step X 738 00:41:50.440 --> 00:41:51.090 Connect Wide Step to Subtract A and Thin Step to Subtract B 739 00:41:51.090 --> 00:41:51.690 Create a new Lerp and connect Lerp Adp BackgroundColor and TwoSidedSign to the Lerp result 740 00:41:51.690 --> 00:41:52.290 Set the Default Value RGB value of the EmissiveColor node to (8, 1, 0.2) 741 00:41:52.290 --> 00:41:52.940 Connect Wide Step to Opacity Mask