WEBVTT

1
00:00:02.321 --> 00:00:03.221
Realistic

2
00:00:04.468 --> 00:00:09.067
Realistic Integrated
Creating Terrain Effects

3
00:00:23.719 --> 00:00:25.840
Hello, this is Park Hyun Sang

4
00:00:25.840 --> 00:00:28.760
This Shader VFX lecture

5
00:00:28.760 --> 00:00:32.200
will focus on the Unreal Material Editor

6
00:00:32.200 --> 00:00:36.000
Shaders and VFX are interdependent

7
00:00:36.000 --> 00:00:40.080
and essential for creating seamless visual effects

8
00:00:40.080 --> 00:00:42.480
The examples in this lecture

9
00:00:42.480 --> 00:00:46.480
are designed to intentionally overlap

10
00:00:46.480 --> 00:00:48.720
the previous Unreal VFX course

11
00:00:48.720 --> 00:00:50.880
It ensures continuous

12
00:00:50.880 --> 00:00:54.459
and efficient learning by reinforcing key concepts

13
00:00:55.119 --> 00:00:59.520
Some of you may find the material repetitive

14
00:00:59.520 --> 00:01:05.619
But let's focus on how identical data can be applied to achieve different effects

15
00:01:06.239 --> 00:01:07.480
For our first lecture

16
00:01:07.480 --> 00:01:12.440
we will depict a surface where water gradually rises from dry ground

17
00:01:12.440 --> 00:01:15.199
The goal is to explore

18
00:01:15.199 --> 00:01:17.279
how the shader programming process

19
00:01:17.279 --> 00:01:23.380
can visually convey the transition from dry to wet conditions

20
00:01:23.380 --> 00:01:26.760
Additionally, we’ll learn how to simulate

21
00:01:26.760 --> 00:01:32.279
the visual effect of water rising from the bottom

22
00:01:32.279 --> 00:01:36.720
and investigate the types of data required

23
00:01:36.720 --> 00:01:38.400
for such an effect

24
00:01:38.402 --> 00:01:42.461
Creating the WetFloor Material

25
00:01:42.461 --> 00:01:44.480
Before starting

26
00:01:44.480 --> 00:01:48.239
let’s set up the project environment

27
00:01:48.239 --> 00:01:51.519
We’re using Unreal Engine version 5.4.4

28
00:01:51.519 --> 00:01:54.599
and we’ll begin by creating a new project

29
00:01:54.599 --> 00:01:57.320
Launch the Unreal Editor

30
00:01:57.320 --> 00:01:59.959
Today is not just about

31
00:01:59.959 --> 00:02:02.080
material, shader

32
00:02:02.080 --> 00:02:04.360
or effect creation

33
00:02:04.360 --> 00:02:09.000
We will be looking at how they interact

34
00:02:09.000 --> 00:02:11.960
with each other in practical examples

35
00:02:11.960 --> 00:02:16.520
Choose the GAMES template

36
00:02:16.520 --> 00:02:18.440
From there, select the Third Person template

37
00:02:18.440 --> 00:02:24.119
with Blueprint, Desktop/Maximum, and Starter Content

38
00:02:24.119 --> 00:02:29.960
Name the project SHADERnVFX

39
00:02:29.960 --> 00:02:34.360
Capitalize SHADER for the project name

40
00:02:34.360 --> 00:02:36.199
and click Create

41
00:02:36.199 --> 00:02:38.199
Once the project has been created

42
00:02:38.199 --> 00:02:41.320
navigate to the Content folder

43
00:02:41.320 --> 00:02:42.800
and create a new folder

44
00:02:42.800 --> 00:02:46.320
Name the folder WetFlow

45
00:02:46.320 --> 00:02:48.600
Within this folder, create a new material

46
00:02:48.600 --> 00:02:52.559
and name it M_WetFloor

47
00:02:52.559 --> 00:02:54.639
Open the material editor

48
00:02:54.639 --> 00:02:56.360
Our objective here is

49
00:02:56.360 --> 00:02:59.800
to work with tiled maps

50
00:02:59.800 --> 00:03:04.600
while integrating concepts like color mixing

51
00:03:04.600 --> 00:03:08.960
Start by adding a Texture Sample node

52
00:03:08.960 --> 00:03:12.680
and selecting the Cobblestone texture

53
00:03:12.680 --> 00:03:15.279
For now, get the diffuse map

54
00:03:15.279 --> 00:03:18.559
I’ll start by connecting this to the base color

55
00:03:18.559 --> 00:03:20.080
The texture on a flat surface

56
00:03:20.080 --> 00:03:24.919
shows us the image exactly as it is

57
00:03:24.919 --> 00:03:29.199
Now, let’s apply a common technique in shaders

58
00:03:29.199 --> 00:03:31.759
which is Multiply operation

59
00:03:31.759 --> 00:03:33.299
when we think of something

60
00:03:33.300 --> 00:03:35.040
as soaked with water

61
00:03:35.040 --> 00:03:39.759
we often associate it with the color appearing darker

62
00:03:39.759 --> 00:03:43.000
Usually, in real life

63
00:03:43.000 --> 00:03:46.019
when objects get wet

64
00:03:46.020 --> 00:03:48.000
their colors typically darken

65
00:03:48.000 --> 00:03:49.679
This happens because

66
00:03:49.679 --> 00:03:54.160
of how light interacts with the surface, which I'll draw here

67
00:03:54.160 --> 00:03:54.960
It's the ground

68
00:03:54.960 --> 00:03:59.000
where stones are embedded unevenly

69
00:03:59.000 --> 00:04:00.240
creating a rough surface like this

70
00:04:00.240 --> 00:04:03.000
These rocks

71
00:04:03.000 --> 00:04:07.440
have jagged surfaces

72
00:04:07.440 --> 00:04:11.359
which scatter light

73
00:04:11.359 --> 00:04:14.960
in all directions when it hits them

74
00:04:14.960 --> 00:04:18.279
We call this diffuse reflection

75
00:04:18.279 --> 00:04:22.480
The term diffuse reflects this concept

76
00:04:22.480 --> 00:04:25.799
That's why the texture

77
00:04:25.799 --> 00:04:29.760
we’re using here is named Cobblestone_D

78
00:04:29.760 --> 00:04:32.079
That D comes from diffuse

79
00:04:32.079 --> 00:04:36.160
Let's use blue here

80
00:04:36.160 --> 00:04:37.720
When water is added

81
00:04:37.720 --> 00:04:41.119
it forms a thin layer on the surface

82
00:04:41.119 --> 00:04:45.160
reducing the scattering effect

83
00:04:45.160 --> 00:04:49.399
The water absorbs or redirects it

84
00:04:49.399 --> 00:04:54.000
This leaves less light reflected back to our eyes

85
00:04:54.000 --> 00:04:57.399
It makes the object appear darker

86
00:04:57.399 --> 00:05:01.860
Normally, scattered light reaches our eyes

87
00:05:01.860 --> 00:05:03.720
and allows us to perceive the color

88
00:05:03.720 --> 00:05:06.119
but with less light coming through

89
00:05:06.119 --> 00:05:10.359
the object looks literally darker

90
00:05:10.359 --> 00:05:13.440
By applying a Multiply operation

91
00:05:13.440 --> 00:05:18.880
we can replicate wet texture

92
00:05:18.880 --> 00:05:23.000
To understand Multiply further, let’s break it down

93
00:05:23.000 --> 00:05:28.720
Assume the Red, Green, and Blue channels

94
00:05:28.720 --> 00:05:34.200
of a texture have values of 0.5, 0.2, and 0.1, respectively

95
00:05:34.200 --> 00:05:38.279
If we multiply these values by themselves

96
00:05:38.279 --> 00:05:40.839
0.5 multiplied by 0.5, 0.2 by 0.2, and 0.1 by 0.1

97
00:05:40.839 --> 00:05:44.480
the result is 0.25 for Red

98
00:05:44.480 --> 00:05:47.440
0.04 for Green

99
00:05:47.440 --> 00:05:53.799
and 0.01 for Blue, so the values decrease

100
00:05:53.799 --> 00:05:56.359
Or another way to put this is

101
00:05:56.359 --> 00:05:58.600
the value for Red channel

102
00:05:58.601 --> 00:06:00.081
the original value

103
00:06:00.081 --> 00:06:03.160
let's say this is value A and value B

104
00:06:03.160 --> 00:06:06.040
These A and B are connected

105
00:06:06.040 --> 00:06:08.519
So A is 0.5

106
00:06:08.520 --> 00:06:10.560
which is 50%

107
00:06:10.560 --> 00:06:15.320
Whatever is the value for Green, it reduces by the same amount

108
00:06:15.320 --> 00:06:18.880
So according to this, it's 20%

109
00:06:18.880 --> 00:06:22.440
And for Blue, only 10%

110
00:06:22.440 --> 00:06:26.160
The greater the decrease in value

111
00:06:26.160 --> 00:06:29.519
the more significant the darkening effect becomes

112
00:06:29.519 --> 00:06:34.160
When the Red, Green, and Blue values are all at 1, or white

113
00:06:34.160 --> 00:06:35.640
what is happening here?

114
00:06:35.640 --> 00:06:37.519
It is getting closer to 0

115
00:06:37.519 --> 00:06:41.920
This means it's getting closer to being black

116
00:06:41.920 --> 00:06:44.920
If the Red channel decreases slightly

117
00:06:44.920 --> 00:06:48.559
but the Blue channel decreases significantly

118
00:06:48.559 --> 00:06:54.079
the texture will appear deeper

119
00:06:54.079 --> 00:06:57.679
or more saturated with red tones

120
00:06:57.679 --> 00:07:00.720
If the Blue channel were the highest value

121
00:07:00.720 --> 00:07:05.000
of Red, Green, and Blue channels

122
00:07:05.000 --> 00:07:09.519
the texture would appear more prominently blue

123
00:07:09.519 --> 00:07:14.320
This illustrates how the Multiply function works

124
00:07:14.320 --> 00:07:18.640
Multiply can also be used in grayscale textures

125
00:07:18.640 --> 00:07:22.160
But when applied uniformly to color values

126
00:07:22.160 --> 00:07:23.760
it effectively squares each channel

127
00:07:23.760 --> 00:07:26.399
making the texture appear

128
00:07:26.399 --> 00:07:29.959
darker and more saturated

129
00:07:29.959 --> 00:07:33.760
which resembles the wet texture

130
00:07:33.760 --> 00:07:36.539
Now, let’s define two states

131
00:07:36.539 --> 00:07:39.119
One representing the original dry ground

132
00:07:39.119 --> 00:07:44.000
labeled as A or Dry

133
00:07:44.000 --> 00:07:48.959
and B representing the wet ground

134
00:07:48.959 --> 00:07:51.600
This is clear enough, I hope

135
00:07:51.600 --> 00:07:56.559
Now let's make these conditions coexist

136
00:07:56.559 --> 00:07:59.799
We aim to show parts of the texture as dry A

137
00:07:59.799 --> 00:08:01.239
and others as wet B

138
00:08:01.239 --> 00:08:03.738
so that they coexist

139
00:08:03.738 --> 00:08:06.000
To achieve this, we use a node

140
00:08:06.000 --> 00:08:08.779
called Linear Interpolate

141
00:08:08.779 --> 00:08:13.679
often referred to as Lerp

142
00:08:13.679 --> 00:08:16.819
We assign the Dry texture to A

143
00:08:16.820 --> 00:08:20.460
and the Wet texture to B

144
00:08:20.460 --> 00:08:22.760
When connected directly to the base color

145
00:08:22.760 --> 00:08:24.600
there’s no visible change

146
00:08:24.600 --> 00:08:28.679
To make this clearer

147
00:08:28.679 --> 00:08:31.440
let’s introduce an additional texture

148
00:08:31.440 --> 00:08:34.960
We’ll bring in a Texture Sample node

149
00:08:34.960 --> 00:08:38.719
and load a Noise Texture

150
00:08:38.719 --> 00:08:41.679
specifically Noise_01

151
00:08:41.679 --> 00:08:43.400
That's a Noise Texture

152
00:08:43.400 --> 00:08:48.440
Since this is a grayscale image

153
00:08:48.440 --> 00:08:50.919
any of the Red, Green, or Blue channels are identical

154
00:08:50.919 --> 00:08:55.479
Let's just use the closest Red value

155
00:08:55.479 --> 00:08:58.420
It has a blotchy appearance

156
00:08:58.420 --> 00:08:59.680
but not too clearly

157
00:08:59.799 --> 00:09:04.679
Now, use a Step node with the noise image

158
00:09:04.679 --> 00:09:07.119
Connect the Red channel to the X

159
00:09:07.119 --> 00:09:09.660
For Y, press Alt

160
00:09:09.660 --> 00:09:12.439
to disconnect any connections

161
00:09:12.440 --> 00:09:15.320
and set it to 0.5

162
00:09:15.399 --> 00:09:18.840
So it is between 0 and 1, or black and white

163
00:09:18.840 --> 00:09:24.000
In this grayscale range, below 0.5 is black

164
00:09:24.000 --> 00:09:27.440
and above 0.5 is white

165
00:09:27.440 --> 00:09:29.680
Like this, black and white

166
00:09:29.681 --> 00:09:32.040
It's a split into two images

167
00:09:32.260 --> 00:09:35.799
We still see some blotchy areas

168
00:09:35.799 --> 00:09:41.400
If you’d like to emphasize the black areas further

169
00:09:41.400 --> 00:09:44.719
lower the Y value to 0.3

170
00:09:44.719 --> 00:09:48.199
o that 30% of the grayscale values turn black

171
00:09:48.199 --> 00:09:50.880
and the rest remain white

172
00:09:50.880 --> 00:09:52.520
So we get more areas

173
00:09:52.520 --> 00:09:55.440
Similarly, setting it to 0.25

174
00:09:55.440 --> 00:09:58.960
will expand the black regions further

175
00:09:58.960 --> 00:10:01.919
You can also experiment with different noise textures

176
00:10:01.919 --> 00:10:05.060
You can experiment

177
00:10:05.060 --> 00:10:09.080
with Perlin noise textures as well

178
00:10:09.080 --> 00:10:10.919
to customize it

179
00:10:10.919 --> 00:10:17.080
Just make sure to adjust the Step threshold

180
00:10:17.080 --> 00:10:19.599
You could do this

181
00:10:19.599 --> 00:10:23.359
Using Lerp, we’ve mixed the colors effectively

182
00:10:23.359 --> 00:10:26.280
The Lerp function essentially

183
00:10:26.280 --> 00:10:29.400
blends A for black

184
00:10:29.400 --> 00:10:33.080
and B for white based on the alpha value

185
00:10:33.080 --> 00:10:35.479
Imagine a container

186
00:10:35.479 --> 00:10:37.039
that can hypothetically

187
00:10:37.039 --> 00:10:39.159
contain all the colors

188
00:10:39.159 --> 00:10:41.520
Partially fill it with A

189
00:10:41.521 --> 00:10:43.621
Like so, this is A

190
00:10:43.621 --> 00:10:45.000
So this much is empty

191
00:10:45.000 --> 00:10:50.200
Then it fills in B for the leftover space

192
00:10:50.200 --> 00:10:53.880
This is called linear interpolation

193
00:10:53.880 --> 00:10:56.799
Based on the value between 0 and 1

194
00:10:56.799 --> 00:10:59.880
For example, let's remove this

195
00:10:59.880 --> 00:11:02.479
Type in 0.3

196
00:11:02.479 --> 00:11:06.840
And 0, and we get a value closer to A

197
00:11:06.840 --> 00:11:10.840
And with 1, we get the B image

198
00:11:10.840 --> 00:11:14.119
Of course, something closer to B, like 0.7

199
00:11:14.119 --> 00:11:17.359
will mix more of B

200
00:11:17.359 --> 00:11:20.960
So for an alpha value like this

201
00:11:20.960 --> 00:11:25.080
you can think of it as the proportion for B

202
00:11:25.080 --> 00:11:29.479
The percentage of B included in the overall blend

203
00:11:29.479 --> 00:11:33.359
So 07. is 70%

204
00:11:33.359 --> 00:11:35.280
In an image

205
00:11:35.280 --> 00:11:38.799
1 is white and 0 is black

206
00:11:38.799 --> 00:11:42.400
So making it into an image

207
00:11:42.401 --> 00:11:45.362
instead of number values

208
00:11:45.362 --> 00:11:49.779
will determine the areas for black and white

209
00:11:49.779 --> 00:11:53.000
to show different images

210
00:11:53.000 --> 00:11:58.039
Let's connect the output of the Step node to the alpha input

211
00:11:58.039 --> 00:12:02.559
Next, we duplicate the Lerp node

212
00:12:02.559 --> 00:12:04.400
keeping the alpha connection intact

213
00:12:04.400 --> 00:12:07.599
For the dry state A

214
00:12:07.599 --> 00:12:09.880
the Roughness value is set to 1

215
00:12:09.880 --> 00:12:11.479
representing a very rough surface

216
00:12:11.479 --> 00:12:15.479
To illustrate this, I’ll use the sphere preview

217
00:12:15.479 --> 00:12:18.479
to explain how light interacts with the material

218
00:12:18.479 --> 00:12:21.320
When the Roughness is 1

219
00:12:21.320 --> 00:12:24.159
the surface scatters light diffusely

220
00:12:24.159 --> 00:12:26.320
giving it a coarse texture

221
00:12:26.320 --> 00:12:29.200
When Roughness is 0

222
00:12:29.200 --> 00:12:35.179
the surface becomes smooth, reflecting light sharply

223
00:12:35.179 --> 00:12:38.479
and appearing highly polished

224
00:12:38.479 --> 00:12:41.200
This may confuse you a little

225
00:12:41.200 --> 00:12:45.919
Here, A has a Roughness value close to 1

226
00:12:45.919 --> 00:12:49.320
which is very dry in general

227
00:12:49.320 --> 00:12:54.199
The wet state B has a Roughness value of 0

228
00:12:54.199 --> 00:12:57.559
which is very smooth

229
00:12:57.559 --> 00:13:00.599
Connecting the alpha value

230
00:13:00.599 --> 00:13:02.359
to the roughness input

231
00:13:02.359 --> 00:13:07.820
makes only the darker, wet areas

232
00:13:07.820 --> 00:13:10.200
highly reflective

233
00:13:10.200 --> 00:13:12.219
See how it reflects

234
00:13:12.219 --> 00:13:15.621
only the darker area around it

235
00:13:15.621 --> 00:13:19.641
Creating the Effect of Rising Water

236
00:13:19.760 --> 00:13:25.060
Let's the Normal Map from the Cobblestone Texture

237
00:13:25.060 --> 00:13:28.319
First, add a Texture Sample node

238
00:13:28.599 --> 00:13:31.000
and select this Cobblestone one

239
00:13:31.000 --> 00:13:34.960
and bring in the normal map

240
00:13:34.960 --> 00:13:36.800
When the RGB output

241
00:13:36.801 --> 00:13:41.441
of the texture is connected to the Normal input

242
00:13:41.441 --> 00:13:43.160
the surface now has depth

243
00:13:43.160 --> 00:13:46.039
Let's look at it from a distance

244
00:13:46.039 --> 00:13:49.520
Hold the L key and using the left mouse button

245
00:13:49.520 --> 00:13:52.119
to adjust the light direction

246
00:13:52.119 --> 00:13:57.119
This makes the rock look three-dimensional

247
00:13:57.119 --> 00:14:02.080
Now, let’s create a unique scenario

248
00:14:02.080 --> 00:14:05.400
Imagine water gradually rising

249
00:14:05.400 --> 00:14:08.700
from the bottom of the surface

250
00:14:08.700 --> 00:14:11.320
Revisiting the earlier cross-section

251
00:14:11.320 --> 00:14:17.479
envision a flat ground covered with scattered stones

252
00:14:17.479 --> 00:14:21.839
Picture water starting at the lowest point

253
00:14:21.839 --> 00:14:24.960
and slowly rising to cover the entire surface

254
00:14:24.960 --> 00:14:29.199
At low, mid, and high levels

255
00:14:29.479 --> 00:14:33.000
To accurately portray the physical properties of water

256
00:14:33.000 --> 00:14:35.799
more intricate calculations are required

257
00:14:35.799 --> 00:14:40.799
When considering light reflection or transmission

258
00:14:40.799 --> 00:14:44.760
water is one of the materials that reflects light very effectively

259
00:14:44.760 --> 00:14:47.100
Of course, it depends on the angle of the incoming light

260
00:14:47.280 --> 00:14:49.540
but water typically

261
00:14:49.540 --> 00:14:52.708
creates specular reflection

262
00:14:52.760 --> 00:14:56.159
It reflects light directly back in the incoming direction

263
00:14:56.159 --> 00:15:02.159
So it is slightly elevated compared to the original surface beneath it

264
00:15:02.159 --> 00:15:05.400
For instance, as water rises higher

265
00:15:05.400 --> 00:15:12.159
this orange part will look like the surface

266
00:15:12.159 --> 00:15:14.420
If water rises even higher

267
00:15:14.420 --> 00:15:16.400
than it will also rise up

268
00:15:16.400 --> 00:15:19.720
And at some point, the water

269
00:15:19.720 --> 00:15:24.200
will fill the surface, making it flat

270
00:15:24.200 --> 00:15:28.919
At this point, light no longer interacts with the rocks directly

271
00:15:28.919 --> 00:15:32.619
but reflects off the water’s surface instead

272
00:15:32.619 --> 00:15:36.919
This reduces the sense of depth or texture in the scene

273
00:15:36.919 --> 00:15:43.080
and the normal map will work differently

274
00:15:43.080 --> 00:15:45.179
To achieve this effect

275
00:15:45.179 --> 00:15:49.239
a single normal map is insufficient

276
00:15:49.239 --> 00:15:53.000
Instead, we need to mix multiple normal map effect

277
00:15:53.000 --> 00:15:54.519
So we need to mix

278
00:15:54.739 --> 00:15:56.820
as we did before here

279
00:15:56.820 --> 00:16:00.959
First, we’ll create a flat normal map

280
00:16:01.159 --> 00:16:03.599
Let's begin with a flat normal

281
00:16:03.599 --> 00:16:06.159
Normal maps generally provide

282
00:16:06.159 --> 00:16:11.359
information about the inclination of a surface

283
00:16:11.359 --> 00:16:13.200
but they don’t indicate height

284
00:16:13.200 --> 00:16:16.880
So using a Constant3Vector node

285
00:16:16.880 --> 00:16:20.359
set blue channel to 1

286
00:16:20.359 --> 00:16:25.200
The actual Vector3 value is x, y, 0

287
00:16:25.200 --> 00:16:30.239
The z value is 1, which is the basic normal value

288
00:16:30.239 --> 00:16:32.719
This setup creates the most basic normal value

289
00:16:32.719 --> 00:16:35.760
Thus, to create a flat normal

290
00:16:35.760 --> 00:16:38.119
this orange surface

291
00:16:38.119 --> 00:16:41.579
the blue channel

292
00:16:41.579 --> 00:16:44.440
is set to 1

293
00:16:44.440 --> 00:16:48.119
The length of this vector is

294
00:16:48.119 --> 00:16:50.320
always normalized to 1 unit

295
00:16:50.320 --> 00:16:55.679
If the surface tilts in any direction

296
00:16:55.679 --> 00:16:58.159
the blue channel’s value decreases slightly

297
00:16:58.159 --> 00:17:01.200
while the X and Y channel values increase

298
00:17:01.200 --> 00:17:03.840
resulting in a vector that adjusts

299
00:17:03.840 --> 00:17:06.379
to describe the tilt of the plane

300
00:17:06.379 --> 00:17:09.160
It remains perpendicular to the surface

301
00:17:09.160 --> 00:17:11.839
That's the vector size

302
00:17:11.839 --> 00:17:13.800
with the length of 1

303
00:17:13.800 --> 00:17:16.000
Normal maps work

304
00:17:16.000 --> 00:17:19.800
by lowering the blue channel from its value of 1

305
00:17:19.800 --> 00:17:21.359
The red channel

306
00:17:21.360 --> 00:17:24.149
represents horizontal slopes

307
00:17:24.149 --> 00:17:29.359
while the green channel represents vertical slopes

308
00:17:29.359 --> 00:17:32.599
creating the illusion of depth and three-dimensionality

309
00:17:32.599 --> 00:17:37.359
As a result, tilted surfaces

310
00:17:37.359 --> 00:17:42.520
exhibit more colorful variations

311
00:17:42.520 --> 00:17:48.479
while flat surfaces display uniform blue values

312
00:17:48.479 --> 00:17:51.060
The cobblestone’s original normal map

313
00:17:51.061 --> 00:17:54.171
now represents the dry state or A

314
00:17:54.171 --> 00:17:59.159
The blue vector that we created

315
00:17:59.159 --> 00:18:01.320
is the wet state or B

316
00:18:01.320 --> 00:18:04.160
Now, let's mix these two

317
00:18:04.160 --> 00:18:07.560
When mixing normal maps, it’s crucial

318
00:18:07.560 --> 00:18:12.760
to think of the data as gradients rather than raw numbers

319
00:18:12.760 --> 00:18:13.839
This means

320
00:18:13.839 --> 00:18:16.719
the data in normal maps

321
00:18:16.719 --> 00:18:19.359
the ones going upward

322
00:18:19.359 --> 00:18:22.079
in any slope or angle

323
00:18:22.079 --> 00:18:25.160
are all slopes

324
00:18:25.160 --> 00:18:29.839
If we were to depict these slopes in 3D polygons

325
00:18:29.839 --> 00:18:34.040
we’d require numerous vertices

326
00:18:34.040 --> 00:18:40.280
to accurately model and connect surface details

327
00:18:40.280 --> 00:18:44.459
However, the meshes we typically use

328
00:18:44.459 --> 00:18:46.560
with this flat mesh

329
00:18:46.560 --> 00:18:51.239
Basic mesh is always very flat

330
00:18:51.239 --> 00:18:55.559
To simulate detailed surface variations

331
00:18:55.799 --> 00:18:59.520
the slope information is stored as vector values in pixels

332
00:18:59.520 --> 00:19:03.560
creating the normal map like this

333
00:19:03.560 --> 00:19:08.800
While we’re using RGB texture data here

334
00:19:08.800 --> 00:19:11.719
these values represent

335
00:19:11.719 --> 00:19:17.380
spatial coordinates that include

336
00:19:17.380 --> 00:19:19.047
X, Y, and Z

337
00:19:19.047 --> 00:19:22.900
For mixing normal maps

338
00:19:22.900 --> 00:19:25.199
the red channel encodes horizontal slopes

339
00:19:25.199 --> 00:19:27.879
the green channel encodes vertical slopes

340
00:19:27.879 --> 00:19:29.420
meaning for a flat surface

341
00:19:29.420 --> 00:19:32.359
the information about this slope

342
00:19:32.359 --> 00:19:35.319
The blue channel typically isn’t

343
00:19:35.319 --> 00:19:39.360
directly used for calculations in shaders

344
00:19:39.360 --> 00:19:43.239
The saved information is all according to the vector data

345
00:19:43.239 --> 00:19:46.640
So to make this vector length 1

346
00:19:46.640 --> 00:19:48.160
Red is not enough

347
00:19:48.160 --> 00:19:52.439
So the blue channel holds vector data

348
00:19:52.439 --> 00:19:56.359
that ensures the combined vector’s length equals 1

349
00:19:56.359 --> 00:19:58.880
For our current effect

350
00:19:58.880 --> 00:20:02.160
while the water appears to rise

351
00:20:02.160 --> 00:20:05.479
the  height remains unchanged

352
00:20:05.479 --> 00:20:09.040
When water rises on a flat surface

353
00:20:09.040 --> 00:20:11.439
the sloped vectors

354
00:20:11.439 --> 00:20:13.160
that are in angle

355
00:20:13.161 --> 00:20:18.358
soon align perpendicular to the surface

356
00:20:18.479 --> 00:20:21.479
Thus, for mixing normal maps

357
00:20:21.479 --> 00:20:26.800
the red and green channel data represent the slopes

358
00:20:26.800 --> 00:20:29.239
These values about the slopes

359
00:20:29.239 --> 00:20:34.839
are typically used in the mixing process

360
00:20:34.839 --> 00:20:39.959
To isolate only the red and green values

361
00:20:39.959 --> 00:20:43.640
search for the Component Mask node

362
00:20:43.640 --> 00:20:45.600
Component Mask

363
00:20:45.600 --> 00:20:51.199
This node allows you to extract red and green

364
00:20:51.199 --> 00:20:54.920
In real-time shading

365
00:20:54.920 --> 00:20:58.359
they often only bring in red and green values

366
00:20:58.359 --> 00:21:01.239
So that's the default setting

367
00:21:01.239 --> 00:21:03.760
Apply this mask to both vectors

368
00:21:03.760 --> 00:21:07.400
to retain only their red and green components

369
00:21:07.400 --> 00:21:11.479
One simple mixing method

370
00:21:11.479 --> 00:21:13.359
is Multiply

371
00:21:13.359 --> 00:21:14.560
which multiplies them

372
00:21:14.560 --> 00:21:19.180
However, using a vector of 0, 0, 0 for multiplication

373
00:21:19.180 --> 00:21:21.479
would be ineffective

374
00:21:21.479 --> 00:21:25.199
If you are to do this

375
00:21:25.199 --> 00:21:27.760
to add fine details

376
00:21:27.760 --> 00:21:31.479
to the base normal map,like these textures

377
00:21:31.479 --> 00:21:35.280
adjust the secondary vector slightly

378
00:21:35.280 --> 00:21:39.479
This example demonstrates how Unreal processes

379
00:21:39.479 --> 00:21:41.800
and mixes these vectors

380
00:21:41.800 --> 00:21:43.520
After multiplication

381
00:21:43.520 --> 00:21:46.640
Use Append Vector node

382
00:21:46.640 --> 00:21:49.640
It only has red and green now

383
00:21:49.640 --> 00:21:51.680
So this is Vector2

384
00:21:51.680 --> 00:21:54.800
The multiplied result is also a Vector2

385
00:21:54.820 --> 00:21:56.581
Since normal maps

386
00:21:56.581 --> 00:22:00.316
require a Vector3 with X, Y, and Z

387
00:22:00.316 --> 00:22:01.616
we append the blue channel value

388
00:22:01.616 --> 00:22:04.720
from the original data to complete it

389
00:22:04.720 --> 00:22:06.359
So bring in the blue value

390
00:22:06.359 --> 00:22:08.119
This can be done with Multiply

391
00:22:08.119 --> 00:22:11.439
or Add, which can

392
00:22:11.439 --> 00:22:15.239
mix the two values in different ways

393
00:22:15.239 --> 00:22:17.280
Add or Multiply

394
00:22:17.280 --> 00:22:19.880
this mixes the two values

395
00:22:19.880 --> 00:22:22.100
However, mixing blue values

396
00:22:22.100 --> 00:22:27.119
may make the vector length longer or shorter than 1

397
00:22:27.119 --> 00:22:30.359
So normalize the result

398
00:22:30.359 --> 00:22:34.640
to ensure the final vector’s length is precisely 1

399
00:22:34.640 --> 00:22:38.079
When you integrate the normalized vector into the normal map

400
00:22:38.079 --> 00:22:41.880
you can observe an added layer of finer

401
00:22:41.880 --> 00:22:43.159
rougher detail

402
00:22:43.160 --> 00:22:46.920
like rocks are added

403
00:22:46.920 --> 00:22:49.199
beneath the base stone texture

404
00:22:49.199 --> 00:22:52.160
See how the surface texture differs?

405
00:22:52.160 --> 00:22:55.160
Let's compare it with one that only has normal

406
00:22:55.160 --> 00:22:58.520
Notice the transition to a rougher surface?

407
00:22:58.520 --> 00:23:01.560
This is a typical method of mixing textures

408
00:23:01.560 --> 00:23:04.439
You can enhance the detail by using Add

409
00:23:04.439 --> 00:23:06.660
for stronger effects

410
00:23:06.660 --> 00:23:09.419
The foundational layer is

411
00:23:09.419 --> 00:23:12.520
often referred to as the base normal

412
00:23:12.520 --> 00:23:16.400
while the additional layer

413
00:23:16.400 --> 00:23:20.680
to that base is called the detail normal

414
00:23:20.680 --> 00:23:23.959
So you begin with the base and then the details

415
00:23:23.959 --> 00:23:26.800
The distinction lies in

416
00:23:26.800 --> 00:23:29.719
where you source the blue channel value

417
00:23:29.719 --> 00:23:32.760
That's the difference

418
00:23:32.760 --> 00:23:36.920
In most cases, images are blended directly

419
00:23:36.920 --> 00:23:39.800
However, if we do that here

420
00:23:39.800 --> 00:23:42.040
Multiply results in 0

421
00:23:42.040 --> 00:23:43.920
making it not meaningful

422
00:23:43.920 --> 00:23:49.400
Instead, working with the raw vector

423
00:23:49.400 --> 00:23:52.199
you should use Add

424
00:23:52.199 --> 00:23:56.800
This directly uses Lerp from the beginning

425
00:23:56.800 --> 00:24:00.500
within the Component Mask

426
00:24:00.500 --> 00:24:05.600
For blending, the most commonly used nodes

427
00:24:05.600 --> 00:24:07.839
are Multiply

428
00:24:07.839 --> 00:24:09.439
the most commonly used

429
00:24:09.439 --> 00:24:10.839
then Add

430
00:24:10.840 --> 00:24:13.150
and finally Lerp

431
00:24:13.150 --> 00:24:17.520
We're using Lerp for nuanced transition

432
00:24:17.520 --> 00:24:20.359
By focusing on the alpha value

433
00:24:20.359 --> 00:24:23.560
append it to a vector as the A

434
00:24:23.560 --> 00:24:25.199
Remember

435
00:24:25.199 --> 00:24:29.520
until you apply operations like Multiply, Add, or Lerp

436
00:24:29.520 --> 00:24:32.640
the data remains a Vector2

437
00:24:32.640 --> 00:24:35.839
It then becomes a Vector3 through an Append operation

438
00:24:35.839 --> 00:24:41.479
followed by normalization to create a unit vector

439
00:24:41.479 --> 00:24:44.640
That's what you need to remember

440
00:24:44.640 --> 00:24:50.079
To visually inspect the blending

441
00:24:50.079 --> 00:24:53.280
we could keep adding the value for Lerp

442
00:24:53.280 --> 00:24:58.359
like 0.1, 0.2, and so on

443
00:24:58.359 --> 00:25:00.760
We will get some checkered patterns

444
00:25:00.760 --> 00:25:04.760
which is hard for us to check in real time

445
00:25:04.760 --> 00:25:08.040
If we want

446
00:25:08.040 --> 00:25:12.119
to see the values change smoothly

447
00:25:12.119 --> 00:25:14.800
instead of checking it at material

448
00:25:14.800 --> 00:25:18.359
we should create a material instance

449
00:25:18.359 --> 00:25:23.520
Create a Scalar Parameter node

450
00:25:23.520 --> 00:25:27.040
and name it LerpVal

451
00:25:27.040 --> 00:25:29.160
Let's just keep it simple

452
00:25:29.160 --> 00:25:31.400
If the default value is set to 0

453
00:25:31.400 --> 00:25:35.119
any value less than 0 is black, and above that white

454
00:25:35.119 --> 00:25:37.760
so it would be all white, or above 0

455
00:25:37.760 --> 00:25:40.359
Since this has the data

456
00:25:40.359 --> 00:25:43.719
let’s set the default value to 0.5 for now

457
00:25:43.719 --> 00:25:44.959
and save it

458
00:25:44.959 --> 00:25:48.119
Click Apply and Save

459
00:25:48.119 --> 00:25:50.160
then go to the Content Browser window

460
00:25:50.160 --> 00:25:52.319
For WetFloor

461
00:25:52.319 --> 00:25:55.040
right-click on the WetFloor material

462
00:25:55.040 --> 00:25:58.040
and create a Material Instance from it

463
00:25:58.040 --> 00:26:00.359
Open it by double-clicking on it

464
00:26:00.359 --> 00:26:05.479
With the default Step value set to 0.5

465
00:26:05.479 --> 00:26:08.479
you’ll see the material applied with that configuration

466
00:26:08.479 --> 00:26:12.899
Open the Global Scalar Parameter section

467
00:26:12.899 --> 00:26:17.000
check LerpValue, and adjust its value

468
00:26:17.000 --> 00:26:21.079
Now you can visually observe

469
00:26:21.079 --> 00:26:25.820
smooth, continuous changes as the value shifts

470
00:26:25.960 --> 00:26:28.960
As you can see now

471
00:26:28.960 --> 00:26:33.040
we see the gradual change from 0 to 1

472
00:26:33.040 --> 00:26:37.020
To observe smooth transitions like this

473
00:26:37.020 --> 00:26:38.660
avoid directly changing

474
00:26:38.660 --> 00:26:40.732
values in the material editor

475
00:26:40.732 --> 00:26:43.599
Instead, create a Material Instance

476
00:26:43.599 --> 00:26:46.680
and adjust the values there

477
00:26:46.680 --> 00:26:49.760
The relationship between materials

478
00:26:49.760 --> 00:26:53.580
and material instances is important to understand

479
00:26:53.800 --> 00:26:57.280
A material is essentially akin to

480
00:26:57.280 --> 00:26:59.680
a shader in other programs

481
00:26:59.680 --> 00:27:04.319
which determines how colors are represented

482
00:27:04.319 --> 00:27:08.880
The material created based on a shader

483
00:27:08.880 --> 00:27:12.560
can be considered a Material Instance

484
00:27:12.560 --> 00:27:16.079
It's easier for you to observe and adjust

485
00:27:16.079 --> 00:27:17.494
value changes yourselves

486
00:27:17.494 --> 00:27:20.680
When programming shaders

487
00:27:20.680 --> 00:27:24.239
the computer must go through

488
00:27:24.239 --> 00:27:26.880
a compilation process to recognize changes

489
00:27:26.880 --> 00:27:30.119
Even with minor adjustments to numerical values

490
00:27:30.119 --> 00:27:32.100
recompilation is required

491
00:27:32.100 --> 00:27:33.160
recompiling it again

492
00:27:33.160 --> 00:27:36.820
which makes it difficult to view continuous changes in real time

493
00:27:36.820 --> 00:27:39.839
On the other hand, creating a Material Instance

494
00:27:39.839 --> 00:27:45.280
means the material has already been fully compiled

495
00:27:45.280 --> 00:27:48.000
So you can directly

496
00:27:48.000 --> 00:27:51.680
update the result values

497
00:27:51.680 --> 00:27:54.160
without going through the shader compilation process

498
00:27:54.160 --> 00:27:58.439
his allows you to see results immediately in real time

499
00:27:58.439 --> 00:28:04.719
Shader compilation can slow down your computer significantly

500
00:28:04.719 --> 00:28:08.000
For lower-spec computers

501
00:28:08.000 --> 00:28:11.680
anything more complex than this

502
00:28:11.680 --> 00:28:15.079
even minor parameter adjustments

503
00:28:15.079 --> 00:28:16.959
might cause delays

504
00:28:16.959 --> 00:28:18.959
of one to three minutes

505
00:28:18.959 --> 00:28:25.040
My computer uses an i9-3080

506
00:28:25.040 --> 00:28:26.160
with 64GB RAM

507
00:28:26.160 --> 00:28:32.479
The compilation process is shorter for better graphic cards

508
00:28:32.479 --> 00:28:37.040
so I can check the changes even at the material level

509
00:28:37.040 --> 00:28:39.400
Though, as observed earlier

510
00:28:39.400 --> 00:28:42.340
when you adjust values in the Material Editor

511
00:28:42.340 --> 00:28:45.959
the changes are not continuous

512
00:28:45.959 --> 00:28:48.640
lagging a little in between

513
00:28:48.640 --> 00:28:53.119
Therefore, if you can

514
00:28:53.119 --> 00:28:54.880
when checking for the values

515
00:28:54.880 --> 00:28:59.479
to see if your materials are properly mixed

516
00:28:59.479 --> 00:29:02.760
it is recommended to use Material Instances

517
00:29:02.760 --> 00:29:07.199
Let's see how the Normal Map changes on a flat surface

518
00:29:07.739 --> 00:29:10.520
Currently, the material reflects more light

519
00:29:10.520 --> 00:29:13.959
By increasing the Parameter Value

520
00:29:13.959 --> 00:29:19.439
for flat state, press L and left click to see

521
00:29:19.439 --> 00:29:21.079
The light is very flat

522
00:29:21.079 --> 00:29:24.040
The highlights on the surface

523
00:29:24.040 --> 00:29:26.800
appear very flat

524
00:29:26.800 --> 00:29:29.280
If the Parameter Value is increased further

525
00:29:29.280 --> 00:29:31.560
the stones appear more distinct

526
00:29:31.560 --> 00:29:33.880
The light interaction weakens

527
00:29:33.880 --> 00:29:37.640
due to Roughness

528
00:29:37.640 --> 00:29:40.640
The shading becomes more defined

529
00:29:40.640 --> 00:29:45.739
creating a sharper contrast between light and shadow

530
00:29:45.959 --> 00:29:49.000
As water levels decrease

531
00:29:49.000 --> 00:29:55.239
the shadows become even sharper and clearer

532
00:29:55.239 --> 00:29:57.040
However, these sharper shadows

533
00:29:57.040 --> 00:30:00.839
do not indicate any physical changes to the flat surface

534
00:30:00.839 --> 00:30:03.280
The surface remains flat

535
00:30:03.280 --> 00:30:05.319
but you can observe

536
00:30:05.319 --> 00:30:06.880
how the light changes in tandem

537
00:30:06.880 --> 00:30:11.400
with the variations in the Lerp Value

538
00:30:11.400 --> 00:30:13.000
Finally, let’s enhance this effect

539
00:30:13.000 --> 00:30:17.160
to make it even more realistic

540
00:30:17.160 --> 00:30:21.280
To address the current issue

541
00:30:21.280 --> 00:30:24.920
let’s assume that water is partially filling the gaps between the stones

542
00:30:24.920 --> 00:30:26.860
In the current setup

543
00:30:26.860 --> 00:30:31.880
some areas appear as though there is not enough water

544
00:30:31.880 --> 00:30:35.079
as water has unnaturally pooled

545
00:30:35.079 --> 00:30:39.520
in random spots as I marked here

546
00:30:39.520 --> 00:30:44.119
Ideally, with this rough surface with the rocks

547
00:30:44.119 --> 00:30:47.199
the water should gradually rise to fill the gaps

548
00:30:47.199 --> 00:30:47.760
Right?

549
00:30:47.760 --> 00:30:50.619
The water should gradually rise

550
00:30:50.620 --> 00:30:52.887
until it covers the surface completely

551
00:30:52.887 --> 00:30:55.040
But right now

552
00:30:55.040 --> 00:30:57.800
for this surface

553
00:30:57.800 --> 00:31:01.160
the water filling at different heights

554
00:31:01.160 --> 00:31:03.280
some there, and some there

555
00:31:03.280 --> 00:31:07.000
They are filling up in different places

556
00:31:07.000 --> 00:31:12.520
due to the noise map pattern

557
00:31:12.520 --> 00:31:17.400
rather than actual height differences being considered

558
00:31:17.400 --> 00:31:20.680
To create a more realistic effect

559
00:31:20.680 --> 00:31:23.560
we’ll start by moving the noise texture aside

560
00:31:23.560 --> 00:31:27.300
In the Start Content folder under the Textures section

561
00:31:27.301 --> 00:31:29.518
Let's go to our cobblestone

562
00:31:29.518 --> 00:31:32.520
This isn't what this texture is for

563
00:31:32.520 --> 00:31:34.160
but this is Cobblestone_M

564
00:31:34.160 --> 00:31:39.160
intended for metallic use

565
00:31:39.160 --> 00:31:42.160
Opening this texture

566
00:31:42.160 --> 00:31:45.239
reveals a foggy, uneven pattern

567
00:31:45.239 --> 00:31:49.880
This map has a unique characteristic

568
00:31:49.880 --> 00:31:52.280
Let's draw the surface

569
00:31:52.280 --> 00:31:55.119
Let’s assume that white represents higher elevations

570
00:31:55.119 --> 00:31:58.400
and black represents lower ones

571
00:31:58.400 --> 00:32:00.319
The darker it is, the lower

572
00:32:00.319 --> 00:32:02.839
Shades of gray would

573
00:32:02.839 --> 00:32:04.800
represent intermediate height

574
00:32:04.800 --> 00:32:07.839
If we trace the levels from point A to point B

575
00:32:07.839 --> 00:32:11.760
so the higher, the whiter

576
00:32:11.760 --> 00:32:13.359
and it fluctuates repeatedly

577
00:32:13.360 --> 00:32:15.320
to reach this state

578
00:32:15.320 --> 00:32:18.179
the height starts low

579
00:32:18.179 --> 00:32:20.599
increases, then decreases, and so on

580
00:32:20.599 --> 00:32:25.640
 Shades of gray would represent

581
00:32:25.640 --> 00:32:28.880
intermediate heights that are pretty even

582
00:32:28.880 --> 00:32:32.400
The higher it is, the whiter it gets

583
00:32:32.400 --> 00:32:34.199
and it fluctuates

584
00:32:34.199 --> 00:32:37.319
This is what we can visualize

585
00:32:37.319 --> 00:32:41.640
This kind of texture is commonly

586
00:32:41.640 --> 00:32:43.119
referred to as a Height Map

587
00:32:43.119 --> 00:32:46.800
designed to represent elevation changes

588
00:32:46.800 --> 00:32:48.199
Sometimes there isn't one

589
00:32:48.199 --> 00:32:51.639
Height Map is designed to represent

590
00:32:51.639 --> 00:32:54.019
elevation changes using black-and-white

591
00:32:54.019 --> 00:32:57.719
but we don't have Height Map here

592
00:32:57.719 --> 00:33:00.959
so we need something to replace this effect

593
00:33:00.959 --> 00:33:04.280
If we adjust the gray areas in the texture

594
00:33:04.280 --> 00:33:09.280
to be either black or white

595
00:33:09.280 --> 00:33:11.399
the water effect

596
00:33:11.399 --> 00:33:14.160
will appear more realistic as it fills up

597
00:33:14.280 --> 00:33:17.199
Using the Cobblestone_M texture

598
00:33:17.199 --> 00:33:20.079
we’ll extract its red channel

599
00:33:20.079 --> 00:33:23.239
and multiply the two

600
00:33:23.239 --> 00:33:27.520
Actually, this isn't enough, but let's just try connecting

601
00:33:27.520 --> 00:33:32.359
This highlights only the white areas at 0.5

602
00:33:32.359 --> 00:33:36.400
Lowering it to 0.1 will show more white

603
00:33:36.400 --> 00:33:40.439
while raising it to 0.9 makes it closer to black

604
00:33:40.439 --> 00:33:44.839
0.2 will make it more white

605
00:33:44.839 --> 00:33:49.679
However, the mid-tones lack variation

606
00:33:49.679 --> 00:33:53.239
so we apply a multiply operation

607
00:33:53.239 --> 00:33:58.040
just like we did earlier for the base color

608
00:33:58.040 --> 00:33:59.719
Let's try that

609
00:33:59.719 --> 00:34:01.920
Now connect them

610
00:34:01.920 --> 00:34:05.280
to visualize the difference better

611
00:34:05.280 --> 00:34:10.080
So this is 0.2, and then 0.5

612
00:34:10.080 --> 00:34:14.439
then 0.3, and then 0.1

613
00:34:14.439 --> 00:34:20.120
Now, water fills up surface areas before the gap

614
00:34:20.120 --> 00:34:22.800
To fix this, we’ll invert the values

615
00:34:22.800 --> 00:34:26.199
using a OneMinus node

616
00:34:26.199 --> 00:34:30.479
Search for OneMinus

617
00:34:30.479 --> 00:34:34.600
And you get the node that says 1-x

618
00:34:34.600 --> 00:34:36.560
Plug it in

619
00:34:36.560 --> 00:34:39.520
and let's check at our instance

620
00:34:39.520 --> 00:34:42.239
At LerpValue = 0

621
00:34:42.239 --> 00:34:44.760
or, precisely, not LerpValue

622
00:34:44.760 --> 00:34:49.919
but if Step is over 0, it is always white

623
00:34:49.919 --> 00:34:54.019
We set the parameter for this baseline

624
00:34:54.919 --> 00:34:58.360
So since over 0 is all white

625
00:34:58.360 --> 00:34:59.879
the water filled in

626
00:34:59.879 --> 00:35:03.000
Let's slowly drain the water

627
00:35:03.000 --> 00:35:04.360
Let's keep it slow

628
00:35:04.360 --> 00:35:08.559
The higher parts of the stones are exposed first

629
00:35:08.559 --> 00:35:13.039
gradually revealing more of the upper sections

630
00:35:13.039 --> 00:35:16.900
As the value increases, the effect moves downward

631
00:35:16.900 --> 00:35:19.360
toward the base, like water draining

632
00:35:19.360 --> 00:35:21.560
To refill the water

633
00:35:21.560 --> 00:35:24.299
lowering the value slowly

634
00:35:24.679 --> 00:35:26.320
though not accurate

635
00:35:26.320 --> 00:35:30.959
will first fill the gaps and then

636
00:35:30.959 --> 00:35:37.779
move upward toward the center of the stones

637
00:35:38.619 --> 00:35:40.819
While not perfectly accurate

638
00:35:40.819 --> 00:35:45.199
this mimics a realistic effect of water filling up

639
00:35:45.199 --> 00:35:47.840
Now, for LerpValue

640
00:35:47.840 --> 00:35:51.439
as we learned earlier

641
00:35:51.439 --> 00:35:55.719
a value of 1 represents 100% of B

642
00:35:55.719 --> 00:35:59.280
and a value of 0.7 represents 70% of B

643
00:35:59.280 --> 00:36:00.919
That's what I told you

644
00:36:00.919 --> 00:36:03.560
If the goal is to show 100% of B

645
00:36:03.560 --> 00:36:09.159
the parameter currently uses a Step node that ensures

646
00:36:09.159 --> 00:36:10.000
anything above 0 is white

647
00:36:10.000 --> 00:36:13.679
The value that needs to go into the Alpha

648
00:36:13.679 --> 00:36:16.040
and the parameter value

649
00:36:16.040 --> 00:36:18.679
we set are inversely related

650
00:36:18.679 --> 00:36:21.520
To handle this, using the OneMinus node

651
00:36:21.520 --> 00:36:26.479
helps reverse the values

652
00:36:26.479 --> 00:36:29.120
Remember, we used it here

653
00:36:29.120 --> 00:36:31.360
Let's Apply the changes

654
00:36:31.360 --> 00:36:32.919
Then, when it becomes 1

655
00:36:32.919 --> 00:36:37.280
the b image is displayed exactly as the LerpValue is

656
00:36:37.280 --> 00:36:40.759
replicating the scenario where the Alpha value is 1

657
00:36:40.879 --> 00:36:44.199
When the its is 0.7, B is 70%

658
00:36:44.199 --> 00:36:48.000
At 0.5, 0.3, and finally at 0

659
00:36:48.000 --> 00:36:51.280
when the LerpValue reaches 0

660
00:36:51.280 --> 00:36:53.560
it's the A image, which is the dry one

661
00:36:53.560 --> 00:36:58.080
The OneMinus node essentially represents 1 - X

662
00:36:58.080 --> 00:37:00.840
where X is the value we assign

663
00:37:00.840 --> 00:37:03.461
For example

664
00:37:03.461 --> 00:37:07.781
if we input 0, 0.3, 0.7, 1 into X

665
00:37:07.781 --> 00:37:11.239
what would be the result?

666
00:37:11.239 --> 00:37:13.959
It's 1-0

667
00:37:13.960 --> 00:37:16.060
which is 1

668
00:37:16.259 --> 00:37:20.219
1-0.3, which is 0.7

669
00:37:20.219 --> 00:37:21.939
1-0.7

670
00:37:21.940 --> 00:37:23.580
which is 0.3

671
00:37:23.580 --> 00:37:26.279
And 1-1 is 0

672
00:37:26.279 --> 00:37:31.840
This creates a natural reversal of the values

673
00:37:32.040 --> 00:37:34.499
The OneMinus node is

674
00:37:34.499 --> 00:37:36.439
frequently used for tasks

675
00:37:36.440 --> 00:37:38.260
like color mixing

676
00:37:38.260 --> 00:37:41.560
or building shaders

677
00:37:41.560 --> 00:37:45.800
That was about basic textures

678
00:37:45.800 --> 00:37:49.000
Now, using a different approach

679
00:37:49.240 --> 00:37:53.719
for now, we only have one set of image

680
00:37:53.719 --> 00:37:55.760
for the texture

681
00:37:55.760 --> 00:38:00.479
So we’ll apply a Texture Coordinate node

682
00:38:00.479 --> 00:38:03.319
to adjust the texture repetition

683
00:38:03.319 --> 00:38:06.120
We have U Tiling and V Tiling here

684
00:38:06.120 --> 00:38:09.360
Increasing the U Tiling value

685
00:38:09.360 --> 00:38:14.480
increases the horizontal repetition of the image

686
00:38:14.480 --> 00:38:16.760
So we say UV

687
00:38:16.760 --> 00:38:20.920
for textures as in for X and Y axes

688
00:38:20.920 --> 00:38:24.280
X is horizontal, and Y is vertical

689
00:38:24.280 --> 00:38:27.879
If you increase the U Tiling value

690
00:38:27.879 --> 00:38:30.479
the 3D mesh is currently a flat plan

691
00:38:30.479 --> 00:38:34.439
By default, only one image is shown

692
00:38:34.439 --> 00:38:36.279
but setting

693
00:38:36.280 --> 00:38:39.745
U Tiling to 3 will

694
00:38:39.745 --> 00:38:44.399
display three images side by side

695
00:38:44.399 --> 00:38:46.360
Using this property

696
00:38:46.360 --> 00:38:50.000
apply a Multiply operation to the Texture Coordinate node

697
00:38:50.000 --> 00:38:52.639
and the multiplier value for B

698
00:38:52.639 --> 00:38:55.360
is set as a Scalar Parameter

699
00:38:55.360 --> 00:39:00.320
The parameter will be named Tilling

700
00:39:00.320 --> 00:39:02.280
with a default value of 1

701
00:39:02.280 --> 00:39:05.479
Let's restore U tiling value of

702
00:39:05.479 --> 00:39:08.719
the Texture Coordinate to 1

703
00:39:08.719 --> 00:39:10.439
This allows for

704
00:39:10.439 --> 00:39:16.060
adjustments without modifying

705
00:39:16.060 --> 00:39:19.360
the Texture Coordinate values

706
00:39:19.360 --> 00:39:23.360
But for the Texture Coordinate

707
00:39:23.360 --> 00:39:25.840
of the textures we use

708
00:39:25.840 --> 00:39:29.360
the same texture in Cobblestone_M

709
00:39:29.361 --> 00:39:31.317
and its normal map

710
00:39:31.317 --> 00:39:35.000
should be applied in the same manner

711
00:39:35.000 --> 00:39:40.360
to avoid mismatched repetitions between base color

712
00:39:40.360 --> 00:39:42.120
If you remove it

713
00:39:42.120 --> 00:39:45.599
as shown now, the normal map will

714
00:39:45.599 --> 00:39:48.639
repeat only once by default

715
00:39:48.639 --> 00:39:53.000
while the base color may repeat two or three times

716
00:39:53.000 --> 00:39:55.120
That's why we do it this way

717
00:39:55.780 --> 00:40:01.479
For noise textures, sometimes tiling values are

718
00:40:01.479 --> 00:40:06.080
intentionally set differently to create more irregular patterns

719
00:40:06.080 --> 00:40:08.800
Depending on the case, regardless of the tiling value

720
00:40:08.800 --> 00:40:11.520
you can use a Multiply node to apply

721
00:40:11.520 --> 00:40:13.719
only a fraction of the tiling value

722
00:40:13.719 --> 00:40:17.679
If you want to repeat half of a three-tile sequence

723
00:40:17.679 --> 00:40:21.439
you can multiply the tiling value by 0.5

724
00:40:21.439 --> 00:40:24.239
resulting in 3 multiplied by 0.5

725
00:40:24.239 --> 00:40:27.479
or 1.5 repetitions

726
00:40:27.479 --> 00:40:30.399
Or, you could use 0.3333

727
00:40:30.399 --> 00:40:33.600
to repeat only one-third

728
00:40:33.600 --> 00:40:37.520
adjusting the Multiply value to control the repetition ratio

729
00:40:37.520 --> 00:40:41.439
Of course, you can’t just plug it in directly

730
00:40:41.439 --> 00:40:47.980
You need to connect the result of the Texture Coordinate and Multiply nodes before applying it

731
00:40:47.980 --> 00:40:49.560
Once applied

732
00:40:49.560 --> 00:40:53.320
in the material instance

733
00:40:53.320 --> 00:40:56.440
let's adjust the tiling value

734
00:40:56.440 --> 00:41:01.840
This allows you to represent the gradual filling of water

735
00:41:01.840 --> 00:41:07.800
It shows that the textures are evenly applied based on the tiling frequency

736
00:41:07.800 --> 00:41:11.000
So, in this session

737
00:41:11.000 --> 00:41:12.479
we used basic nodes

738
00:41:12.520 --> 00:41:14.360
like Lerp which is

739
00:41:14.360 --> 00:41:17.639
essentially just addition and multiplication

740
00:41:17.639 --> 00:41:21.259
So using Multiply and Add

741
00:41:21.259 --> 00:41:26.320
we created a transition effect

742
00:41:26.320 --> 00:41:32.979
that gradually fills water from dry ground to wet ground

743
00:41:33.719 --> 00:41:38.479
Today, we utilized Multiply and Lerp

744
00:41:38.479 --> 00:41:43.020
to create a gradual water-filling effect, transitioning

745
00:41:43.020 --> 00:41:45.019
from dry to wet

746
00:41:45.399 --> 00:41:50.240
Using only simple operations like addition and multiplication

747
00:41:50.240 --> 00:41:53.780
we achieved natural visual effects

748
00:41:53.780 --> 00:41:58.280
Let’s conclude by summarizing what we learned today

749
00:41:58.281 --> 00:41:59.800
Thank you

750
00:42:00.242 --> 00:42:01.059
WetFloor Material Creation

751
00:42:01.059 --> 00:42:01.781
Material Creation
Create a folder named WetFloor in the Content folder and generate a material named M_WetFloor

752
00:42:01.781 --> 00:42:02.565
dd a Texture Sample node and connect T_CobbleStone_Pebble_D texture to it
Extract RGB output and create a Multiply node

753
00:42:02.565 --> 00:42:03.425
Connect RGB output to both A and B inputs
of the Multiply node (Wet)

754
00:42:03.425 --> 00:42:04.127
Combining Dry and Wet Ground
Create a Lerp (Linear Interpolate) node
Connect Lerp A with Texture (Dry), Lerp B with Multiply (Wet)

755
00:42:04.127 --> 00:42:05.127
Add a Texture Sample, select T_Perlin_Noise_M
Connect its R channel to Lerp Alpha
Set Lerp A to 1 and Lerp B to 0, then connect the output to Roughnes

756
00:42:05.127 --> 00:42:06.126
Water Rising Effect
Connect and mix normal maps
Create a Texture Sample and connect T_CobbleStone_Pebble_N

757
00:42:06.127 --> 00:42:06.928
Connect the RGB channels of T_CobbleStone_Pebble_N
to the Component Mask
(set the Component Mask to RG)

758
00:42:06.928 --> 00:42:07.791
Create a Constant3Vector node and input (0,0,1)
Connect it to the Component Mask (R,G)
Lerp A: The component mask connected to the texture

759
00:42:07.791 --> 00:42:08.610
Lerp B: The component mask connected to the Constant3Vector
Lerp Alpha: The Step output

760
00:42:08.610 --> 00:42:09.191
Append Vector: Create a node to expand the Lerp data with R and G channels into RGB format
Append A: Lerp output, B: Blue channel of normal texture

761
00:42:09.191 --> 00:42:09.972
Connect the normalized result to the Normal input of the master node

762
00:42:09.972 --> 00:42:10.732
Creating Material Instance
Create a ScalarParameter node and name it LerpVal

763
00:42:10.732 --> 00:42:11.273
Right-click M_WetFloor and generate Create Material Instance and open it

764
00:42:11.273 --> 00:42:12.214
Check LerpVal in the Global Scalar Parameter Values section to observe continuous changes in the result

765
00:42:12.214 --> 00:42:12.895
Height Map Effect Creation
Import the T_Cobblestone_Pebble_M texture, and Multiply the R channel to enhance contrast

766
00:42:12.895 --> 00:42:13.656
Use the OneMinus node to invert the Black and White values
Connect the result of the multiplication with the noise texture

767
00:42:13.656 --> 00:42:14.156
Import the T_Cobblestone_Pebble_M texture and Multiply the R channel to enhance contrast
Use the OneMinus node to invert the Black and White values

768
00:42:14.156 --> 00:42:15.196
Connect the result of the multiplication with the noise texture to the Step node

769
00:42:15.196 --> 00:42:17.233
Water Filling Up Effect
Tilemap Effect Creation
Create a Texture Coordinate node
Create a ScalarParameter node (tiling)

770
00:42:17.233 --> 00:42:18.874
Multiply the two nodes and connect the result to the UV input of each texture (base color and normal)

771
00:42:18.874 --> 00:42:19.915
Add Multiply to the tilling parameter
and compute it with the result of the previous Multiply
Connect it to the UV of the noise texture