WEBVTT 1 00:00:04.825 --> 00:00:08.925 Realistic Common Energy Shield 2 00:00:24.225 --> 00:00:26.775 Hello, this is Park Hyun-sang 3 00:00:26.775 --> 00:00:29.425 This time, we will be covering the energy shield 4 00:00:29.425 --> 00:00:33.175 a semi-transparent shading technique 5 00:00:33.725 --> 00:00:38.225 We will be discussing the characteristics of a translucent shader 6 00:00:38.225 --> 00:00:41.875 along with position and sine functions from trigonometry 7 00:00:41.875 --> 00:00:44.075 for visual effects 8 00:00:44.075 --> 00:00:46.975 Additionally, we will implement changes over time 9 00:00:46.975 --> 00:00:50.025 not just static forms 10 00:00:50.025 --> 00:00:54.025 Fresnel and Depth Fade 11 00:00:54.475 --> 00:00:59.225 Create a folder called Energy Shield in the content folder 12 00:00:59.225 --> 00:01:01.775 and also make a material 13 00:01:01.775 --> 00:01:06.525 named M_EnergyShield 14 00:01:06.525 --> 00:01:08.475 Let’s start by opening the material editor 15 00:01:08.475 --> 00:01:11.525 We have previously used shaders 16 00:01:11.525 --> 00:01:15.575 to apply textures to 3D object surfaces 17 00:01:15.575 --> 00:01:18.625 or create special effects 18 00:01:18.625 --> 00:01:22.775 For transparency, we used settings 19 00:01:22.775 --> 00:01:27.625 like Masked in Blend Mode to control visibility 20 00:01:27.625 --> 00:01:29.375 However, this time, 21 00:01:29.375 --> 00:01:32.825 we want to display a translucent image 22 00:01:32.825 --> 00:01:36.525 So we will use the Translucent Blend Mode 23 00:01:36.525 --> 00:01:38.175 to create our shader 24 00:01:38.175 --> 00:01:40.925 The Translucent mode disables 25 00:01:40.925 --> 00:01:44.075 many of the typical PBR shader parameters 26 00:01:44.075 --> 00:01:47.525 as you can see right here 27 00:01:47.525 --> 00:01:51.876 If you want to use PBR effects 28 00:01:51.876 --> 00:01:54.626 with a translucent image 29 00:01:54.626 --> 00:01:59.426 go to the Translucency section 30 00:01:59.426 --> 00:02:03.476 and enable the Surface option 31 00:02:03.476 --> 00:02:05.726 However, for the current example 32 00:02:05.726 --> 00:02:08.076 I will not be using 33 00:02:08.076 --> 00:02:11.176 data like Metallic, Specular 34 00:02:11.176 --> 00:02:15.026 or things like Roughness 35 00:02:15.026 --> 00:02:18.876 Instead, we will proceed with the basic 36 00:02:18.876 --> 00:02:23.926 Volumetric NonDirectional setting of Translucent mode 37 00:02:23.926 --> 00:02:26.326 To start the energy shield effect 38 00:02:26.326 --> 00:02:28.576 we will first create the Fresnel node 39 00:02:28.576 --> 00:02:31.326 and apply it to the Opacity 40 00:02:31.326 --> 00:02:36.376 We'll apply the Fresnel node to the Opacity 41 00:02:36.376 --> 00:02:40.626 When you apply it, the center appears transparent 42 00:02:40.626 --> 00:02:44.226 and as you move to the edges 43 00:02:44.226 --> 00:02:46.376 you’ll notice some shading 44 00:02:46.376 --> 00:02:49.876 If you change this from Opacity to Emissive 45 00:02:49.876 --> 00:02:53.626 by pressing Ctrl 46 00:02:53.626 --> 00:02:56.926 the edges will turn white 47 00:02:56.926 --> 00:02:58.376 and the center will appear gray 48 00:02:58.376 --> 00:03:01.126 though it’s actually not gray 49 00:03:01.126 --> 00:03:04.026 If you change the Base Color to black 50 00:03:04.026 --> 00:03:05.976 you'll actually see black 51 00:03:05.976 --> 00:03:10.076 I’ll now explain how the Fresnel node works 52 00:03:10.076 --> 00:03:15.126 which requires an understanding of the Dot product 53 00:03:15.126 --> 00:03:18.426 In the previous lesson 54 00:03:18.426 --> 00:03:23.026 I explained the concept of dot product 55 00:03:23.026 --> 00:03:25.626 where we compare two vectors 56 00:03:25.626 --> 00:03:28.126 one as a reference vector (A) and another vector (B) 57 00:03:28.126 --> 00:03:33.376 to calculate how much the second vector 58 00:03:33.376 --> 00:03:37.726 is aligned with the first vector 59 00:03:37.726 --> 00:03:41.476 In the case of vectors facing each other 60 00:03:41.476 --> 00:03:43.776 the value is 1 61 00:03:43.776 --> 00:03:47.626 And when they are perpendicular, the value is 0 62 00:03:47.626 --> 00:03:50.426 When they face opposite directions, the result is -1 63 00:03:50.426 --> 00:03:57.326 This range from 1 to -1 is what the dot product computation yields 64 00:03:57.326 --> 00:04:00.126 Fresnel’s function works similarly 65 00:04:00.126 --> 00:04:03.176 Let’s assume there is a semi-circle 66 00:04:03.176 --> 00:04:06.376 When the camera is looking at it 67 00:04:06.376 --> 00:04:12.076 the vectors representing the 3D normal direction 68 00:04:12.076 --> 00:04:15.376 Let's call this the camera vector for now 69 00:04:15.376 --> 00:04:18.476 We're comparing this with the vectors of the normal direction 70 00:04:18.476 --> 00:04:23.576 This is quantifying how much each vector is aligned 71 00:04:23.576 --> 00:04:25.876 Strictly speaking, it’s not the camera vector 72 00:04:25.876 --> 00:04:30.726 More precisely, it’s the vector that looks at the camera 73 00:04:30.726 --> 00:04:34.626 often referred to as the view vector 74 00:04:34.626 --> 00:04:36.376 compared with this vector with the data representing the normal direction 75 00:04:36.376 --> 00:04:40.926 Ultimately, when compared, it will face the camera like this 76 00:04:40.926 --> 00:04:44.326 So when the angle is 90 degrees, a value of 0 is returned 77 00:04:44.326 --> 00:04:47.176 and when the camera directly faces 78 00:04:47.176 --> 00:04:49.226 a value of 1 will be output 79 00:04:49.226 --> 00:04:52.176 The back face would go as low as -1 80 00:04:52.176 --> 00:04:56.926 So, essentially, if we think of a sphere ranging from 1 to -1 81 00:04:56.926 --> 00:05:01.726 we reverse the result and apply this logic 82 00:05:01.726 --> 00:05:05.326 When the two vectors face each other directly 83 00:05:05.326 --> 00:05:08.626 based on the dot product 84 00:05:08.626 --> 00:05:11.326 the point directly facing the camera 85 00:05:11.326 --> 00:05:13.976 which is, for our sphere, right here 86 00:05:13.976 --> 00:05:16.026 would give a value of 0 87 00:05:16.026 --> 00:05:20.126 When it’s turned 90 degrees, the value would be 1 88 00:05:20.126 --> 00:05:21.826 It's the reversal of values 89 00:05:21.826 --> 00:05:25.377 So, in the case of Fresnel, the edge values 90 00:05:25.377 --> 00:05:28.577 are inverted compared to the usual result of the dot product 91 00:05:28.577 --> 00:05:31.977 outputting a value of 1 92 00:05:31.977 --> 00:05:36.277 The area facing directly will output a value of 0 93 00:05:36.277 --> 00:05:40.427 So, when comparing vectors 94 00:05:40.427 --> 00:05:44.427 the result from Fresnel will differ slightly 95 00:05:44.427 --> 00:05:46.927 from the typical dot product 96 00:05:46.927 --> 00:05:50.377 Of course, if you use this directl 97 00:05:50.377 --> 00:05:55.527 the inner part will always be 0%, appearing fully transparent 98 00:05:55.527 --> 00:05:58.577 Therefore, we won’t use it as is 99 00:05:58.577 --> 00:06:01.877 but will use Lerp to make it translucent 100 00:06:01.877 --> 00:06:03.827 Through LinearInterpolate 101 00:06:03.827 --> 00:06:06.877 we connect the Fresnel value to the Alpha 102 00:06:06.877 --> 00:06:10.577 The Lerp result will then be connected to the Opacity 103 00:06:10.577 --> 00:06:13.277 When the value of 0 is output 104 00:06:13.277 --> 00:06:15.877 instead of entering 0 for full transparency 105 00:06:15.877 --> 00:06:20.077 we will input a slightly visible 0.3 106 00:06:20.077 --> 00:06:23.427 Indicating full visibility 107 00:06:23.427 --> 00:06:25.727 the value for B will remain 1 108 00:06:25.727 --> 00:06:31.027 As a result, what you’ll see at the front will no longer be fully transparent 109 00:06:31.027 --> 00:06:33.977 but will show 30% transparency 110 00:06:33.977 --> 00:06:35.527 On the edges 111 00:06:35.527 --> 00:06:40.127 the full color of the object 112 00:06:40.127 --> 00:06:41.927 will be visible at 100% 113 00:06:41.927 --> 00:06:45.927 So it's all seen through as it is 114 00:06:45.927 --> 00:06:49.177 Unlike the Opacity Mask 115 00:06:49.177 --> 00:06:54.077 which only output 0 or 1 116 00:06:54.077 --> 00:06:58.177 Opacity supports values between 0 and 1 117 00:06:58.177 --> 00:07:05.277 such as 0.3 or 0.5, allowing for translucency 118 00:07:05.277 --> 00:07:11.377 When the opacity gradually changes from the middle to the edges 119 00:07:11.377 --> 00:07:14.277 a gradual change from 0 to 1 120 00:07:14.277 --> 00:07:16.527 the degree of change 121 00:07:16.527 --> 00:07:20.877 can be controlled using the ExponentIn value 122 00:07:20.877 --> 00:07:25.177 If the Exponent value is set to 0 123 00:07:25.177 --> 00:07:27.627 the state will be completely black 124 00:07:27.627 --> 00:07:30.327 And if set to 1, the range of the gradient will change 125 00:07:30.327 --> 00:07:32.127 Let me mark it here 126 00:07:32.127 --> 00:07:33.177 Assuming 127 00:07:33.177 --> 00:07:36.277 a visible translucency of around 50% 128 00:07:36.277 --> 00:07:39.777 this would be the case when the Exponent is set to 1 129 00:07:39.777 --> 00:07:45.427 As you gradually increase the value to 2 or 3 130 00:07:45.427 --> 00:07:48.977 the position where 50% translucency occurs will shift further 131 00:07:48.977 --> 00:07:52.327 This is because, by default 132 00:07:52.327 --> 00:07:54.777 the graph follows 133 00:07:54.777 --> 00:07:57.427 a linear progression from 0 to 1 134 00:07:57.427 --> 00:08:00.577 Let's say we have a linear graph here 135 00:08:00.577 --> 00:08:04.077 If we input 0.5 136 00:08:04.077 --> 00:08:08.277 the output will also be 0.5 137 00:08:08.277 --> 00:08:12.427 However, Exponent refers to a power 138 00:08:12.427 --> 00:08:14.977 like in 2 raised to the power of n 139 00:08:14.977 --> 00:08:18.677 It represents the exponent value 140 00:08:18.677 --> 00:08:21.327 which can be thought of as squaring 141 00:08:21.327 --> 00:08:25.427 So, squaring 0.5 142 00:08:25.427 --> 00:08:29.977 results in 0.25 143 00:08:29.977 --> 00:08:31.677 This creates 144 00:08:31.677 --> 00:08:35.127 a convex curve 145 00:08:35.127 --> 00:08:38.927 As the exponent value increases 146 00:08:38.927 --> 00:08:43.577 the slope of the curve becomes more pronounced 147 00:08:43.577 --> 00:08:47.027 So it becomes darker 148 00:08:47.027 --> 00:08:50.077 than the output of 0.5 149 00:08:50.077 --> 00:08:54.227 The output at 0.5 becomes darker like so 150 00:08:54.227 --> 00:08:57.177 This controls the degree 151 00:08:57.177 --> 00:09:00.877 of translucency using the exponent 152 00:09:00.877 --> 00:09:03.677 For the energy shield effect 153 00:09:03.677 --> 00:09:07.178 the reason Fresnel is used 154 00:09:07.178 --> 00:09:10.178 is basically because when we want 155 00:09:10.178 --> 00:09:12.978 to express things like energy or magnetic fields 156 00:09:12.978 --> 00:09:15.878 though it's not too visible with the black now 157 00:09:15.878 --> 00:09:20.228 it’s common to make the edges brighter 158 00:09:20.228 --> 00:09:24.528 and keep the inside transparent 159 00:09:24.528 --> 00:09:28.478 This is typically done by using the Fresnel node 160 00:09:28.478 --> 00:09:32.278 Now, we will use Lerp 161 00:09:32.278 --> 00:09:35.078 to show different color values 162 00:09:35.078 --> 00:09:38.628 First, let's use Constant3Vector nodes 163 00:09:38.628 --> 00:09:42.028 Create two Constant3Vector nodes 164 00:09:42.028 --> 00:09:44.528 The Fresnel node is temporarily moved aside 165 00:09:44.528 --> 00:09:48.628 Then, using Lerp 166 00:09:48.628 --> 00:09:51.628 we connect the Fresnel node 167 00:09:51.628 --> 00:09:57.278 For the inner region, or A area 168 00:09:57.278 --> 00:09:59.878 we apply a dark blue color 169 00:09:59.878 --> 00:10:01.978 It doesn’t have to be blue 170 00:10:01.978 --> 00:10:03.828 but lighter colors like sky blue are often used 171 00:10:03.828 --> 00:10:08.078 to represent the feeling of magnetic fields 172 00:10:08.078 --> 00:10:09.328 That's why I used this 173 00:10:09.328 --> 00:10:14.028 On the outer part, we will use a color slightly brighter than the one used in A 174 00:10:14.028 --> 00:10:16.428 We’ll make sure 175 00:10:16.428 --> 00:10:19.478 that the blue component emits light more 176 00:10:19.478 --> 00:10:23.178 by increasing its value about three times 177 00:10:23.178 --> 00:10:24.928 and connecting it to B 178 00:10:24.928 --> 00:10:28.428 Then, by connecting it to the Emissive Color 179 00:10:28.428 --> 00:10:31.528 the outer part will glow brightly 180 00:10:31.528 --> 00:10:34.628 while the inner part will appear to have a bluish light 181 00:10:34.628 --> 00:10:36.428 completing the depiction 182 00:10:36.428 --> 00:10:41.278 Now, let’s add one more effect 183 00:10:41.278 --> 00:10:43.828 The node we will use 184 00:10:43.828 --> 00:10:48.078 is called Depth Fade 185 00:10:48.078 --> 00:10:52.328 If you simply connect this to the Opacity 186 00:10:52.328 --> 00:10:55.828 it might not be very noticeable in the preview 187 00:10:55.828 --> 00:10:57.728 Therefore, we’ll apply it 188 00:10:57.728 --> 00:11:01.478 actually apply it in the world 189 00:11:01.478 --> 00:11:03.578 and I'll continue the explanation from there 190 00:11:03.578 --> 00:11:07.778 In the Place Actors - Shapes section, let’s first place a Sphere 191 00:11:07.778 --> 00:11:12.228 in the world with part of it overlapping 192 00:11:12.228 --> 00:11:14.928 Then, we’ll connect the energy shield 193 00:11:14.928 --> 00:11:17.728 we are working on 194 00:11:17.728 --> 00:11:20.578 to the material of the Sphere 195 00:11:20.578 --> 00:11:22.178 that we placed 196 00:11:22.178 --> 00:11:25.728 To make the effect more noticeable 197 00:11:25.728 --> 00:11:29.928 we can scale the Sphere by about five times using the Transform scale 198 00:11:29.928 --> 00:11:33.628 When you look at the boundary where the object touches 199 00:11:33.628 --> 00:11:37.578 you’ll notice that part of it 200 00:11:37.578 --> 00:11:40.278 appears transparent, like this 201 00:11:40.278 --> 00:11:42.828 From a distance, you’ll see it like this 202 00:11:42.828 --> 00:11:46.378 The boundary shows a value of 0 203 00:11:46.378 --> 00:11:49.628 The Fade Distance gradually increases 204 00:11:49.628 --> 00:11:51.778 transparency to 1 within 100 units 205 00:11:51.778 --> 00:11:54.128 More specifically, instead of just transparency 206 00:11:54.128 --> 00:11:56.928 it adjusts the value being output to 1 207 00:11:56.928 --> 00:11:59.978 creating this effect 208 00:11:59.978 --> 00:12:02.378 However, this isn’t applied directly 209 00:12:02.378 --> 00:12:06.428 In energy shield special effects 210 00:12:06.428 --> 00:12:09.078 the purpose of Depth Fade 211 00:12:09.078 --> 00:12:15.928 is often to make these boundaries clearer 212 00:12:15.928 --> 00:12:21.628 Therefore, we reverse the value of Depth Fade using OneMinus 213 00:12:21.628 --> 00:12:25.178 and connect it to the Opacity 214 00:12:25.178 --> 00:12:29.828 On screen, you’ll see a very narrow area being affected Let's save this 215 00:12:29.828 --> 00:12:32.428 In the world, as you can see 216 00:12:32.428 --> 00:12:36.428 the previously 0 value becomes 1 217 00:12:36.428 --> 00:12:38.529 by subtracting 0 from 1 218 00:12:38.529 --> 00:12:43.279 and the result now transitions from 1 to 0 219 00:12:43.279 --> 00:12:46.579 However, with this configuration 220 00:12:46.579 --> 00:12:49.129 the overlapping areas only show the front-facing side 221 00:12:49.129 --> 00:12:54.029 To see the back, in the master node 222 00:12:54.029 --> 00:12:57.379 check the Two Sided option 223 00:12:57.379 --> 00:13:01.329 This allows the entire boundary 224 00:13:01.329 --> 00:13:06.829 including the back to be visualized 225 00:13:06.829 --> 00:13:11.429 Now, let’s mix the Fresnel effect 226 00:13:11.429 --> 00:13:15.229 we created earlier with this new effect 227 00:13:15.229 --> 00:13:19.429 The boundary where the objects meet now shows a value of 1 228 00:13:19.429 --> 00:13:22.279 When applying the Fresnel effect 229 00:13:22.279 --> 00:13:24.879 the outer edge of the sphere, marked in green 230 00:13:24.879 --> 00:13:28.829 also shows a value of 1 231 00:13:28.829 --> 00:13:31.479 which is same as the boundary 232 00:13:31.479 --> 00:13:34.729 When you encounter new effects like this 233 00:13:34.729 --> 00:13:37.429 if you don't know what to do 234 00:13:37.429 --> 00:13:40.279 the most common choices 235 00:13:40.279 --> 00:13:43.629 are either to multiply these two values 236 00:13:43.629 --> 00:13:46.779 or to add them together 237 00:13:46.779 --> 00:13:49.729 When we do them together 238 00:13:49.729 --> 00:13:53.079 after multiplying 239 00:13:53.079 --> 00:13:55.179 we notice that the inner part of the effect isn’t visible 240 00:13:55.179 --> 00:14:00.229 while the Fresnel effect doesn’t appear to show either 241 00:14:00.229 --> 00:14:01.879 This might seem obvious 242 00:14:01.879 --> 00:14:03.879 but to clarify, I’ve marked 243 00:14:03.879 --> 00:14:06.829 the Depth Fade values in green 244 00:14:06.829 --> 00:14:09.229 The boundary of the 3D object 245 00:14:09.229 --> 00:14:12.229 is originally 0, but we used OneMinus 246 00:14:12.229 --> 00:14:14.679 to output a value of 1 247 00:14:14.679 --> 00:14:18.079 Starting from the 100-unit distance 248 00:14:18.079 --> 00:14:20.679 the rest of the sphere now displays a 0 249 00:14:20.679 --> 00:14:24.679 achieved by subtracting OneMinus 250 00:14:24.679 --> 00:14:26.429 from the original value of 1 251 00:14:26.429 --> 00:14:28.979 When I apply the Fresnel values in red 252 00:14:28.979 --> 00:14:32.429 the boundary area shows 1 253 00:14:32.429 --> 00:14:35.729 while the inner area outputs 0 254 00:14:35.729 --> 00:14:39.179 The part where 0 is output is the same here as well 255 00:14:39.179 --> 00:14:41.079 The same applies to the other areas 256 00:14:41.079 --> 00:14:43.829 As we move to the top 257 00:14:43.829 --> 00:14:45.979 the boundary of the sphere, where we applied the Fresnel effect 258 00:14:45.979 --> 00:14:47.929 will output 1 259 00:14:47.929 --> 00:14:51.229 Meanwhile, the Depth Fade effect 260 00:14:51.229 --> 00:14:53.279 outputs 0 for the boundary area 261 00:14:53.279 --> 00:14:56.229 If we multiply these two, the result will be 0 262 00:14:56.229 --> 00:14:59.379 When the opacity value is 0 263 00:14:59.379 --> 00:15:01.979 it means it should be invisible 264 00:15:01.979 --> 00:15:06.329 Therefore, when the Depth Fade value of 1 265 00:15:06.329 --> 00:15:10.029 and Fresnel’s 0 are multiplied, the result will be 0 266 00:15:10.029 --> 00:15:11.629 making both effects 267 00:15:11.629 --> 00:15:14.079 not really looking optimal 268 00:15:14.079 --> 00:15:18.229 So, we’ll remove the Multiply operation 269 00:15:18.229 --> 00:15:20.179 Let's click on Delete 270 00:15:20.179 --> 00:15:23.729 Let's add the two effects instead 271 00:15:23.729 --> 00:15:25.879 Let's use Apply 272 00:15:25.879 --> 00:15:30.679 We just added Fresnel and Depth Fade 273 00:15:30.679 --> 00:15:34.229 Same thing, using OneMinus for the output 274 00:15:34.229 --> 00:15:38.729 the boundary is 1 275 00:15:38.729 --> 00:15:42.529 and the rest is 0 276 00:15:42.529 --> 00:15:44.229 Let's write out the average values 277 00:15:44.229 --> 00:15:48.529 For the Fresnel effect, the areas facing the camera will output a value of 0 278 00:15:48.529 --> 00:15:50.929 The average values will be 0 279 00:15:50.929 --> 00:15:54.329 and the boundary values will all be 1 280 00:15:54.329 --> 00:15:58.329 When we add the two values, the result is 2 at the boundary and at least 1 inside 281 00:15:58.329 --> 00:16:03.129 If this 0 and 1 are added, it'll be at least 1 282 00:16:03.129 --> 00:16:06.479 This central area where 0 and 0 are added 283 00:16:06.479 --> 00:16:10.529 This is the real invisible state of 0 284 00:16:10.529 --> 00:16:12.779 Meaning, Opacity equates 0 285 00:16:12.779 --> 00:16:16.780 Now that we have added the Fresnel 286 00:16:16.780 --> 00:16:19.880 and Depth Fade effects 287 00:16:19.880 --> 00:16:23.080 we can see the intended result 288 00:16:23.080 --> 00:16:27.830 Let's apply this to the Lerp we've used before 289 00:16:27.830 --> 00:16:30.630 Opacity and Emissive Color 290 00:16:30.630 --> 00:16:33.830 Let's apply these two Lerp effects 291 00:16:33.830 --> 00:16:36.080 Click Apply 292 00:16:36.080 --> 00:16:40.080 As you can see, the effects are overlapping 293 00:16:40.080 --> 00:16:43.630 One thing to be careful with is 294 00:16:43.630 --> 00:16:49.230 Here, the maximum is 2 295 00:16:49.230 --> 00:16:51.380 so if possible 296 00:16:51.380 --> 00:16:54.030 for a stable result in Lerp 297 00:16:54.030 --> 00:16:56.630 apply the Saturate node 298 00:16:56.630 --> 00:17:00.730 to limit the output range between 0 and 1 299 00:17:00.730 --> 00:17:05.180 This ensures the range of values, originally from 0 to 2 300 00:17:05.180 --> 00:17:08.380 is restricted to the 0 to 1 range 301 00:17:08.380 --> 00:17:11.180 sing this method makes 302 00:17:11.180 --> 00:17:13.730 the Lerp effect 303 00:17:13.730 --> 00:17:17.680 more consistent and uniform 304 00:17:17.680 --> 00:17:22.630 Now, to adjust the Fresnel boundary 305 00:17:22.630 --> 00:17:25.430 we modify the range from white to gradually fade inward 306 00:17:25.430 --> 00:17:27.980 Let's now adjust the boundary for this Fresnel 307 00:17:27.980 --> 00:17:30.730 where it starts with white and gradually disappears inward 308 00:17:30.730 --> 00:17:33.230 To adjust this range 309 00:17:33.230 --> 00:17:37.280 use a ScalarParameter for the ExponentIn value 310 00:17:37.280 --> 00:17:40.680 which will be named FresnelExp 311 00:17:40.680 --> 00:17:43.030 That will be the representative value 312 00:17:43.030 --> 00:17:44.280 For the Depth Fade effect 313 00:17:44.280 --> 00:17:46.730 we don’t need to adjust the Opacity value 314 00:17:46.730 --> 00:17:49.430 but can control the fade distance using a ScalarParameter 315 00:17:49.430 --> 00:17:54.230 which will be named FadeDist 316 00:17:54.230 --> 00:17:57.380 Dist meaning Distance in this name 317 00:17:57.380 --> 00:17:59.730 It'll have a default value of 100 318 00:17:59.730 --> 00:18:03.830 The FresnelExp value will remain set at 2 as before 319 00:18:03.830 --> 00:18:07.580 The two primary parameters for the effects 320 00:18:07.580 --> 00:18:09.780 have been created like so 321 00:18:09.780 --> 00:18:12.530 For the remaining color values, right-click 322 00:18:12.530 --> 00:18:16.430 and choose Convert to Parameter for Inner Color 323 00:18:16.430 --> 00:18:19.730 and Side Color, like this 324 00:18:19.730 --> 00:18:23.180 This will add another color value 325 00:18:23.180 --> 00:18:25.130 Similarly, Opacity can be adjusted 326 00:18:25.130 --> 00:18:28.530 using ScalarParameter for InnerOp 327 00:18:28.530 --> 00:18:30.930 A being the inner area 328 00:18:30.930 --> 00:18:33.980 and also using ScalarParameter 329 00:18:33.980 --> 00:18:38.480 use SideOp for the outer area 330 00:18:38.480 --> 00:18:44.480 with the default values set to 0.3 for the inner part and 1 for the outer part 331 00:18:44.830 --> 00:18:48.830 Currently, a simple example material has been created 332 00:18:48.830 --> 00:18:52.580 to demonstrate the Depth Fade effect 333 00:18:52.580 --> 00:18:56.130 Let me first explain how Depth Fade works 334 00:18:56.130 --> 00:18:59.130 and how Translucent works 335 00:18:59.130 --> 00:19:02.630 in this context before we proceed 336 00:19:02.630 --> 00:19:05.280 Depth Fade is a visualization feature based on the depth value 337 00:19:05.280 --> 00:19:09.680 typically using the distance from the camera 338 00:19:09.680 --> 00:19:12.380 And here, this Depth 339 00:19:12.380 --> 00:19:14.180 does not include the part 340 00:19:14.180 --> 00:19:17.680 where it accounts for the distance 341 00:19:17.680 --> 00:19:20.630 from the camera 342 00:19:20.630 --> 00:19:24.180 In the level, you can switch to Lit mode 343 00:19:24.180 --> 00:19:28.080 and select Scene Depth under Buffer Visualization 344 00:19:28.080 --> 00:19:30.080 to view the depth value for all scene objects 345 00:19:30.080 --> 00:19:33.280 Let's go to Scene Depth 346 00:19:33.280 --> 00:19:36.230 As the distance from the camera increases 347 00:19:36.230 --> 00:19:42.680 the color will gradually turn white 348 00:19:42.680 --> 00:19:45.330 However, for Translucent objects 349 00:19:45.330 --> 00:19:48.680 Scene Depth 350 00:19:48.680 --> 00:19:50.530 does not include this information 351 00:19:50.530 --> 00:19:53.481 Let's go back to Lit 352 00:19:53.481 --> 00:19:55.631 You do see a sphere here, but let's try this 353 00:19:55.631 --> 00:19:59.231 Go to Buffer Visualization, and then the Scene Depth option 354 00:19:59.231 --> 00:20:02.481 And select the sphere that's been there 355 00:20:02.481 --> 00:20:03.731 Now, this 356 00:20:03.731 --> 00:20:07.281 will show that the 3D object or the sphere exists 357 00:20:07.281 --> 00:20:10.281 but its depth value is not available 358 00:20:10.281 --> 00:20:14.231 which is to show us its depth 359 00:20:14.231 --> 00:20:16.331 Now, back to Lit 360 00:20:16.331 --> 00:20:19.181 and let's use what we just made 361 00:20:19.181 --> 00:20:22.481 this another data called Pixel Depth 362 00:20:22.481 --> 00:20:27.081 Let's apply this to our sphere 363 00:20:27.081 --> 00:20:29.481 The object remains translucent 364 00:20:29.481 --> 00:20:31.481 and the distance between the camera and the object 365 00:20:31.481 --> 00:20:34.481 is about 700 units, as indicated by the text 366 00:20:34.481 --> 00:20:37.281 This text is broken, as it seems 367 00:20:37.281 --> 00:20:41.131 because each pixel has 368 00:20:41.131 --> 00:20:44.331 a slightly different distance from the camera 369 00:20:44.331 --> 00:20:46.331 So these are the pixels 370 00:20:46.331 --> 00:20:51.231 And they each have different values 371 00:20:51.231 --> 00:20:54.031 That's why we're seeing some broken text 372 00:20:54.031 --> 00:20:59.231 As the distance decreases, the overlap becomes more pronounced 373 00:20:59.231 --> 00:21:00.981 Below here are the decimals 374 00:21:00.981 --> 00:21:04.231 So with a lot of distance, let's see 375 00:21:04.231 --> 00:21:07.581 The system can show values like 500, 600 376 00:21:07.581 --> 00:21:10.731 or even 800 units for distance 377 00:21:10.731 --> 00:21:13.581 If the distance continues to decrease, the value can go up to four digits 378 00:21:13.581 --> 00:21:15.731 And as we approach it 379 00:21:15.731 --> 00:21:18.281 you can see that the value is changing 380 00:21:18.281 --> 00:21:25.931 We will now apply 381 00:21:25.931 --> 00:21:28.531 Scene Depth and Pixel Depth 382 00:21:28.531 --> 00:21:32.331 For example, consider point A here 383 00:21:32.331 --> 00:21:35.881 and point B over here 384 00:21:35.881 --> 00:21:38.181 The boundary at point B 385 00:21:38.181 --> 00:21:42.281 where Scene Depth and Pixel Depth values meet 386 00:21:42.281 --> 00:21:45.931 is similar to point A, or at least 387 00:21:45.931 --> 00:21:50.181 this boundary with the object 388 00:21:50.981 --> 00:21:54.331 By subtracting Scene Depth from Pixel Depth 389 00:21:54.331 --> 00:21:57.731 point A will give a result of 0 since their values are identical 390 00:21:57.731 --> 00:22:01.481 For point B, located in open space 391 00:22:01.481 --> 00:22:03.631 this Scene Depth 392 00:22:03.631 --> 00:22:06.181 that we see at point B 393 00:22:06.181 --> 00:22:09.181 will consider that this sphere does not exist 394 00:22:09.181 --> 00:22:11.481 that the object here 395 00:22:11.481 --> 00:22:13.081 isn’t visible 396 00:22:13.081 --> 00:22:16.381 So it will detect the distance to the background wall 397 00:22:16.381 --> 00:22:20.031 It's much further away from the camera 398 00:22:20.031 --> 00:22:22.131 The one we just hid 399 00:22:22.131 --> 00:22:26.481 this sphere, it's much further away from this 400 00:22:26.481 --> 00:22:31.631 Thus, the Scene Depth value will be 401 00:22:31.631 --> 00:22:36.831 larger than the Pixel Depth value 402 00:22:36.831 --> 00:22:41.631 resulting in a non-zero difference 403 00:22:41.631 --> 00:22:47.231 This difference, whether it’s 1, 100, or 1000 404 00:22:47.231 --> 00:22:48.981 it will surely be larger 405 00:22:48.981 --> 00:22:51.931 To calculate the difference 406 00:22:51.931 --> 00:22:55.781 between Scene Depth and Pixel Depth 407 00:22:55.781 --> 00:22:57.581 the result is divided by a distance value 408 00:22:57.581 --> 00:22:59.781 which by default is 100 409 00:22:59.781 --> 00:23:01.531 While at a distance of 100 units 410 00:23:01.531 --> 00:23:04.281 the boundary at 0 units should give a result of 0 411 00:23:04.281 --> 00:23:08.331 And the result here will be 1 412 00:23:08.331 --> 00:23:10.581 From here, it'll be by 100 units 413 00:23:10.581 --> 00:23:14.281 Around 100 units from the floor 414 00:23:14.281 --> 00:23:17.581 The depth value will be derived from here 415 00:23:17.581 --> 00:23:21.231 If the point is farther, such as at point B 416 00:23:21.231 --> 00:23:23.081 with this being more than 100 417 00:23:23.081 --> 00:23:26.581 whether it be 2, 3, or 50 418 00:23:26.581 --> 00:23:31.232 the result will be greater, since it's more distanced than 100 419 00:23:31.232 --> 00:23:34.682 So let's try and use 420 00:23:34.682 --> 00:23:37.532 the Depth Fade we actually used 421 00:23:37.532 --> 00:23:39.182 Let's apply it 422 00:23:39.182 --> 00:23:41.282 Remove all other nodes 423 00:23:41.282 --> 00:23:44.632 First create a Scene Depth node 424 00:23:44.632 --> 00:23:49.482 Subtract Pixel Depth from Scene Depth 425 00:23:49.482 --> 00:23:53.832 and then divide the result by the distance value default 100 426 00:23:53.832 --> 00:23:56.882 Let's connect this to Opacity and save 427 00:23:56.882 --> 00:24:00.232 Then this is the exact distance 428 00:24:00.232 --> 00:24:02.682 this boundary area 429 00:24:02.682 --> 00:24:04.482 It's at 0% now, so it isn't too visible 430 00:24:04.482 --> 00:24:07.232 That's why I set it right on here 431 00:24:07.232 --> 00:24:09.082 which is just 100 units from here 432 00:24:09.082 --> 00:24:12.382 So you can see that it's moved by that much 433 00:24:12.382 --> 00:24:16.282 Let's modify the node we made 434 00:24:16.282 --> 00:24:19.332 and compare it with Depth Fade 435 00:24:19.332 --> 00:24:22.082 Let's apply and save as well 436 00:24:22.082 --> 00:24:24.182 Then, the result is the same 437 00:24:24.182 --> 00:24:26.182 If we type in 200 here 438 00:24:26.182 --> 00:24:29.432 it’ll make the distance twice as big 439 00:24:29.432 --> 00:24:30.982 So it'll move to the second tile from here 440 00:24:30.982 --> 00:24:33.532 So of course, let's try typing in 200 441 00:24:33.532 --> 00:24:35.882 connect it, and save 442 00:24:35.882 --> 00:24:38.732 Apply, and it's the same 443 00:24:38.732 --> 00:24:43.532 So, when 3D is rendered, translucent objects 444 00:24:43.532 --> 00:24:46.532 are excluded from the Scene Depth 445 00:24:46.532 --> 00:24:50.182 The Pixel Depth, literally the position values 446 00:24:50.182 --> 00:24:52.782 of the 3D surface, is retained 447 00:24:52.782 --> 00:24:56.282 So, while it is excluded from the entire screen calculation 448 00:24:56.282 --> 00:24:59.032 individual data is maintained 449 00:24:59.032 --> 00:25:01.182 As you can see 450 00:25:01.182 --> 00:25:03.482 we can create effects like Depth Fade 451 00:25:03.482 --> 00:25:06.982 using the difference between these two values 452 00:25:06.982 --> 00:25:09.132 Another interesting symptom occurs 453 00:25:09.132 --> 00:25:12.482 because it’s excluded from the Scene Depth 454 00:25:12.482 --> 00:25:16.182 There are no shadows 455 00:25:16.182 --> 00:25:19.382 Other objects cast shadows 456 00:25:19.382 --> 00:25:22.182 but Translucent objects 457 00:25:22.182 --> 00:25:24.532 don’t produce shadows by default 458 00:25:24.532 --> 00:25:28.932 So the Scene Depth is excluded 459 00:25:28.932 --> 00:25:31.682 in Buffer Visualization 460 00:25:31.682 --> 00:25:33.682 you should remember this 461 00:25:33.682 --> 00:25:37.082 And by leveraging this, you can create 462 00:25:37.082 --> 00:25:38.682 more interesting effects 463 00:25:38.682 --> 00:25:43.082 Now, let’s return the material to its original form 464 00:25:43.082 --> 00:25:46.682 and go back to our Energy Shield 465 00:25:46.682 --> 00:25:49.582 We’ll try increasing the scale a bit 466 00:25:49.582 --> 00:25:51.432 If you pull it back far enough 467 00:25:52.282 --> 00:25:55.932 as you scale the object 468 00:25:55.932 --> 00:25:58.882 you’ll notice the boundaries of the object 469 00:25:58.882 --> 00:26:04.782 becoming more white when it touches other 3D objects 470 00:26:04.782 --> 00:26:08.982 When the scale is reduced 471 00:26:08.982 --> 00:26:12.832 you’ll see interactions with other objects as well 472 00:26:12.832 --> 00:26:15.332 This interaction doesn’t require 473 00:26:15.332 --> 00:26:16.932 any programming 474 00:26:16.932 --> 00:26:19.982 or buttons to be pressed 475 00:26:19.982 --> 00:26:21.532 No need for those 476 00:26:21.532 --> 00:26:25.082 Simply creating a shader like this 477 00:26:25.082 --> 00:26:30.482 allows interaction between surrounding actors 478 00:26:30.482 --> 00:26:32.982 Now, let’s reopen the material 479 00:26:32.982 --> 00:26:36.232 and finish the remaining effects 480 00:26:36.232 --> 00:26:40.232 Visualizing Positions 481 00:26:41.182 --> 00:26:45.632 These two effects overlap, so let's move them a little further back 482 00:26:45.632 --> 00:26:48.832 and then we’ll create a new effect 483 00:26:48.832 --> 00:26:53.482 Typically, energy has a certain wavelength or period 484 00:26:53.482 --> 00:26:57.932 So it is often depicted as flowing downwards 485 00:26:57.932 --> 00:27:03.732 or expressed through smaller representations like lines 486 00:27:03.732 --> 00:27:05.333 To achieve such a depiction 487 00:27:05.333 --> 00:27:09.983 we will use position values 488 00:27:09.983 --> 00:27:14.883 First, we will bring in the World Position node 489 00:27:14.883 --> 00:27:17.783 then use the Dot Product 490 00:27:17.783 --> 00:27:22.483 to make it ripple in a direction we define 491 00:27:22.483 --> 00:27:26.083 We’ll compare this value with a vector parameter 492 00:27:26.083 --> 00:27:29.483 which we will call Direction 493 00:27:29.483 --> 00:27:34.183 Let's create a node based on these two values 494 00:27:34.183 --> 00:27:38.833 Let's set the “Direction” value to the positive Z direction 495 00:27:38.833 --> 00:27:42.733 just for the simplicity 496 00:27:42.733 --> 00:27:44.683 When comparing these results 497 00:27:44.683 --> 00:27:47.233 we will move the node forward to see how it works 498 00:27:47.233 --> 00:27:48.583 There will be more nodes, usually 499 00:27:48.583 --> 00:27:51.733 Connecting this to the Opacity 500 00:27:51.733 --> 00:27:54.333 we observe a half-sphere shape 501 00:27:54.333 --> 00:27:58.283 The same effect is seen with a cube or cylinder 502 00:27:58.283 --> 00:28:02.133 where only half of the original length is visible 503 00:28:02.133 --> 00:28:05.133 As previously explained 504 00:28:05.133 --> 00:28:10.233 the Dot operation’s value range spans from -1 to 1 505 00:28:10.233 --> 00:28:14.983 Since the vector values can vary 506 00:28:14.983 --> 00:28:18.433 we will normalize the vector 507 00:28:18.433 --> 00:28:20.583 to convert it into a unit vector 508 00:28:20.583 --> 00:28:24.333 Similarly, we will normalize the position values 509 00:28:24.333 --> 00:28:26.433 to create unit vectors 510 00:28:26.883 --> 00:28:30.783 Upon zooming in closely 511 00:28:30.783 --> 00:28:33.083 a subtle gradient effect becomes visible 512 00:28:33.083 --> 00:28:35.133 Can you see this? 513 00:28:35.133 --> 00:28:39.933 Since the value range is from -1 to 1 514 00:28:39.933 --> 00:28:43.283 the shallow boundary corresponds to 0 515 00:28:43.283 --> 00:28:46.083 with the visible area being at 1 516 00:28:46.083 --> 00:28:50.333 and values beyond that are either greater than 1 or less than -1 517 00:28:50.333 --> 00:28:51.533 That's why we see this here 518 00:28:51.533 --> 00:28:54.283 By normalizing the result 519 00:28:54.283 --> 00:28:58.683 the gradient smooths out 520 00:28:58.683 --> 00:29:02.933 but it still shows only half of the shape 521 00:29:02.933 --> 00:29:05.133 Back to our sphere mode 522 00:29:05.133 --> 00:29:09.833 It's like a half-sphere, and the shading does look smoother 523 00:29:09.833 --> 00:29:11.933 When we normalize 524 00:29:11.933 --> 00:29:17.383 both the “Up” vector and position values 525 00:29:17.383 --> 00:29:19.633 they are all compared 526 00:29:19.633 --> 00:29:21.733 creating the gradient effect 527 00:29:21.733 --> 00:29:24.883 Finally, we will remap the values between 0 and 1 528 00:29:24.883 --> 00:29:28.883 For this, we usually use the Remap node 529 00:29:28.883 --> 00:29:30.983 However, what we really need 530 00:29:30.983 --> 00:29:33.083 is a value range from 0 to 1 531 00:29:33.083 --> 00:29:35.733 so instead of manually defining separate output values 532 00:29:35.733 --> 00:29:38.133 we will use something designed to handle the 0 to 1 range 533 00:29:38.133 --> 00:29:42.483 The RemapValueRangeNormalized node 534 00:29:42.483 --> 00:29:45.433 For the input Low 535 00:29:45.433 --> 00:29:50.283 and High values, we’ll use Constant nodes 536 00:29:50.283 --> 00:29:54.333 setting the Low to -1 537 00:29:54.333 --> 00:29:58.333 and the High to 1 538 00:29:59.183 --> 00:30:03.033 Once connected to the Opacity 539 00:30:03.033 --> 00:30:07.483 you’ll notice that almost the entire shape of the sphere is visible 540 00:30:07.483 --> 00:30:11.533 The output value smoothly transitions from 0 to 1 541 00:30:11.533 --> 00:30:16.133 Now, we’ll assign the output value to range from 0 to 1 542 00:30:16.133 --> 00:30:19.083 By adjusting 543 00:30:19.083 --> 00:30:23.033 the gradient direction to red 544 00:30:23.033 --> 00:30:26.633 we can make the gradient flow from right to left 545 00:30:26.633 --> 00:30:29.733 which you can observe happening right here 546 00:30:29.733 --> 00:30:32.733 To create a striped pattern 547 00:30:32.733 --> 00:30:36.283 we’ll isolate the calculated area and move it aside 548 00:30:36.283 --> 00:30:39.383 We’ll now use the Sine function 549 00:30:39.383 --> 00:30:42.134 but it’s important to note 550 00:30:42.134 --> 00:30:46.534 that we are using the Sine from trigonometry 551 00:30:46.534 --> 00:30:48.434 which is Sine 552 00:30:48.434 --> 00:30:51.534 not the Sign function, which sounds similar 553 00:30:51.534 --> 00:30:56.534 So make sure you're adding Sine here 554 00:30:56.534 --> 00:30:58.934 This Sine node 555 00:30:58.934 --> 00:31:01.934 will help create a wave-like effect 556 00:31:01.934 --> 00:31:05.534 which will be connected directly to the Remap 557 00:31:05.534 --> 00:31:09.634 The result will show a pattern with the middle section appearing empty 558 00:31:09.634 --> 00:31:12.584 If we change the Direction 559 00:31:12.584 --> 00:31:15.284 for example, by adjusting the values from the vector 560 00:31:15.284 --> 00:31:19.534 the wave-like middle portion 561 00:31:19.534 --> 00:31:25.584 will bend as we modify the Direction 562 00:31:25.584 --> 00:31:28.634 Alternatively, by adjusting the input to B 563 00:31:28.634 --> 00:31:33.884 the pattern will shift to a diagonal direction, see? 564 00:31:33.884 --> 00:31:36.784 However, since there is only one stripe 565 00:31:36.784 --> 00:31:41.134 we’ll multiply the output from the Dot node 566 00:31:41.134 --> 00:31:43.084 and connect it to the Sine 567 00:31:43.084 --> 00:31:47.684 We’ll use a ScalarParameter node 568 00:31:47.684 --> 00:31:51.884 name it lineFreq 569 00:31:51.884 --> 00:31:55.034 and set its default value to 30 570 00:31:55.034 --> 00:31:58.734 As a result, we now have 571 00:31:58.734 --> 00:32:01.884 the striped pattern generated 572 00:32:01.884 --> 00:32:04.934 We will later animate this pattern 573 00:32:04.934 --> 00:32:07.434 this stripe pattern here 574 00:32:07.434 --> 00:32:09.484 Depending on the input 575 00:32:09.484 --> 00:32:15.534 we can adjust the frequency to customize the appearance of the pattern 576 00:32:15.534 --> 00:32:18.034 You can do this as you like 577 00:32:18.034 --> 00:32:20.634 The Sine node 578 00:32:20.634 --> 00:32:25.134 refers to the value commonly discussed in trigonometry 579 00:32:25.134 --> 00:32:27.284 When we talk about trigonometric functions 580 00:32:27.284 --> 00:32:32.334 we usually mention Cosine, Tangent, and finally Sine 581 00:32:32.334 --> 00:32:34.434 which we learned back in middle school mathematics 582 00:32:34.434 --> 00:32:36.784 This is the Sine value we are referring to here 583 00:32:36.784 --> 00:32:39.734 If we graph this 584 00:32:39.734 --> 00:32:44.934 no matter what value is input along the X-axis 585 00:32:44.934 --> 00:32:49.684 the output will range from 1 to -1 586 00:32:49.684 --> 00:32:54.584 Starting from zero, the value increases to 1 587 00:32:54.584 --> 00:32:57.984 then decreases and returns 588 00:32:57.984 --> 00:33:03.284 creating a periodic Sine wave 589 00:33:03.284 --> 00:33:05.534 You might recall from school 590 00:33:05.534 --> 00:33:09.034 that the point where the graph reaches 1 is at pi/2 591 00:33:09.034 --> 00:33:12.234 the point where it returns to 0 is pi 592 00:33:12.234 --> 00:33:15.634 the point where it reaches -1 is at 3/4pi 593 00:33:15.634 --> 00:33:20.184 and it returns to 0 again at 2pi 594 00:33:20.184 --> 00:33:23.484 This periodic behavior of the Sine function 595 00:33:23.484 --> 00:33:28.534 known as a full cycle, is also why the circumference of a circle is referred to as 2pi 596 00:33:28.534 --> 00:33:32.134 No matter what value we input, 100, 1000, or any other 597 00:33:32.134 --> 00:33:34.284 it will still behave in a cyclical manner based on 2pi 598 00:33:34.284 --> 00:33:37.584 and we call this one period 599 00:33:37.584 --> 00:33:41.034 To demonstrate this 600 00:33:41.034 --> 00:33:45.934 we connect the Sine function directly to Opacity 601 00:33:45.934 --> 00:33:48.384 and use a Constant node 602 00:33:48.384 --> 00:33:50.534 This is for illustrative purposes 603 00:33:50.534 --> 00:33:52.734 so there’s no need for you to replicate it at this stage 604 00:33:52.734 --> 00:33:57.434 According to this graph, if you input 0, it will remain 0 605 00:33:57.434 --> 00:33:59.434 which means nothing will be visible 606 00:33:59.434 --> 00:34:03.184 If you want the output to reverse, you would think 607 00:34:03.184 --> 00:34:08.134 that inputting pi/2, which is 1.07 608 00:34:08.134 --> 00:34:11.734 would result in a value of 1 609 00:34:11.734 --> 00:34:16.584 However, take a close look here 610 00:34:16.584 --> 00:34:21.535 When you input 1.07, the value still appears to be outputting 611 00:34:21.535 --> 00:34:25.635 Similarly, when you input pi 612 00:34:25.635 --> 00:34:28.235 you might think it should appear 613 00:34:28.235 --> 00:34:36.235 Values like 1.07, 3.14, or 6.28 614 00:34:36.235 --> 00:34:39.185 will still result in visible output 615 00:34:39.185 --> 00:34:42.535 However, the actual value that outputs 1 is 0.25 616 00:34:42.535 --> 00:34:44.885 If you input 0.5, the output will be 0 617 00:34:44.885 --> 00:34:48.535 and if you input 0.75, it will be -1, which doesn’t appear 618 00:34:48.535 --> 00:34:50.685 If you input 1, it will result in 0 619 00:34:50.685 --> 00:34:54.285 When you input 1.07 620 00:34:54.285 --> 00:34:56.985 although it's not exactly 1 621 00:34:56.985 --> 00:35:01.035 it still appears somewhat translucent, meaning some output is visible 622 00:35:01.035 --> 00:35:04.285 This is how you might have learned 623 00:35:04.285 --> 00:35:06.985 the Sine graph in math class 624 00:35:06.985 --> 00:35:10.485 with each key value memorized 625 00:35:10.485 --> 00:35:13.385 But in Unreal, it works slightly differently 626 00:35:13.385 --> 00:35:15.685 Unreal interprets this as one complete cycle 627 00:35:15.685 --> 00:35:22.185 dividing it into 1/4, 1/2, 3/4 628 00:35:22.185 --> 00:35:25.785 and full cycle points 629 00:35:25.785 --> 00:35:28.235 something like that 630 00:35:28.235 --> 00:35:31.935 So when I input values like 0.25 631 00:35:31.935 --> 00:35:36.385 0.5, 0.75, and 1 632 00:35:36.385 --> 00:35:41.185 when you input 1.07 633 00:35:41.185 --> 00:35:46.285 1.07 is like a full cycle, so it returns to the same value 634 00:35:46.285 --> 00:35:49.135 which will be around here 635 00:35:49.135 --> 00:35:50.935 That's why it was visible 636 00:35:50.935 --> 00:35:53.785 The Sine value in Unreal 637 00:35:53.785 --> 00:35:55.835 works like this 638 00:35:55.835 --> 00:36:00.785 It interprets input based on this cycle 639 00:36:00.785 --> 00:36:05.385 The input values from -1 to 1 640 00:36:05.385 --> 00:36:07.185 multiplied by 5 641 00:36:07.185 --> 00:36:10.935 Since the lineFreq value was multiplied by 5 642 00:36:10.935 --> 00:36:14.135 the range of values now spans from -5 to 5 643 00:36:14.135 --> 00:36:15.785 This multiplication 644 00:36:15.785 --> 00:36:19.385 results in a total of 10 cycles 645 00:36:19.385 --> 00:36:25.735 Starting from -5 and moving through to 4 and then 5 646 00:36:25.735 --> 00:36:28.235 the total of 10 cycles is calculated 647 00:36:28.235 --> 00:36:33.185 Thus, the value you input for lineFreq 648 00:36:33.185 --> 00:36:37.835 essentially determines how many stripes will be created 649 00:36:37.835 --> 00:36:40.235 After reconnecting this value to the Sine node 650 00:36:40.235 --> 00:36:42.385 and removing the Constant node 651 00:36:42.385 --> 00:36:45.535 you can see that, with a value of 5 652 00:36:45.535 --> 00:36:56.535 there are exactly 10 stripes created 653 00:36:56.535 --> 00:36:59.285 However, just having these static stripes 654 00:36:59.285 --> 00:37:03.085 isn’t sufficient, because they need to move 655 00:37:03.085 --> 00:37:05.185 They need to move 656 00:37:05.185 --> 00:37:08.385 Let's use Add node connected 657 00:37:08.385 --> 00:37:10.285 to the Sine node 658 00:37:10.285 --> 00:37:14.835 To enable continuous motion 659 00:37:14.835 --> 00:37:16.835 which means 660 00:37:16.835 --> 00:37:19.885 that the time should pass 661 00:37:19.885 --> 00:37:23.635 So let's connect the Time node to the Add node 662 00:37:23.635 --> 00:37:26.035 So as you see 663 00:37:26.035 --> 00:37:30.035 The stripes moving dynamically in the graph 664 00:37:30.035 --> 00:37:32.885 So the stripes already exist 665 00:37:32.885 --> 00:37:35.985 but the range that's visible 666 00:37:35.985 --> 00:37:40.085 is this entire range that is displayed 667 00:37:40.085 --> 00:37:43.785 So over time, this whole range 668 00:37:43.785 --> 00:37:46.535 moves to a certain direction like so 669 00:37:46.535 --> 00:37:52.435 It's moving continuously, showing the next set of stripes 670 00:37:52.435 --> 00:37:56.386 And these movements are what we're seeing 671 00:37:56.386 --> 00:37:58.086 That's one way of seeing this 672 00:37:58.086 --> 00:38:00.086 Alternatively, you can think of it 673 00:38:00.086 --> 00:38:02.986 as the sphere remaining stationary while the stripe pattern 674 00:38:02.986 --> 00:38:06.636 itself shifts due to Add node 675 00:38:06.636 --> 00:38:09.286 Either way, the end result remains the same 676 00:38:09.286 --> 00:38:11.936 The Time node itself can also be modified 677 00:38:11.936 --> 00:38:15.236 By connecting the Time node to a Multiply node 678 00:38:15.236 --> 00:38:19.386 the default time value, which is measured in seconds 679 00:38:19.386 --> 00:38:21.436 can be adjusted with Multiply 680 00:38:21.436 --> 00:38:24.136 If the multiplier is set to 1, the animation will progress at its normal speed 681 00:38:24.136 --> 00:38:27.836 moving by a certain unit per second 682 00:38:27.836 --> 00:38:30.186 Setting the multiplier to 5 683 00:38:30.186 --> 00:38:33.386 will speed up the animation fivefold 684 00:38:33.386 --> 00:38:37.836 while a value of 0.3 will slow it down to 30% of its original speed 685 00:38:37.836 --> 00:38:42.136 This Multiply node is connected 686 00:38:42.136 --> 00:38:44.086 as a ScalarParameter 687 00:38:44.086 --> 00:38:46.786 named Time Scale 688 00:38:46.786 --> 00:38:50.636 with a default value of 1 689 00:38:50.636 --> 00:38:54.936 This setup can then be integrated into the Remap node 690 00:38:54.936 --> 00:38:56.736 which eventually feeds into the Opacity parameter 691 00:38:56.736 --> 00:39:00.686 Conveniently, both the Dot and Sine nodes 692 00:39:00.686 --> 00:39:04.986 produce output values ranging from -1 to 1 693 00:39:04.986 --> 00:39:07.536 So how do we do this? 694 00:39:07.536 --> 00:39:11.836 By using the Remap node, these values are transformed 695 00:39:11.836 --> 00:39:15.636 into a range of 0 to 1, which is then connected to Opacity 696 00:39:15.636 --> 00:39:18.586 The Remap node, which has been created at this stage 697 00:39:18.586 --> 00:39:23.886 is connected to the output of the Saturate, Fresnel 698 00:39:23.886 --> 00:39:29.036 and Depth Fade nodes via an Add node 699 00:39:29.036 --> 00:39:34.186 I've explained the principle of the Add node, so I'll skip it 700 00:39:34.186 --> 00:39:38.236 Once everything is combined 701 00:39:38.236 --> 00:39:40.886 and connected back to Opacity 702 00:39:40.886 --> 00:39:45.986 the resulting pattern appears too thick, obscuring the original shape 703 00:39:45.986 --> 00:39:49.336 To adjust the thickness of the stripes 704 00:39:49.336 --> 00:39:53.136 the output of the Remap node is passed through a Multiply node 705 00:39:53.136 --> 00:39:58.736 For example, setting the multiplier to 0.5 706 00:39:58.736 --> 00:40:01.036 will reduce the clarity of the lines to 50% 707 00:40:01.036 --> 00:40:05.036 A value of 0.3 will make them 708 00:40:05.036 --> 00:40:07.536 even less pronounced, like this 709 00:40:07.536 --> 00:40:10.586 Additionally, in between here 710 00:40:10.586 --> 00:40:13.936 a Power node can be introduced 711 00:40:13.936 --> 00:40:17.836 to refine the thickness of the stripes further 712 00:40:17.836 --> 00:40:20.436 See how the thickness has changed? 713 00:40:20.436 --> 00:40:24.136 By manipulating the exponent value, such as 1 and 5 714 00:40:24.136 --> 00:40:28.436 the line thickness can be adjusted, resulting in much thinner stripes 715 00:40:28.436 --> 00:40:31.936 Through this process 716 00:40:31.936 --> 00:40:34.686 you can create more dynamic 717 00:40:34.686 --> 00:40:38.486 and diverse effects when designing energy shields 718 00:40:38.486 --> 00:40:41.036 Using the Power node for line thickness and 719 00:40:41.036 --> 00:40:44.336 the Multiply node for transparency 720 00:40:44.336 --> 00:40:47.386 can both be parameterized for flexibility 721 00:40:47.386 --> 00:40:51.336 The thickness from the Power node can be extracted 722 00:40:51.336 --> 00:40:55.686 as a ScalarParameter named lineWidth 723 00:40:55.686 --> 00:40:59.186 with a default value set to 2 for thinner lines 724 00:40:59.186 --> 00:41:02.536 It can be either 1.2 or even 0 725 00:41:02.536 --> 00:41:06.386 which creates band-like visuals like this 726 00:41:06.386 --> 00:41:09.886 Similarly, the Multiply value from the Remap output 727 00:41:09.886 --> 00:41:16.686 can be extracted as another ScalarParameter named lineOp 728 00:41:16.686 --> 00:41:21.136 with a such as the default value of 0.3 729 00:41:21.136 --> 00:41:25.636 The completed effect can be instantiated 730 00:41:25.636 --> 00:41:28.936 to ensure dynamic adjustments 731 00:41:28.936 --> 00:41:31.436 in the world, which we'll try right now 732 00:41:31.436 --> 00:41:35.087 Open the instance, and let's see it here 733 00:41:35.087 --> 00:41:36.587 It's moving like this 734 00:41:36.587 --> 00:41:39.287 We're using parameters for this 735 00:41:39.287 --> 00:41:43.287 Let's apply the instance to the sphere 736 00:41:43.287 --> 00:41:46.887 Drag and see, to this sphere 737 00:41:46.887 --> 00:41:49.937 make sure the parameters are well connected 738 00:41:49.937 --> 00:41:52.887 And over here at this parameter 739 00:41:52.887 --> 00:41:57.787 The thickness of Depth Fade and Fresnel seems similar 740 00:41:57.787 --> 00:42:00.737 but the line is too thick 741 00:42:00.737 --> 00:42:04.637 So go to lineWidth 742 00:42:04.637 --> 00:42:09.937 increase the exponent value of lineWidth 743 00:42:09.937 --> 00:42:11.987 This will make it thinner 744 00:42:11.987 --> 00:42:16.737 now visually consistent with Depth Fade 745 00:42:16.737 --> 00:42:18.437 You can also modify the Time Scale parameter 746 00:42:18.437 --> 00:42:21.237 to adjust the speed of motion 747 00:42:21.237 --> 00:42:23.037 Four times is too fast 748 00:42:23.037 --> 00:42:25.287 Let's just do 2 749 00:42:25.287 --> 00:42:27.487 It can move twice as faster 750 00:42:27.487 --> 00:42:28.887 The Direction parameter 751 00:42:28.887 --> 00:42:31.187 Let's apply negative values to red 752 00:42:31.187 --> 00:42:33.287 This allows for adjustments such as reversing directions 753 00:42:33.287 --> 00:42:35.837 You can add red to this too 754 00:42:35.837 --> 00:42:37.637 Parameters like Inner Color 755 00:42:37.637 --> 00:42:43.387 and Side Color can be adjusted dynamically, let's use orange 756 00:42:43.387 --> 00:42:49.337 Let's brightening it further by setting values above 1 757 00:42:49.337 --> 00:42:53.287 such as red 8 or blue 0.2 758 00:42:53.287 --> 00:42:55.987 Now this will look brighter 759 00:42:55.987 --> 00:42:57.637 These customizable parameters 760 00:42:57.637 --> 00:43:00.687 allow you to fine-tune the visuals based on the object’s size 761 00:43:00.687 --> 00:43:02.737 and other contextual requirements 762 00:43:02.737 --> 00:43:05.887 Understanding the purpose of each parameter 763 00:43:05.887 --> 00:43:11.037 and how they interact is crucial for accurate 764 00:43:11.037 --> 00:43:13.437 and effective shader customization 765 00:43:13.437 --> 00:43:16.837 In this lesson, we explored the principles of translucent shaders 766 00:43:16.837 --> 00:43:20.687 which allowed us to understand the rendering mechanism 767 00:43:20.687 --> 00:43:23.287 We also learned about the visualization techniques 768 00:43:23.287 --> 00:43:25.837 and time-based movements 769 00:43:25.837 --> 00:43:30.687 This approach differs significantly from traditional PBR shaders 770 00:43:31.787 --> 00:43:34.787 While achieving visually diverse effects 771 00:43:34.787 --> 00:43:37.637 requires some mathematical understanding 772 00:43:37.637 --> 00:43:40.187 But it's not too difficult 773 00:43:40.187 --> 00:43:42.987 The process has been simplified 774 00:43:42.987 --> 00:43:47.437 thanks to Unreal Engine’s Material Editor 775 00:43:47.437 --> 00:43:50.537 making complex functionality accessible and intuitive 776 00:43:50.887 --> 00:43:53.937 Don’t let the mathematical aspect intimidate you 777 00:43:53.937 --> 00:43:58.637 You can improve yourselves by practicing different effects 778 00:43:58.637 --> 00:44:03.237 Let's summarize what we've learned today and call it a day 779 00:44:03.237 --> 00:44:04.437 Thank you 780 00:44:04.987 --> 00:44:05.487 Fresnel and Depth Fade 781 00:44:05.487 --> 00:44:06.087 Material Setup: Create an EnergyShield folder in the content folder Generate the M_EnergyShield material 782 00:44:06.087 --> 00:44:06.637 Set to Translucent to enable transparency 783 00:44:06.637 --> 00:44:07.187 Fresnel Effect: Outputs values between 0 and 1 by comparing the camera view angle and the vertex normal vector 784 00:44:07.187 --> 00:44:07.737 Lerp Configuration: A: 0.3, B: 1, Alpha: Connect the Fresnel value, then link to Opacity 785 00:44:07.737 --> 00:44:08.287 When the preview is set to a sphere, the center will have 30% transparency, and the edges will be 100% 786 00:44:08.287 --> 00:44:08.837 Depth Fade Visualizes boundaries where 3D objects meet 787 00:44:08.837 --> 00:44:09.387 Processes with OneMinus, and adds to Fresnel 788 00:44:09.387 --> 00:44:09.987 Apply Saturate to the added result and connect to Lerp Alpha 789 00:44:09.987 --> 00:44:11.237 Emissive Parameters Configure Lerp A: Inner Color and B: Side Color 790 00:44:11.237 --> 00:44:12.487 Opacity Lerp A: InnerOp and B: SideOp 791 00:44:12.487 --> 00:44:13.737 Fresnel Exponent: FresnelExp 792 00:44:13.737 --> 00:44:14.987 Depthfade FadeDistance: FadeDist 793 00:44:14.987 --> 00:44:15.487 Position Visualization Normalize the Absolute World Position values 794 00:44:15.487 --> 00:44:15.987 Vector Parameter Create a Direction parameter and normalize it 795 00:44:15.987 --> 00:44:16.487 Dot Node Connect A: the normalized World Position and B: the normalized Direction 796 00:44:16.487 --> 00:44:16.987 Create a RemapValueRangeNormalized node 797 00:44:16.987 --> 00:44:17.487 set Input Low: Constant(-1) and Input High: Constant(1) 798 00:44:17.487 --> 00:44:17.987 Create Multiply Node, Connect A: the Dot result and B: the ScalarParameter lineFreq 799 00:44:17.987 --> 00:44:18.487 Create Sine Node, Input the Multiply result into Sine and connect its output to the Remap Input 800 00:44:18.487 --> 00:44:18.987 Create Time and Multiply, Create Multiply, A: Time node, and B: ScalarParameter TimeScale 801 00:44:18.987 --> 00:44:19.487 Create Add, Input A: the lineFreq multiplication result and B: the Time multiplication result, and link to Sine 802 00:44:19.487 --> 00:44:19.987 Create Power, Configure Base: Sine and Exp: ScalarParameter(linewidth, 1) 803 00:44:19.987 --> 00:44:20.487 Remap result and B: ScalarParameter lineOp (line thickness) 804 00:44:20.487 --> 00:44:20.987 Create Multiply, Connect A to the Remap Result, and B to a ScalarParameter(lineOp, 0.3) (line transparency) 805 00:44:20.987 --> 00:44:21.487 Create Add, Connect A to the combined result of Fresnel and Depth Fade, and B : lineOp 806 00:44:21.487 --> 00:44:21.987 Link the output of the Add node to the Saturate node