1
00:00:04.825 --> 00:00:08.925
실감 공통편
포지션 디졸브

2
00:00:23.525 --> 00:00:26.475
안녕하세요 박현상입니다

3
00:00:26.475 --> 00:00:28.975
이번 시간에는 위치 값을 이용해서

4
00:00:28.975 --> 00:00:32.325
시각화할 수 있는 방법에 대해서 다뤄볼 겁니다

5
00:00:32.325 --> 00:00:34.925
위치 값이라고 얘기하는 것은 흔히

6
00:00:34.925 --> 00:00:39.025
X, Y, Z 세 가지 축으로 이루어진

7
00:00:39.025 --> 00:00:41.675
Vector3 데이터를 의미합니다

8
00:00:41.675 --> 00:00:45.575
Vector3를 내적이라는 함수를 이용해서

9
00:00:45.575 --> 00:00:50.275
블랙 앤 화이트로 이루어진 그레이 스케일 이미지로 바꿔서

10
00:00:50.275 --> 00:00:52.475
우리가 원하는 방향으로

11
00:00:52.475 --> 00:00:56.075
서서히 사라지거나 서서히 나타나게 할 수 있는

12
00:00:56.075 --> 00:00:58.725
디졸브 효과를 만들 겁니다

13
00:00:59.125 --> 00:01:03.525
수학에서 쓰이는 내적이라는 Vector의 곱셈이

14
00:01:03.525 --> 00:01:07.975
어떻게 시각효과에 쓰이게 되는지 학습하게 될 것입니다

15
00:01:07.975 --> 00:01:11.975
머티리얼 및 바운딩 박스 생성

16
00:01:11.975 --> 00:01:15.625
폴더를 하나 새로 생성하면서 시작하겠습니다

17
00:01:15.625 --> 00:01:17.025
뉴 폴더를 해주시고요

18
00:01:17.025 --> 00:01:21.826
PositionDissolve라고 만들어 주도록 하겠습니다

19
00:01:21.826 --> 00:01:27.976
그리고 머티리얼 M_PosDissolve

20
00:01:27.976 --> 00:01:32.326
이렇게 하나 생성해서 에디터를 열어줄 거고요

21
00:01:32.326 --> 00:01:34.676
이 머티리얼은 기본적으로 디졸브

22
00:01:34.676 --> 00:01:37.626
사라지는 효과를 만들어내기 위한 거니까

23
00:01:37.626 --> 00:01:41.026
Blend Mode를 Masked로 바꾸겠습니다

24
00:01:41.026 --> 00:01:45.476
일반적으로 이 Masked는 스타터 콘텐츠에서 텍스처

25
00:01:45.476 --> 00:01:47.576
Noise를 이렇게 집어넣었을 때

26
00:01:47.576 --> 00:01:50.626
Opacity Mask에다가 집어넣어 보겠습니다

27
00:01:50.626 --> 00:01:53.876
그러면 이렇게 흰색, 검은색을 기준으로 해서

28
00:01:53.876 --> 00:01:57.076
흰색은 보이는 거, 검은색은 투명한 거

29
00:01:57.076 --> 00:01:59.126
뚫려 보이게 이렇게 만들어 주는 게

30
00:01:59.126 --> 00:02:01.926
Opacity Mask의 속성이고요

31
00:02:01.926 --> 00:02:04.326
중간 값을 기준으로 하는데

32
00:02:04.326 --> 00:02:09.276
Opacity Mask의 값이 0.5라고 해서 적용되는 건 아니고

33
00:02:09.276 --> 00:02:11.526
0.4까지 한번 낮춰 보겠습니다

34
00:02:11.526 --> 00:02:13.876
완전히 중간을 기준으로 하지 않고요

35
00:02:13.876 --> 00:02:17.026
약 0.3 정도를 기준으로 해서

36
00:02:17.026 --> 00:02:20.276
보이고 안 보이고를 결정하게 됩니다

37
00:02:20.276 --> 00:02:25.426
정확하게 0.5를 기준으로 하지 않는다는 거 기억해 두시고요

38
00:02:25.426 --> 00:02:27.326
우리가 앞으로 하게 될 것은

39
00:02:27.326 --> 00:02:32.076
결과적으로 여기에다가 마스크 되는 영역을 Add를 해서

40
00:02:32.076 --> 00:02:36.876
이 Add 되는 값을 -1로 해두면 아예 안 보이겠죠

41
00:02:36.876 --> 00:02:39.726
0이어도 많이 보이지는 않을 겁니다

42
00:02:39.726 --> 00:02:42.126
1이 되면 온전히 다 보일 텐데

43
00:02:42.126 --> 00:02:52.426
이런 식으로 결국은 -1에서 -0.5, -0.1, 그냥 0.1

44
00:02:52.426 --> 00:02:56.126
그리고 어느새 1로 딱 되면서 온전히 보이게끔

45
00:02:56.126 --> 00:03:00.576
이렇게 보였다 안 보였다 하는 것을 만들어 볼 겁니다

46
00:03:00.576 --> 00:03:04.026
다만 보였다 안 보였다의 기준이

47
00:03:04.026 --> 00:03:05.676
텍스처를 기준으로 한다든가

48
00:03:05.676 --> 00:03:09.226
노이즈 패턴을 기준으로 하는 게 아니고요

49
00:03:09.226 --> 00:03:13.926
월드를 기준으로 내가 위에서부터 아래로 사라지게 한다든가

50
00:03:13.926 --> 00:03:16.276
왼쪽에서 오른쪽으로 사라지게 한다든가

51
00:03:16.276 --> 00:03:18.776
사라지는 방향 자체를

52
00:03:18.776 --> 00:03:22.476
내가 임의로 정할 수 있게 해 볼 겁니다

53
00:03:22.476 --> 00:03:27.526
현재는 텍스처의 패턴을 기준으로 사라지는 걸 보여드렸죠

54
00:03:27.526 --> 00:03:29.076
이번에 메인이 되는 것은

55
00:03:29.076 --> 00:03:32.776
이러한 포지션이라고 하는 값조차도

56
00:03:32.776 --> 00:03:35.876
우리는 쉐이더에서 가져다가

57
00:03:35.876 --> 00:03:39.526
어떠한 효과를 만드는 데 사용할 수 있다

58
00:03:39.526 --> 00:03:42.526
이게 이번 강의의 핵심이 되겠습니다

59
00:03:42.526 --> 00:03:45.426
이제 포지션 값 중에서도

60
00:03:45.426 --> 00:03:49.026
이 오브젝트를 위에서든 아래에서든

61
00:03:49.026 --> 00:03:52.426
서서히 한쪽 방향으로 사라지게 하기 위해서

62
00:03:52.426 --> 00:03:55.476
꼭 필요한 노드를 하나 가지고 오겠습니다

63
00:03:55.476 --> 00:03:59.226
우선 Opacity Mask에 연결되어 있던 것은 빼줘서

64
00:03:59.226 --> 00:04:00.676
오브젝트가 온전히 보여야

65
00:04:00.676 --> 00:04:04.026
나중에 그 값의 변화를 확인할 수가 있겠죠

66
00:04:04.026 --> 00:04:05.977
잠시 아래로 치워두고요

67
00:04:05.977 --> 00:04:09.877
여러분들은 오른쪽 클릭해서 바운드라고 검색하시면

68
00:04:09.877 --> 00:04:13.127
여러 가지 바운드 관련된 것들이 나오는데

69
00:04:13.127 --> 00:04:15.677
그중에서도 Coordinates 항목에

70
00:04:15.677 --> 00:04:22.977
BoundingBoxBased_0-1_UVW 노드를 생성해 주시면 됩니다

71
00:04:22.977 --> 00:04:26.377
우선은 이것을 Emissive Color에다가 연결을 해서

72
00:04:26.377 --> 00:04:29.377
어떤 상태인지부터 설명을 드리겠습니다

73
00:04:29.377 --> 00:04:31.577
굉장히 알록달록하게 나오죠

74
00:04:31.877 --> 00:04:34.277
이것을 플레인 형태로 바꿔도

75
00:04:34.277 --> 00:04:36.727
이 알록달록함이 유지되고 있고요

76
00:04:36.727 --> 00:04:41.227
박스 형태로 바꿔도 마찬가지로 유지가 되고 있습니다

77
00:04:41.227 --> 00:04:43.977
여기에서 여러분들이 주의하셔야 될 거

78
00:04:43.977 --> 00:04:46.477
여기에서 보면 이렇게 컬러 값이

79
00:04:46.477 --> 00:04:49.927
이 축하고 비교하면서 얘기를 하겠습니다

80
00:04:49.927 --> 00:04:52.977
좌측 하단에 축의 방향이 이렇게 나오고 있죠

81
00:04:52.977 --> 00:04:56.827
그래서 지금 보면 서서히 이렇게 가서

82
00:04:56.827 --> 00:04:59.977
옐로우 계열의 색깔로 바뀌는 걸 볼 수가 있고요

83
00:04:59.977 --> 00:05:03.377
이렇게 위로 올라갈수록 이쪽 끝에는

84
00:05:03.377 --> 00:05:06.827
Cyan이라고 얘기하죠 청록색 같은 컬러

85
00:05:06.827 --> 00:05:12.427
반대쪽으로 마젠타, 이쪽에는 블루 같은 이런 식으로

86
00:05:12.427 --> 00:05:17.127
그리고 마지막 끝에는 화이트 컬러가 나오고 있는 것을

87
00:05:17.127 --> 00:05:20.427
여러분들이 눈으로 확인하실 수가 있습니다

88
00:05:20.777 --> 00:05:24.827
여기에서 우선 이 컬러들을 이용할 수 있다는 것은

89
00:05:24.827 --> 00:05:27.577
우리는 컬러라고 하는 것은

90
00:05:27.577 --> 00:05:29.677
숫자로 바꿀 수 있다고 배웠습니다

91
00:05:29.677 --> 00:05:32.277
만약에 옐로우라고 한다면

92
00:05:32.277 --> 00:05:39.677
RGB에서 레드와 그린이 1이고 블루가 0인 상태를

93
00:05:39.677 --> 00:05:42.477
우리는 옐로우라고 얘기를 합니다

94
00:05:42.477 --> 00:05:45.427
블루는 0, 0, 1이겠고요

95
00:05:45.427 --> 00:05:51.277
마젠타 같은 경우에는 레드 1, 그린 0, 블루 1 이런 식으로

96
00:05:51.277 --> 00:05:54.977
Cyan 같은 경우에는 0, 1, 1로

97
00:05:54.977 --> 00:05:56.877
이런 식으로 좌표가 이루어져 있습니다

98
00:05:56.877 --> 00:06:01.127
화이트는 당연히 1, 1, 1이겠죠

99
00:06:01.127 --> 00:06:06.377
이 각각은 모두 레드, 그린, 블루로 대응도 되지만

100
00:06:06.377 --> 00:06:10.727
X, Y, Z도 됩니다 좌표 상으로

101
00:06:10.727 --> 00:06:14.977
그렇기 때문에 우측 하단에 기즈모를 기준으로 해서

102
00:06:14.977 --> 00:06:16.477
X축으로 가고 있죠

103
00:06:16.477 --> 00:06:21.227
이거는 색깔을 제가 다시 빨간색으로 그리도록 하겠습니다

104
00:06:21.227 --> 00:06:24.577
이렇게 가고 있고 이대로 쭉 갈수록

105
00:06:24.577 --> 00:06:29.577
Y의 성분이 0에서부터 1까지 증가하는 겁니다

106
00:06:29.577 --> 00:06:31.427
블루도 마찬가지인데요

107
00:06:31.427 --> 00:06:36.977
위로 올라갈수록 0에서부터 1까지 증가하는 거고요

108
00:06:36.977 --> 00:06:38.627
Y도 마찬가지겠죠

109
00:06:38.627 --> 00:06:39.927
이걸 생각해 본다면

110
00:06:39.927 --> 00:06:42.977
그림까지 마저 그려놓고 설명해 보겠습니다

111
00:06:42.977 --> 00:06:48.077
그림도 이쪽으로 갈수록 0에서부터 1까지 증가하는 거죠

112
00:06:48.077 --> 00:06:52.678
그럼 이 끝에가 지금 제가 표시하고 있는 여기

113
00:06:52.678 --> 00:06:54.828
화살표들이 시작했던 이 방향

114
00:06:54.828 --> 00:06:58.628
기즈모랑 가장 가까운 모서리를 기준으로 설명을 하면

115
00:06:58.628 --> 00:07:03.628
여기는 좌표 값으로 0, 1, 0일 겁니다

116
00:07:03.628 --> 00:07:06.578
왜냐하면 그림 방향으로 끝자락이고

117
00:07:06.578 --> 00:07:09.978
X축은 왼쪽에서부터 오른쪽이

118
00:07:09.978 --> 00:07:12.278
X축의 0에서부터 1까지니까

119
00:07:12.278 --> 00:07:16.628
여기는 X축은 0이겠고 높이도 당연히 0이겠죠

120
00:07:16.628 --> 00:07:19.428
이런 식으로 각각의 컬러들은

121
00:07:19.428 --> 00:07:22.828
좌표 값과 대응해서 사용할 수가 있습니다

122
00:07:22.828 --> 00:07:27.528
그래서 우리는 보통 이렇게 오브젝트 자체의

123
00:07:27.528 --> 00:07:29.678
전체적인 박스의 영역

124
00:07:29.678 --> 00:07:33.978
우리가 구체라고 하더라도 이렇게 동그라미를 그려보면

125
00:07:33.978 --> 00:07:37.228
이 동그라미의 가장 높은 부분이 있을 거고요

126
00:07:37.228 --> 00:07:39.678
가장 낮은 부분이 있을 겁니다

127
00:07:39.678 --> 00:07:44.628
이차원이니까 축으로 하자면 중간을 X축으로는 0.5

128
00:07:44.628 --> 00:07:49.878
X축으로도 가장 끝 쪽이 있을 거고 가장 바깥쪽이 있겠죠

129
00:07:49.878 --> 00:07:53.228
이 포인트를 굳이 좌표 값으로 표현해 보자면

130
00:07:53.228 --> 00:07:55.728
1, 0.5일 겁니다

131
00:07:55.728 --> 00:08:00.978
마찬가지로 가장자리 끝에도 0, 0.5겠죠 X, Y

132
00:08:00.978 --> 00:08:06.078
이 아래쪽은 0.5, 1 위쪽은 0.5

133
00:08:06.078 --> 00:08:08.928
여기가 0이고 여기가 1이겠네요

134
00:08:08.928 --> 00:08:14.578
이런 식으로 오브젝트의 가장 높은 지점들을 표시를 해서

135
00:08:14.578 --> 00:08:19.478
여기에 이렇게 선을 그대로 수직 수평하게 그려보면

136
00:08:19.478 --> 00:08:21.378
하나의 박스가 나오죠

137
00:08:21.378 --> 00:08:25.128
우리는 이런 것들을 바운딩 박스라고 부릅니다

138
00:08:25.128 --> 00:08:30.028
이 오브젝트의 크기가 어떻든 가장 작은 건 0이고요

139
00:08:30.028 --> 00:08:32.128
가장 큰 건 1인 겁니다

140
00:08:32.128 --> 00:08:34.678
가장 작은 건 0, 가장 큰 건 1

141
00:08:34.678 --> 00:08:38.578
물론 이거를 아예 Raw Data라고 보통 얘기를 하죠

142
00:08:38.578 --> 00:08:42.778
지름이 5짜리라고 하면 전체 이렇게 봤을 때

143
00:08:42.778 --> 00:08:45.128
여기가 이를테면 0이고

144
00:08:45.128 --> 00:08:48.928
지름이 5짜리니까 여기가 5의 위치가 되겠죠

145
00:08:48.928 --> 00:08:51.128
위에도 5고 아래는 0이고

146
00:08:51.128 --> 00:08:54.478
2.5, 0이 됐고 2.5, 5가 되겠죠

147
00:08:54.478 --> 00:08:58.278
Y축에 대한 가장 최소값과 최대값

148
00:08:58.278 --> 00:09:01.478
높이상으로의 최소값과 최대값의 지점은

149
00:09:01.478 --> 00:09:04.928
이거를 흔히 노멀라이즈 했다고 얘기를 하죠

150
00:09:04.928 --> 00:09:08.828
Raw Data를 노멀라이즈한 데이터가

151
00:09:08.828 --> 00:09:13.028
지금 우리가 보고 있는 바운딩 박스 0에서부터 1까지입니다

152
00:09:13.028 --> 00:09:17.878
참고로 여기에 있는 UVW는

153
00:09:17.878 --> 00:09:21.178
X, Y, Z의 또 다른 이름이고

154
00:09:21.178 --> 00:09:23.528
당연히 RGB와 대응이 되겠죠

155
00:09:23.528 --> 00:09:25.928
바운딩 박스의 값이 있다면

156
00:09:25.928 --> 00:09:31.328
우리는 원하는 방향으로 그라데이션을 만들어낼 수 있습니다

157
00:09:31.328 --> 00:09:33.379
여기에서 색이 변한다는 것은

158
00:09:33.379 --> 00:09:35.979
숫자가 변한다는 것을 의미하는 거고요

159
00:09:35.979 --> 00:09:39.979
흰색이 1이고 가장자리 끝에가 0에 가까운

160
00:09:39.979 --> 00:09:41.729
색이 선명해지는 부분은

161
00:09:41.729 --> 00:09:44.929
어떤 성분이든 0이 포함되어 있겠죠

162
00:09:45.579 --> 00:09:49.379
뒤에도 마찬가지입니다 여기도 이렇게 보면

163
00:09:49.379 --> 00:09:50.929
그래서 가장자리 끝에

164
00:09:50.929 --> 00:09:55.779
흰색의 완전히 반대쪽에 해당하는 여기는 0, 0, 0입니다

165
00:09:55.779 --> 00:09:58.679
여기는 모든 좌표값이 0, 0, 0

166
00:09:58.679 --> 00:10:01.379
여기는 모든 좌표값이 1, 1, 1

167
00:10:01.379 --> 00:10:06.429
그렇기 때문에 이렇게 보면 블루가 옆으로 가고 있죠

168
00:10:06.429 --> 00:10:09.029
그린은 아래에서 위로 올라오고 이런 식으로

169
00:10:09.029 --> 00:10:12.429
색이 서서히 바뀐다는 것은 그린의 성분이 변하든

170
00:10:12.429 --> 00:10:14.979
블루의 성분이나 레드의 성분이 변하든

171
00:10:14.979 --> 00:10:20.479
어쨌든 수치가 변하고 있다는 겁니다

172
00:10:20.479 --> 00:10:24.529
우리가 이전에 노멀맵 블렌딩과 관련해서

173
00:10:24.529 --> 00:10:27.479
각각의 성분을 따로 받아오는 것도 했었지만

174
00:10:27.479 --> 00:10:30.179
여기는 이미 나누어져 있습니다

175
00:10:30.179 --> 00:10:32.879
레드 값을 한번 비교해 보면요

176
00:10:32.879 --> 00:10:35.179
이런 식으로 위에서 봤을 때

177
00:10:35.179 --> 00:10:40.679
좌표 기준을 이렇게 잘 맞추실 필요가 있습니다 이런 식으로

178
00:10:40.679 --> 00:10:43.729
그러면 여기 시작하는 지점이 0이고

179
00:10:43.729 --> 00:10:46.579
끝으로 가서 가장자리가 1이 되는 겁니다

180
00:10:46.579 --> 00:10:48.829
그래서 여기는 화이트이고

181
00:10:48.829 --> 00:10:50.629
끝자락은 블랙처럼 안 보이지만

182
00:10:50.629 --> 00:10:53.929
아주 얇은 영역만 블랙이기 때문에 블랙인 거죠

183
00:10:53.929 --> 00:10:55.979
그러면 이것을 그대로

184
00:10:55.979 --> 00:10:58.929
Opacity Mask에 끼워 본다면 어떻게 될까요?

185
00:10:58.929 --> 00:11:02.329
이런 식으로 절반만 잘린 것처럼 나오죠

186
00:11:02.329 --> 00:11:05.779
그럼 여기에다가 계속해서 Add를 이용해가지고

187
00:11:05.779 --> 00:11:10.379
여기에다가 -0.5를 해서 꽂아주면 더 짧아지고

188
00:11:10.379 --> 00:11:14.029
-0.7을 하면 아예 사라지죠

189
00:11:14.029 --> 00:11:18.979
그리고 여기에다가 -0.1을 하면 다시 나오죠

190
00:11:18.979 --> 00:11:25.129
Add가 0일 때, 그리고 0.2일 때, 0.3일 때

191
00:11:25.129 --> 00:11:29.079
마지막으로 0.5일 때 비교를 해 보면

192
00:11:29.079 --> 00:11:30.929
반대쪽까지 모두 다 메꿔져서

193
00:11:30.929 --> 00:11:34.229
방향을 우리가 더하는 것으로

194
00:11:34.229 --> 00:11:36.929
사라지고 생기고를 결정할 수 있습니다

195
00:11:36.929 --> 00:11:40.579
더하는 값이 커질수록 잘 보이는 거고요

196
00:11:40.579 --> 00:11:44.279
더하는 값이 낮아질수록 잘 안 보이는 거죠

197
00:11:44.279 --> 00:11:46.729
그래서 인스턴스에서 확인하기 위해서

198
00:11:46.729 --> 00:11:50.129
Scalar Parameter를 하나 생성해서요

199
00:11:50.129 --> 00:11:54.579
이거는 VisibleVal라고 보이는 정도를

200
00:11:54.579 --> 00:11:59.179
이렇게 하나 만들어서 연결해 놓겠습니다 저장을 하고요

201
00:12:00.579 --> 00:12:05.429
우리가 만든 머티리얼을 인스턴스화 시켜서

202
00:12:09.429 --> 00:12:11.879
지금 평면으로 비교해서 보고 있는데

203
00:12:11.879 --> 00:12:17.930
VisibleVal 값을 이렇게 움직여 보시면 이런 식으로

204
00:12:17.930 --> 00:12:21.580
박스도 마찬가지고요

205
00:12:28.530 --> 00:12:34.530
구체도 마찬가지 이런 식으로

206
00:12:36.280 --> 00:12:39.430
모든 오브젝트들이 내가 원하는 방향대로

207
00:12:39.430 --> 00:12:43.030
좀 더 정확하게는 월드의 방향대로 되는데

208
00:12:44.830 --> 00:12:47.230
이 방향대로 사라지는 걸 확인하기 위해서

209
00:12:47.230 --> 00:12:51.530
Place Actors를 이용해서 여기 Shapes 항목이 있죠

210
00:12:51.530 --> 00:12:53.730
거기에서 방향을 여러분들이 알 수 있게

211
00:12:53.730 --> 00:12:57.280
큐브를 가지고 이렇게 배치를 하겠습니다

212
00:12:58.080 --> 00:13:00.230
F를 눌러서 포커싱을 해주고요

213
00:13:00.230 --> 00:13:02.230
그러고 나서 우리가 제작한

214
00:13:02.230 --> 00:13:05.580
머티리얼 인스턴스를 적용해 보겠습니다

215
00:13:05.580 --> 00:13:07.580
오브젝트가 배치된 X축

216
00:13:07.580 --> 00:13:11.130
기즈모의 X축으로 VisibleVal 값을 조절하면

217
00:13:11.130 --> 00:13:14.380
X축 방향대로 늘어났다 줄어들었다 하면서

218
00:13:14.380 --> 00:13:16.380
눈으로 보이고 있죠

219
00:13:16.380 --> 00:13:19.230
그럼 이게 회전을 한다면 어떨까요?

220
00:13:19.230 --> 00:13:22.880
이렇게 회전을 한다면 월드 상의 X축의 방향은

221
00:13:22.880 --> 00:13:26.680
바닥에 있는 그리드대로 이쪽으로 향하고 있습니다

222
00:13:26.680 --> 00:13:28.780
이게 지금 X축을 의미하는 거예요

223
00:13:28.780 --> 00:13:31.530
화살표 방향이 우리는 오브젝트를 회전해서

224
00:13:31.530 --> 00:13:34.680
지금 바라보는 방향이 이렇게 바뀌었습니다

225
00:13:34.680 --> 00:13:36.980
이때 VisibleVal 값이 변한다면

226
00:13:36.980 --> 00:13:41.130
이런 식으로 월드 방향에 영향을 받는 것이 아니라

227
00:13:41.130 --> 00:13:45.880
오브젝트가 가지고 있는 X, Y값에 대해서

228
00:13:45.880 --> 00:13:47.880
영향을 받는 것이기 때문에

229
00:13:47.880 --> 00:13:50.630
우리는 흔히 이러한 상태를

230
00:13:50.630 --> 00:13:54.180
로컬 바운드라고 얘기를 합니다 이 좌표 값의

231
00:13:54.180 --> 00:13:57.680
컴퓨터가 오브젝트를 인식하는 방법은

232
00:13:57.680 --> 00:14:00.930
기본적으로 오브젝트의 Pivot이라고 하죠

233
00:14:00.930 --> 00:14:03.430
기준점을 바탕으로 계산을 하는데

234
00:14:03.430 --> 00:14:05.130
그걸 바탕으로 X축으로 가있느냐

235
00:14:05.130 --> 00:14:07.030
Y축으로 가있느냐 Z축으로 가있느냐

236
00:14:07.030 --> 00:14:08.730
이런 것들을 따지는 겁니다

237
00:14:08.730 --> 00:14:11.530
오브젝트 자체의 기준점을 바탕으로

238
00:14:11.530 --> 00:14:14.730
방향이라든가 좌표를 기준으로 삼는 것들을

239
00:14:14.730 --> 00:14:18.830
우리는 흔히 로컬 스페이스라고 얘기를 하죠

240
00:14:18.830 --> 00:14:24.830
그래서 로컬 스페이스 기준으로 한 바운드 최댓값과 최솟값

241
00:14:24.830 --> 00:14:28.980
흔히 우리는 이걸 Min, Max 값이라고 얘기를 하죠

242
00:14:28.980 --> 00:14:32.130
그래서 어느 방향으로 오브젝트를 틀어도

243
00:14:32.130 --> 00:14:35.630
오브젝트가 자체적으로 가지고 있는 방향으로

244
00:14:35.630 --> 00:14:38.130
보였다 안 보였다를 하게 되는 겁니다

245
00:14:38.130 --> 00:14:40.780
이제 다시 머티리얼 창으로 돌아와서

246
00:14:40.780 --> 00:14:45.230
이후에 생기는 일에 대해서 하나 문제점을 짚어 보겠습니다

247
00:14:45.230 --> 00:14:47.580
지금 우리는 레드 채널

248
00:14:47.580 --> 00:14:51.480
언리얼 기준으로는 레드는 곧 X축이니까

249
00:14:51.480 --> 00:14:56.030
레드 채널을 기준으로 해서 보였다가 안 보였다가

250
00:14:56.030 --> 00:14:59.331
왔다 갔다 하게 만들었죠 여기에서 문제는

251
00:14:59.331 --> 00:15:03.231
그러면 내가 이 디졸브의 방향을 바꾸고 싶다면

252
00:15:03.231 --> 00:15:05.681
어떻게 해야 될 것인가 하는 겁니다

253
00:15:05.681 --> 00:15:08.181
내가 만약에 앞뒤로

254
00:15:08.181 --> 00:15:10.781
프론트, 백으로 왔다 갔다 하는 게 아니고

255
00:15:10.781 --> 00:15:14.531
탑과 다운을 이용해서 위아래로 왔다 갔다

256
00:15:14.531 --> 00:15:17.031
보였다 안 보였다를 만들고 싶다거나

257
00:15:17.031 --> 00:15:20.331
혹은 이 두 가지가 결합된 대각선 방향으로

258
00:15:20.331 --> 00:15:22.881
보였다 안 보였다 만들게 하고 싶다면

259
00:15:22.881 --> 00:15:26.431
지금과 같은 상태라면 레드 채널 그대로니까

260
00:15:26.431 --> 00:15:31.181
각각의 방향마다 디졸브 머티리얼을 다 만들어줘야겠죠

261
00:15:31.181 --> 00:15:34.681
근데 사실상 360도니까 다 할 수는 없겠죠

262
00:15:34.681 --> 00:15:39.731
그래서 우리는 간단한 공식을 하나 만들어서 사용할 겁니다

263
00:15:39.731 --> 00:15:43.731
내적을 활용한 방향 전환 및 다양한 효과 연출

264
00:15:43.981 --> 00:15:45.981
노드를 약간 옆으로 빼고요

265
00:15:45.981 --> 00:15:49.281
Alt를 눌러서 이 연결을 끊어주겠습니다

266
00:15:49.281 --> 00:15:53.831
그러고 나서 우선 Vector Parameter를 하나 만들어서

267
00:15:53.831 --> 00:15:57.331
이 파라미터의 이름은 Direction이라고 하겠습니다

268
00:15:57.331 --> 00:15:59.431
앞서서 말씀드린 것처럼

269
00:15:59.431 --> 00:16:01.431
여기에 들어가 있는 컬러 값은

270
00:16:01.431 --> 00:16:07.431
프론트, 백, 라이트, 레프트, 탑, 다운과 같은 형식으로

271
00:16:07.431 --> 00:16:13.181
RGB를 이용해서 방향을 알려주는 역할로 사용할 수 있습니다

272
00:16:13.181 --> 00:16:17.231
그렇기 때문에 이 자체가 방향을 알려주는

273
00:16:17.231 --> 00:16:20.231
이렇게 값을 이용해서 방향을 알려주는 것이고

274
00:16:20.231 --> 00:16:23.431
우리는 이것을 내적이라고 하는

275
00:16:23.431 --> 00:16:28.431
Dot 연산, Dot Product를 이용해서 알아볼 겁니다

276
00:16:28.431 --> 00:16:31.281
그래서 기본 값은 프론트를 기준으로 할 수 있게

277
00:16:31.281 --> 00:16:32.881
이렇게 Direction의 값을

278
00:16:32.881 --> 00:16:35.431
레드 상태로 만들어 놓고 OK 하겠습니다

279
00:16:35.431 --> 00:16:39.231
이것을 그대로 Emissive Color에 연결하고

280
00:16:39.231 --> 00:16:41.581
잠시 Opacity Mask는 끄겠습니다

281
00:16:41.581 --> 00:16:44.681
앞서 말한 것과 같이 지금 보시면

282
00:16:44.681 --> 00:16:47.731
X축으로 보면 그라데이션이 똑같이

283
00:16:47.731 --> 00:16:49.731
이렇게 X축의 방향대로

284
00:16:49.731 --> 00:16:53.431
뻗어나간 방향대로 일치하는 것을 볼 수가 있죠

285
00:16:53.431 --> 00:16:57.731
Dot 연산에 대한 구체적인 계산 방법 같은 것들은

286
00:16:57.731 --> 00:17:03.181
나중에 여러분들이 따로 수학책 같은 것들을 참고하시면 되고

287
00:17:03.181 --> 00:17:07.481
제가 여기서 설명드리고자 하는 Dot 연산의 활용 방법은

288
00:17:07.481 --> 00:17:09.531
기본적으로 Dot 연산은

289
00:17:09.531 --> 00:17:15.631
방향 비교할 때 쉐이더를 하면서 많이 사용하게 됩니다

290
00:17:15.631 --> 00:17:18.981
어떤 원리냐면 A라는 기준을 바탕으로

291
00:17:18.981 --> 00:17:23.431
우리한테 전달되는 Direction 값을 기준과

292
00:17:23.431 --> 00:17:26.281
이걸 흔히 Direction이라고 얘기하겠습니다

293
00:17:26.281 --> 00:17:28.531
Direction을 비교하는 겁니다

294
00:17:28.531 --> 00:17:32.781
그래서 기준 벡터가 만약에 위로 솟아 있다고 가정하고

295
00:17:32.781 --> 00:17:36.531
당연히 여기에서 단위는 기본적으로 1입니다

296
00:17:36.531 --> 00:17:39.331
그리고 여기에 벡터가 대각선으로

297
00:17:39.331 --> 00:17:41.431
이렇게 똑같이 1짜리가 있다고

298
00:17:41.431 --> 00:17:44.132
45도로 기울어진 벡터가 있다고 하면

299
00:17:44.132 --> 00:17:45.932
조금 길게 그려졌네요

300
00:17:45.932 --> 00:17:50.582
이 방향을 그대로 기준에 갖다 붙이는 겁니다

301
00:17:50.582 --> 00:17:54.432
이것을 이렇게 갖다 붙여서 비교하는 거죠

302
00:17:54.432 --> 00:17:56.832
기준에서 너는 현재

303
00:17:56.832 --> 00:17:59.982
몇 퍼센트의 위치에 있느냐고 물어보는 겁니다

304
00:17:59.982 --> 00:18:04.432
실제 45도보다 좀 덜 누워서 지우고 다시 그리겠습니다

305
00:18:04.432 --> 00:18:09.132
45도의 1짜리 벡터를 그려보면 대략 이렇게

306
00:18:09.132 --> 00:18:12.632
이 기준을 1이라고 했을 때 이것을 그대로

307
00:18:12.632 --> 00:18:17.482
비교 벡터의 방향을 이렇게 프로젝션 시킨다고도 얘기를 합니다

308
00:18:17.482 --> 00:18:23.082
이것이 현재 벡터의 몇 퍼센트의 위치에 있느냐고 하면

309
00:18:23.082 --> 00:18:26.082
기본적으로 45도 각도는

310
00:18:26.082 --> 00:18:31.282
대략 위치가 0.717 정도 됩니다

311
00:18:31.282 --> 00:18:35.832
그래서 약 70% 정도의 위치에 있다고

312
00:18:35.832 --> 00:18:37.882
볼 수 있는 거죠 기준 대비

313
00:18:37.882 --> 00:18:41.932
이것을 이렇게 방향이 서로 다른 것에 대해서

314
00:18:41.932 --> 00:18:44.632
수치화시킬 수 있다는 얘기입니다

315
00:18:44.632 --> 00:18:46.732
Dot 연산을 이용하면

316
00:18:46.732 --> 00:18:51.282
마찬가지 맥락으로 여기에 그림 값을 포함한다면

317
00:18:51.282 --> 00:18:53.332
이렇게 비교해 보겠습니다

318
00:18:53.332 --> 00:18:56.782
X 1, Y 1이라고 하는 것은

319
00:18:56.782 --> 00:18:59.832
X축으로도 1, Y축으로도 1

320
00:18:59.832 --> 00:19:02.532
그렇기 때문에 이렇게 대각선의 벡터가 나오죠

321
00:19:02.532 --> 00:19:06.032
그래서 그라데이션이 여기서부터 끝까지 해서

322
00:19:06.032 --> 00:19:08.582
이렇게 그라데이션이 됩니다

323
00:19:08.582 --> 00:19:12.182
한번 실제 인스턴스에서 확인해 보겠습니다

324
00:19:12.182 --> 00:19:14.232
이 내용을 저장해 주시고요

325
00:19:14.232 --> 00:19:18.082
머티리얼로 돌아가서 Global Vector Parameter에서

326
00:19:18.082 --> 00:19:21.482
노드를 이전과 동일하게 만들어 주고

327
00:19:21.482 --> 00:19:24.082
Apply 혹은 저장을 눌러서

328
00:19:24.082 --> 00:19:27.782
머티리얼 인스턴스에서도 Direction이라는 파라미터와

329
00:19:27.782 --> 00:19:32.182
VisibleVal에 대해서 수정할 수 있게끔 저장해 주시고요

330
00:19:32.182 --> 00:19:34.732
이것을 인스턴스 화면으로 가서

331
00:19:34.732 --> 00:19:38.332
여러분들이 방향을 알기 쉽게 박스로 두겠습니다

332
00:19:38.332 --> 00:19:40.382
Direction을 활성화시키고요

333
00:19:40.382 --> 00:19:44.332
여기에서 VisibleVal는 0으로 두겠습니다

334
00:19:44.332 --> 00:19:48.032
이것을 지금 보시면 레드와 그린 각각이 1이고

335
00:19:48.032 --> 00:19:51.382
VisibleVal에 따라서 높이면 당연히

336
00:19:51.382 --> 00:19:54.182
0에다가 계속 1보다 큰 값이 점점 들어가면

337
00:19:54.182 --> 00:19:55.582
그냥 흰색이 되겠죠

338
00:19:55.582 --> 00:20:01.182
그래서 점점 줄여보면 그라데이션의 방향이 일정하게

339
00:20:01.182 --> 00:20:06.582
대각선 방향으로 줄어드는 걸 보실 수가 있습니다 이런 식으로

340
00:20:06.582 --> 00:20:11.382
당연히 이것을 Opacity Mask에 연결한다면

341
00:20:11.382 --> 00:20:12.382
저장을 하고요

342
00:20:12.382 --> 00:20:17.982
우리가 원하는 방향대로 사라지게 만들 수가 있겠죠

343
00:20:17.982 --> 00:20:19.582
보이게도 하고요

344
00:20:21.632 --> 00:20:26.482
이 방향을 애매한 각도로 그린 채널을 살짝 줄여본다면

345
00:20:28.833 --> 00:20:32.483
방향이 틀어져서 줄어드는 방향이

346
00:20:32.483 --> 00:20:37.183
약간 45도를 비껴난 방향이라는 것을 확인할 수가 있죠

347
00:20:41.083 --> 00:20:44.633
그래서 이러한 성질을 바탕으로 해서

348
00:20:44.633 --> 00:20:47.883
우리는 디졸브 효과를 만들 건데

349
00:20:47.883 --> 00:20:52.733
지금은 경계가 너무 깔끔합니다

350
00:20:52.733 --> 00:20:54.483
지금 보시는 것처럼

351
00:20:55.283 --> 00:20:58.133
다시 머티리얼 에디터 화면으로 돌아왔어요

352
00:20:58.133 --> 00:21:01.133
우선 Noise 노드를 생성하겠습니다

353
00:21:01.133 --> 00:21:02.783
여기 있는 Noise 노드는

354
00:21:02.783 --> 00:21:05.233
World Position 값을 기준으로 하는데

355
00:21:05.233 --> 00:21:06.983
여기에서 World Position이라고 해서

356
00:21:06.983 --> 00:21:09.533
여러분들이 검색해서 나오는 노드가 있을 겁니다

357
00:21:09.533 --> 00:21:12.683
이 노드를 사용한다고 했을 때

358
00:21:12.683 --> 00:21:15.733
한 가지 문제점이 생기는 것을 먼저 설명하고

359
00:21:15.733 --> 00:21:17.033
마저 진행을 할 겁니다

360
00:21:17.033 --> 00:21:20.133
우선 이것을 Emissive Color에 연결해 주겠습니다

361
00:21:20.133 --> 00:21:21.833
그러면 지금 보시는 것처럼

362
00:21:21.833 --> 00:21:25.433
아주 자잘한 노이즈가 생기는 것을 볼 수가 있는데요

363
00:21:25.433 --> 00:21:28.933
이것을 조금 더 크게 패턴을 보이게 하기 위해서

364
00:21:28.933 --> 00:21:33.333
Position에다가 Multiply를 해주고요 곱하기로

365
00:21:33.333 --> 00:21:36.183
B에다가는 이렇게 출력을 뽑아서

366
00:21:36.183 --> 00:21:40.883
Scalar Parameter로 Noise Scale이라고

367
00:21:40.883 --> 00:21:43.383
이렇게 파라미터를 하나

368
00:21:43.383 --> 00:21:47.483
0.03을 기본 값으로 하는 노드를 만들어 주겠습니다

369
00:21:47.483 --> 00:21:51.233
이것을 World Position에 연결하면 지금 보시는 것처럼

370
00:21:51.233 --> 00:21:55.083
패턴이 조금 더 커진 것을 확인하실 수가 있죠

371
00:21:55.083 --> 00:21:58.833
이것을 이용해서 우리가 디졸브 효과를 만들 때

372
00:21:58.833 --> 00:22:01.383
World Position이기 때문에 생기는 문제점

373
00:22:01.383 --> 00:22:05.133
Level에다가 이 액터를 실제로 배치해서

374
00:22:05.133 --> 00:22:06.333
보여드리도록 하겠습니다

375
00:22:06.333 --> 00:22:08.683
우선 Third Person Map에다가

376
00:22:08.683 --> 00:22:12.233
Shapes 항목에서 큐브를 드래그해서 집어넣겠습니다

377
00:22:12.233 --> 00:22:15.883
그리고 이 큐브에다가 우리가 만들어 놓은 인스턴스를

378
00:22:15.883 --> 00:22:20.733
이렇게 큐브에 적용을 해 보면요 사라져 있죠

379
00:22:20.733 --> 00:22:24.933
이 노이즈 패턴대로 모양을 갖추면서 사라지게 될 건데

380
00:22:24.933 --> 00:22:28.983
World Position을 하다 보니까 오브젝트가 이동을 하더라도

381
00:22:28.983 --> 00:22:33.233
지금 보시면 노이즈의 패턴 자체가

382
00:22:33.233 --> 00:22:36.133
월드 상에 고정된 것처럼 보이죠

383
00:22:36.133 --> 00:22:39.483
마찬가지로 오브젝트가 회전을 해도

384
00:22:39.483 --> 00:22:41.833
이런 식으로 노이즈 패턴이

385
00:22:41.833 --> 00:22:43.783
고정되어 있는 걸 보실 수가 있습니다

386
00:22:44.633 --> 00:22:47.383
다시 머티리얼 에디터 창으로 돌아와서요

387
00:22:47.383 --> 00:22:49.783
여기 있는 World Position이라는

388
00:22:49.783 --> 00:22:53.483
Noise 항목에서의 Input 항목은 신경 쓰지 마시고

389
00:22:53.483 --> 00:22:56.433
Local Position을 별도로 검색을 해서

390
00:22:56.433 --> 00:22:59.283
Local Position 노드를 이용해서 이렇게

391
00:22:59.283 --> 00:23:03.333
Multiply에다가 World Position 대신 연결해 주도록 할 겁니다

392
00:23:03.333 --> 00:23:05.483
적용하고 실제 효과를 보면요

393
00:23:05.483 --> 00:23:09.884
이제 Local Position 값을 기준으로 적용이 되기 때문에

394
00:23:09.884 --> 00:23:13.884
오브젝트가 회전을 하거나 이동을 했을 때

395
00:23:13.884 --> 00:23:16.934
그대로 오브젝트와 함께 일체화돼서

396
00:23:16.934 --> 00:23:19.134
움직이는 것을 확인하실 수가 있죠

397
00:23:20.434 --> 00:23:24.034
World Position은 잠깐 지우도록 하고

398
00:23:24.034 --> 00:23:29.084
Local Position의 Scale 값을 0.03을 입력한 상태에서

399
00:23:29.084 --> 00:23:32.384
이 Noise를 한 번 더 Add 해가지고

400
00:23:32.384 --> 00:23:35.234
Dot 항목과 연결해 주도록 할 겁니다

401
00:23:35.234 --> 00:23:40.334
VisibleVal와 연결되어 있는 것은 지우도록 하겠습니다

402
00:23:40.334 --> 00:23:44.634
이렇게 연결된 Add를 나중에 이 VisibleVal와는

403
00:23:44.634 --> 00:23:47.484
Step이라는 항목으로 정리를 해 줄 겁니다

404
00:23:47.484 --> 00:23:49.534
VisibleVal에서 Step을 연결하면

405
00:23:49.534 --> 00:23:52.134
자동으로 Y에다가 연결이 되고요

406
00:23:52.134 --> 00:23:56.684
Dot 연산이 된 결과치와 Noise 항목은 Add를 해서

407
00:23:56.684 --> 00:23:59.634
Step이라는 노드의 X에다가 연결하고

408
00:23:59.634 --> 00:24:02.034
Opacity Mask로 연결을 해주겠습니다

409
00:24:02.334 --> 00:24:06.034
이렇게 연결이 되었죠 이것을 이제 저장을 하고

410
00:24:06.034 --> 00:24:08.634
인스턴스 창으로 가서 보게 되면요

411
00:24:08.634 --> 00:24:12.084
VisibleVal 항목에서 값을 늘려보겠습니다

412
00:24:14.134 --> 00:24:18.084
점점 이렇게 사라지는 것이 보이시죠

413
00:24:19.634 --> 00:24:22.784
그리고 이 사라지는 방향이 잘 보시면

414
00:24:22.784 --> 00:24:28.484
우리가 미리 Direction 항목에서 지정해 놓은 방향에 맞춰서

415
00:24:28.484 --> 00:24:34.884
사라지는 정도, 밀도가 다르다는 것을 확인하실 수가 있습니다

416
00:24:35.984 --> 00:24:38.534
여기 있는 Direction 항목에다가

417
00:24:38.534 --> 00:24:41.784
만약에 1보다 큰 값을 넣어주게 됐을 때

418
00:24:41.784 --> 00:24:45.684
사라지는 정도가 조금 이상할 건데요 한번 보시면

419
00:24:48.884 --> 00:24:54.084
사라지는 정도가 우리가 Direction의 값을

420
00:24:54.084 --> 00:24:57.384
얼마를 정하는지에 따라서 이런 식으로

421
00:24:57.384 --> 00:25:01.234
마치 VisibleVal가 바뀌듯이 이렇게

422
00:25:01.984 --> 00:25:04.134
Direction 값을 바꾸는 것도

423
00:25:04.134 --> 00:25:07.284
마치 VisibleVal가 바뀌는 것과 같은

424
00:25:07.284 --> 00:25:10.334
이런 식의 효과를 보실 수가 있습니다

425
00:25:11.084 --> 00:25:14.834
우선 이런 일이 왜 생기는지부터 말씀을 드리면

426
00:25:14.834 --> 00:25:17.134
기본적으로 바운딩 박스에서는

427
00:25:17.134 --> 00:25:20.384
출력되는 값이 0에서 1까지입니다

428
00:25:20.384 --> 00:25:24.234
그래서 박스가 있다고 치면 0에서부터 1까지죠

429
00:25:24.234 --> 00:25:27.284
1, 0이나 1, 1 정도가 되겠죠

430
00:25:27.284 --> 00:25:30.484
그럼 대각선의 길이 가장 긴 거라고 해봐야

431
00:25:30.484 --> 00:25:33.134
1.4 정도 될 겁니다

432
00:25:33.134 --> 00:25:35.434
여기에다가 루트 2 정도 씌우니까

433
00:25:35.434 --> 00:25:39.434
반면에 비교해야 될 벡터가 단위 벡터가 아닌

434
00:25:39.434 --> 00:25:41.684
이런 식으로 기다란 벡터가 나와서

435
00:25:41.684 --> 00:25:45.034
이게 몇 퍼센트냐 이런 식으로 따지게 되면

436
00:25:45.034 --> 00:25:48.484
원래 있던 길이보다 2배가 커질 수도 있고

437
00:25:48.484 --> 00:25:51.934
3배가 커질 수도 있고 여러 배 커질 수가 있겠죠

438
00:25:51.934 --> 00:25:54.934
그렇기 때문에 우리는 이 방향에 대한 것도

439
00:25:54.934 --> 00:25:56.285
정리가 좀 필요한데요

440
00:25:56.285 --> 00:25:58.385
여기에 있는 길이를 무조건

441
00:25:58.385 --> 00:26:03.035
방향이 어느 방향이 됐든 길이가 1이 될 수 있도록

442
00:26:03.035 --> 00:26:06.185
Direction 노드를 잠깐 뒤로 미루고

443
00:26:06.185 --> 00:26:11.985
여기에 있는 노드에서 Normalize 하고 이렇게 연결해주면

444
00:26:11.985 --> 00:26:14.235
한번 저장해 보겠습니다

445
00:26:14.235 --> 00:26:18.885
이제 인스턴스 창에서 잠시 절반 정도만 보이게끔 설정하고요

446
00:26:18.885 --> 00:26:25.835
여기에 있는 그린 값을 엄청나게 바꾼다고 하더라도

447
00:26:25.835 --> 00:26:33.185
지금 보시는 것처럼 이 값이 쭉 줄어들어서

448
00:26:33.185 --> 00:26:39.385
0보다만 크다면 일정하게 유지되는 것을 보실 수가 있죠

449
00:26:39.385 --> 00:26:42.685
물론 이게 마이너스 값으로 가면

450
00:26:42.685 --> 00:26:45.535
당연히 방향이 바뀌는 거니까

451
00:26:45.535 --> 00:26:48.185
이때는 방향이 바뀌겠지만

452
00:26:48.185 --> 00:26:51.685
이제는 지금 보시는 것처럼

453
00:26:51.685 --> 00:26:54.585
값이 아무리 커진다고 해도

454
00:26:54.585 --> 00:26:58.935
물론 약간의 방향 값이 커진다는 게

455
00:26:58.935 --> 00:27:02.785
이렇게 X로 한 번, Y로 요만큼 갈 때랑

456
00:27:02.785 --> 00:27:07.535
X로 한 번, Y로 이만큼 갈 때랑 나타내는 방향 자체는

457
00:27:07.535 --> 00:27:11.285
이런 식으로 약간 각도가 틀어지는 것은 있습니다

458
00:27:11.285 --> 00:27:13.285
그래서 방향이 틀어지는 거지

459
00:27:13.285 --> 00:27:15.935
40, 50, 100만큼 된다고 해서

460
00:27:15.935 --> 00:27:18.885
이게 엄청나게 보이는 범위를 바꿀 만큼

461
00:27:18.885 --> 00:27:20.435
영향을 주지는 않습니다

462
00:27:20.435 --> 00:27:22.685
이런 식으로 값을 정리를 했고요

463
00:27:22.685 --> 00:27:24.435
Step의 노드가 하는 일도

464
00:27:24.435 --> 00:27:27.035
이런 값을 정리하는 것과 똑같습니다

465
00:27:27.035 --> 00:27:31.635
우리가 VisibleVal에 마이너스 값을 넣어주는 이유 중 하나는

466
00:27:31.635 --> 00:27:35.435
여기 있는 Noise 항목이 값이 출력되는 게

467
00:27:35.435 --> 00:27:39.335
마이너스에서부터 플러스까지 값의 범위가 좀 넓습니다

468
00:27:39.335 --> 00:27:40.935
값의 범위가 넓다 보니까

469
00:27:40.935 --> 00:27:44.485
Emissive Color처럼 1보다 큰 값을

470
00:27:44.485 --> 00:27:46.135
인식하는 노드는 상관없는데

471
00:27:46.135 --> 00:27:48.185
이렇게 Opacity Mask처럼

472
00:27:48.185 --> 00:27:51.085
0에서 1 사이로 인식되는 노드들은

473
00:27:51.085 --> 00:27:55.285
나중에 값에 대한 정리를 좀 해주는 것이 좋은데

474
00:27:55.285 --> 00:27:57.135
Step 노드가 하는 일은

475
00:27:57.135 --> 00:27:59.885
내가 정한 임의의 값을 기준으로 해서

476
00:27:59.885 --> 00:28:02.135
이 값보다 작다면

477
00:28:02.135 --> 00:28:04.035
이것을 X로 놓겠습니다

478
00:28:04.035 --> 00:28:06.235
내가 정한 임의의 값을 X라고 해서

479
00:28:06.235 --> 00:28:10.085
이것보다 작은 어떤 값이 들어온다면 그것은 무조건 0으로

480
00:28:10.085 --> 00:28:12.235
그리고 X보다 큰 값이 들어오면

481
00:28:12.235 --> 00:28:14.835
그건 무슨 값이 됐든 무조건 1로

482
00:28:14.835 --> 00:28:21.135
0에서 1 사이의 값으로 정리해 주는 역할도 함께 하고 있습니다

483
00:28:21.135 --> 00:28:22.985
그렇기 때문에 Step 노드를 쓴다면

484
00:28:22.985 --> 00:28:26.735
별도의 다른 노드들 없이 전달되는 값 자체가

485
00:28:26.735 --> 00:28:29.285
0에서 1 사이 값으로 안정이 됩니다

486
00:28:29.285 --> 00:28:31.685
마저 표현을 계속해서 해 볼 건데요

487
00:28:31.685 --> 00:28:35.385
VisibleVal 노드의 값을 0.5 정도로 해서

488
00:28:35.385 --> 00:28:38.286
사라지는 범위를 보도록 하겠습니다

489
00:28:38.286 --> 00:28:41.186
0.5 정도로 하면 이렇게 서서히 사라지는 것들이

490
00:28:41.186 --> 00:28:45.436
0.6 이런 식으로 점점 이제 티가 나게 되는데요

491
00:28:45.436 --> 00:28:50.486
근데 건너편을 잘 보시면 이렇게 뻥 뚫려서 비칩니다

492
00:28:50.486 --> 00:28:53.336
이러한 이유는 3D 오브젝트는 기본적으로

493
00:28:53.336 --> 00:28:57.286
앞면만 그리는 게 기본 속성이기 때문에 그런 것인데

494
00:28:57.286 --> 00:29:01.036
여기에 있는 마스터 노드를 여러분들이 선택하셔서

495
00:29:01.036 --> 00:29:03.136
혹은 여백을 클릭하셔도 됩니다

496
00:29:03.136 --> 00:29:06.586
여기 Two Sided라고 되어 있는 옵션을 체크해 보시면

497
00:29:06.586 --> 00:29:12.286
이제 앞면 뒷면 모두를 그려라라는 이러한

498
00:29:12.286 --> 00:29:15.186
안쪽에 들어가서도 면이 있는 걸 보실 수가 있죠

499
00:29:15.186 --> 00:29:17.636
그래서 아직 사라지지 않은 쪽을 보면

500
00:29:17.636 --> 00:29:19.986
벽에 막힌 것처럼 안 보이고

501
00:29:19.986 --> 00:29:21.736
이러한 옵션을 사용하게 될 건데

502
00:29:21.736 --> 00:29:26.486
지금 보시면 앞면과 뒷면의 색상이 똑같습니다

503
00:29:26.486 --> 00:29:28.636
앞면과 뒷면의 색상이 똑같은데

504
00:29:28.636 --> 00:29:31.936
이것을 다른 색상으로 표현하기 위해서

505
00:29:31.936 --> 00:29:34.736
여기에서 오른쪽 클릭하시고

506
00:29:34.736 --> 00:29:38.986
우선 컬러 노드 두 가지를 먼저 만들어 보겠습니다

507
00:29:38.986 --> 00:29:45.986
Constant3Vector를 이용해서 Ctrl+C, V로 붙여주고요

508
00:29:45.986 --> 00:29:50.186
하나는 임의의 값 빨간색으로 놓고요 색깔의 구분을 위해서

509
00:29:50.186 --> 00:29:54.736
또 다른 컬러는 구분이 좀 잘 되게 녹색으로 놓겠습니다

510
00:29:54.736 --> 00:29:56.586
약간 촌스러워지겠죠

511
00:29:56.586 --> 00:30:00.636
이 두 가지를 Lerp를 이용해서 믹싱을 해줄 겁니다

512
00:30:00.636 --> 00:30:05.686
이때 믹싱이 되는 기준은 지금까지는 다루지 않았던

513
00:30:05.686 --> 00:30:12.186
TwoSidedSign이라고 하는 노드를 통해서 믹싱을 해줄 겁니다

514
00:30:12.186 --> 00:30:13.886
이거를 이렇게 연결해서

515
00:30:13.886 --> 00:30:16.586
Emissive Color에다가 완성해 보면 이런 식으로

516
00:30:16.586 --> 00:30:22.086
앞면은 녹색으로, 안쪽 면은 지금 보시는 것처럼

517
00:30:22.086 --> 00:30:24.136
빨간색으로 인식이 됩니다

518
00:30:24.836 --> 00:30:30.986
근데 엄밀하게 TwoSidedSign이라는 값 자체는 -1에서

519
00:30:30.986 --> 00:30:33.786
-1이 백 사이드를 얘기하는 거고요

520
00:30:33.786 --> 00:30:35.436
조금 확대를 해 보겠습니다

521
00:30:35.436 --> 00:30:41.536
앞면은 1, 백 사이드는 -1 이런 식으로 출력이 되는데

522
00:30:41.536 --> 00:30:43.986
Lerp에다가 마이너스 값을 넣게 되면

523
00:30:43.986 --> 00:30:48.136
값이 왜곡되는, 채도가 좀 올라가는 증상이 있어서

524
00:30:48.136 --> 00:30:52.136
이거는 Saturate라고 하는 노드를 이용해서

525
00:30:52.136 --> 00:30:55.386
값을 안정적으로 잡아주도록 하겠습니다

526
00:30:55.986 --> 00:31:00.536
그래서 앞면과 안쪽 면에, 겉면과 안쪽 면에

527
00:31:00.536 --> 00:31:04.336
색상의 차이를 둬서 시각적으로 구분을 해줬고요

528
00:31:04.336 --> 00:31:06.886
나중에는 여기에 어울리는

529
00:31:06.886 --> 00:31:09.386
다른 텍스처 이미지를 집어넣어서

530
00:31:09.386 --> 00:31:12.836
그것과 어울리는 색상으로 바꿔줄 겁니다

531
00:31:12.836 --> 00:31:15.236
지금은 색상의 구분을 위해서 이렇게 놔둔 거고

532
00:31:15.236 --> 00:31:18.186
만약에 스타터 콘텐츠에서 텍스처 항목에서

533
00:31:18.186 --> 00:31:20.636
이런 벽돌 이미지를 하나 가지고 와서

534
00:31:20.636 --> 00:31:24.337
이것을 Base Color에 연결해 준다고 생각해 보겠습니다

535
00:31:24.337 --> 00:31:27.987
질감을 표현해야 하니까 이런 Base Color 말고도

536
00:31:27.987 --> 00:31:29.437
노멀맵도 필요하겠죠

537
00:31:29.437 --> 00:31:32.837
이런 식으로 노멀맵도 같이 연결을 해 볼 건데요

538
00:31:32.837 --> 00:31:35.137
컬러를 연결한다고 하더라도

539
00:31:35.137 --> 00:31:41.187
현재 녹색에 희미하게 자국이 남듯이 표현이 되고 있죠

540
00:31:41.187 --> 00:31:43.987
녹색이 표현되고 있다는 것은

541
00:31:43.987 --> 00:31:47.487
기본적으로 녹색 노드가 문제가 되는데

542
00:31:47.487 --> 00:31:50.637
Emissive Color에 컬러 값을 주기 때문에

543
00:31:50.637 --> 00:31:52.387
이 Base Color를 무시하고

544
00:31:52.387 --> 00:31:56.137
Emissive Color에 연결된 컬러가 보이게 되는 것입니다

545
00:31:56.137 --> 00:31:59.187
그래서 Base Color를 보여주고 싶다면

546
00:31:59.187 --> 00:32:02.387
Emissive에 있는 컬러를 블랙으로 만들면

547
00:32:02.387 --> 00:32:06.487
이렇게 베이스의 컬러를 볼 수가 있게 됩니다 보이시죠?

548
00:32:06.487 --> 00:32:10.137
마찬가지로 이 빨간색도 완전히 새빨간색이 아니라

549
00:32:10.137 --> 00:32:14.237
조금 어두운 갈색 느낌으로 살짝 바꾼다면

550
00:32:14.237 --> 00:32:15.887
좀 더 어둡게 가겠습니다

551
00:32:15.887 --> 00:32:19.337
이게 워낙에 블랙의 표현이 잘 안 되기 때문에 이런 겁니다

552
00:32:19.337 --> 00:32:24.187
이런 식으로 벽돌의 이미지와 어울리는 이런 갈색

553
00:32:24.187 --> 00:32:25.687
채도를 조금만 더 낮추면

554
00:32:25.687 --> 00:32:27.987
이런 식으로 조금 더 어울리는 색상이 나오겠죠

555
00:32:28.837 --> 00:32:31.987
원래 질감을 우리가 표현하고자 하는 질감과 유사한

556
00:32:31.987 --> 00:32:37.287
Lerp A에 들어가는 것은 Base Color와 어울리는

557
00:32:37.287 --> 00:32:39.437
그리고 Lerp B에 들어가는 건 블랙인데

558
00:32:39.437 --> 00:32:42.037
사실 블랙이라고 하면 0 값이기 때문에

559
00:32:42.037 --> 00:32:44.237
별도의 노드가 필요하지 않습니다

560
00:32:44.237 --> 00:32:45.987
얘를 Delete로 지워도

561
00:32:45.987 --> 00:32:49.937
Lerp B에 들어가는 값만 0이라고 입력해 주면

562
00:32:49.937 --> 00:32:51.287
블랙이 되기 때문에

563
00:32:51.287 --> 00:32:54.687
그래서 우리는 이렇게 질감 표현을 위해서

564
00:32:54.687 --> 00:32:56.287
간단한 세팅을 해 봤고요

565
00:32:56.287 --> 00:33:00.587
여기에 있는 백 사이드에 보이게 될 컬러를 우클릭해서

566
00:33:00.587 --> 00:33:02.837
Convert to Parameter를 이용해서

567
00:33:02.837 --> 00:33:06.887
BackSideColor라고 이렇게 지어주겠습니다

568
00:33:06.887 --> 00:33:08.687
그럼 나중에 파라미터에서도

569
00:33:08.687 --> 00:33:11.887
텍스처를 바꿀 때 적용해 볼 수가 있겠죠

570
00:33:11.887 --> 00:33:14.337
마찬가지로 텍스처도 오른쪽 클릭해서

571
00:33:14.337 --> 00:33:17.687
Convert to Parameter 해서 BaseTex

572
00:33:17.687 --> 00:33:20.987
노멀맵도 마찬가지로 Convert to Parameter

573
00:33:20.987 --> 00:33:24.337
BaseNormal 이렇게 지정하도록 하고요

574
00:33:24.337 --> 00:33:27.687
그래서 단순히 우리가 만드는 질감이

575
00:33:27.687 --> 00:33:31.037
이런 단색으로 이루어진 박스라든가

576
00:33:31.037 --> 00:33:33.587
단순 기본 도형에만 사용하는 것이 아니라

577
00:33:33.587 --> 00:33:36.987
이런 것들을 응용하면 좀 더 복잡한 형태의 오브젝트에도

578
00:33:36.987 --> 00:33:38.587
응용해 볼 수가 있게 됩니다

579
00:33:39.287 --> 00:33:40.237
저장을 해주고요

580
00:33:40.237 --> 00:33:44.287
Saturate에도 값의 범위를 0에서 1 사이라고

581
00:33:44.287 --> 00:33:46.487
이렇게 설명을 달아놓고요

582
00:33:46.487 --> 00:33:50.687
서서히 사라질 때 이거 인스턴스 창에서 보여드리겠습니다

583
00:33:50.687 --> 00:33:52.487
서서히 사라지게 만들 건데

584
00:33:52.487 --> 00:33:55.937
여기서 이런 식으로 서서히 사라지게 될 때

585
00:33:55.937 --> 00:33:58.937
좀 심심하죠 심심하기 때문에

586
00:33:58.937 --> 00:34:02.587
여기에다가 약간 빛나는 효과를 하나 만들어 줄 겁니다

587
00:34:02.587 --> 00:34:05.488
잠시 노드를 뒤로 좀 빼겠습니다

588
00:34:05.488 --> 00:34:08.688
이렇게 반쯤 보이는 상태에서

589
00:34:08.688 --> 00:34:10.738
얼룩의 패턴을 좀 볼 건데요

590
00:34:10.738 --> 00:34:15.288
제가 녹색으로 현재 얼룩의 패턴을 간단하게 그려보겠습니다

591
00:34:15.288 --> 00:34:18.488
이런 식으로 얼룩의 패턴이 잡혀있죠

592
00:34:18.488 --> 00:34:21.438
이 얼룩의 가장자리에 우리는

593
00:34:21.438 --> 00:34:24.538
약간 빛을 내는 효과를 넣는다고 가정해 보겠습니다

594
00:34:24.538 --> 00:34:27.238
이렇게 빛을 내는 효과 가장자리에만

595
00:34:27.238 --> 00:34:30.638
마치 어떠한 질감이 타들어가는 듯이

596
00:34:30.638 --> 00:34:33.438
이렇게 가장자리에만 빛을 낸다고 가정을 해 보면

597
00:34:33.438 --> 00:34:37.438
빛이 나야 될 영역을 골라주는 기능을

598
00:34:37.438 --> 00:34:39.038
우리가 만들어 줘야 됩니다

599
00:34:39.038 --> 00:34:41.388
그렇기 때문에 이거는 간단하게

600
00:34:41.388 --> 00:34:44.538
VisibleVal와 Step을 이용해서

601
00:34:44.538 --> 00:34:46.638
값의 변화를 잘 보세요

602
00:34:46.638 --> 00:34:49.688
0.6일 때 현재 바운더리고요

603
00:34:49.688 --> 00:34:52.838
만약에 이 수치가 0.7이 된다면

604
00:34:52.838 --> 00:34:56.788
혹은 0.8이 된다면 보이는 영역이

605
00:34:56.788 --> 00:34:58.638
이거 잠깐 가리고 보겠습니다

606
00:34:58.638 --> 00:35:01.588
이런 식으로 조금씩 줄어들게 됩니다

607
00:35:01.588 --> 00:35:10.538
0.9가 되고, 0.5와 0.6, 0.7, 0.8, 0.9

608
00:35:10.538 --> 00:35:13.338
이런 식으로 점점 수치가 커질수록

609
00:35:13.338 --> 00:35:17.088
보여지는 면적이 줄어든다는 걸 알 수가 있죠

610
00:35:17.088 --> 00:35:21.388
그래서 여기에다가 Add라는 노드를 하나 만들도록 하겠습니다

611
00:35:21.388 --> 00:35:23.338
그리고 Add 되는 값은

612
00:35:23.338 --> 00:35:26.888
Scalar Parameter를 이용해서 Edge라고

613
00:35:26.888 --> 00:35:29.838
경계를 찾아줄 수 있게끔 지정해 놓고요

614
00:35:29.838 --> 00:35:35.138
Step 노드를 Ctrl+C, V로 복사를 해 준 다음에

615
00:35:35.138 --> 00:35:41.188
A에 들어가는 것은 이렇게 연결해서 Step Y에다가 하고요

616
00:35:41.188 --> 00:35:45.538
그리고 Noise 텍스처 이거

617
00:35:45.538 --> 00:35:47.638
Noise 효과는 그대로 가지고 와서

618
00:35:47.638 --> 00:35:51.138
Step X에다가 똑같이 위에 있는 것과 연결해 주겠습니다

619
00:35:51.138 --> 00:35:56.438
설명을 위해서 VisibleVal만 연결된 Step은 Wide라고

620
00:35:56.438 --> 00:35:58.788
넓은 영역이라고 표시를 해 놓고요

621
00:35:58.788 --> 00:36:02.838
Edge와 더해진 Step은 Thin이라고 해서

622
00:36:02.838 --> 00:36:06.238
이게 좁은 영역이다라고 표시해 놓겠습니다

623
00:36:06.238 --> 00:36:13.238
그러면 우리가 이러한 경계를 찾고자 한다면

624
00:36:13.238 --> 00:36:18.138
결국엔 넓은 영역에서 와이드한 녹색의 영역에서

625
00:36:18.138 --> 00:36:21.438
빨간색의 좁은 영역만 빼준다면

626
00:36:21.438 --> 00:36:23.838
우리는 밝게 빛나야 될

627
00:36:23.838 --> 00:36:26.688
얇은 띠 같은 이미지를 얻을 수 있게 됩니다

628
00:36:26.688 --> 00:36:30.138
그래서 Subtract라는 것을 이용해서

629
00:36:30.138 --> 00:36:35.588
빼기죠 넓은 영역에서 좁은 영역을 얇은 영역을 뺀다

630
00:36:35.588 --> 00:36:37.238
이렇게 설정해 주시고

631
00:36:37.238 --> 00:36:40.388
이것을 Opacity Mask에 가지고 가보면요

632
00:36:40.388 --> 00:36:44.388
현재는 Edge 값이 0이기 때문에 같은 값을 뺀 거라서

633
00:36:44.388 --> 00:36:46.838
사실상 아무 면적도 보이지 않죠

634
00:36:46.838 --> 00:36:51.339
그래서 Edge 값을 0.03 정도로만 약하게 두겠습니다

635
00:36:51.339 --> 00:36:53.289
이제 화면에 스케치는 지우고

636
00:36:53.289 --> 00:36:56.289
그렇게 되면 이 화면에 보이는 것처럼

637
00:36:56.289 --> 00:36:58.939
아주 얇은 띠 같은 것이 보이시죠

638
00:36:58.939 --> 00:37:02.039
만약에 Edge 수치가 훨씬 더 커진다면

639
00:37:02.039 --> 00:37:05.789
0.05라든가 0.1이 된다면

640
00:37:05.789 --> 00:37:09.439
점점 두꺼워지는 걸 보실 수가 있습니다

641
00:37:09.439 --> 00:37:14.139
이 띠 같은 영역은 나중에 우리가 Lerp에다가

642
00:37:14.139 --> 00:37:16.789
Emissive Color에 연결되었던 Lerp 항목 있죠

643
00:37:16.789 --> 00:37:20.739
여기에다가 한 번 더 Lerp로 연결해 줄 겁니다

644
00:37:20.739 --> 00:37:22.939
현재 눈에 보이고 있는 건

645
00:37:22.939 --> 00:37:25.989
1이라는 값이기 때문에 눈에 보이는 거라서

646
00:37:25.989 --> 00:37:28.639
Lerp에 띠에 보이게 될 곳에다가

647
00:37:28.639 --> 00:37:31.739
우리는 밝게 빛날 컬러를 지정해 줄 수 있습니다

648
00:37:31.739 --> 00:37:33.889
Vector Parameter를 이용해서

649
00:37:33.889 --> 00:37:37.239
Emissive Color로 노드 이름을 지어주고

650
00:37:37.239 --> 00:37:40.089
이 노드에 들어가는 Default Value를

651
00:37:40.089 --> 00:37:45.089
빨갛게 빛나도록 레드 8, 그린 1, 블루 0.2 정도로 해서

652
00:37:45.089 --> 00:37:46.839
밝게 빛나게 이렇게 두고요

653
00:37:46.839 --> 00:37:50.939
Subtract 한 결과를 Alpha에다가 전달해 줄 겁니다

654
00:37:50.939 --> 00:37:53.039
그럼 Lerp가 총 두 번 일어나게 되죠

655
00:37:53.039 --> 00:37:55.789
앞면과 뒷면에 대한 Lerp

656
00:37:55.789 --> 00:37:59.639
그래서 뒷면에다가 우리는 이렇게 단색으로 칠해주게 된 거고

657
00:37:59.639 --> 00:38:03.189
그러고 나서 밝게 빛나는 이 영역에다가

658
00:38:03.189 --> 00:38:07.239
한 번 더 Lerp 해서 Emissive Color에 연결하면

659
00:38:07.239 --> 00:38:12.239
띠 부분이 이렇게 밝게 빛나는 걸 확인하실 수가 있습니다

660
00:38:12.239 --> 00:38:16.189
지금과 같은 상태에서 이 구멍 난 부분들은 보이면 안 되겠죠

661
00:38:16.189 --> 00:38:20.039
그러니까 당연히 넓은 영역을 보여줘야 되니까

662
00:38:20.039 --> 00:38:24.289
Wide 항목을 Opacity Mask에 다시 연결을 해주면

663
00:38:24.289 --> 00:38:26.339
이제는 지금 보시는 것처럼

664
00:38:26.339 --> 00:38:30.589
얇게 띠처럼 해가지고 밝게 빛나는 영역과

665
00:38:30.589 --> 00:38:33.939
안쪽에 Base Color가 보이는 영역

666
00:38:33.939 --> 00:38:38.089
그리고 안쪽으로 백 사이드에서 보이는 영역까지

667
00:38:38.089 --> 00:38:41.589
모두 구분되어 있는 것을 확인하실 수가 있습니다

668
00:38:41.589 --> 00:38:42.489
저장해 주고요

669
00:38:42.489 --> 00:38:46.939
이것을 지금 인스턴스 창에서 미리 보기를 해 볼 건데요

670
00:38:46.939 --> 00:38:50.239
NoiseScale하고 Edge 값을 활성화시키고

671
00:38:50.239 --> 00:38:54.439
EmissiveColor, BackSideColor도 모두 다 활성화시켰습니다

672
00:38:54.439 --> 00:38:59.239
그리고 우리가 Base Color도 텍스처, 노말 모두 다 해놨죠

673
00:38:59.239 --> 00:39:01.089
모든 항목을 다 활성화해 놓고

674
00:39:01.089 --> 00:39:06.189
우선 VisibleVal에 의해서 안 보이고, 보이고

675
00:39:06.189 --> 00:39:13.189
우리가 지정한 임의의 방향에 따라서 보이고, 안 보이고를

676
00:39:13.189 --> 00:39:16.389
이렇게 VisibleVal 값으로 정해줄 수가 있고요

677
00:39:16.389 --> 00:39:19.889
Edge의 값에 따라서 값이 커진다면 당연히

678
00:39:19.889 --> 00:39:23.189
Edge의 두께가 가까이서 보시면

679
00:39:23.189 --> 00:39:25.839
점점 두꺼워지는 걸 확인하실 수 있죠

680
00:39:25.839 --> 00:39:28.489
얇게 한다면 근데 이렇게 너무 얇으면

681
00:39:28.489 --> 00:39:30.789
멀리서 봤을 때 오히려 자잘해 보여서

682
00:39:30.789 --> 00:39:33.190
살짝 두께감이 있는 게 낫습니다

683
00:39:33.190 --> 00:39:35.440
살짝 이렇게 두께감 있게 표현해 주고요

684
00:39:35.440 --> 00:39:36.840
Noise Scale을 통해서

685
00:39:36.840 --> 00:39:41.440
Noise Scale 값의 숫자를 키우면 점점 커지게 돼서

686
00:39:41.440 --> 00:39:44.040
Noise가 점점 자잘해지죠 이런 식으로

687
00:39:44.040 --> 00:39:45.840
멀리서 보면 마치 별 같죠

688
00:39:45.840 --> 00:39:49.590
Noise 값을 마이너스 값보다는 조금 크게

689
00:39:49.590 --> 00:39:53.140
이렇게 0.03 이런 식으로 해두면

690
00:39:53.140 --> 00:39:57.290
마치 찢어진 것처럼 이런 식으로 보이게 됩니다

691
00:39:57.290 --> 00:40:03.490
여기에 있는 벽돌 대신에 여러분들이 원하시는 다른 텍스처

692
00:40:03.490 --> 00:40:07.140
이왕이면 노멀맵과 같이 세트로 쓸 수 있는 텍스처들이 있겠죠

693
00:40:07.140 --> 00:40:09.690
이런 잔디밭 같은 것이 있다면

694
00:40:09.690 --> 00:40:15.790
이 잔디밭을 BaseTex와 BaseNormal에다가

695
00:40:15.790 --> 00:40:19.440
이렇게 각각을 다르게 연결해 주고요

696
00:40:19.440 --> 00:40:23.440
이런 식으로 그럼 마치 잔디가 서서히

697
00:40:23.440 --> 00:40:27.540
원래 이렇게 평평하게 있던 잔디가

698
00:40:27.540 --> 00:40:34.890
서서히 타들어가면서 사라지는 것과 같은 효과

699
00:40:34.890 --> 00:40:39.040
그리고 그 모양이 어떤 형태의 메시가 됐든

700
00:40:39.040 --> 00:40:41.540
그 방향성을 잃지 않고

701
00:40:41.540 --> 00:40:44.790
내가 Direction에서 지정한 임의의 방향

702
00:40:44.790 --> 00:40:47.990
사라지는 방향을 위에서 아래로 표현을 하든

703
00:40:47.990 --> 00:40:49.890
아래에서 위로 표현을 하든

704
00:40:49.890 --> 00:40:55.790
이렇게 쭉 사라지는 방향도 우리가 정할 수가 있겠죠

705
00:40:55.790 --> 00:41:02.890
이런 식으로 오브젝트가 가지고 있는 좌표 값이라는 것을 통해서

706
00:41:02.890 --> 00:41:05.790
Local Position, Noise에도 활용해 봤고

707
00:41:05.790 --> 00:41:08.990
바운딩 박스로도 활용해 봤습니다

708
00:41:09.290 --> 00:41:12.890
3D 오브젝트가 가지고 있는 위치 값

709
00:41:12.890 --> 00:41:17.440
Local Position을 이용해서 다양한 방향으로 자연스럽게

710
00:41:17.440 --> 00:41:20.640
트랜지션 될 수 있는 원리에 대해서 배웠습니다

711
00:41:20.640 --> 00:41:25.940
내적이라고 하는 수학 공식을 시각화하는 방법을 이해한다면

712
00:41:25.940 --> 00:41:29.590
디졸브뿐만 아니라 다양한 효과를 만드는 데

713
00:41:29.590 --> 00:41:31.640
응용이 될 수 있습니다

714
00:41:31.640 --> 00:41:36.140
그럼 이번 시간 학습한 내용을 정리하면서 마무리하겠습니다

715
00:41:36.140 --> 00:41:37.440
감사합니다

716
00:41:37.940 --> 00:41:38.540
머티리얼 및 바운딩 박스 생성

717
00:41:38.540 --> 00:41:39.090
머티리얼 생성
M_PosDissolve 머티리얼 생성

718
00:41:39.090 --> 00:41:39.640
Blend Mode : Masked로 변경

719
00:41:39.640 --> 00:41:40.190
BoundingBoxBased_0-1_UVW 노드 생성

720
00:41:40.190 --> 00:41:40.740
RGB 값을 Emissive Color에 연결하면
좌표값에 따라 색이 적용된 것을 볼 수 있음

721
00:41:40.740 --> 00:41:41.290
바운딩 박스 생성
높낮이(Z축)은 파랑, 좌우(Y축) 녹색, 앞뒤(X축) 빨강

722
00:41:41.290 --> 00:41:41.840
Scalar Parameter 노드 생성 (VisibleVal)

723
00:41:41.840 --> 00:41:42.390
바운딩 박스 노드와 Add 후 Opacity Mask에 연결

724
00:41:42.390 --> 00:41:42.940
머티리얼 인스턴스로 만들어서 밸류에 의해서
방향성을 가지고 디졸브 되는 것을 확인

725
00:41:42.940 --> 00:41:43.490
내적을 활용한 방향 전환 및 다양한 효과 연출

726
00:41:43.490 --> 00:41:44.090
Noise 효과
Local Position 노드 생성 후 Multiply에 연결

727
00:41:44.090 --> 00:41:44.640
Noise 노드와 Dot 결과를 Add
Add를 Step X에 연결 후 Step의 결과를 Opacity Mask에 연결

728
00:41:44.640 --> 00:41:45.190
비교해야 할 벡터가 기준보다 훨씬 큰 경우 노멀라이즈가 필요함
VisibleVal 노드 기본값을 0.5로 설정

729
00:41:45.190 --> 00:41:45.740
컬러 및 질감 표현
Constant3Vector 노드를 2개 생성

730
00:41:45.740 --> 00:41:46.290
2개의 Constant3Vector를 Lerp A, B에 각각 연결

731
00:41:46.290 --> 00:41:46.840
StarterContent - Textures 폴더에서 T_Brick_Clay_Old_D
가져온 후 Base Color에 연결

732
00:41:46.840 --> 00:41:47.390
Lerp A에 연결된 색은 Base Color와 어울리게 설정함

733
00:41:47.390 --> 00:41:47.940
Lerp B에 연결된 노드 삭제 후 Lerp B 값을 0으로 설정

734
00:41:47.940 --> 00:41:48.590
디졸브 엣지 빛나게 하기

735
00:41:48.590 --> 00:41:49.190
VisibleVal과 연결되는 Add 생성

736
00:41:49.190 --> 00:41:49.840
새로운 Step 노드 생성 후 Add 결과를 Step Y와 연결

737
00:41:49.840 --> 00:41:50.440
Noise 노드와 연결된 Add 결과를 Step X와 연결

738
00:41:50.440 --> 00:41:51.090
Wide Step을 Subtract A에, Thin Step은 Subtract B에 연결

739
00:41:51.090 --> 00:41:51.690
새로운 Lerp 생성 후 Lerp Adp BackgroundColor와
TwoSidedSign과 Lerp된 결과를 연결

740
00:41:51.690 --> 00:41:52.290
EmissiveColor 노드의 Default Value RGB 값을 (8, 1, 0.2)로 설정

741
00:41:52.290 --> 00:41:52.940
Wide Step을 Opacity Mask에 연결