1
00:00:04.825 --> 00:00:08.925
실감 공통편
에너지 실드

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

3
00:00:26.775 --> 00:00:29.425
이번에는 에너지 실드라고 하는

4
00:00:29.425 --> 00:00:33.175
반투명한 쉐이딩 기법에 대해서 다루게 될 것입니다

5
00:00:33.725 --> 00:00:38.225
Translucent라고 하는 반투명 셰이더의 특징과 함께

6
00:00:38.225 --> 00:00:41.875
포지션과 삼각함수의 사인 함수를 이용한

7
00:00:41.875 --> 00:00:44.075
시각효과를 다루게 됩니다

8
00:00:44.075 --> 00:00:46.975
또한 정적인 형태의 셰이더가 아닌

9
00:00:46.975 --> 00:00:50.025
시간에 따른 변화를 구현해 보겠습니다

10
00:00:50.025 --> 00:00:54.025
Fresnel과 Depth Fade

11
00:00:54.475 --> 00:00:59.225
실습을 위해서 콘텐츠 폴더에 에너지 실드라는 폴더와 함께

12
00:00:59.225 --> 00:01:01.775
머티리얼도 만들어주도록 하겠습니다

13
00:01:01.775 --> 00:01:06.525
머티리얼로 M_EnergyShield라고 생성해서

14
00:01:06.525 --> 00:01:08.475
머티리얼 창을 먼저 열어주겠습니다

15
00:01:08.475 --> 00:01:11.525
우리가 그전까지 표현해 봤던 셰이더들은

16
00:01:11.525 --> 00:01:15.575
대체로 이런 3D 오브젝트 표면에 질감을 나타내거나

17
00:01:15.575 --> 00:01:18.625
어떤 특수한 효과를 넣기 위해서 사용했는데

18
00:01:18.625 --> 00:01:22.775
투명해진다고 하더라도 보이느냐 안 보이느냐와 같은

19
00:01:22.775 --> 00:01:27.625
이런 Blend Mode에 Masked와 같은 설정을 이용했습니다

20
00:01:27.625 --> 00:01:29.375
반면에 이번에 사용할 것은

21
00:01:29.375 --> 00:01:32.825
반투명한 이미지가 보여야 되기 때문에

22
00:01:32.825 --> 00:01:36.525
Translucent라고 하는 Blend Mode를 이용해서

23
00:01:36.525 --> 00:01:38.175
셰이더 제작을 할 겁니다

24
00:01:38.175 --> 00:01:40.925
Translucent 같은 경우에는 지금 보는 것처럼

25
00:01:40.925 --> 00:01:44.075
일반적인 PBR 셰이더의 파라미터들이

26
00:01:44.075 --> 00:01:47.525
상당수 비활성화되는 것을 볼 수가 있습니다

27
00:01:47.525 --> 00:01:51.876
물론 여러분들이 PBR의 효과까지 같이 사용하면서

28
00:01:51.876 --> 00:01:54.626
반투명한 이미지를 얻길 원하신다면

29
00:01:54.626 --> 00:01:59.426
여기 보이는 Translucency라는 항목에서 라이팅 모드를

30
00:01:59.426 --> 00:02:03.476
여기 있는 Surface 항목을 이용해서 활성화해 주시면

31
00:02:03.476 --> 00:02:05.726
PBR 모드는 사용할 수 있지만

32
00:02:05.726 --> 00:02:08.076
현재 제가 사용할 부분에서는

33
00:02:08.076 --> 00:02:11.176
Metalic이라든가 Specular 같은 데이터들

34
00:02:11.176 --> 00:02:15.026
Roughness 같은 것들은 사용하지 않을 예정이기 때문에

35
00:02:15.026 --> 00:02:18.876
리셋 버튼으로 다시 Translucent의 가장 기본형인

36
00:02:18.876 --> 00:02:23.926
Volumetric NonDirectional 상태로 예제를 진행할 겁니다

37
00:02:23.926 --> 00:02:26.326
우선은 에너지 실드 효과를 위해서

38
00:02:26.326 --> 00:02:28.576
Fresnel이라고 하는 노드부터

39
00:02:28.576 --> 00:02:31.326
먼저 생성해서 보여드리도록 하겠습니다

40
00:02:31.326 --> 00:02:36.376
Fresnel이라는 노드를 그대로 Opacity에 사용할 건데

41
00:02:36.376 --> 00:02:40.626
이렇게 사용해 보면 가운데는 지금 뚫려 보이고

42
00:02:40.626 --> 00:02:44.226
가장자리로 가면 지금 보시는 것처럼 이렇게

43
00:02:44.226 --> 00:02:46.376
약간의 음영이 보이죠

44
00:02:46.376 --> 00:02:49.876
실제 이것을 Opacity가 아닌 Ctrl을 눌러서

45
00:02:49.876 --> 00:02:53.626
노드를 Emissive로 다시 재연결해 보면

46
00:02:53.626 --> 00:02:56.926
가장자리는 하얗게 지금 보이죠

47
00:02:56.926 --> 00:02:58.376
가운데는 회색으로 보이는데

48
00:02:58.376 --> 00:03:01.126
사실 이것은 회색이 보이는 게 아니고요

49
00:03:01.126 --> 00:03:04.026
Base Color를 블랙으로 바꾸신다면

50
00:03:04.026 --> 00:03:05.976
블랙의 컬러가 보이게 될 겁니다

51
00:03:05.976 --> 00:03:10.076
Fresnel이라는 노드에 대해서 우선 설명을 드리자면

52
00:03:10.076 --> 00:03:15.126
여러분들이 Dot 연산, 내적에 대해서 이해하실 필요가 있습니다

53
00:03:15.126 --> 00:03:18.426
앞 강의에서 내적을 이야기할 때

54
00:03:18.426 --> 00:03:23.026
기준이 되는 벡터와 또 다른 비교하고자 하는 벡터

55
00:03:23.026 --> 00:03:25.626
두 개를 비교해서 이 두 번째

56
00:03:25.626 --> 00:03:28.126
임의로 A와 B로 나눠 보면

57
00:03:28.126 --> 00:03:33.376
B 벡터가 A의 몇 퍼센트 위치에 있느냐

58
00:03:33.376 --> 00:03:37.726
이것을 비교하는 연산이라고 설명드린 바가 있습니다

59
00:03:37.726 --> 00:03:41.476
그래서 같이 이렇게 마주보고 있다면

60
00:03:41.476 --> 00:03:43.776
이때는 1이라는 값이 나오고요

61
00:03:43.776 --> 00:03:47.626
90도로 꺾여 있다면 이때는 0이라는 값

62
00:03:47.626 --> 00:03:50.426
완전히 등지고 있다면 이때는 -1이라는 값

63
00:03:50.426 --> 00:03:57.326
1에서부터 -1까지 이렇게 값의 결과치를 보여주게 되는데

64
00:03:57.326 --> 00:04:00.126
실제로 Fresnel이 하는 일은

65
00:04:00.126 --> 00:04:03.176
이렇게 반원이 있다고 가정을 해보겠습니다

66
00:04:03.176 --> 00:04:06.376
그리고 카메라가 바라본다고 했을 때

67
00:04:06.376 --> 00:04:12.076
바라보는 3D의 노멀 방향과 카메라 방향의 벡터

68
00:04:12.076 --> 00:04:15.376
이걸 임의로 카메라 벡터라고 얘기를 할게요

69
00:04:15.376 --> 00:04:18.476
노멀의 방향과 카메라 벡터를 비교해서

70
00:04:18.476 --> 00:04:23.576
이것들이 각각 몇 퍼센트를 나타내고 있는지 수치화한 것인데요

71
00:04:23.576 --> 00:04:25.876
엄밀하게는 카메라 벡터는 아닙니다

72
00:04:25.876 --> 00:04:30.726
엄밀하게 얘기하면 카메라를 바라보는 버텍스에

73
00:04:30.726 --> 00:04:34.626
흔히 뷰 벡터라고 카메라를 바라보는 이 벡터와

74
00:04:34.626 --> 00:04:36.376
비교를 한 데이터이긴 한데

75
00:04:36.376 --> 00:04:40.926
결국 비교를 해보면 카메라를 이렇게 바라보겠죠

76
00:04:40.926 --> 00:04:44.326
그러면 결국 90도가 되면 0이라는 값이 나오고

77
00:04:44.326 --> 00:04:47.176
카메라를 똑바로 마주보고 있다면

78
00:04:47.176 --> 00:04:49.226
1이라는 값이 나오게 될 겁니다

79
00:04:49.226 --> 00:04:52.176
뒷면은 -1까지 있겠죠

80
00:04:52.176 --> 00:04:56.926
그래서 결국에는 1에서부터 -1까지 구체가 있다고 하면

81
00:04:56.926 --> 00:05:01.726
이런 결과치를 가지고 역으로 이걸 뒤집은 겁니다

82
00:05:01.726 --> 00:05:05.326
이런 결과를 뒤집어서 마주 보고 있을 때

83
00:05:05.326 --> 00:05:08.626
Dot 연산에 의한 결과로만 따지면

84
00:05:08.626 --> 00:05:11.326
카메라를 똑바로 바라보는 이 지점

85
00:05:11.326 --> 00:05:13.976
우리의 Sphere로 치면 이 지점은

86
00:05:13.976 --> 00:05:16.026
0이라는 값이 나오게 했고요

87
00:05:16.026 --> 00:05:20.126
90도로 꺾여 있는 지점은 1이라는 값이 나오게

88
00:05:20.126 --> 00:05:21.826
값을 뒤집은 겁니다

89
00:05:21.826 --> 00:05:25.377
그래서 Fresnel 같은 경우에는 가장자리 값이

90
00:05:25.377 --> 00:05:28.577
일반적인 내적의 연산 결과와는 다르게

91
00:05:28.577 --> 00:05:31.977
뒤집혀서 1이라는 값을 출력을 하고요

92
00:05:31.977 --> 00:05:36.277
정면을 마주보는 곳이 0이라는 값을 출력하게 됩니다

93
00:05:36.277 --> 00:05:40.427
그래서 일반적으로 벡터를 비교할 때 결과와

94
00:05:40.427 --> 00:05:44.427
실제 Fresnel이 출력하는 결괏값이 약간 차이가 있다

95
00:05:44.427 --> 00:05:46.927
이 정도까지만 이해하고 계셔도 됩니다

96
00:05:46.927 --> 00:05:50.377
물론 이것을 그대로 사용하게 되면

97
00:05:50.377 --> 00:05:55.527
안쪽에 무조건 0%가 되면서 뻥 뚫려 보였죠

98
00:05:55.527 --> 00:05:58.577
그렇기 때문에 이걸 그대로 사용하지는 않고

99
00:05:58.577 --> 00:06:01.877
Lerp를 통해서 반투명하게 해줄 겁니다

100
00:06:01.877 --> 00:06:03.827
LinearInterpolate를 통해서

101
00:06:03.827 --> 00:06:06.877
Alpha에다가 Fresnel 값을 연결해 주고요

102
00:06:06.877 --> 00:06:10.577
그리고 Lerp 된 결과를 Opacity에다가 연결해 주겠습니다

103
00:06:10.577 --> 00:06:13.277
이때 0의 값이 출력이 되는 곳에다가

104
00:06:13.277 --> 00:06:15.877
투명도 0이라고 입력하는 게 아니라

105
00:06:15.877 --> 00:06:20.077
약간 비쳐 보이게 0.3이라고 입력을 할 거고요

106
00:06:20.077 --> 00:06:23.427
B의 값은 1 그대로 완전히 다 보인다는 뜻으로

107
00:06:23.427 --> 00:06:25.727
1이라고 입력을 할 겁니다

108
00:06:25.727 --> 00:06:31.027
그러면 정면에서는 이제 완전히 뚫려 보이는 게 아니라

109
00:06:31.027 --> 00:06:33.977
30%만 투과돼서 보이고

110
00:06:33.977 --> 00:06:35.527
여기 있는 가장자리에는

111
00:06:35.527 --> 00:06:40.127
온전히 오브젝트가 가지고 있는 이 컬러 값 자체가

112
00:06:40.127 --> 00:06:41.927
그대로 다 보이기 때문에

113
00:06:41.927 --> 00:06:45.927
100% 보이고 있는 상황이라고 이해하시면 됩니다

114
00:06:45.927 --> 00:06:49.177
이전에 있던 Opacity Mask 같은 경우에는

115
00:06:49.177 --> 00:06:54.077
0 또는 1이라는 출력값만 가지고 있던 거에 반해서

116
00:06:54.077 --> 00:06:58.177
Opacity 자체는 0에서부터 1까지

117
00:06:58.177 --> 00:07:05.277
반투명해 보이는 0.3이나 0.5와 같은 값들을 지원합니다

118
00:07:05.277 --> 00:07:11.377
여기에서 가운데에서부터 서서히 보이게 되는 끝자락까지

119
00:07:11.377 --> 00:07:14.277
0에서부터 1까지 값이 서서히 변할 때

120
00:07:14.277 --> 00:07:16.527
그 변화되는 정도를

121
00:07:16.527 --> 00:07:20.877
여기 있는 ExponentIn 값을 통해서 제어하게 됩니다

122
00:07:20.877 --> 00:07:25.177
그래서 Exponent 값을 만약에 0으로 둔다면

123
00:07:25.177 --> 00:07:27.627
이렇게 완전히 블랙인 상태죠

124
00:07:27.627 --> 00:07:30.327
1로 둔다면 그라데이션의 범위가

125
00:07:30.327 --> 00:07:32.127
여기에 잠시 표시를 하면

126
00:07:32.127 --> 00:07:33.177
여러분들 눈으로 보이는

127
00:07:33.177 --> 00:07:36.277
대략 반투명해 보이는 50% 정도의 구간이

128
00:07:36.277 --> 00:07:39.777
이쯤이라고 가정하겠습니다 Exponent 1일 때

129
00:07:39.777 --> 00:07:45.427
그러면 여기 있는 값을 2나 3으로 점점 늘려갈수록

130
00:07:45.427 --> 00:07:48.977
50%의 위치가 점점 밀려나게 될 겁니다

131
00:07:48.977 --> 00:07:52.327
이러한 이유는 기본적으로 0에서 1까지

132
00:07:52.327 --> 00:07:54.777
이렇게 선형이라고 하는

133
00:07:54.777 --> 00:07:57.427
우리가 흔히 Linear 하다고 얘기하는

134
00:07:57.427 --> 00:08:00.577
이러한 그래프가 있다고 가정을 해 보면요

135
00:08:00.577 --> 00:08:04.077
이 중간에 우리가 입력을 0.5를 하면

136
00:08:04.077 --> 00:08:08.277
출력이 0.5가 된다는 의미겠죠 이런 식으로

137
00:08:08.277 --> 00:08:12.427
반면에 Exponent는 지수라는 얘기죠

138
00:08:12.427 --> 00:08:14.977
우리가 흔히 2의 n승 할 때

139
00:08:14.977 --> 00:08:18.677
이 n에 해당하는 지수 값을 의미하기 때문에

140
00:08:18.677 --> 00:08:21.327
제곱의 의미로 생각하시면 됩니다

141
00:08:21.327 --> 00:08:25.427
그래서 우리는 0.5를 제곱하게 되면

142
00:08:25.427 --> 00:08:29.977
0.5가 같이 곱해지니까 0.25가 되겠죠

143
00:08:29.977 --> 00:08:31.677
그럼 이것을 그래프로 그려보면

144
00:08:31.677 --> 00:08:35.127
이렇게 볼록한 형태가 될 겁니다

145
00:08:35.127 --> 00:08:38.927
지수 값에 따라서 이것이 점점 더 커짐에 따라서는

146
00:08:38.927 --> 00:08:43.577
그 곡선의 기울기가 이런 식으로 더 볼록하게 바뀌겠죠

147
00:08:43.577 --> 00:08:47.027
우리가 입력한 값보다 훨씬 더

148
00:08:47.027 --> 00:08:50.077
0.5보다는 어두운 값을 출력하게끔

149
00:08:50.077 --> 00:08:54.227
0.5의 위치가 계속해서 낮아지는 겁니다

150
00:08:54.227 --> 00:08:57.177
이런 식으로 반투명한 정도를

151
00:08:57.177 --> 00:09:00.877
우리가 지수를 이용해서 컨트롤해 봤습니다

152
00:09:00.877 --> 00:09:03.677
에너지 실드 효과를 위해서

153
00:09:03.677 --> 00:09:07.178
Fresnel을 사용하는 이유가 기본적으로는

154
00:09:07.178 --> 00:09:10.178
우리가 흔히 에너지 내지는

155
00:09:10.178 --> 00:09:12.978
자기장의 느낌을 표현하고자 할 때

156
00:09:12.978 --> 00:09:15.878
현재는 블랙이라서 좀 티는 덜 나는데요

157
00:09:15.878 --> 00:09:20.228
보통 가장자리의 색을 조금 더 밝게 표현을 하고

158
00:09:20.228 --> 00:09:24.528
안쪽은 투명하게 표현하는 것이 일반적입니다

159
00:09:24.528 --> 00:09:28.478
그래서 일반적으로는 Fresnel 노드를 사용하는 것이고요

160
00:09:28.478 --> 00:09:32.278
여기에서 한번 Lerp를 이용해서

161
00:09:32.278 --> 00:09:35.078
컬러 값도 다르게 표시를 해 보겠습니다

162
00:09:35.078 --> 00:09:38.628
우선 Constant3Vector를 이용해서

163
00:09:38.628 --> 00:09:42.028
총 2개의 Constant3Vector를 만들고요

164
00:09:42.028 --> 00:09:44.528
잠시 Fresnel은 아래로 치워두겠습니다

165
00:09:44.528 --> 00:09:48.628
그리고 여기에서 마찬가지로 Lerp를 이용해서

166
00:09:48.628 --> 00:09:51.628
그대로 Fresnel을 연결해 줄 겁니다

167
00:09:51.628 --> 00:09:57.278
안쪽에 해당하는 A 영역에는 짙은 파란색을 넣어서

168
00:09:57.278 --> 00:09:59.878
A 영역에다가 연결할 거고요

169
00:09:59.878 --> 00:10:01.978
꼭 파랑이 아니어도 됩니다

170
00:10:01.978 --> 00:10:03.828
단지 자기장의 느낌을 표현하는 데

171
00:10:03.828 --> 00:10:08.078
주로 이런 밝은색의 하늘색 같은 것들이 많이 쓰여서

172
00:10:08.078 --> 00:10:09.328
이렇게 하는 거고요

173
00:10:09.328 --> 00:10:14.028
바깥쪽에는 A에 꽂은 것보다는 조금 더 밝은 색을 쓸 건데

174
00:10:14.028 --> 00:10:16.428
다만 여기에 들어가는 값은

175
00:10:16.428 --> 00:10:19.478
블루 값이 조금 더 발광이 될 수 있게끔

176
00:10:19.478 --> 00:10:23.178
각각의 값을 한 3배 정도 밝게 해서

177
00:10:23.178 --> 00:10:24.928
B에다가 연결해 줄 겁니다

178
00:10:24.928 --> 00:10:28.428
그러고 나서 Emissive Color에 연결을 해 보면

179
00:10:28.428 --> 00:10:31.528
바깥쪽은 밝게 발광을 하고요

180
00:10:31.528 --> 00:10:34.628
안쪽은 푸르스름한 빛이 도는 것처럼

181
00:10:34.628 --> 00:10:36.428
묘사해 줄 수가 있습니다

182
00:10:36.428 --> 00:10:41.278
여기에다가 한 가지 효과를 더 추가해 보도록 하겠습니다

183
00:10:41.278 --> 00:10:43.828
이번에 사용할 노드의 이름은

184
00:10:43.828 --> 00:10:48.078
Depth Fade라고 하는 노드입니다

185
00:10:48.078 --> 00:10:52.328
이것을 단순하게 Opacity에만 연결을 해서

186
00:10:52.328 --> 00:10:55.828
미리보기 상에서는 어떤 건지 잘 티가 안 나죠

187
00:10:55.828 --> 00:10:57.728
그래서 이것을 적용한 상태로

188
00:10:57.728 --> 00:11:01.478
월드에다가 한번 배치를 실제로 적용해서

189
00:11:01.478 --> 00:11:03.578
효과에 대한 설명을 이어가 보겠습니다

190
00:11:03.578 --> 00:11:07.778
Place Actors - Shapes 항목에서 Sphere를 먼저

191
00:11:07.778 --> 00:11:12.228
월드 상에 일부분이 겹쳐진 형태로 적용을 하고요

192
00:11:12.228 --> 00:11:14.928
우리가 만든 에너지 실드

193
00:11:14.928 --> 00:11:17.728
현재 제작 중인 이것을 골라서

194
00:11:17.728 --> 00:11:20.578
우리가 배치한 Sphere의 머티리얼에다가

195
00:11:20.578 --> 00:11:22.178
연결해 주도록 하겠습니다

196
00:11:22.178 --> 00:11:25.728
그리고 이게 크기가 작으면 티가 잘 안 나니까

197
00:11:25.728 --> 00:11:29.928
트랜스폼의 Scale 값을 약 5배 정도 키워주면

198
00:11:29.928 --> 00:11:33.628
오브젝트가 맞닿은 이 경계면을 보게 되면

199
00:11:33.628 --> 00:11:37.578
지금 보는 것처럼 이렇게 반투명하게

200
00:11:37.578 --> 00:11:40.278
일부분이 표현된 것을 확인하실 수가 있죠

201
00:11:40.278 --> 00:11:42.828
그래서 멀리서 보면 이렇게 보일 겁니다

202
00:11:42.828 --> 00:11:46.378
맞닿은 경계는 0이라는 값이 나오고요

203
00:11:46.378 --> 00:11:49.628
Fade Distance에 의해서 100 유닛까지

204
00:11:49.628 --> 00:11:51.778
서서히 투명도가 1까지

205
00:11:51.778 --> 00:11:54.128
좀 더 정확하게는 투명도라기보다는

206
00:11:54.128 --> 00:11:56.928
출력되는 값 자체가 1까지

207
00:11:56.928 --> 00:11:59.978
이렇게 표현되게끔 출력해 줍니다

208
00:11:59.978 --> 00:12:02.378
근데 이것을 그대로 사용하는 게 아니고요

209
00:12:02.378 --> 00:12:06.428
일반적인 에너지 실드 특수 효과나 이런 것에서

210
00:12:06.428 --> 00:12:09.078
보통 Depth Fade의 역할은

211
00:12:09.078 --> 00:12:15.928
이러한 경계를 오히려 명확하게 표현하기 위해서 사용하기 때문에

212
00:12:15.928 --> 00:12:21.628
Depth Fade의 값을 OneMinus로 뒤집어서

213
00:12:21.628 --> 00:12:25.178
그대로 Opacity에다가 한번 연결해 보겠습니다

214
00:12:25.178 --> 00:12:29.828
화면상에서도 아주 좁은 영역만 나오고 있죠 저장하고요

215
00:12:29.828 --> 00:12:32.428
월드 상에서도 보면 지금 보는 것처럼

216
00:12:32.428 --> 00:12:36.428
이제는 0이었던 값이 1에서 0을 빼면서

217
00:12:36.428 --> 00:12:38.529
1로 출력이 되게 됐고

218
00:12:38.529 --> 00:12:43.279
1이라는 값이 1이 빠지면서 0으로 출력되게 되었습니다

219
00:12:43.279 --> 00:12:46.579
근데 지금과 같은 상태면 겹쳐있는 영역이

220
00:12:46.579 --> 00:12:49.129
프론트 영역만 이렇게 보이기 때문에

221
00:12:49.129 --> 00:12:54.029
여백을 클릭하시거나 혹은 마스터 노드를 선택하셔서

222
00:12:54.029 --> 00:12:57.379
Two Sided 옵션을 체크해 주셔서

223
00:12:57.379 --> 00:13:01.329
뒷면까지 모두 보일 수 있도록 하면

224
00:13:01.329 --> 00:13:06.829
맞닿은 경계 전체를 우리가 시각화해서 볼 수 있게 되죠

225
00:13:06.829 --> 00:13:11.429
지금과 같은 상태에서 앞서 만들어놨던 Fresnel과 함께

226
00:13:11.429 --> 00:13:15.229
한번 이 두 가지 효과를 믹싱해 보겠습니다

227
00:13:15.229 --> 00:13:19.429
지금 맞닿은 경계 이쪽은 1이라는 값이 나오고 있고요

228
00:13:19.429 --> 00:13:22.279
만약에 우리가 Fresnel을 적용한다고 했을 때

229
00:13:22.279 --> 00:13:24.879
제가 지금 녹색으로 그리고 있는 이 선

230
00:13:24.879 --> 00:13:28.829
구체의 외곽선에 해당하는 부분이 마찬가지로

231
00:13:28.829 --> 00:13:31.479
1이라는 값을 출력하게 됩니다

232
00:13:31.479 --> 00:13:34.729
보통 여러분들이 이런 새로운 효과를 봤을 때

233
00:13:34.729 --> 00:13:37.429
내가 무엇을 해야 될지 모르겠다면

234
00:13:37.429 --> 00:13:40.279
가장 보편적인 선택은 두 가지입니다

235
00:13:40.279 --> 00:13:43.629
이 두 가지 값을 Multiply 하거나

236
00:13:43.629 --> 00:13:46.779
혹은 Add 해주는 거죠 더해주는 거죠

237
00:13:46.779 --> 00:13:49.729
실제 우리가 이 효과를 합쳤을 때

238
00:13:49.729 --> 00:13:53.079
이걸 Multiply 한 결과를 확인해 보면

239
00:13:53.079 --> 00:13:55.179
안쪽에서는 지금 잘 티가 안 나죠

240
00:13:55.179 --> 00:14:00.229
근데 여기에서 보면 오히려 Fresnel에 의한 효과는 안 보이죠

241
00:14:00.229 --> 00:14:01.879
어떻게 보면 당연하죠

242
00:14:01.879 --> 00:14:03.879
여러분들이 헷갈릴까봐 녹색으로

243
00:14:03.879 --> 00:14:06.829
Depth Fade의 값으로 먼저 적어서 보여드리면

244
00:14:06.829 --> 00:14:09.229
3D 오브젝트가 맞닿은 경계를

245
00:14:09.229 --> 00:14:12.229
원래는 0인데 우리가 OneMinus 해서

246
00:14:12.229 --> 00:14:14.679
1로 출력하게끔 해놨고요

247
00:14:14.679 --> 00:14:18.079
이 100 유닛이라는 거리가 지나면서부터

248
00:14:18.079 --> 00:14:20.679
나머지 전체 구간을 우리는 전부

249
00:14:20.679 --> 00:14:24.679
원래는 1이 출력되는 걸 OneMinus로 빼서

250
00:14:24.679 --> 00:14:26.429
0이 출력되게 해놨죠

251
00:14:26.429 --> 00:14:28.979
빨간색으로 Fresnel의 값을 적어 보면

252
00:14:28.979 --> 00:14:32.429
경계의 영역은 1이 출력이 되고요

253
00:14:32.429 --> 00:14:35.729
안쪽에 있는 영역은 0의 값이 출력이 됩니다

254
00:14:35.729 --> 00:14:39.179
당연히 0이 출력되는 부분은 여기도 마찬가지겠죠

255
00:14:39.179 --> 00:14:41.079
여기도 마찬가지일 거고요

256
00:14:41.079 --> 00:14:43.829
그리고 저 위에 갔을 때는

257
00:14:43.829 --> 00:14:45.979
구체의 경계 부분에 해당하는 것은

258
00:14:45.979 --> 00:14:47.929
1이라는 값이 출력이 되겠죠

259
00:14:47.929 --> 00:14:51.229
반면에 Depth Fade는 맞닿은 경계 위쪽은

260
00:14:51.229 --> 00:14:53.279
0이라는 값이 출력되니까

261
00:14:53.279 --> 00:14:56.229
둘이 곱해봐야 0밖에 안되겠죠

262
00:14:56.229 --> 00:14:59.379
그러면 Opacity 0이라는 수치는

263
00:14:59.379 --> 00:15:01.979
결과적으로 보이지 말라는 뜻이니까

264
00:15:01.979 --> 00:15:06.329
마찬가지로 여기에 있는 Depth Fade와 1이

265
00:15:06.329 --> 00:15:10.029
Fresnel의 0과 곱해진다면 결국엔 0이겠죠

266
00:15:10.029 --> 00:15:11.629
그러면 이 두 가지 효과가

267
00:15:11.629 --> 00:15:14.079
그렇게 보기 좋은 상태는 아닐 겁니다

268
00:15:14.079 --> 00:15:18.229
그러면 일단 Multiply는 우리가 사용해야 될 효과에서

269
00:15:18.229 --> 00:15:20.179
Delete 해서 제외를 시켜주시고

270
00:15:20.179 --> 00:15:23.729
Add에다가 이 두 가지 효과를 섞어서 보면

271
00:15:23.729 --> 00:15:25.879
이렇게 Apply를 해 보겠습니다

272
00:15:25.879 --> 00:15:30.679
현재 Fresnel과 Depth Fade가 Add가 된 상태입니다

273
00:15:30.679 --> 00:15:34.229
그러면 이번엔 마찬가지로 이제는 원래 값이 아닌

274
00:15:34.229 --> 00:15:38.729
OneMinus 된 출력 값만 적어 보면 경계는 1이고요

275
00:15:38.729 --> 00:15:42.529
여기서부터는 0, 0, 0이 되겠죠 경곗값은 모두 다

276
00:15:42.529 --> 00:15:44.229
대푯값들만 이렇게 적어 보면

277
00:15:44.229 --> 00:15:48.529
Fresnel 같은 경우에는 카메라가 마주 보는 곳은 0

278
00:15:48.529 --> 00:15:50.929
대푯값들이 0이 될 거고요

279
00:15:50.929 --> 00:15:54.329
경곗값은 모두 다 1이 될 겁니다

280
00:15:54.329 --> 00:15:58.329
그럼 1과 1이 더해지면 결과적으로는 2가 될 거고요

281
00:15:58.329 --> 00:16:03.129
여기 있는 0과 1이 더해져도 최소한 1은 되겠죠

282
00:16:03.129 --> 00:16:06.479
0과 0이 더해지는 이 중앙 부분이라고 하면

283
00:16:06.479 --> 00:16:10.529
여기가 이제 진짜 보이지 않는 0 상태

284
00:16:10.529 --> 00:16:12.779
Opacity가 0 값이 되는 거니까

285
00:16:12.779 --> 00:16:16.780
결과적으로는 가장자리 Fresnel의 효과와

286
00:16:16.780 --> 00:16:19.880
Depth Fade의 효과가 겹쳐져서

287
00:16:19.880 --> 00:16:23.080
우리가 의도한 형태대로 보이게 될 겁니다

288
00:16:23.080 --> 00:16:27.830
이것을 앞서 사용했던 Lerp에 그대로 적용할 건데요

289
00:16:27.830 --> 00:16:30.630
이렇게 투명도와 Emissive Color

290
00:16:30.630 --> 00:16:33.830
두 가지 Lerp 효과를 그대로 적용해 봤습니다

291
00:16:33.830 --> 00:16:36.080
Apply를 눌러서 보게 되면

292
00:16:36.080 --> 00:16:40.080
이렇게 효과가 중첩되어 있는 걸 보실 수가 있는데

293
00:16:40.080 --> 00:16:43.630
이제 여기에서 여러분들이 하나 주의하셔야 될 거

294
00:16:43.630 --> 00:16:49.230
여기에 들어가는 값들이 지금 최댓값은 2인 상황입니다

295
00:16:49.230 --> 00:16:51.380
그래서 가능한 Lerp에 넣으실 때

296
00:16:51.380 --> 00:16:54.030
안정적으로 여러분들이 값을 출력하고 싶다면

297
00:16:54.030 --> 00:16:56.630
Saturate라는 노드를 이용해서

298
00:16:56.630 --> 00:17:00.730
출력되는 값이 0에서 1 사이의 범위가 되게끔

299
00:17:00.730 --> 00:17:05.180
지금 Add가 됐을 때는 0에서 2까지였던 값의 범위가

300
00:17:05.180 --> 00:17:08.380
Saturate를 통해서 0에서 1 사이가 된 거죠

301
00:17:08.380 --> 00:17:11.180
이런 식으로 안정적으로 넣어주시는 게

302
00:17:11.180 --> 00:17:13.730
Lerp의 공식을 생각해 봤을 때

303
00:17:13.730 --> 00:17:17.680
조금 더 효과를 균일하게 만들어 낼 수가 있습니다

304
00:17:17.680 --> 00:17:22.630
이제 여기에다가 우리가 필요한 파라미터들을 만들어서

305
00:17:22.630 --> 00:17:25.430
약간의 변화를 줘보도록 하겠습니다

306
00:17:25.430 --> 00:17:27.980
우선은 이 Fresnel의 경계

307
00:17:27.980 --> 00:17:30.730
흰색에서 서서히 안쪽으로 빠지는

308
00:17:30.730 --> 00:17:33.230
경계에 대한 범위를 조절하기 위해서

309
00:17:33.230 --> 00:17:37.280
ExponentIn에다가 ScalarParameter를 이용해서

310
00:17:37.280 --> 00:17:40.680
이 파라미터의 이름은 FresnelExp라고

311
00:17:40.680 --> 00:17:43.030
이렇게 대푯값을 적도록 하고요

312
00:17:43.030 --> 00:17:44.280
Depth Fade 같은 경우는

313
00:17:44.280 --> 00:17:46.730
Opacity 값은 조절할 필요 없이

314
00:17:46.730 --> 00:17:49.430
Fade 되는 거리 값을 조절하기 위해서

315
00:17:49.430 --> 00:17:54.230
마찬가지로 ScalarParameter를 이용해서 FadeDist

316
00:17:54.230 --> 00:17:57.380
Distance를 줄여서 쓴 겁니다 FadeDist라고

317
00:17:57.380 --> 00:17:59.730
이 값은 기본값이 100이 되고

318
00:17:59.730 --> 00:18:03.830
FresnelExp 값은 이전과 같이 2로 맞춰주도록 하겠습니다

319
00:18:03.830 --> 00:18:07.580
이렇게 먼저 두 개의 가장 주요한 효과들에 대해서

320
00:18:07.580 --> 00:18:09.780
파라미터들을 만들어 줬고요

321
00:18:09.780 --> 00:18:12.530
나머지 컬러 값들도 오른쪽 클릭해서

322
00:18:12.530 --> 00:18:16.430
Convert to Parameter로 해가지고 Inner Color

323
00:18:16.430 --> 00:18:19.730
마찬가지로 Side Color 이런 식으로

324
00:18:19.730 --> 00:18:23.180
컬러 값을 하나 더 이렇게 표현하도록 할 겁니다

325
00:18:23.180 --> 00:18:25.130
Opacity도 마찬가지겠죠

326
00:18:25.130 --> 00:18:28.530
ScalarParameter를 이용해서 InnerOp

327
00:18:28.530 --> 00:18:30.930
A쪽이 안쪽입니다 가운데 영역

328
00:18:30.930 --> 00:18:33.980
그리고 똑같이 ScalarParameter를 이용해서

329
00:18:33.980 --> 00:18:38.480
SideOp로 각각의 파라미터 값을 놔두고

330
00:18:38.480 --> 00:18:44.480
기본값은 0.3, SideOp는 1이 되게끔 저장해 보겠습니다

331
00:18:44.830 --> 00:18:48.830
지금은 Depth Fade에 대한 구체적인 설명을 위해서

332
00:18:48.830 --> 00:18:52.580
간단하게 예제용 머티리얼을 하나 따로 만들었고요

333
00:18:52.580 --> 00:18:56.130
우선은 Depth Fade가 어떻게 그려지는지

334
00:18:56.130 --> 00:18:59.130
그리고 Translucent라고 하는 기능이

335
00:18:59.130 --> 00:19:02.630
어떻게 작동되는지에 대해서 설명해 드리도록 하겠습니다

336
00:19:02.630 --> 00:19:05.280
Depth Fade라고 하면 기본적으로 Depth

337
00:19:05.280 --> 00:19:09.680
깊이에 대한 값을 이용해서 시각화하는 기능인데요

338
00:19:09.680 --> 00:19:12.380
여기에서의 Depth는 일반적으로

339
00:19:12.380 --> 00:19:14.180
앞에 살짝 생략되어 있는 표현이

340
00:19:14.180 --> 00:19:17.680
카메라로부터의 거리가 얼마나 되느냐

341
00:19:17.680 --> 00:19:20.630
이것이 생략이 되어 있는 상황입니다

342
00:19:20.630 --> 00:19:24.180
그래서 잠시 레벨에서 Lit 모드를

343
00:19:24.180 --> 00:19:28.080
Buffer Visualization에 Scene 전체 오브젝트에 대한

344
00:19:28.080 --> 00:19:30.080
Depth 값을 보여줄 수 있는

345
00:19:30.080 --> 00:19:33.280
Scene Depth라는 항목으로 선택해서 보겠습니다

346
00:19:33.280 --> 00:19:36.230
지금 보시면 카메라로부터의 거리가

347
00:19:36.230 --> 00:19:42.680
멀어지면 멀어질수록 점점 하얘지는 것을 확인하실 수 있는데요

348
00:19:42.680 --> 00:19:45.330
근데 특이한 것이 Translucent는

349
00:19:45.330 --> 00:19:48.680
Scene Depth라고 하는 데이터에는

350
00:19:48.680 --> 00:19:50.530
포함되어 있지 않습니다

351
00:19:50.530 --> 00:19:53.481
다시 한번 Lit 모드로 돌아가서 보겠습니다

352
00:19:53.481 --> 00:19:55.631
분명히 여기에는 구체는 있지만

353
00:19:55.631 --> 00:19:59.231
Buffer Visualization - Scene Depth를 다시 한번 선택해 보면

354
00:19:59.231 --> 00:20:02.481
원래 구체가 있던 것을 제가 한번 선택해 볼게요

355
00:20:02.481 --> 00:20:03.731
이렇게 선택해 보면

356
00:20:03.731 --> 00:20:07.281
구체라고 하는 3D 오브젝트는 존재하지만

357
00:20:07.281 --> 00:20:10.281
깊이를 가늠하는 Depth 값에는

358
00:20:10.281 --> 00:20:14.231
포함되어 있지 않다는 것을 확인하실 수가 있는데요

359
00:20:14.231 --> 00:20:16.331
이제는 Lit 모드로 가서

360
00:20:16.331 --> 00:20:19.181
방금 전에 만들었다고 설명드린

361
00:20:19.181 --> 00:20:22.481
Pixel Depth라고 하는 또 다른 데이터가 있습니다

362
00:20:22.481 --> 00:20:27.081
이것을 한번 구체에 그대로 전달해 보겠습니다

363
00:20:27.081 --> 00:20:29.481
여전히 반투명한 상태고요

364
00:20:29.481 --> 00:20:31.481
이 거리 값이 지금 대략

365
00:20:31.481 --> 00:20:34.481
700 유닛 정도 떨어져 있다고 텍스트로 나오는데

366
00:20:34.481 --> 00:20:37.281
여기에 마치 깨져 보이는 글자는

367
00:20:37.281 --> 00:20:41.131
각각의 픽셀마다, 픽셀 한 칸 한 칸마다

368
00:20:41.131 --> 00:20:44.331
카메라로부터의 거리가 미묘하게 다르다 보니까

369
00:20:44.331 --> 00:20:46.331
이 구간에 대해서 같고

370
00:20:46.331 --> 00:20:51.231
이 구간들이 각자가 다 다른 값들을 가지고 있는 겁니다

371
00:20:51.231 --> 00:20:54.031
그렇기 때문에 글자가 좀 깨져 보이는 거고

372
00:20:54.031 --> 00:20:59.231
단위가 낮아지면 낮아질수록 훨씬 더 겹침이 심하죠

373
00:20:59.231 --> 00:21:00.981
이 아래쪽이 소수점입니다

374
00:21:00.981 --> 00:21:04.231
그래서 거리가 많이 떨어져 있으면

375
00:21:04.231 --> 00:21:07.581
500 유닛, 600 유닛 이런 식으로 800 유닛

376
00:21:07.581 --> 00:21:10.731
점점 이렇게 거리가 계산이 되고 있죠

377
00:21:10.731 --> 00:21:13.581
더 멀어지면 네 자리까지도 올라가요

378
00:21:13.581 --> 00:21:15.731
그리고 점점 가까이 가면

379
00:21:15.731 --> 00:21:18.281
수치가 변화되는 것을 보실 수가 있죠

380
00:21:18.281 --> 00:21:25.931
여기에서 Scene Depth와 Pixel Depth의 값을

381
00:21:25.931 --> 00:21:28.531
응용하는 방법에 대해서 얘기해 보겠습니다

382
00:21:28.531 --> 00:21:32.331
우선 A 지점이라고 부르겠습니다

383
00:21:32.331 --> 00:21:35.881
그리고 중간에 여기를 B 지점이라고 부를 거예요

384
00:21:35.881 --> 00:21:38.181
B 지점을 기준으로 한번 생각을 해 봅시다

385
00:21:38.181 --> 00:21:42.281
B 지점은 Scene Depth의 값과 Pixel Depth의 값이

386
00:21:42.281 --> 00:21:45.931
이 맞닿은 경계 부분은 꼭 A 지점이 아니라고 하더라도

387
00:21:45.931 --> 00:21:50.181
여기 오브젝트와 맞닿아 있는 경계는 같을 겁니다

388
00:21:50.981 --> 00:21:54.331
Scene Depth랑 Pixel Depth를 한번 빼 보면

389
00:21:54.331 --> 00:21:57.731
A 지점은 이 두 개의 값이 같으니까 0이 나오겠죠

390
00:21:57.731 --> 00:22:01.481
반면에 허공에 있는 B 지점 같은 경우에는

391
00:22:01.481 --> 00:22:03.631
Scene Depth 같은 경우에는

392
00:22:03.631 --> 00:22:06.181
B 지점에 보이는 Scene Depth는

393
00:22:06.181 --> 00:22:09.181
이 구체가 없는 것처럼 인식할 테니까

394
00:22:09.181 --> 00:22:11.481
이 구체가 눈에 안 보이는 것처럼

395
00:22:11.481 --> 00:22:13.081
이렇게 인식을 할 테니까

396
00:22:13.081 --> 00:22:16.381
뒤에 보이는 이 벽의 거리 값이 나올 겁니다

397
00:22:16.381 --> 00:22:20.031
훨씬 멀기 때문에 카메라로부터 거리가

398
00:22:20.031 --> 00:22:22.131
우리가 방금 전에 감춰놨던

399
00:22:22.131 --> 00:22:26.481
우리가 지금 예제를 적용하고 있는 구체보다는 뒤에 있으니까

400
00:22:26.481 --> 00:22:31.631
Scene Depth의 값이 Pixel Depth의 값보다는 크기 때문에

401
00:22:31.631 --> 00:22:36.831
무조건 0보다는 이 값의 차이를 구해보면 거리가 커지겠죠

402
00:22:36.831 --> 00:22:41.631
Scene Depth에서 Pixel Depth를 빼면 0보다는 크다

403
00:22:41.631 --> 00:22:47.231
그게 1만큼 크든, 100만큼 크든, 1000만큼 크든 상관없이

404
00:22:47.231 --> 00:22:48.981
무조건 크게 나올 겁니다

405
00:22:48.981 --> 00:22:51.931
그렇기 때문에 이 결괏값

406
00:22:51.931 --> 00:22:55.781
Scene Depth와 Pixel Depth를 뺀 결괏값에다가

407
00:22:55.781 --> 00:22:57.581
나누기 Distance 값

408
00:22:57.581 --> 00:22:59.781
기본값 거리 값이 100이었죠

409
00:22:59.781 --> 00:23:01.531
100만큼을 해주게 되면

410
00:23:01.531 --> 00:23:04.281
여기 있는 경계는 0이 나왔을 거고요

411
00:23:04.281 --> 00:23:08.331
100 유닛만큼 올라간 이 지점은 1이 나올 겁니다

412
00:23:08.331 --> 00:23:10.581
실제로는 여기서 100 유닛만큼

413
00:23:10.581 --> 00:23:14.281
바닥에서부터 100 유닛만큼 정도겠죠

414
00:23:14.281 --> 00:23:17.581
Depth 값은 이 지점에 있는 Depth 값을 가져올 테니까

415
00:23:17.581 --> 00:23:21.231
그리고 훨씬 더 뒤에 있는 B 지점 같은 경우에는

416
00:23:21.231 --> 00:23:23.081
100보다도 크기 때문에

417
00:23:23.081 --> 00:23:26.581
2가 됐든, 3이 됐든, 혹은 50이 됐든

418
00:23:26.581 --> 00:23:31.232
100보다는 훨씬 더 멀기 때문에 더 큰 값이 나올 겁니다

419
00:23:31.232 --> 00:23:34.682
그래서 실제로 우리가 사용했던

420
00:23:34.682 --> 00:23:37.532
Depth Fade를 그대로 구현해 보면요

421
00:23:37.532 --> 00:23:39.182
한번 구현해 보겠습니다

422
00:23:39.182 --> 00:23:41.282
나머지 노드들을 지워주고요

423
00:23:41.282 --> 00:23:44.632
우선 Scene Depth라는 노드를 받아오고

424
00:23:44.632 --> 00:23:49.482
Scene Depth에서 Subtract로 Pixel Depth 값을 빼주고

425
00:23:49.482 --> 00:23:53.832
이 빠진 값에서 Divide로 거리 값이 기본값 100이었죠

426
00:23:53.832 --> 00:23:56.882
이것을 Opacity에 연결해 주고 저장해 보겠습니다

427
00:23:56.882 --> 00:24:00.232
그러면 이렇게 현재 딱 이 거리 만큼

428
00:24:00.232 --> 00:24:02.682
맞닿은 경계 지점이 여러분들은

429
00:24:02.682 --> 00:24:04.482
지금 0%라서 잘 안 보일 테니까

430
00:24:04.482 --> 00:24:07.232
여기에다 제가 일부러 딱 지점을 맞춰놨습니다

431
00:24:07.232 --> 00:24:09.082
이게 딱 100 유닛 되는 거리 만큼이죠

432
00:24:09.082 --> 00:24:12.382
이 거리 만큼 빠져 있는 걸 확인하실 수가 있고요

433
00:24:12.382 --> 00:24:16.282
지금 우리가 만든 이 노드를 바꿔서

434
00:24:16.282 --> 00:24:19.332
Depth Fade랑 비교를 해 보면요

435
00:24:19.332 --> 00:24:22.082
그대로 Apply 하겠습니다 저장도 하고요

436
00:24:22.082 --> 00:24:24.182
결괏값이 같은 걸 보실 수가 있죠

437
00:24:24.182 --> 00:24:26.182
만약에 여기에 200을 입력하면

438
00:24:26.182 --> 00:24:29.432
두 배만큼 더 거리가 멀어지는 거니까

439
00:24:29.432 --> 00:24:30.982
두 번째 칸까지 가는 거고

440
00:24:30.982 --> 00:24:33.532
당연히 여기에도 200만큼 입력해서

441
00:24:33.532 --> 00:24:35.882
그대로 연결해서 저장해 보면

442
00:24:35.882 --> 00:24:38.732
Apply를 눌러 보면 결괏값이 같죠

443
00:24:38.732 --> 00:24:43.532
그래서 3D가 렌더링 될 때 Translucent 같은 경우에는

444
00:24:43.532 --> 00:24:46.532
Scene Depth의 영역에서는 빠지고

445
00:24:46.532 --> 00:24:50.182
Pixel Depth 문자 그대로 3D 표면이 가지고 있는

446
00:24:50.182 --> 00:24:52.782
그 표면에 대한 위치 값은 가지고 있다

447
00:24:52.782 --> 00:24:56.282
그래서 화면 전체를 계산할 때는 빠지지만

448
00:24:56.282 --> 00:24:59.032
개별적인 데이터는 가지고 있기 때문에

449
00:24:59.032 --> 00:25:01.182
지금 여러분들이 보시는 것처럼

450
00:25:01.182 --> 00:25:03.482
Depth Fade와 같은 효과를

451
00:25:03.482 --> 00:25:06.982
이 두 개의 값의 차이를 이용해서 만들어 줄 수 있는 거고요

452
00:25:06.982 --> 00:25:09.132
또 Scene Depth에서 빠지기 때문에

453
00:25:09.132 --> 00:25:12.482
한 가지 특이한 증상이 있습니다

454
00:25:12.482 --> 00:25:16.182
바로 그림자가 없다는 거죠

455
00:25:16.182 --> 00:25:19.382
다른 오브젝트들은 이렇게 그림자가 있죠

456
00:25:19.382 --> 00:25:22.182
반면에 Translucent는 기본적으로

457
00:25:22.182 --> 00:25:24.532
그림자가 생기지 않습니다

458
00:25:24.532 --> 00:25:28.932
그래서 여러분들이 Buffer Visualization의 Scene Depth

459
00:25:28.932 --> 00:25:31.682
이 영역에서 빠져 있는 것에 대해서

460
00:25:31.682 --> 00:25:33.682
하나 확실하게 기억하고 계시면

461
00:25:33.682 --> 00:25:37.082
이걸 응용해서 또 다른 재미있는 효과들도

462
00:25:37.082 --> 00:25:38.682
만들어 보실 수가 있을 겁니다

463
00:25:38.682 --> 00:25:43.082
이제 원래대로 머티리얼을 되돌리고요

464
00:25:43.082 --> 00:25:46.682
우리가 만들던 에너지 실드로 다시 되돌리고

465
00:25:46.682 --> 00:25:49.582
Scale을 한번 키워보겠습니다

466
00:25:49.582 --> 00:25:51.432
좀 뒤로 많이 빠져서요

467
00:25:52.282 --> 00:25:55.932
Scale을 키우게 되면 오브젝트의 경계가

468
00:25:55.932 --> 00:25:58.882
다른 3D 오브젝트와 맞닿을 때

469
00:25:58.882 --> 00:26:04.782
이런 식으로 점점 하얗게 표시되는 것을 확인하실 수가 있죠

470
00:26:04.782 --> 00:26:08.982
줄어들면 마찬가지로 이런 식으로 다른 오브젝트들과

471
00:26:08.982 --> 00:26:12.832
서로 상호작용이 일어나는 것을 보실 수가 있습니다

472
00:26:12.832 --> 00:26:15.332
이 상호작용이라고 하는 것이 반드시

473
00:26:15.332 --> 00:26:16.932
우리가 어떤 기능을 만들어서

474
00:26:16.932 --> 00:26:19.982
프로그래밍적으로 버튼이 눌려야만 되거나

475
00:26:19.982 --> 00:26:21.532
이런 것들이 아니고

476
00:26:21.532 --> 00:26:25.082
단순히 셰이더를 짜는 것만으로도 이렇게

477
00:26:25.082 --> 00:26:30.482
주변에 있는 액터들과 서로 상호작용을 일으킬 수도 있습니다

478
00:26:30.482 --> 00:26:32.982
이제 머티리얼을 다시 열어서

479
00:26:32.982 --> 00:26:36.232
나머지 효과들을 마무리 짓도록 하겠습니다

480
00:26:36.232 --> 00:26:40.232
포지션 시각화

481
00:26:41.182 --> 00:26:45.632
이 두 가지 효과들이 모두 겹쳐 있는데 이걸 좀 뒤로 빼고

482
00:26:45.632 --> 00:26:48.832
이번에는 새로운 효과를 한번 만들어 볼 겁니다

483
00:26:48.832 --> 00:26:53.482
보통 에너지라고 하면 일정한 파장이나 주기를 가지고 있죠

484
00:26:53.482 --> 00:26:57.932
그래서 위에서부터 아래로 흘러내린다거나

485
00:26:57.932 --> 00:27:03.732
이런 선 같은 것들이 잘게 표현이 되는 묘사들을 종종 하는데

486
00:27:03.732 --> 00:27:05.333
그러한 묘사를 위해서는

487
00:27:05.333 --> 00:27:09.983
우리가 포지션 값을 이용해서 묘사하게 될 겁니다

488
00:27:09.983 --> 00:27:14.883
우선 World Position이라는 노드를 먼저 가지고 오겠습니다

489
00:27:14.883 --> 00:27:17.783
여기에다가 Dot Product를 이용해서

490
00:27:17.783 --> 00:27:22.483
우리가 임의로 정한 방향대로 물결치게 만들 겁니다

491
00:27:22.483 --> 00:27:26.083
그래서 Dot 연산으로 Vector Parameter를 이용해서

492
00:27:26.083 --> 00:27:29.483
이거는 Direction이라고 이름 지어주도록 하겠습니다

493
00:27:29.483 --> 00:27:34.183
이 두 가지 값을 비교해서 노드를 만들 건데요

494
00:27:34.183 --> 00:27:38.833
우선 Direction에다가는 여러분들이 알기 쉽게 Z축으로

495
00:27:38.833 --> 00:27:42.733
플러스 방향으로 값을 설정해 놓겠습니다

496
00:27:42.733 --> 00:27:44.683
이 결괏값을 비교해 보면

497
00:27:44.683 --> 00:27:47.233
이거 잠깐 앞으로 끌고 와서 보겠습니다

498
00:27:47.233 --> 00:27:48.583
원래 노드가 좀 많은데

499
00:27:48.583 --> 00:27:51.733
Opacity에다가 연결해 놓고 보면 지금 보는 것처럼

500
00:27:51.733 --> 00:27:54.333
이렇게 반구의 형태로 보이죠

501
00:27:54.333 --> 00:27:58.283
큐브를 봐도 마찬가지로 반입니다 실린더도 마찬가지고

502
00:27:58.283 --> 00:28:02.133
원래 보이던 길이의 절반만 보이는 걸 알 수가 있습니다

503
00:28:02.133 --> 00:28:05.133
앞서서 Dot 연산 같은 경우에는

504
00:28:05.133 --> 00:28:10.233
값의 범위가 -1에서 1까지라고 설명해 드렸습니다

505
00:28:10.233 --> 00:28:14.983
당연히 벡터 같은 경우에는 값이 달라질 수가 있기 때문에

506
00:28:14.983 --> 00:28:18.433
우선은 이것을 Normalize 해서

507
00:28:18.433 --> 00:28:20.583
길이를 단위 벡터로 만들어 주고요

508
00:28:20.583 --> 00:28:24.333
포지션 값도 마찬가지로 Normalize 해서

509
00:28:24.333 --> 00:28:26.433
단위 벡터로 만들어 줄 겁니다

510
00:28:26.883 --> 00:28:30.783
실제로 이걸 아주 가까이서 당겨 보게 되면

511
00:28:30.783 --> 00:28:33.083
아주 약한 그라데이션이 있는 것을

512
00:28:33.083 --> 00:28:35.133
확인할 수가 있는데요 보이시죠?

513
00:28:35.133 --> 00:28:39.933
원래 이 값이 -1에서 1까지라는 얘기는

514
00:28:39.933 --> 00:28:43.283
이 경계 있죠 이 얕은 경계가 0이고요

515
00:28:43.283 --> 00:28:46.083
약간 잘 보이는 이 부분이 1인 겁니다

516
00:28:46.083 --> 00:28:50.333
이 위로는 1보다 큰 값이고 이 뒤로는 -1인 거죠

517
00:28:50.333 --> 00:28:51.533
그래서 이렇게 보이는 건데

518
00:28:51.533 --> 00:28:54.283
이걸 Normalize 해서 결과를 확인해 보면

519
00:28:54.283 --> 00:28:58.683
조금 더 그라데이션이 부드러워진 것은 확인할 수 있지만

520
00:28:58.683 --> 00:29:02.933
여전히 절반만 그리는 것으로 확인이 되죠

521
00:29:02.933 --> 00:29:05.133
다시 구체로 바꾸도록 하고요

522
00:29:05.133 --> 00:29:09.833
이렇게 반구의 형태로 명암이 조금 부드러워지긴 했죠

523
00:29:09.833 --> 00:29:11.933
이제는 Normalize를 하다 보니까

524
00:29:11.933 --> 00:29:17.383
Up이라는 벡터와 포지션 각각의 벡터 값들이 모두 비교되면서

525
00:29:17.383 --> 00:29:19.633
여기 있는 것들이 모두 다 비교가 되면서

526
00:29:19.633 --> 00:29:21.733
그라데이션이 생긴 건데

527
00:29:21.733 --> 00:29:24.883
이것을 0에서 1 사이 값으로 바꿔보겠습니다

528
00:29:24.883 --> 00:29:28.883
이때 많이 사용하는 노드가 Remap이라는 노드입니다

529
00:29:28.883 --> 00:29:30.983
Remap인데 결국에 우리가 필요한 건

530
00:29:30.983 --> 00:29:33.083
0에서 1 사이이기 때문에

531
00:29:33.083 --> 00:29:35.733
별도의 출력되는 값을 따로 정할 필요 없이

532
00:29:35.733 --> 00:29:38.133
0에서 1 사이라는 값이 정해져 있는

533
00:29:38.133 --> 00:29:42.483
RemapValueRangeNormalized라는 노드를 사용할 거고요

534
00:29:42.483 --> 00:29:45.433
여기에서 인풋되는 Low 값

535
00:29:45.433 --> 00:29:50.283
가장 작은 값과 가장 높은 값은 Constant 노드를 이용해서

536
00:29:50.283 --> 00:29:54.333
하나는 -1로 Low에 연결해 줄 거고요

537
00:29:54.333 --> 00:29:58.333
하나는 1로 최댓값을 High에 연결해 줄 겁니다

538
00:29:59.183 --> 00:30:03.033
그러고 나서 결과를 Opacity에 연결해 보면요

539
00:30:03.033 --> 00:30:07.483
온전히 구체의 모양이 거의 다 보이고 있죠 이런 식으로

540
00:30:07.483 --> 00:30:11.533
출력되는 값이 0에서 1로 변동이 일어났습니다

541
00:30:11.533 --> 00:30:16.133
여기 출력되는 값을 0에서 1이라고 정해주도록 하겠습니다

542
00:30:16.133 --> 00:30:19.083
이 포지션의 값을 그래서 우리가

543
00:30:19.083 --> 00:30:23.033
그라데이션 되는 방향을 만약에 빨간색으로 만들면

544
00:30:23.033 --> 00:30:26.633
그라데이션 되는 방향이 오른쪽에서 왼쪽으로

545
00:30:26.633 --> 00:30:29.733
이렇게 방향이 바뀐 것을 확인하실 수가 있죠

546
00:30:29.733 --> 00:30:32.733
이제 줄무늬 패턴을 만들어 주기 위해서

547
00:30:32.733 --> 00:30:36.283
연산이 된 영역까지만 선택해서 뒤로 빼겠습니다

548
00:30:36.283 --> 00:30:39.383
여기에다가 Sine이라고 하는

549
00:30:39.383 --> 00:30:42.134
여기에서 여러분들이 조심하셔야 될 것

550
00:30:42.134 --> 00:30:46.534
제가 사용하는 Sine은 삼각함수의 Sine입니다

551
00:30:46.534 --> 00:30:48.434
그래서 Sine고요

552
00:30:48.434 --> 00:30:51.534
또 다른 Sign이라고 발음되는 것이 있습니다

553
00:30:51.534 --> 00:30:56.534
이거 헷갈리시면 안 되고 Sine으로 넣어주시면 됩니다

554
00:30:56.534 --> 00:30:58.934
Sine이란 노드를 사용해서

555
00:30:58.934 --> 00:31:01.934
물결치는 듯한 파동 효과를 만들어 줄 건데

556
00:31:01.934 --> 00:31:05.534
이것을 그대로 Remap에다가 넣어보도록 하겠습니다

557
00:31:05.534 --> 00:31:09.634
그러면 중간이 빈 것처럼 이렇게 표현이 될 겁니다

558
00:31:09.634 --> 00:31:12.584
당연히 Direction을 바꾸게 되면

559
00:31:12.584 --> 00:31:15.284
만약에 여기에서 그린 값을 바꾸게 되면

560
00:31:15.284 --> 00:31:19.534
이 물결치는 중간에 비어있는 영역이 그린에 의해서

561
00:31:19.534 --> 00:31:25.584
이런 식으로 휘어져서 보이는 것을 확인할 수가 있죠

562
00:31:25.584 --> 00:31:28.634
혹은 B에다가 넣으면 이렇게

563
00:31:28.634 --> 00:31:33.884
대각선 방향을 향하게도 만들 수 있습니다 보이시죠?

564
00:31:33.884 --> 00:31:36.784
근데 줄무늬가 하나밖에 없기 때문에

565
00:31:36.784 --> 00:31:41.134
이것을 Dot에서부터 Multiply 해서

566
00:31:41.134 --> 00:31:43.084
Sine에다가 연결해 주고요

567
00:31:43.084 --> 00:31:47.684
여기에 있는 Multiply는 ScalarParameter를 이용해서

568
00:31:47.684 --> 00:31:51.884
줄여서 lineFreq라고 입력하고

569
00:31:51.884 --> 00:31:55.034
기본값을 30 정도만 입력해 보겠습니다

570
00:31:55.034 --> 00:31:58.734
그럼 지금 보시는 것처럼 줄무늬 패턴이

571
00:31:58.734 --> 00:32:01.884
이렇게 생성된 걸 확인하실 수가 있는데

572
00:32:01.884 --> 00:32:04.934
이제 우리는 이 패턴을 나중에 흘러가게 만들 거고요

573
00:32:04.934 --> 00:32:07.434
이렇게 생성된 줄무늬 패턴

574
00:32:07.434 --> 00:32:09.484
이걸 여러분들 임의에 따라서

575
00:32:09.484 --> 00:32:15.534
5만큼 입력해서 패턴을 다르게 보이게 만들 수도 있습니다

576
00:32:15.534 --> 00:32:18.034
이건 여러분들이 임의로 하시면 되고요

577
00:32:18.034 --> 00:32:20.634
Sine 노드에 대한 설명을 하면

578
00:32:20.634 --> 00:32:25.134
우리가 흔히 삼각함수에서 얘기하는 Sine 값이 맞습니다

579
00:32:25.134 --> 00:32:27.284
우리가 삼각함수 얘기할 때

580
00:32:27.284 --> 00:32:32.334
Cosine, Tangent, 마지막으로 Sine 해가지고

581
00:32:32.334 --> 00:32:34.434
중학교 수학 때 이런 것들을 배웠는데

582
00:32:34.434 --> 00:32:36.784
이때 얘기하는 이 Sine 값입니다

583
00:32:36.784 --> 00:32:39.734
그래서 이것을 그래프 상으로 그려보면

584
00:32:39.734 --> 00:32:44.934
X축으로 어떠한 값이 입력되든지 간에 출력되는 것은

585
00:32:44.934 --> 00:32:49.684
값의 범위가 1에서부터 -1까지 이렇게 돼서

586
00:32:49.684 --> 00:32:54.584
영점이라고 했을 때 0에서부터 이렇게 값이 1까지 커졌다가

587
00:32:54.584 --> 00:32:57.984
내려왔다가 이렇게 다시 돌아오는

588
00:32:57.984 --> 00:33:03.284
그래서 일정한 주기를 가지고 있는 Sine 그래프가 만들어지죠

589
00:33:03.284 --> 00:33:05.534
그래서 이런 것들을 배우셨을 겁니다

590
00:33:05.534 --> 00:33:09.034
1이 되는 이 지점은 π/2고요

591
00:33:09.034 --> 00:33:12.234
다시 0이 되는 지점은 π

592
00:33:12.234 --> 00:33:15.634
-1이 되는 지점은 3/4π

593
00:33:15.634 --> 00:33:20.184
마지막으로 끝에 다시 0이 되는 지점은 2π

594
00:33:20.184 --> 00:33:23.484
그래서 이것이 이렇게 원주율을 나타낼 때

595
00:33:23.484 --> 00:33:28.534
원의 한 바퀴 둘레를 의미하는 게 2π라고 얘기하잖아요

596
00:33:28.534 --> 00:33:32.134
어떠한 값을 넣든 여기가 100이 들어가든 1000이 들어가든

597
00:33:32.134 --> 00:33:34.284
결국 그 값에 맞춰서 이렇게 나타내는데

598
00:33:34.284 --> 00:33:37.584
우리는 이것을 한 주기라고 부릅니다

599
00:33:37.584 --> 00:33:41.034
그래서 Sine 값을 잠깐 보여드리면

600
00:33:41.034 --> 00:33:45.934
Sine 값을 끊고 그대로 Opacity에다가 연결해놓고요

601
00:33:45.934 --> 00:33:48.384
Sine에다가 Constant 노드를 이용해서

602
00:33:48.384 --> 00:33:50.534
이건 값을 설명하기 위한 거니까

603
00:33:50.534 --> 00:33:52.734
여러분들은 따라 하지 않으셔도 됩니다

604
00:33:52.734 --> 00:33:57.434
이 그래프에 의하면 0을 넣으면 그대로 0이니까

605
00:33:57.434 --> 00:33:59.434
아무것도 안 보이는 게 맞겠죠

606
00:33:59.434 --> 00:34:03.184
반대로 출력되게 하고 싶으면 π/2 값이니까

607
00:34:03.184 --> 00:34:08.134
3.14이니까 1.07 얼마 정도를 넣으면

608
00:34:08.134 --> 00:34:11.734
값이 1이 되겠네라고 생각하실 텐데 잘 보세요

609
00:34:11.734 --> 00:34:16.584
여기서 1.07 얼마를 넣는다고 하더라도

610
00:34:16.584 --> 00:34:21.535
여전히 지금 보시면 값이 출력되는 걸 확인하실 수가 있죠

611
00:34:21.535 --> 00:34:25.635
마찬가지로 3.14를 넣고 보시면

612
00:34:25.635 --> 00:34:28.235
다시 보이는데?라고 생각하실 수 있습니다

613
00:34:28.235 --> 00:34:36.235
1.07이나 3.14나 혹은 2π에 해당하는 6.28을 넣어도

614
00:34:36.235 --> 00:34:39.185
값이 보이는데?라고 생각하실 수가 있는데

615
00:34:39.185 --> 00:34:42.535
실제로 1이 출력되는 것은 0.25입니다

616
00:34:42.535 --> 00:34:44.885
0.5를 입력하면 0이고요

617
00:34:44.885 --> 00:34:48.535
0.75를 입력하면 -1인데 보이진 않죠

618
00:34:48.535 --> 00:34:50.685
그리고 1을 입력해도 0입니다

619
00:34:50.685 --> 00:34:54.285
1.07을 입력했을 때는 이미

620
00:34:54.285 --> 00:34:56.985
값이 1까지는 아니라고 해도

621
00:34:56.985 --> 00:35:01.035
반투명하게 보인다는 것은 어느 정도 출력되고 있다는 뜻이죠

622
00:35:01.035 --> 00:35:04.285
이것을 여러분들이 수학 시간 때

623
00:35:04.285 --> 00:35:06.985
Sine 그래프를 이해하실 때는 이런 식으로

624
00:35:06.985 --> 00:35:10.485
각 대푯값마다 값을 외우셨을 텐데요

625
00:35:10.485 --> 00:35:13.385
언리얼에서는 이것이 약간 다르게 작동합니다

626
00:35:13.385 --> 00:35:15.685
하나의 주기로 보고

627
00:35:15.685 --> 00:35:22.185
주기의 1/4의 위치, 2/4의 위치, 3/4의 위치

628
00:35:22.185 --> 00:35:25.785
마지막으로 1의 위치, 1주기의 위치

629
00:35:25.785 --> 00:35:28.235
이런 식으로 인식을 하기 때문에

630
00:35:28.235 --> 00:35:31.935
아까 전에 제가 0.25라고 값을 넣었고

631
00:35:31.935 --> 00:35:36.385
0.5라고 넣었고 0.75 그리고 1이라고 넣었죠

632
00:35:36.385 --> 00:35:41.185
실제 Sine 값이 아까 전처럼 1.07을 넣게 되면

633
00:35:41.185 --> 00:35:46.285
1.07은 결국 한 바퀴 돌아서 다시 이만큼 온 것이기 때문에

634
00:35:46.285 --> 00:35:49.135
대략 여기 언저리쯤 위치하게 될 겁니다

635
00:35:49.135 --> 00:35:50.935
그래서 눈에 보였던 거고요

636
00:35:50.935 --> 00:35:53.785
언리얼에서는 Sine 값에다 넣어줄 때

637
00:35:53.785 --> 00:35:55.835
지금 보시는 것처럼 이런 식으로

638
00:35:55.835 --> 00:36:00.785
하나의 주기 값에 의해서 값이 결정이 된다고 이해하시면 되고

639
00:36:00.785 --> 00:36:05.385
그렇기 때문에 여기에 우리가 -1에서 1까지를 넣은 것을

640
00:36:05.385 --> 00:36:07.185
5배로 뻥튀기 했죠

641
00:36:07.185 --> 00:36:10.935
지금 lineFreq 값을 5배를 했기 때문에

642
00:36:10.935 --> 00:36:14.135
-5에서 5까지 값을 출력하겠죠

643
00:36:14.135 --> 00:36:15.785
이게 곱하기가 되면서

644
00:36:15.785 --> 00:36:19.385
그러면 총 10번의 주기가 생기게 된 겁니다

645
00:36:19.385 --> 00:36:25.735
-5에서 한 번, -4에서 쭉 가서 4에서부터 5까지 해서

646
00:36:25.735 --> 00:36:28.235
총 10번의 주기가 생기게 된 겁니다

647
00:36:28.235 --> 00:36:33.185
그렇기 때문에 여러분들이 lineFreq에 넣게 되는 값은

648
00:36:33.185 --> 00:36:37.835
결국 우리가 몇 개의 줄무늬를 만들게 될 거냐와 같습니다

649
00:36:37.835 --> 00:36:40.235
그래서 이것을 Sine 값에 다시 연결하고

650
00:36:40.235 --> 00:36:42.385
Constant는 지우도록 하겠습니다

651
00:36:42.385 --> 00:36:45.535
이렇게 보게 되면 5라고 넣었기 때문에

652
00:36:45.535 --> 00:36:56.535
줄이 총 10개가 생긴 것을 확인하실 수가 있죠

653
00:36:56.535 --> 00:36:59.285
근데 이렇게 줄이 생겼다고 해서

654
00:36:59.285 --> 00:37:03.085
그대로 사용하는 건 아니고요 움직여야겠죠

655
00:37:03.085 --> 00:37:05.185
움직여야 됩니다 이 값들이

656
00:37:05.185 --> 00:37:08.385
그래서 여기에다가는 한 번 더 Add를 통해서

657
00:37:08.385 --> 00:37:10.285
Sine에다가 연결을 해주고요

658
00:37:10.285 --> 00:37:14.835
Add에다가 지속적으로 움직이게 하고 싶다면

659
00:37:14.835 --> 00:37:16.835
지속적으로 움직인다는 얘기는

660
00:37:16.835 --> 00:37:19.885
시간이 지나야지만 해결이 되기 때문에

661
00:37:19.885 --> 00:37:23.635
Time이라는 노드를 연결해 줄 겁니다 이런 식으로

662
00:37:23.635 --> 00:37:26.035
그러면 지금 보는 것처럼

663
00:37:26.035 --> 00:37:30.035
이렇게 그래프가 움직이는 것을 확인하실 수 있죠

664
00:37:30.035 --> 00:37:32.885
이렇게 생각하시면 돼요 이미 줄무늬는 있고요

665
00:37:32.885 --> 00:37:35.985
우리가 보여줄 범위를 결정하는데

666
00:37:35.985 --> 00:37:40.085
이 범위 자체를 움직인다고 생각하시면 됩니다

667
00:37:40.085 --> 00:37:43.785
시간에 따라서 계속해서 일정한 방향으로

668
00:37:43.785 --> 00:37:46.535
이 범위가 이렇게 움직이는 거죠

669
00:37:46.535 --> 00:37:52.435
옆으로 서서히 가서 계속해서 다음번 줄무늬를 보여주고

670
00:37:52.435 --> 00:37:56.386
이런 식으로 이동하는 것들을 우리가 눈으로 확인하고 있다

671
00:37:56.386 --> 00:37:58.086
이렇게 생각하셔도 되고

672
00:37:58.086 --> 00:38:00.086
혹은 구체는 가만히 있고

673
00:38:00.086 --> 00:38:02.986
이 줄무늬들 자체가 Add를 통해서

674
00:38:02.986 --> 00:38:06.636
값이 이동하고 있다고 생각하셔도 됩니다

675
00:38:06.636 --> 00:38:09.286
어느 쪽이든 결과적으로는 같으니까요

676
00:38:09.286 --> 00:38:11.936
Time마저도 바꿀 수가 있습니다

677
00:38:11.936 --> 00:38:15.236
Time도 Multiply를 이용해서

678
00:38:15.236 --> 00:38:19.386
원래는 시간 값이 정확하게는 초 단위로 값이 전달되는데

679
00:38:19.386 --> 00:38:21.436
Multiply를 이용해서

680
00:38:21.436 --> 00:38:24.136
이게 1이면 당연히 원래 속도 그대로겠죠

681
00:38:24.136 --> 00:38:27.836
1초에 일정한 유닛만큼 이동할 건데

682
00:38:27.836 --> 00:38:30.186
이것을 5초로 입력하면

683
00:38:30.186 --> 00:38:33.386
5배를 입력하면 그만큼 빨라지는 거고

684
00:38:33.386 --> 00:38:37.836
0.3으로 입력하면 30%의 속도로 움직이게 되겠죠

685
00:38:37.836 --> 00:38:42.136
그래서 여기 있는 Time에다가 Multiply 된 이것도

686
00:38:42.136 --> 00:38:44.086
ScalarParameter를 이용해서

687
00:38:44.086 --> 00:38:46.786
Time Scale이라는 값으로

688
00:38:46.786 --> 00:38:50.636
기본값은 1이 되게끔 이렇게 표현을 해봤습니다

689
00:38:50.636 --> 00:38:54.936
이렇게 표현하고 나면 이제 다시 Remap을 통해서

690
00:38:54.936 --> 00:38:56.736
Opacity에 꽂아 넣을 수 있게

691
00:38:56.736 --> 00:39:00.686
정말 다행히도 Dot도 -1에서 1까지고

692
00:39:00.686 --> 00:39:04.986
Sine도 출력되는 값이 -1에서 1까지입니다

693
00:39:04.986 --> 00:39:07.536
그것을 우리는 어떻게?

694
00:39:07.536 --> 00:39:11.836
Remap을 통해서 0에서 1 사이로 바꿔서

695
00:39:11.836 --> 00:39:15.636
Opacity에다가 전달해 주게 되겠죠 이런 식으로

696
00:39:15.636 --> 00:39:18.586
이렇게 Remap까지 만들어진 노드를

697
00:39:18.586 --> 00:39:23.886
Saturate와 Fresnel과 Depth Fade가 연결되었던

698
00:39:23.886 --> 00:39:29.036
이 노드 사이에다가 한 번 더 Add 해주도록 하겠습니다

699
00:39:29.036 --> 00:39:34.186
Add의 원리는 앞서서 설명했으니까 생략하겠습니다

700
00:39:34.186 --> 00:39:38.236
그리고 최종 결과를 다시 Opacity에

701
00:39:38.236 --> 00:39:40.886
Lerp된 결과를 연결해 보면

702
00:39:40.886 --> 00:39:45.986
선이 아주 두껍기 때문에 원래 있던 형태가 잘 안 보입니다

703
00:39:45.986 --> 00:39:49.336
그래서 이 선의 두께를 조절하기 위해서 Result

704
00:39:49.336 --> 00:39:53.136
Remap의 결과에다가 Multiply를 이용해서

705
00:39:53.136 --> 00:39:58.736
이를테면 이 선의 선명한 정도를 50%만 표현해라 해서

706
00:39:58.736 --> 00:40:01.036
Add 해주게 되면 조금 덜해지죠

707
00:40:01.036 --> 00:40:05.036
이를테면 0.3만 선명해라라고 하면

708
00:40:05.036 --> 00:40:07.536
조금 더 선이 이렇게 보이게 되죠

709
00:40:07.536 --> 00:40:10.586
Sign에다가는 중간에 이 사이에다가

710
00:40:10.586 --> 00:40:13.936
Power라는 노드를 이용해서 지수 값을 이용해서

711
00:40:13.936 --> 00:40:17.836
선의 두께를 이렇게 조절해 줄 수도 있습니다

712
00:40:17.836 --> 00:40:20.436
보이시죠? 선의 두께가 바뀐 거

713
00:40:20.436 --> 00:40:24.136
지수 값이 1일 때, 지수 값이 5일 때

714
00:40:24.136 --> 00:40:28.436
아주 얇게 선이 표현된 것을 확인하실 수가 있습니다

715
00:40:28.436 --> 00:40:31.936
그래서 이런 식의 과정을 거친다면

716
00:40:31.936 --> 00:40:34.686
우리가 에너지 실드를 표현할 때

717
00:40:34.686 --> 00:40:38.486
조금 더 다채로운 효과들을 만들어 줄 수가 있고요

718
00:40:38.486 --> 00:40:41.036
여기에서 Power를 이용한 두께나

719
00:40:41.036 --> 00:40:44.336
Multiply를 이용한 투명도의 정도

720
00:40:44.336 --> 00:40:47.386
이것들을 전부 다 파라미터로 빼두면 좋겠죠

721
00:40:47.386 --> 00:40:51.336
Power에서는 이것을 ScalarParameter로 빼서

722
00:40:51.336 --> 00:40:55.686
lineWidth로 라인의 두께로 지정해 놓고

723
00:40:55.686 --> 00:40:59.186
기본값은 2로 두겠습니다 얇게

724
00:40:59.186 --> 00:41:02.536
1.2 이런 식으로 하셔도 상관없습니다

725
00:41:02.536 --> 00:41:06.386
0으로 하면 이렇게 띠처럼 나오는 거고 1 하셔도 되고

726
00:41:06.386 --> 00:41:09.886
그리고 Remap에서 Multiply한 값은

727
00:41:09.886 --> 00:41:16.686
ScalarParameter로 빼서 lineOp라고 적어서

728
00:41:16.686 --> 00:41:21.136
이것을 0.3 정도 되도록 만들겠습니다

729
00:41:21.136 --> 00:41:25.636
이렇게 만들어진 효과를 인스턴스로 만들어서요

730
00:41:25.636 --> 00:41:28.936
월드 상에서 정상적으로 우리가 마음대로

731
00:41:28.936 --> 00:41:31.436
변화를 줄 수 있는지 한번 확인해 볼 건데요

732
00:41:31.436 --> 00:41:35.087
우선 인스턴스를 열어주고 창에서 한번 보겠습니다

733
00:41:35.087 --> 00:41:36.587
지금 이렇게 흘러가고 있죠

734
00:41:36.587 --> 00:41:39.287
파라미터들을 뽑는 이유가 있는데요

735
00:41:39.287 --> 00:41:43.287
우선 이 인스턴스를 먼저 구체에 적용하고요

736
00:41:43.287 --> 00:41:46.887
드래그해서 그래서 보면 여기 있는 구체에

737
00:41:46.887 --> 00:41:49.937
인스턴스가 제대로 전달이 되었는지 확인하시고

738
00:41:49.937 --> 00:41:52.887
여기 있는 파라미터에서 지금 보시면

739
00:41:52.887 --> 00:41:57.787
Depth Fade의 두께와 Fresnel이 된 두께는 얼추 비슷한데

740
00:41:57.787 --> 00:42:00.737
라인의 두께가 너무 두껍죠

741
00:42:00.737 --> 00:42:04.637
그렇다면 lineWidth를 이렇게 선택하셔서

742
00:42:04.637 --> 00:42:09.937
Exponent 값, 제곱이 됐던 값을 조금 키워주시면

743
00:42:09.937 --> 00:42:11.987
선의 두께가 얇아지면서

744
00:42:11.987 --> 00:42:16.737
Depth Fade와 유사하게 맞춰지는 것을 보실 수가 있고요

745
00:42:16.737 --> 00:42:18.437
Time Scale을 이용해서

746
00:42:18.437 --> 00:42:21.237
더 빠르게 움직이게 한다든가 이런 식으로

747
00:42:21.237 --> 00:42:23.037
너무 빠르네요 4배 정도 했더니

748
00:42:23.037 --> 00:42:25.287
한 2배만 하도록 하겠습니다

749
00:42:25.287 --> 00:42:27.487
2배 정도 빠르게 움직이게 한다든가

750
00:42:27.487 --> 00:42:28.887
Direction 값을 이용해서

751
00:42:28.887 --> 00:42:31.187
레드에다가 마이너스 값을 넣으면

752
00:42:31.187 --> 00:42:33.287
이런 식으로 방향도 바뀌게 되고

753
00:42:33.287 --> 00:42:35.837
여러분들이 붉은색을 넣으셔도 되고요

754
00:42:35.837 --> 00:42:37.637
Inner Color에 이런 식으로

755
00:42:37.637 --> 00:42:43.387
Side Color는 유사하게 주황색 이런 식으로 색을 쓰시되

756
00:42:43.387 --> 00:42:49.337
조금 밝게 빛나라고 레드나 그린, 블루에다가 1보다 큰 값을

757
00:42:49.337 --> 00:42:53.287
이를테면 레드 8이나 블루 0.2 이런 식으로 해서

758
00:42:53.287 --> 00:42:55.987
더 밝게 빛나게 만드는 것도 가능합니다

759
00:42:55.987 --> 00:42:57.637
그래서 각각의 값들을

760
00:42:57.637 --> 00:43:00.687
여러분들이 오브젝트 크기라든가 이런 거에 맞춰서

761
00:43:00.687 --> 00:43:02.737
수정해서 쓰시면 되기 때문에

762
00:43:02.737 --> 00:43:05.887
이 각각의 파라미터들의 역할에 대해서

763
00:43:05.887 --> 00:43:11.037
내가 어느 부분을 어떻게 뺄 거다라는 걸 잘 계산하셔서

764
00:43:11.037 --> 00:43:13.437
묘사를 해주시는 것이 중요합니다

765
00:43:13.437 --> 00:43:16.837
이번 시간에는 반투명 셰이더를 통해

766
00:43:16.837 --> 00:43:20.687
렌더링되는 원리를 파악할 수 있었습니다

767
00:43:20.687 --> 00:43:23.287
이를 시각화하는 연산 기법과

768
00:43:23.287 --> 00:43:25.837
시간을 이용한 움직임을 만드는 등

769
00:43:25.837 --> 00:43:30.687
기존 PBR 셰이더와는 다른 접근 방식으로 표현하였습니다

770
00:43:31.787 --> 00:43:34.787
시각적으로 다양한 표현들을 위해서는

771
00:43:34.787 --> 00:43:37.637
수학적인 이해가 반드시 필요하지만

772
00:43:37.637 --> 00:43:40.187
그렇다고 해서 그렇게 어렵지 않은

773
00:43:40.187 --> 00:43:42.987
그리고 어렵다고 하더라도 이미

774
00:43:42.987 --> 00:43:47.437
머티리얼 에디터를 통해서 충분히 쉽게 활용할 수 있게끔

775
00:43:47.437 --> 00:43:50.537
기능들이 제공된다는 것을 아셨을 겁니다

776
00:43:50.887 --> 00:43:53.937
수학이라고 해서 너무 어렵게 생각하지 마시고

777
00:43:53.937 --> 00:43:58.637
계속해서 다양한 효과들을 학습해보시면 좋을 것 같습니다

778
00:43:58.637 --> 00:44:03.237
그럼 이번 시간 학습한 내용을 정리하면서 마무리하겠습니다

779
00:44:03.237 --> 00:44:04.437
감사합니다

780
00:44:04.987 --> 00:44:05.487
Fresnel과 Depth Fade

781
00:44:05.487 --> 00:44:06.087
머티리얼 설정: 콘텐츠 폴더에 EnergyShield 폴더 생성 후
M_EnergyShield 머티리얼 생성

782
00:44:06.087 --> 00:44:06.637
반투명 설정을 위해 Blend Mode를 Translucent로 선택

783
00:44:06.637 --> 00:44:07.187
Fresnel: 카메라가 바라보는 각도와 버텍스의 노멀 벡터를
비교하여 0~1 값을 출력

784
00:44:07.187 --> 00:44:07.737
Lerp 생성, A : 0.3, B : 1, Alpha : Fresnel 연결 후 Opacity에 연결

785
00:44:07.737 --> 00:44:08.287
미리보기를 스피어로 변경하면
중앙은 30% 투명도, 바깥 경계는 100%

786
00:44:08.287 --> 00:44:08.837
Depth Fade
3D 오브젝트가 맞닿은 경계를 시각화

787
00:44:08.837 --> 00:44:09.387
OneMinus 후 Fresnel과 Add

788
00:44:09.387 --> 00:44:09.987
Add 된 결과 Saturate 적용 후 각각 Lerp의 Alpha에 연결

789
00:44:09.987 --> 00:44:11.237
파라미터 변환
Emissive Lerp A : Inner Color, B : Side Color

790
00:44:11.237 --> 00:44:12.487
Opacity Lerp A : InnerOp, B : SideOp

791
00:44:12.487 --> 00:44:13.737
Fresnel ExponentIn : FresnelExp

792
00:44:13.737 --> 00:44:14.987
Depthfade FadeDistance : FadeDist

793
00:44:14.987 --> 00:44:15.487
포지션 시각화
Absolute World Position 생성 후 normalize

794
00:44:15.487 --> 00:44:15.987
VectorParameter 생성(Direction) 후 normalize

795
00:44:15.987 --> 00:44:16.487
Dot(내적) 노드 생성 후 A : 월드 포지션 노멀라이즈 한 결과,
B : Direction 파라미터 노멀라이즈 한 결과 연결

796
00:44:16.487 --> 00:44:16.987
RemapValueRangeNormalized 노드 생성 후 Input : 내적 결과 입력

797
00:44:16.987 --> 00:44:17.487
Input Low : Constant(-1) 노드 연결,
Input High : Constant(1) 노드 연결

798
00:44:17.487 --> 00:44:17.987
Multiply 생성, A : Dot 결과, B : ScalarParameter 생성(LineFrq, 5)

799
00:44:17.987 --> 00:44:18.487
Sine 노드 생성 후 입력에 Multiply 된 결과,
출력은 Remap Input에 연결

800
00:44:18.487 --> 00:44:18.987
Time 노드와 Multiply 생성 후 A : 타임 노드,
B : ScalarParameter 생성(TimeScale, 1)

801
00:44:18.987 --> 00:44:19.487
Add 생성 후 A : lineFreq 곱셈 결과,
B : Time 곱셈 결과, 출력을 Sine에 입력

802
00:44:19.487 --> 00:44:19.987
Power 노드 생성 후 Base : Sine, Exp : ScalarParameter(linewidth, 1)

803
00:44:19.987 --> 00:44:20.487
출력 결과는 Remap Input에 연결 (라인의 두께 설정)

804
00:44:20.487 --> 00:44:20.987
Multiply 생성 후 A : Remap Result,
B : ScalarParameter(lineOp, 0.3) (라인의 투명도 설정)

805
00:44:20.987 --> 00:44:21.487
Add 노드 생성 후 A : Fresnel과 Depthfade가 더해진 결과,
B : lineOp를 곱한 결과

806
00:44:21.487 --> 00:44:21.987
Add 출력은 Saturate에 연결