1
00:00:04.825 --> 00:00:08.925
실감 공통편
포스트 프로세스 실루엣 및 아웃라인

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

3
00:00:26.325 --> 00:00:29.375
이번 시간에는 3D 오브젝트가 아닌

4
00:00:29.375 --> 00:00:31.625
화면 전체적인 효과를 다루는

5
00:00:31.625 --> 00:00:36.425
포스트 프로세스와 포스트 프로세스에 사용할 수 있는 형태의

6
00:00:36.425 --> 00:00:38.675
머티리얼을 제작해 보겠습니다

7
00:00:38.675 --> 00:00:41.675
이번 학습을 통해 렌더링의 순서와

8
00:00:41.675 --> 00:00:45.725
시각효과를 통한 이미지 변환을 중점적으로 하여

9
00:00:45.725 --> 00:00:50.625
이전 학습한 깊이 값을 표현하는 것을 응용하게 될 것입니다

10
00:00:50.625 --> 00:00:54.625
포스트 프로세스 실루엣

11
00:00:55.925 --> 00:00:59.425
포스트 프로세스 머티리얼을 만들기 전에

12
00:00:59.425 --> 00:01:04.525
우선은 우리가 만들어야 될 효과가 이미 에디터 상에

13
00:01:04.525 --> 00:01:09.925
지금 오브젝트를 선택해 보면 알 수가 있습니다

14
00:01:09.925 --> 00:01:15.625
지금 보시는 것처럼 오브젝트 경계가 주황색으로 나오고 있죠

15
00:01:15.625 --> 00:01:18.625
이런 것들은 개별 머티리얼로도 물론

16
00:01:18.625 --> 00:01:21.775
해결할 수 있는 방법은 있는데 좀 한계가 있고요

17
00:01:21.775 --> 00:01:26.825
화면 전체에 효과를 줘서 구현을 해야 됩니다

18
00:01:26.825 --> 00:01:30.375
이것을 위해서 사용하는 것이 바로 화면 앞에 있는

19
00:01:30.375 --> 00:01:33.575
포스트 프로세스라고 하는 겁니다

20
00:01:33.875 --> 00:01:38.575
보통 줄여서 P, P 그리고

21
00:01:38.575 --> 00:01:41.925
전체적인 공간을 의미하는 볼륨까지 해서

22
00:01:41.925 --> 00:01:46.276
포스트 프로세스 효과를 적용하기 위한 공간

23
00:01:46.276 --> 00:01:49.626
포스트 프로세스 볼륨이라고 얘기를 합니다

24
00:01:49.926 --> 00:01:53.226
포스트 프로세스 볼륨 같은 경우에는

25
00:01:53.226 --> 00:01:58.476
Place Actors 항목에서 Visual Effects 부분을 보시면

26
00:01:58.476 --> 00:02:04.276
첫 번째 항목으로 있죠 이걸 그대로 들고 오면 됩니다

27
00:02:04.626 --> 00:02:07.326
그럼 총 현재 레벨에는

28
00:02:07.326 --> 00:02:12.226
2개의 포스트 프로세스 액터가 위치하게 됩니다

29
00:02:12.226 --> 00:02:15.476
Third Person Map 기준으로 이미 설치가 되어 있는

30
00:02:15.476 --> 00:02:18.226
첫 번째 포스트 프로세스 같은 경우에는

31
00:02:18.226 --> 00:02:21.976
세팅으로 가서 아래쪽으로 내려가 보면

32
00:02:21.976 --> 00:02:27.126
Infinite Extent(Unbound)라는 항목이 체크되어 있습니다

33
00:02:27.126 --> 00:02:32.576
이것은 카메라가 이 영역 안에 들어가지 않아도

34
00:02:32.576 --> 00:02:37.626
효과가 글로벌하게 전체적으로 적용이 된다는 뜻입니다

35
00:02:37.976 --> 00:02:43.126
반면에 이번에 우리가 새로 영상에서 설치한 포스트 프로세스는

36
00:02:43.126 --> 00:02:45.176
볼륨 세팅 항목에 보면

37
00:02:45.176 --> 00:02:49.426
Infinite Extent(Unbound) 항목이 비활성화되어 있죠

38
00:02:49.426 --> 00:02:53.826
그렇기 때문에 우리가 만약에 Bloom의 효과를

39
00:02:53.826 --> 00:02:57.026
기존보다 더 강하게 줬다면

40
00:02:57.026 --> 00:03:00.176
지금은 아무런 화면상의 변화가 없지만

41
00:03:00.176 --> 00:03:04.476
카메라가 이 볼륨의 영역 안으로 들어갔을 때

42
00:03:04.476 --> 00:03:08.226
이런 식으로 더 밝게 Bloom 효과가

43
00:03:08.226 --> 00:03:11.026
빛나는 것을 확인하실 수가 있습니다

44
00:03:11.026 --> 00:03:13.876
일반적인 포스트 프로세스 같은 경우에는

45
00:03:13.876 --> 00:03:16.726
언리얼에서 지금 보시는 것처럼

46
00:03:16.726 --> 00:03:21.626
Bloom 효과뿐만 아니라 여러 가지 다양한 효과들을

47
00:03:21.626 --> 00:03:25.876
굉장히 많이 이미 구현되어 있는 상태입니다

48
00:03:25.876 --> 00:03:29.726
하지만 모든 기능은 만들 수가 없기 때문에

49
00:03:29.726 --> 00:03:34.426
여기에서 포스트 프로세스 머티리얼이라는 항목을 통해서

50
00:03:34.426 --> 00:03:39.476
추가적인 기능을 프로젝트 상황에 맞춰서 만들 수 있도록

51
00:03:39.476 --> 00:03:41.576
따로 마련해 놨습니다

52
00:03:41.576 --> 00:03:46.426
여기에 사용할 포스트 프로세스 머티리얼을 만들기 위해서

53
00:03:46.426 --> 00:03:53.776
콘텐츠 폴더에 뉴 폴더를 해서 PPV라고만 적겠습니다

54
00:03:53.776 --> 00:03:58.226
오른쪽 클릭해서 머티리얼을 생성한 후에

55
00:03:58.226 --> 00:04:08.626
M_SilhouetteLine이라고 이름 지어주도록 하겠습니다

56
00:04:08.626 --> 00:04:11.626
더블 클릭해서 머티리얼 창을 열고

57
00:04:11.626 --> 00:04:15.876
머티리얼 도메인 항목에서 Surface로 되어 있는 것을

58
00:04:15.876 --> 00:04:20.326
Post Process로 변경하면 지금 보는 것처럼

59
00:04:20.326 --> 00:04:24.476
Emissive Color만 활성화되어 있는 걸 볼 수가 있습니다

60
00:04:24.476 --> 00:04:29.926
포스트 프로세스는 기본적으로 이 포스트라는 단어가

61
00:04:29.926 --> 00:04:36.126
이미 어떠한 프로세스, 절차가 끝난 이후의 과정을 의미하는데

62
00:04:36.126 --> 00:04:39.426
여기에서 얘기하는 프로세스라고 함은

63
00:04:39.426 --> 00:04:45.126
화면이 렌더링 되는 절차가 어느 정도 정리되고 난 후에

64
00:04:45.126 --> 00:04:48.826
생성되는 다양한 데이터들이 있습니다

65
00:04:49.926 --> 00:04:52.626
앞 시간에 우리가 그중에 봤던 것이

66
00:04:52.626 --> 00:04:57.126
SceneDepth라고 하는 효과를 봤었고요

67
00:04:57.126 --> 00:05:00.526
그거 말고도 여러분들이 Lit 모드에서

68
00:05:00.526 --> 00:05:03.226
Buffer Visualization에 보면

69
00:05:03.226 --> 00:05:06.176
Base Color만 렌더링 된 화면

70
00:05:06.176 --> 00:05:09.076
Roughness만 렌더링 된 화면

71
00:05:09.076 --> 00:05:12.477
그리고 투명도만 Opacity 항목을 통해서

72
00:05:12.477 --> 00:05:16.477
투명도로 처리되는 화면이라든가 아니면

73
00:05:16.477 --> 00:05:19.877
이 모든 것들을 볼 수 있는 오버뷰를 클릭하게 되면

74
00:05:19.877 --> 00:05:22.077
잠시 머티리얼 창은 닫겠습니다

75
00:05:22.877 --> 00:05:29.127
지금 보시는 것처럼 화면에 최종 결과물을 그리는 데 필요한

76
00:05:29.127 --> 00:05:33.677
다양한 렌더링 된 이미지들을 눈으로 보실 수가 있습니다

77
00:05:33.677 --> 00:05:39.377
우리는 이러한 것들을 보통 렌더 패스라고 얘기합니다

78
00:05:39.377 --> 00:05:43.477
다양한 렌더링 된 이미지들을 종합해서

79
00:05:43.477 --> 00:05:47.177
최종 완성된 화면을 만드는 것이죠

80
00:05:47.177 --> 00:05:50.127
그래서 지금 테두리에 보이는 이미지들이

81
00:05:50.127 --> 00:05:54.377
먼저 기본 패스들이 생성이 되고 난 후에

82
00:05:54.377 --> 00:05:57.577
그 이후에 여기에 있는 데이터들과

83
00:05:57.577 --> 00:06:02.077
추가 다른 데이터들을 종합해서 만들어지는 게

84
00:06:02.077 --> 00:06:05.977
바로 포스트 프로세스 효과입니다

85
00:06:06.327 --> 00:06:08.427
유저들이 보는 건 결국

86
00:06:08.427 --> 00:06:13.627
포스트까지 모두 적용이 된 화면을 보게 되는 것이죠

87
00:06:13.627 --> 00:06:17.677
화면은 다시 되돌리도록 하겠습니다

88
00:06:17.677 --> 00:06:19.927
머티리얼 창으로 돌아가서요

89
00:06:20.827 --> 00:06:25.427
그렇기 때문에 여기에는 별도의 다른

90
00:06:25.427 --> 00:06:27.277
렌더 패스에 사용될 데이터들을

91
00:06:27.277 --> 00:06:29.927
따로 꽂아 줄 필요가 없습니다

92
00:06:29.927 --> 00:06:34.027
최종 결과 화면만 출력될 필요가 있기 때문에

93
00:06:34.027 --> 00:06:38.927
Emissive Color 항목만 현재 활성화되어 있는 것이죠

94
00:06:38.927 --> 00:06:43.677
여기에다가 여러분들이 주로 사용하게 될 이번 노드는

95
00:06:43.677 --> 00:06:46.827
Scene Texture라고 하는 노드입니다

96
00:06:46.827 --> 00:06:52.327
오른쪽 클릭을 해서 SceneTexture라고 검색해 보시면

97
00:06:52.327 --> 00:06:56.227
노드가 하나 이렇게 검색이 되죠 이것을 클릭해 보시면

98
00:06:56.977 --> 00:07:01.627
디테일 창에서 Scene Texture ID 항목을 클릭해 보면

99
00:07:01.627 --> 00:07:04.777
앞서서 봤던 다양한 렌더 패스들이

100
00:07:04.777 --> 00:07:07.677
나열되어 있는 것을 보실 수가 있고요

101
00:07:07.677 --> 00:07:12.577
여기에서 PostProcessInput0이라고 하는 것이

102
00:07:12.577 --> 00:07:17.227
이 컬러 항목을 Emissive Color에다가 연결할 건데

103
00:07:17.577 --> 00:07:19.927
여러분들이 나중에 여기에 있는

104
00:07:19.927 --> 00:07:22.727
PostProcessInput0을 연결할 때는

105
00:07:22.727 --> 00:07:25.827
가급적 직접 연결하는 것도 가능하겠지만

106
00:07:25.827 --> 00:07:28.427
Component Mask를 이용해서

107
00:07:28.427 --> 00:07:32.827
알파 값이 빠진 상태의 RGB 데이터만 이렇게

108
00:07:32.827 --> 00:07:36.827
전달하는 것을 습관화하시는 것이 좋습니다

109
00:07:36.827 --> 00:07:40.127
현재 컬러 노드에서 출력이 되는 것은

110
00:07:40.127 --> 00:07:44.077
RGBA 해서 벡터 4고요

111
00:07:44.077 --> 00:07:47.227
그래서 우리가 최종 화면을 그리는 데 필요한 건

112
00:07:47.227 --> 00:07:51.627
RGB 데이터만 필요하기 때문에 RGB로 출력해서

113
00:07:51.627 --> 00:07:56.577
나중에 컬러하고 믹싱할 수 있게끔 하는 것이죠

114
00:07:56.577 --> 00:08:02.727
한번 예시 삼아서 Constant3Vector로 약간 붉은색을

115
00:08:02.727 --> 00:08:05.577
너무 진하니까 살짝 붉은색을 넣어서

116
00:08:05.577 --> 00:08:09.427
Multiply를 통해서 효과를 섞어주도록 하겠습니다

117
00:08:09.427 --> 00:08:12.977
Component Mask를 통해서 RGB를 섞으면

118
00:08:12.977 --> 00:08:14.877
Emissive Color에 연결했을 때

119
00:08:14.877 --> 00:08:19.477
정상적으로 이렇게 붉은 화면으로 보이는 걸 알 수가 있는데요

120
00:08:19.977 --> 00:08:25.077
반면에 Scene Texture에서 Multiply에 직접 꽂아 넣게 되면

121
00:08:25.077 --> 00:08:28.977
이런 식으로 에러가 출력됩니다

122
00:08:28.977 --> 00:08:32.177
보시면 float4와 float3 간에

123
00:08:32.177 --> 00:08:35.027
문제가 생겼다는 걸 알 수가 있죠

124
00:08:35.027 --> 00:08:39.728
그래서 이런 식으로 우리는 화면을 빨갛게 만드는

125
00:08:39.728 --> 00:08:42.128
포스트 프로세스 효과를 만든 것이고

126
00:08:42.128 --> 00:08:46.278
이렇게 만들어진 머티리얼을 선택해 놓고

127
00:08:46.278 --> 00:08:49.378
포스트 프로세스 머티리얼에 플러스를 눌러서

128
00:08:49.378 --> 00:08:54.228
여기 Choose 항목을 클릭한 다음에 Asset reference

129
00:08:54.228 --> 00:08:58.128
그리고 비어 있는 곳에다가 연결을 하면

130
00:08:58.128 --> 00:09:02.078
M_Silhouette이라고 이렇게 적용이 됐죠

131
00:09:02.578 --> 00:09:05.878
현재 우리가 Unbound 체크가 되어 있지 않은

132
00:09:05.878 --> 00:09:07.978
볼륨에 적용을 했기 때문에

133
00:09:07.978 --> 00:09:10.978
천천히 Unbound를 향해서 들어가 보겠습니다

134
00:09:10.978 --> 00:09:14.828
천천히 들어가 보면 지금 보시는 것처럼

135
00:09:14.828 --> 00:09:16.478
우리가 만든 머티리얼

136
00:09:16.478 --> 00:09:20.628
기존의 렌더링이 끝난 화면 위에다가

137
00:09:20.628 --> 00:09:26.478
붉은색이 얹어진 형태의 결과물을 확인하실 수가 있습니다

138
00:09:26.478 --> 00:09:28.678
포스트 프로세스는 이런 식으로

139
00:09:28.678 --> 00:09:33.478
렌더링 된 결과물에 추가적인 효과를 얹는

140
00:09:33.478 --> 00:09:38.778
다양한 여러 가지 효과들을 모두 총칭해서 이야기하는 겁니다

141
00:09:38.778 --> 00:09:41.028
간단한 포스트 효과를 만들어서

142
00:09:41.028 --> 00:09:44.428
Post Process Volume에 적용해 봤고요

143
00:09:45.028 --> 00:09:48.328
이번에는 본격적인 예제를 만들기에 앞서서

144
00:09:48.328 --> 00:09:50.828
우리가 만들어야 될 아웃라인

145
00:09:50.828 --> 00:09:53.178
이렇게 실루엣 처리를 해줄 수 있는

146
00:09:53.178 --> 00:09:57.728
오브젝트의 가장자리를 별도의 지정한 색깔로

147
00:09:57.728 --> 00:09:59.578
표현할 수 있는 기능을 위해서

148
00:09:59.578 --> 00:10:03.378
반드시 알아야 되는 것 하나를 설명하겠습니다

149
00:10:03.928 --> 00:10:08.928
앞서서 렌더 패스라는 표현을 했는데요

150
00:10:08.928 --> 00:10:12.728
3D 오브젝트를 선택하고 쭉 내려가서

151
00:10:12.728 --> 00:10:15.778
렌더링 항목을 확인해 보시면

152
00:10:15.778 --> 00:10:18.878
아래쪽으로 많이 좀 내려가셔야 될 겁니다

153
00:10:18.878 --> 00:10:27.028
여기 Render CustomDepth Pass라는 것이 있습니다

154
00:10:27.028 --> 00:10:30.228
이것을 활성화해 주셔야 됩니다

155
00:10:30.228 --> 00:10:34.278
Custom Depth Pass에다가 내가 선택한

156
00:10:34.278 --> 00:10:39.678
지금 체크한 오브젝트를 포함시키겠다는 의미인데요

157
00:10:39.678 --> 00:10:43.128
여기에서 보면 Buffer Visualization에서

158
00:10:43.128 --> 00:10:47.228
우리가 SceneDepth라고 하는 항목을 통해서

159
00:10:47.228 --> 00:10:49.978
거리에 따라서 이렇게 지금 보시면

160
00:10:49.978 --> 00:10:55.328
카메라와 가까우면 블랙, 멀면 흰색으로 처리되는 화면을 보셨죠

161
00:10:55.578 --> 00:10:59.478
CustomDepth는 모든 3D 오브젝트가 아닌

162
00:10:59.478 --> 00:11:02.628
내가 선택한 3D 오브젝트만

163
00:11:02.628 --> 00:11:05.728
이런 Depth 계산에 포함시키게끔 하는

164
00:11:05.728 --> 00:11:07.528
별도의 이미지입니다

165
00:11:08.278 --> 00:11:13.228
그래서 SceneDepth는 모든 3D 오브젝트를 대상으로 하는 거고

166
00:11:13.228 --> 00:11:15.578
CustomDepth는 체크해 보면

167
00:11:15.578 --> 00:11:20.878
Buffer Visualization에 있습니다 활성화해 보시면

168
00:11:20.878 --> 00:11:25.278
나머지 배경에 있는 다른 3D 오브젝트들은 포함이 안되고

169
00:11:25.278 --> 00:11:30.628
지금 보는 것처럼 내가 CustomDepth에 포함시키겠다

170
00:11:30.628 --> 00:11:36.278
체크했던 3D 오브젝트만 활성화된 것을 보실 수가 있죠

171
00:11:36.578 --> 00:11:39.378
체크를 해제하고 선택을 빼서 보면

172
00:11:39.378 --> 00:11:41.878
아무것도 없는 검은색입니다

173
00:11:41.878 --> 00:11:44.128
근데 다시 한번 선택해서

174
00:11:44.128 --> 00:11:47.328
Render CustomDepth Pass에 활성화해 보면

175
00:11:47.328 --> 00:11:50.028
거리 값이 렌더링 되는 것을

176
00:11:50.028 --> 00:11:53.228
눈으로 확인할 수 있게 됩니다

177
00:11:53.778 --> 00:11:58.928
우리가 앞서 Depth Fade라는 기능을 배울 때

178
00:11:58.928 --> 00:12:02.678
Depth Fade를 구현하는 기능 중에

179
00:12:02.678 --> 00:12:06.978
SceneDepth 하고요 Pixel Depth 하고

180
00:12:06.978 --> 00:12:09.629
이 두 가지의 차이를 이용해서

181
00:12:09.629 --> 00:12:13.029
Depth Fade라는 기능을 만들어 냈죠

182
00:12:13.029 --> 00:12:17.029
마찬가지 맥락으로 이번 시간의 주요 포인트가 되는 것은

183
00:12:17.029 --> 00:12:20.229
SceneDepth와 CustomDepth

184
00:12:20.229 --> 00:12:23.979
이 두 가지의 차이를 이용해서

185
00:12:23.979 --> 00:12:28.979
오브젝트를 별도로 아웃라인 처리를 해주는

186
00:12:28.979 --> 00:12:31.829
방법에 대해서 다뤄보게 될 겁니다

187
00:12:32.129 --> 00:12:35.979
Scene은 다시 Lit 모드로 돌려놓고요

188
00:12:35.979 --> 00:12:39.179
이 CustomDepth라는 기능을 한번

189
00:12:39.179 --> 00:12:43.479
나머지 간단한 예제를 위해서 만들었던 것은 지우도록 하고

190
00:12:43.479 --> 00:12:45.029
이 PostProcessInput0

191
00:12:45.029 --> 00:12:47.879
Scene Texture의 포스트 프로세스를

192
00:12:47.879 --> 00:12:52.979
CustomDepth 항목을 선택해서 바로 적용해 보겠습니다

193
00:12:54.129 --> 00:12:58.929
적용을 하고 나면 이제 볼륨 안으로 들어가 보면

194
00:12:58.929 --> 00:13:01.629
이미 머티리얼이 적용되어 있죠 이 볼륨 안에는

195
00:13:01.629 --> 00:13:05.179
혹시라도 이렇게 왔다 갔다 하는 것이 번거로우신 분들은

196
00:13:05.179 --> 00:13:08.779
두 번째로 생성한 볼륨에다가 브러시 세팅에서

197
00:13:08.779 --> 00:13:12.579
Unbound 체크하셔도 좋고요 이렇게

198
00:13:12.579 --> 00:13:16.479
그러면 새하얀 화면이 나오게 될 겁니다

199
00:13:16.479 --> 00:13:18.729
Unbound 체크를 끄고

200
00:13:18.729 --> 00:13:22.629
가까이 가서 확인하는 것도 방법입니다

201
00:13:22.629 --> 00:13:28.629
그러면 우리가 Buffer Visualization에서 봤던 것과는 다르게

202
00:13:28.629 --> 00:13:32.729
Buffer Visualization에서는 굉장히 까만 이미지에

203
00:13:32.729 --> 00:13:38.279
약간의 회색 혹은 멀리 떨어져서 보면 이렇게 흰색 정도로

204
00:13:38.279 --> 00:13:41.479
검은색과 흰색의 이미지였던 것에 반해서

205
00:13:41.479 --> 00:13:45.229
실제 Lit 모드를 통해서 렌더링 된 화면을 보면

206
00:13:45.229 --> 00:13:48.329
CustomDepth가 바로 적용이 됐을 때

207
00:13:48.329 --> 00:13:53.979
이런 식으로 굉장히 새하얀 화면을 확인하실 수가 있죠

208
00:13:53.979 --> 00:13:57.479
그래서 올바른 Depth 표현을 위해서

209
00:13:57.479 --> 00:13:59.379
여기 있는 CustomDepth에다가

210
00:13:59.379 --> 00:14:02.529
약간의 처리를 해주도록 할 겁니다

211
00:14:02.529 --> 00:14:06.329
우선 컬러에서 Divide를 이용해서

212
00:14:06.329 --> 00:14:11.129
10,000까지 해주도록 하겠습니다

213
00:14:11.129 --> 00:14:13.529
그리고 연결을 해줍니다

214
00:14:13.529 --> 00:14:18.279
Apply를 눌러서 이제 포스트 적용된 화면을 보면

215
00:14:18.279 --> 00:14:22.229
우리가 선택한 오브젝트는 블랙으로 나오고요

216
00:14:22.229 --> 00:14:26.679
나머지가 전부 다 흰색으로 나오는 걸 보실 수가 있습니다

217
00:14:26.679 --> 00:14:29.329
보이시죠? 그래서 실제로

218
00:14:29.329 --> 00:14:33.979
이걸 이제 Unbound 체크하고 멀리서도 확인해 보겠습니다

219
00:14:33.979 --> 00:14:37.479
멀리서 보면 지금 보시는 것처럼

220
00:14:37.479 --> 00:14:42.729
가까이 있는 오브젝트는 멀어질수록 흰색에 가까워지는데

221
00:14:42.729 --> 00:14:47.529
배경은 여전히 새하얗게 보이는 걸 확인할 수가 있습니다

222
00:14:47.779 --> 00:14:50.629
우선 이 원인부터 말씀을 드리면

223
00:14:50.629 --> 00:14:53.679
우리가 그리고자 하는 건 Depth

224
00:14:53.679 --> 00:14:57.029
CustomDepth든 SceneDepth든 결국엔 Depth

225
00:14:57.029 --> 00:15:00.679
깊이에 대한 것들을 지금 표현하고 있죠

226
00:15:00.679 --> 00:15:04.429
깊이라고 하면 카메라로부터의 거리입니다

227
00:15:04.429 --> 00:15:07.129
우리가 그리고자 하는 이 3D 오브젝트는

228
00:15:07.129 --> 00:15:10.829
카메라로부터 어느 정도 거리가 떨어져 있는 반면에

229
00:15:10.829 --> 00:15:15.479
CustomDepth는 내가 체크하지 않은 나머지는

230
00:15:15.479 --> 00:15:17.879
일절 그리지 않기 때문에

231
00:15:17.879 --> 00:15:21.279
나머지 여백의 공간들은 전부 다

232
00:15:21.279 --> 00:15:23.379
배경을 그리게끔 합니다

233
00:15:23.379 --> 00:15:26.579
그렇기 때문에 거리가 굉장히 먼 것이죠

234
00:15:26.579 --> 00:15:29.579
만약에 이 오브젝트가 현재 저와

235
00:15:29.579 --> 00:15:32.829
1,000 유닛만큼 떨어져 있다고 가정을 하겠습니다

236
00:15:32.829 --> 00:15:36.430
Depth 값이 1,000만큼 떨어져 있다고 가정을 하면

237
00:15:36.430 --> 00:15:40.930
우리가 10,000이라고 하는 수치를 이용해서 나눠줬죠

238
00:15:40.930 --> 00:15:45.130
1,000을 10,000으로 나누면 결괏값이 0.1이 되겠죠

239
00:15:45.130 --> 00:15:49.330
그러면 0.1은 0하고 아주 가깝기 때문에

240
00:15:49.330 --> 00:15:53.680
블랙에 가까운 그레이 톤을 보여주는 거고요

241
00:15:53.680 --> 00:15:57.130
만약에 아주 먼 부분에 있는 여기 끝자락

242
00:15:57.130 --> 00:15:59.530
3,000 정도라고 가정하겠습니다

243
00:15:59.530 --> 00:16:01.730
3,000 유닛이라고 가정하면

244
00:16:01.730 --> 00:16:06.380
0.3 정도 되는 그레이를 표현하게 되는 겁니다

245
00:16:06.380 --> 00:16:09.230
반면에 10,000 유닛을 벗어나는

246
00:16:09.230 --> 00:16:12.680
아주 먼 배경이라고 하면

247
00:16:12.680 --> 00:16:17.080
당연히 10,000보다 크다는 얘기는 1보다 크다는 얘기니까

248
00:16:17.080 --> 00:16:19.230
화이트가 보이게 되는 겁니다

249
00:16:19.630 --> 00:16:24.530
이러한 원리에 의해서 배경색이 화이트가 되는 겁니다

250
00:16:24.530 --> 00:16:29.580
여러분이 Buffer Visualization에서 본

251
00:16:29.580 --> 00:16:32.030
CustomDepth 같은 경우에는

252
00:16:32.030 --> 00:16:37.280
이것을 재가공해서 배경에 대한 값은

253
00:16:37.280 --> 00:16:40.680
빼놓은 상태라고 이해하시면 됩니다

254
00:16:40.680 --> 00:16:42.930
그래서 배경을 1이 아니라

255
00:16:42.930 --> 00:16:46.480
0이 되게끔 처리한 화면을 보신 것이죠

256
00:16:46.480 --> 00:16:50.280
머티리얼 에디터 창으로 돌아와서요

257
00:16:50.280 --> 00:16:52.880
이 Divide 된 결과물에다가

258
00:16:52.880 --> 00:16:56.180
OneMinus라는 기능을 이용해서

259
00:16:56.180 --> 00:16:59.680
Emissive Color에다가 연결해 보겠습니다

260
00:16:59.980 --> 00:17:02.330
갑자기 화면이 까매졌죠

261
00:17:02.330 --> 00:17:07.380
그리고 이렇게 연결된 노드를 Apply 해보면

262
00:17:07.380 --> 00:17:10.280
지금 보시는 것처럼 배경은 까맣고

263
00:17:10.280 --> 00:17:14.080
역으로 가까워질수록 하얗게 바뀝니다

264
00:17:14.080 --> 00:17:17.230
일반적인 CustomDepth였던 상태에서

265
00:17:17.230 --> 00:17:22.180
가까우면 0.1이거나 멀면 0.3일 수도 있겠죠

266
00:17:22.180 --> 00:17:26.530
이랬던 값이 CustomDepth에서 OneMinus를 해줬으니까

267
00:17:26.530 --> 00:17:32.180
1 - 0.1이 되면서 역으로 0.9처럼 밝아진 거고요

268
00:17:32.180 --> 00:17:33.530
1에 가까워졌으니까

269
00:17:33.530 --> 00:17:38.830
여기는 1 - 0.3 해서 0.7이 되면서 마찬가지로 밝아진 거죠

270
00:17:38.830 --> 00:17:43.580
반면에 배경의 무한대에 가까웠던 아주 굉장히 큰 수가

271
00:17:43.580 --> 00:17:47.180
OneMinus에 들어가면 이게 음수가 되어버리면서

272
00:17:47.180 --> 00:17:51.830
여기에 찍히는 값이 엄청나게 낮아진 상태입니다

273
00:17:51.830 --> 00:17:57.430
지금과 같이 이렇게 정리된 값에다가 우리는 깔끔하게

274
00:17:57.430 --> 00:18:02.030
우리가 선택한 오브젝트만 골라낼 수 있도록

275
00:18:02.030 --> 00:18:05.830
0보다 큰 수들은 모두 다 1로 만들고

276
00:18:05.830 --> 00:18:09.580
0보다 작은 수는 모두 다 0으로 만들 수 있게끔

277
00:18:09.580 --> 00:18:15.530
Ceil이라고 하는 올림 함수를 이용해서 마무리 지어줄 겁니다

278
00:18:15.880 --> 00:18:21.080
이것을 연결해 주겠습니다 Apply 해주고요

279
00:18:21.080 --> 00:18:23.930
그러면 이제 값이 얼마가 됐든

280
00:18:23.930 --> 00:18:29.430
아무리 멀리 떨어진다고 하더라도 흰색이 안 바뀌죠

281
00:18:29.430 --> 00:18:32.830
지금 보시는 것처럼 흰색이 바뀌지 않습니다

282
00:18:33.230 --> 00:18:37.580
그러면 앞서서 만들어 놨던 기능들과 이것을

283
00:18:37.580 --> 00:18:40.030
Lerp를 이용해서 한번 합쳐 보면

284
00:18:40.030 --> 00:18:42.880
Scene Texture를 그대로 복사해서

285
00:18:42.880 --> 00:18:46.780
PostProcessInput0으로 텍스처 타입을

286
00:18:46.780 --> 00:18:48.830
Input 되는 데이터를 바꿔주고요

287
00:18:48.830 --> 00:18:51.330
Component Mask 아까 전에 해줬던

288
00:18:51.330 --> 00:18:55.180
색을 색칠하는 과정 그대로 진행할 겁니다

289
00:18:55.180 --> 00:18:59.880
Component Mask 하고 Constant3Vector를

290
00:18:59.880 --> 00:19:06.030
빨간색으로 이렇게 Multiply 해주겠습니다

291
00:19:07.331 --> 00:19:10.031
여기에서 여러분들이 헷갈리시면 안되는 것

292
00:19:10.031 --> 00:19:12.781
현재 우리가 만들어 놓은 화면에서

293
00:19:12.781 --> 00:19:18.031
Custom Pass로 선택해 놓은 오브젝트는 흰색입니다

294
00:19:18.031 --> 00:19:21.931
그럼 흰색에는 이 두 가지가 섞인

295
00:19:21.931 --> 00:19:25.631
기본 렌더링이 끝난 화면과

296
00:19:25.631 --> 00:19:28.831
빨간색이 섞인 데이터를 보여줄 거고요

297
00:19:28.831 --> 00:19:34.481
검은색 영역에는 원래 렌더링 된 이미지를 보여줘야 되니까

298
00:19:34.481 --> 00:19:38.381
Component Mask 항목에서 드래그 해서

299
00:19:38.381 --> 00:19:42.131
Lerp를 LinearInterpolate를 해주시고

300
00:19:42.131 --> 00:19:45.031
Multiply 된 결과를 B에다가

301
00:19:45.031 --> 00:19:49.631
알파에는 우리가 계산해 놓은 Depth 값을

302
00:19:49.631 --> 00:19:52.781
이렇게 최종 연결을 해서 마무리하신 후에

303
00:19:52.781 --> 00:19:56.531
Emissive Color에다가 연결해 주겠습니다

304
00:19:56.531 --> 00:19:59.831
그러면 지금 파랗게 나오죠

305
00:19:59.831 --> 00:20:03.281
우선 저장하고 실제 결과 화면을 보겠습니다

306
00:20:03.281 --> 00:20:08.131
화면이 지금 여기 보면 굉장히 파랗게 나오는 이유는

307
00:20:08.131 --> 00:20:12.481
앞서서 말씀드린 것처럼 배경 쪽에 무한대에 가까운

308
00:20:12.481 --> 00:20:16.331
굉장히 마이너스 큰 수가 들어가 있기 때문에

309
00:20:16.331 --> 00:20:19.831
Lerp와 함께 적용이 되면서 이런 일이 생긴 거라서

310
00:20:19.831 --> 00:20:24.381
여기에 반올림하고 난 후에 숫자를

311
00:20:24.381 --> 00:20:29.281
Saturate를 이용해서 0에서 1 사이로 마무리해 주셔야

312
00:20:29.281 --> 00:20:32.181
Apply를 하더라도 안정되게

313
00:20:32.181 --> 00:20:35.981
여러분들이 오브젝트를 그려낼 수 있게 됩니다

314
00:20:36.481 --> 00:20:38.331
화면을 좀 정리를 하고요

315
00:20:38.331 --> 00:20:42.681
선택해놨던 것도 해제를 한 상태에서 한번 보겠습니다

316
00:20:42.681 --> 00:20:46.781
지금 보면 CustomDepth로 처리를 해놨기 때문에

317
00:20:46.781 --> 00:20:51.231
이 오브젝트가 이렇게 뒤에 가려진다고 하더라도

318
00:20:51.231 --> 00:20:54.131
CustomDepth는 앞서 말씀드린 것처럼

319
00:20:54.131 --> 00:20:58.331
다른 3D 오브젝트를 그리지 않기 때문에

320
00:20:58.331 --> 00:21:02.331
이 영역에다가 우리가 빨간색을 첨가한

321
00:21:02.331 --> 00:21:04.731
이미지를 볼 수 있게 되는 거죠

322
00:21:05.781 --> 00:21:10.481
그래서 마치 오브젝트가 벽 뒤에 가려지더라도

323
00:21:10.481 --> 00:21:12.181
보일 수 있게 하는 효과

324
00:21:12.181 --> 00:21:16.881
이걸 보통 실루엣 효과라고 얘기를 합니다 간단하죠?

325
00:21:16.881 --> 00:21:21.681
실루엣 효과가 되어야 이것을 응용해서

326
00:21:21.681 --> 00:21:24.881
우리는 아웃라인을 만들어 줄 수가 있게 됩니다

327
00:21:25.181 --> 00:21:29.181
이번에는 SceneDepth를 그릴 건데요

328
00:21:29.181 --> 00:21:31.681
CustomDepth와 Divide 항목을

329
00:21:31.681 --> 00:21:36.431
Ctrl+C, V를 해서 복사해 주시고요

330
00:21:36.681 --> 00:21:40.831
Scene Texture에서 Texture ID 항목을

331
00:21:40.831 --> 00:21:43.731
SceneDepth로 선택해 줍니다

332
00:21:44.581 --> 00:21:49.181
결과를 확인해 보면 Apply까지 눌러보면

333
00:21:49.181 --> 00:21:52.481
화면상의 3D 오브젝트들을 대상으로 해서

334
00:21:52.481 --> 00:21:56.131
전체적으로 Depth가 그려지는 게 보이시죠

335
00:21:57.081 --> 00:21:59.481
여기에서 배경은 아주 멀기 때문에

336
00:21:59.481 --> 00:22:02.131
그냥 제가 임의로 무한대라고는 했지만

337
00:22:02.131 --> 00:22:05.281
진짜로 끝없이 커지는 수는 아니고요

338
00:22:05.281 --> 00:22:10.531
9999... 이런 식으로 굉장히 큰 수입니다

339
00:22:10.531 --> 00:22:14.731
반면에 3D 오브젝트가 그려지는 공간들은

340
00:22:14.731 --> 00:22:17.581
10,000 유닛 이내에만 있다면

341
00:22:17.581 --> 00:22:21.081
0에서부터 1 사이의 값으로 나오게 될 겁니다

342
00:22:21.081 --> 00:22:25.031
여기 있는 Divide 10,000이라는 게 결국 거리 값이라서

343
00:22:25.031 --> 00:22:26.931
지금과 같은 상태입니다

344
00:22:26.931 --> 00:22:31.632
여기에서 우리에게 필요한 데이터들을 얻어내기 위해

345
00:22:31.632 --> 00:22:36.582
CustomDepth의 Divide 한 결과에다가

346
00:22:36.582 --> 00:22:41.482
Subtract를 이용해서 SceneDepth를 빼줍니다

347
00:22:41.982 --> 00:22:45.432
그래서 결과를 확인해 보면 이런 식으로

348
00:22:45.432 --> 00:22:50.932
값의 차이를 녹색은 CustomDepth라고 적을 거고요

349
00:22:50.932 --> 00:22:55.132
빨간색으로 SceneDepth를 적을 겁니다

350
00:22:55.132 --> 00:22:59.182
우선 CustomDepth에 대한 값만 적으면

351
00:22:59.182 --> 00:23:01.582
우리가 선택한 오브젝트는

352
00:23:01.582 --> 00:23:06.832
임의의 값으로 0.2 정도라고 적겠습니다

353
00:23:06.832 --> 00:23:10.032
배경은 무한대의 값이고

354
00:23:10.032 --> 00:23:13.482
지금 흰색으로 보이는 영역도 사실

355
00:23:13.482 --> 00:23:19.232
CustomDepth한테는 무한대의 값입니다 가장 큰 수

356
00:23:19.232 --> 00:23:21.782
반면에 SceneDepth의 입장에서 보면

357
00:23:21.782 --> 00:23:24.382
0.2라는 값은 똑같을 겁니다

358
00:23:24.382 --> 00:23:27.782
우리가 선택한 오브젝트는 0.2라는 값은 똑같고

359
00:23:27.782 --> 00:23:31.332
배경도 무한대의 값은 똑같을 건데요

360
00:23:31.982 --> 00:23:35.232
다만 3D 오브젝트가 있던 곳은

361
00:23:35.232 --> 00:23:38.832
0에서 1 사이 값이 될 겁니다

362
00:23:38.832 --> 00:23:43.282
무한대에 가까운 엄청나게 큰 수에서 1을 빼봐야

363
00:23:43.282 --> 00:23:48.082
거의 무한대 - 1이니까 엄청나게 큰 수라는 건 변함이 없죠

364
00:23:48.082 --> 00:23:52.082
반면에 무한대 - 무한대는 0이 될 거고요

365
00:23:52.082 --> 00:23:57.882
0.2 - 0.2 같은 값이 빠지니까 이거는 0이 될 겁니다

366
00:23:57.882 --> 00:24:01.032
그러면 값을 정리해 주기 위해서

367
00:24:01.032 --> 00:24:04.482
앞서서 했던 과정을 똑같이 거칠 겁니다

368
00:24:04.482 --> 00:24:07.582
Ceil과 Saturate를 복사해서요

369
00:24:07.582 --> 00:24:15.582
Subtract 앞에 두고 연결을 해줍니다 결과를 한번 보죠

370
00:24:15.932 --> 00:24:19.482
Ceil을 통해서 소수점이 남아 있을 수도 있는

371
00:24:19.482 --> 00:24:22.982
가능성을 지워낸 거죠

372
00:24:22.982 --> 00:24:25.682
그래서 보면 한 가지 변화가 생겼습니다

373
00:24:25.682 --> 00:24:28.732
뭐냐면 바로 이 부분이죠

374
00:24:28.732 --> 00:24:33.082
화면에 앵글을 조금 더 잘 보이게 다시 한번 바꿔보면

375
00:24:33.382 --> 00:24:37.632
이전에 CustomDepth로만 그렸을 때에는

376
00:24:37.632 --> 00:24:41.582
적용을 해 보면 이렇게 빠져있었고

377
00:24:41.582 --> 00:24:44.232
Ceil과 Saturate를 하기 전에

378
00:24:44.232 --> 00:24:47.682
Subtract를 한 결과만 확인할 때도

379
00:24:47.682 --> 00:24:52.082
지금 보시면 오브젝트가 이 부분이 빠져있었죠

380
00:24:52.082 --> 00:24:56.982
근데 올림을 통해서 이렇게 확인해 보면

381
00:24:56.982 --> 00:24:59.782
사실 이건 올림 때문이긴 한데

382
00:24:59.782 --> 00:25:04.182
여기 거리 값에 의해서 0.2가 있고

383
00:25:04.182 --> 00:25:08.482
멀어질수록 밝아졌었으니까 0.7이 있고 하다면

384
00:25:08.482 --> 00:25:11.632
여기 있는 0.2보다 CustomDepth의 값은

385
00:25:11.632 --> 00:25:17.082
단 0.01이라도 크겠죠 사실은

386
00:25:17.082 --> 00:25:20.582
이렇게 빨간색으로 빗금치는 눈에 보이는 영역은

387
00:25:20.582 --> 00:25:24.632
CustomDepth랑 SceneDepth랑 값이 같을 텐데

388
00:25:24.632 --> 00:25:30.582
제가 녹색으로 빗금치는 영역은 SceneDepth의 값이

389
00:25:30.582 --> 00:25:33.732
제가 앞서서 크다고 표현을 잘못했는데

390
00:25:33.732 --> 00:25:38.532
0.01이라도 작을 겁니다

391
00:25:38.532 --> 00:25:44.082
어쨌든 이 두 값에 차이가 생긴다는 거죠 이 녹색의 영역은

392
00:25:44.082 --> 00:25:47.882
CustomDepth와 SceneDepth 간에

393
00:25:47.882 --> 00:25:52.882
단 0.01이라도 차이가 나면 올림이라는 효과 때문에

394
00:25:52.882 --> 00:25:57.432
이 빗금친 영역은 흰색이 되는 겁니다

395
00:25:57.982 --> 00:26:01.133
이렇게 해서 단순히

396
00:26:01.133 --> 00:26:06.433
언제나 실루엣 효과가 적용돼서 보이던 것에서

397
00:26:06.433 --> 00:26:09.733
이것을 이제 Multiply까지 해줄 건데요

398
00:26:09.733 --> 00:26:13.333
Multiply까지 해서 결과를 보면서

399
00:26:13.333 --> 00:26:15.133
값의 차이를 설명드릴 겁니다

400
00:26:15.133 --> 00:26:17.683
이렇게 Multiply를 해 보면

401
00:26:17.683 --> 00:26:22.333
이런 식으로 딱 가려질 부분만 남습니다

402
00:26:22.333 --> 00:26:25.333
좀 더 정확하게는 CustomDepth가

403
00:26:25.333 --> 00:26:29.733
다른 오브젝트에 의해서 가려진 부분만 남습니다

404
00:26:29.733 --> 00:26:33.033
그래서 이것을 Lerp 해서 적용해 보면

405
00:26:33.033 --> 00:26:36.483
평소에 눈에 보일 때는 정상적인

406
00:26:36.483 --> 00:26:39.783
3D 오브젝트가 가진 컬러가 보여졌다가

407
00:26:39.783 --> 00:26:43.533
다른 오브젝트들에 의해서 가려졌을 때

408
00:26:43.533 --> 00:26:48.633
이런 가려진 부분들에만 실루엣 효과를 넣어서

409
00:26:48.633 --> 00:26:54.083
실제로 눈에 보이지 않는 부분만 골라내 줄 수가 있게 된 거죠

410
00:26:54.733 --> 00:27:00.033
어떻게 이런 일이 생기는지 Saturate까지 끝난 상황의

411
00:27:00.033 --> 00:27:03.133
각각의 대푯값들을 적어보겠습니다

412
00:27:03.983 --> 00:27:07.183
CustomDepth의 Saturate가 끝났을 때 상황입니다

413
00:27:07.183 --> 00:27:13.133
좀 반복된 점이 있어도 이게 헷갈리기 때문에 이해해 주세요

414
00:27:13.433 --> 00:27:15.233
CustomDepth입니다

415
00:27:15.233 --> 00:27:18.683
여기가 1이고 나머지는 전부 다 0이죠

416
00:27:18.683 --> 00:27:22.333
배경이든 3D 오브젝트가 있는 공간이든

417
00:27:22.333 --> 00:27:27.383
여기는 3D 오브젝트가 있는 공간, 여기는 배경 공간입니다

418
00:27:27.383 --> 00:27:29.583
전부 다 0입니다

419
00:27:29.583 --> 00:27:32.383
CustomDepth 오브젝트를 제외하고는

420
00:27:32.383 --> 00:27:35.533
모두 다 0이라는 값이 나오고요

421
00:27:35.533 --> 00:27:40.033
빨간색으로 Subtract 한 SceneDepth가

422
00:27:40.033 --> 00:27:43.433
Saturate 된 결과를 보게 되면

423
00:27:43.433 --> 00:27:46.883
여기는 빨간색으로 적겠습니다

424
00:27:46.883 --> 00:27:49.283
겹쳐진 이만큼의 공간

425
00:27:49.283 --> 00:27:54.583
여기도 1이고요 3D 공간도 1이고 배경도 1입니다

426
00:27:54.583 --> 00:27:58.733
여기는 0이죠 여기는 CustomDepth도 1입니다

427
00:27:58.733 --> 00:28:00.783
여기는 똑같이 1이죠

428
00:28:00.783 --> 00:28:03.083
우리는 이 두 가지를 곱하기했습니다

429
00:28:03.083 --> 00:28:05.683
곱한 결과는 그럼 어떻게 나올까요?

430
00:28:05.683 --> 00:28:08.733
오브젝트가 겹쳐있는 이 영역은

431
00:28:08.733 --> 00:28:12.433
1 x 1이니까 1이 나올 거고요

432
00:28:12.433 --> 00:28:15.983
CustomDepth가 온전하게 보이는 영역은

433
00:28:15.983 --> 00:28:19.333
1과 0이 곱해지니까 결과적으로 0

434
00:28:19.333 --> 00:28:21.633
배경도 마찬가지로 0

435
00:28:21.633 --> 00:28:24.333
3D 오브젝트가 있는 공간도 곱해지면

436
00:28:24.333 --> 00:28:27.233
CustomDepth 때문에 결국엔 0이 됩니다

437
00:28:27.233 --> 00:28:31.883
그래서 우리는 온전히 가려진 영역만

438
00:28:31.883 --> 00:28:35.933
이렇게 고를 수가 있게 되는 것이죠

439
00:28:35.933 --> 00:28:39.533
그리고 일반적인 실루엣 효과라고 하는 것은

440
00:28:39.533 --> 00:28:43.733
가려진 부분만 별도로 표시하는 기능을

441
00:28:43.733 --> 00:28:46.383
보통 실루엣이라고 얘기하니까요

442
00:28:46.983 --> 00:28:50.083
그걸 통해서 우리는 좀 더 정확한

443
00:28:50.083 --> 00:28:53.183
실루엣 효과를 만들 수 있게 됐고요

444
00:28:53.183 --> 00:28:57.633
여기까지가 실루엣 효과의 끝이고요

445
00:28:57.633 --> 00:29:01.633
포스트 프로세스 아웃라인

446
00:29:02.283 --> 00:29:07.983
콘텐츠 브라우저에서 이것을 그대로 응용해서

447
00:29:07.983 --> 00:29:10.133
아웃라인을 그려보겠습니다

448
00:29:10.133 --> 00:29:15.183
현재 우리에게 필요한 건 사실은 이 부분이 아니고

449
00:29:15.183 --> 00:29:17.583
이건 실루엣 때문에 다뤘던 기능이고

450
00:29:17.583 --> 00:29:20.183
실제로 필요한 건 이겁니다

451
00:29:20.183 --> 00:29:23.983
CustomDepth에 Saturate 된 화면

452
00:29:23.983 --> 00:29:26.384
이걸로 다시 한번 돌아가서 보죠

453
00:29:26.384 --> 00:29:27.684
CustomDepth만 있죠

454
00:29:27.684 --> 00:29:30.434
우리의 목표는 선택했을 때 이렇게

455
00:29:30.434 --> 00:29:33.134
아웃라인을 그려주는 거니까

456
00:29:33.134 --> 00:29:38.034
공간이 좀 많이 필요해서 연결을 끊고

457
00:29:38.034 --> 00:29:41.484
불필요한 연결들은 좀 끊어놓은 상태에서

458
00:29:41.484 --> 00:29:44.934
아래쪽에 공간을 좀 많이 확보하겠습니다

459
00:29:44.934 --> 00:29:52.384
그리고 이 노드를 총 2번 복사를 해줄 겁니다

460
00:29:52.384 --> 00:29:55.584
복사를 하는데 여기에서

461
00:29:55.584 --> 00:30:01.234
CustomDepth 노드 Ctrl+C, V 해서 두겠습니다

462
00:30:01.834 --> 00:30:03.684
지금 CustomDepth 노드가 총

463
00:30:03.684 --> 00:30:09.084
똑같은 절차를 가진 게 3개가 나왔죠 이런 식으로

464
00:30:09.084 --> 00:30:15.734
우리는 여기에 InvSize라고 하는 기능을 사용할 겁니다

465
00:30:15.734 --> 00:30:19.484
InvSize 같은 경우에는

466
00:30:19.484 --> 00:30:23.134
우리는 흔히 UV라는 값을 사용합니다

467
00:30:23.134 --> 00:30:26.034
UV는 화면을 기준으로 해서

468
00:30:26.034 --> 00:30:30.984
0, 0에서부터 1, 1까지를 표현하는 건데

469
00:30:30.984 --> 00:30:33.884
우리가 아웃라인을 표현한다는 건

470
00:30:33.884 --> 00:30:40.834
오브젝트가 가진 모양의 바깥쪽으로 이렇게 영역을 잡아서

471
00:30:40.834 --> 00:30:45.534
여기에다가 색칠을 해주는 것이죠 이런 식으로

472
00:30:45.534 --> 00:30:49.184
그래서 우리는 오브젝트가 가진 영역의 바깥에

473
00:30:49.184 --> 00:30:54.084
일정한 거리만큼을 이동시켜야 됩니다

474
00:30:54.084 --> 00:30:57.634
보통 이렇게 이동을 시킬 때 유닛 단위가 아니고

475
00:30:57.634 --> 00:31:00.784
화면을 기준으로 한 포스트 효과니까요

476
00:31:00.784 --> 00:31:04.434
이때 이동의 기준은 픽셀이 됩니다

477
00:31:04.434 --> 00:31:08.734
1px, 2px 이렇게 이동을 시키는 거죠

478
00:31:08.734 --> 00:31:13.484
그리고 InvSize는 UV라고 하는

479
00:31:13.484 --> 00:31:17.784
0에서 1까지 사이를 가진 텍스처 공간에다가

480
00:31:17.784 --> 00:31:21.234
1px을 움직이기 위해서는

481
00:31:21.234 --> 00:31:28.284
과연 0.xxxx이 필요한 것이냐를 알려주는 기능을 합니다

482
00:31:28.284 --> 00:31:32.334
만약에 우리가 500px 짜리 화면을 그린다고

483
00:31:32.334 --> 00:31:36.084
계산하기 좋게 가정을 해보겠습니다

484
00:31:36.084 --> 00:31:40.234
500px에서 우리가 딱 1px만 움직이고 싶어요

485
00:31:40.234 --> 00:31:43.084
UV에다가 어떤 값을 줘서

486
00:31:43.084 --> 00:31:47.884
그러면 결국 500px이 1이 된 거니까

487
00:31:47.884 --> 00:31:52.034
1px은 1/500이 되겠죠

488
00:31:52.034 --> 00:32:00.284
그럼 이것을 수치로 바꿔보면 0.002 정도가 될 겁니다

489
00:32:00.284 --> 00:32:06.734
그럼 우리는 UV라는 값에다가 이 텍스처 공간에다가

490
00:32:06.734 --> 00:32:12.734
0.002 만큼을 더하면 오른쪽으로 가거나 혹은 이렇게

491
00:32:12.734 --> 00:32:16.934
언리얼 기준은 왼쪽 위가 0이고 오른쪽 아래가 1이니까

492
00:32:16.934 --> 00:32:22.234
아래로 한 칸 내려가거나 1px씩을 움직일 수 있게 됩니다

493
00:32:22.734 --> 00:32:26.034
그래서 우리는 여기에다가

494
00:32:26.034 --> 00:32:29.834
Texture Coordinate라고 하는 노드를 이용해서

495
00:32:29.834 --> 00:32:31.484
이게 좌표 값이죠

496
00:32:31.484 --> 00:32:34.784
화면에서의 좌표 값 혹은 이미지 파일의 좌표 값

497
00:32:34.784 --> 00:32:36.934
UV 데이터를 내보내는 건데

498
00:32:36.934 --> 00:32:38.984
기본적으로 Vector2로 되어있으니까

499
00:32:38.984 --> 00:32:45.434
여기에다가 Add를 해서 InvSize를 넣어주고

500
00:32:45.434 --> 00:32:48.184
이렇게 연결을 해주면요

501
00:32:48.184 --> 00:32:54.835
너는 이미지를 1px만큼 이동해라는 뜻이 됩니다 플러스 시켜라

502
00:32:54.835 --> 00:33:00.185
같은 맥락으로 이것을 Subtract 하게 되면요

503
00:33:00.185 --> 00:33:05.785
좌표 값에다가 InvSize를 Subtract 하라고 하면

504
00:33:05.785 --> 00:33:11.435
UV에다가 1px만큼을 마이너스하는 거니까

505
00:33:11.435 --> 00:33:14.085
화면상으로는 왼쪽으로 가게 되겠죠

506
00:33:14.485 --> 00:33:18.685
원래는 X, Y 값이 같이 전달이 되는데

507
00:33:18.685 --> 00:33:23.635
이렇게 X, Y가 가는 방향을 표시할 수가 있을 겁니다

508
00:33:23.635 --> 00:33:27.035
그럼 자연스럽게 이것을 모아보면 어떻게 돼요?

509
00:33:27.035 --> 00:33:31.285
이렇게 X와 Y, X와 Y가 이런 식으로 만나면서

510
00:33:31.285 --> 00:33:34.785
Subtract와 Add 한 결과를 보면

511
00:33:34.785 --> 00:33:39.935
테두리를 이렇게 1px씩 이동해서 만들 수 있게 됩니다

512
00:33:39.935 --> 00:33:44.935
이 두 개의 결과를 Add 해주겠습니다

513
00:33:44.935 --> 00:33:47.685
그러면 이렇게 생각해 볼 수가 있겠죠

514
00:33:47.685 --> 00:33:51.685
원래 Custom Pass 오브젝트의 영역이 있던 것을

515
00:33:51.685 --> 00:33:53.535
빨간색으로 그려보면

516
00:33:53.535 --> 00:33:59.685
1px만큼 이렇게 이동시키고 그리고 이렇게 이동시키고

517
00:33:59.685 --> 00:34:05.035
이런 식으로 대각선으로 이동시키게 된 꼴이 된 겁니다

518
00:34:05.035 --> 00:34:09.535
그리고 두 개가 합쳐져서 이 가운데 영역은 1이었고

519
00:34:09.535 --> 00:34:12.735
1이었으니까 더해지면 2가 되겠죠

520
00:34:12.735 --> 00:34:16.385
그래서 중간에 겹친 영역은 2라는 값이 나오니까

521
00:34:16.385 --> 00:34:21.635
다시 Saturate로 0에서 1 사이 값으로 정리를 해줍니다

522
00:34:21.635 --> 00:34:27.785
그러면 Subtract를 이용해서 가운데를 비워주게 되면

523
00:34:27.785 --> 00:34:30.935
Emissive Color에 연결해 보겠습니다

524
00:34:30.935 --> 00:34:33.535
그럼 이게 어떻게 되는지 잘 보세요

525
00:34:33.535 --> 00:34:37.185
저장해 보면 가운데가 비워지면서

526
00:34:37.185 --> 00:34:41.685
원래 오브젝트가 있던 공간은 그대로 비워지면서

527
00:34:41.685 --> 00:34:43.885
테두리 영역만 남게 됩니다

528
00:34:43.885 --> 00:34:46.435
이게 아웃라인의 원리입니다

529
00:34:47.035 --> 00:34:50.535
우리가 선택한 3D 오브젝트의 주황색 선이

530
00:34:50.535 --> 00:34:53.335
남게 되는 원리가 이런 것이죠

531
00:34:53.335 --> 00:34:59.285
여기에서 우리가 조금 더 효율을 좋게 기능을 만들자면

532
00:34:59.285 --> 00:35:04.085
1px만큼의 값에다가 Multiply를 해서

533
00:35:04.085 --> 00:35:10.135
이것을 pixelMove라는 값으로 이렇게 빼둔다면

534
00:35:10.135 --> 00:35:14.585
이것을 다 Subtract 한 여기에다가 연결해 주겠습니다

535
00:35:14.585 --> 00:35:19.935
0이 아니라 2px만큼 움직이라고 2배를 해준 겁니다

536
00:35:19.935 --> 00:35:24.085
1px만큼 움직일 UV 값의 2배가 되라

537
00:35:24.085 --> 00:35:28.085
한마디로 2px만큼 움직여라라는 뜻이 돼서

538
00:35:28.085 --> 00:35:29.985
Apply를 해 보면요

539
00:35:29.985 --> 00:35:32.435
이전보다 선이 더 두꺼워졌죠

540
00:35:32.435 --> 00:35:35.335
2px만큼 움직여서 그렇습니다

541
00:35:35.335 --> 00:35:38.085
전체적인 노드를 보면서 다시 설명드리면

542
00:35:39.385 --> 00:35:44.385
좌우 이동, 위아래 이동 이런 식으로 표현을 한 건데

543
00:35:44.385 --> 00:35:47.685
사실은 효과가 좀 예쁘게 나오려고 하면

544
00:35:47.685 --> 00:35:51.185
이것을 X, Y를 한 번에 계산해 주는 게 아니고

545
00:35:51.185 --> 00:35:54.485
X는 X대로 왼쪽 오른쪽 해주고

546
00:35:54.485 --> 00:35:59.235
Y는 Y대로 위아래 각자 해줘서 더해지고 난 다음에

547
00:35:59.235 --> 00:36:02.435
사실은 대각선까지 고려되어야 맞습니다

548
00:36:02.435 --> 00:36:05.135
이렇게 사각형이 있다고 가정을 하면

549
00:36:05.135 --> 00:36:09.585
여기에서 2px, 여기에서 2px, 여기에서 2px

550
00:36:09.585 --> 00:36:12.585
이런 식으로 해주고 나면 어디가 남아요?

551
00:36:12.585 --> 00:36:16.485
이 가장자리들이 남죠 이 가장자리들을 위해서

552
00:36:16.485 --> 00:36:21.285
여기는 1.5px만큼만 이동한다든가 이런 식으로

553
00:36:21.285 --> 00:36:23.986
혹은 1px만큼만 이동한다든가 해서

554
00:36:23.986 --> 00:36:29.536
이렇게 빈칸을 추가로 끊어지지 않게끔 연결해 주는 게 맞지만

555
00:36:29.536 --> 00:36:32.786
지금은 영상 관계상 아웃라인이 되는

556
00:36:32.786 --> 00:36:35.586
원리에 대해서만 설명해 드리고

557
00:36:35.586 --> 00:36:40.436
이제 Lerp에 연결해서 이렇게 연결해 보면

558
00:36:40.436 --> 00:36:43.286
실제로 오브젝트에 우리가 원하는

559
00:36:43.286 --> 00:36:47.236
이런 식의 값이 나온 것을 확인할 수가 있고요

560
00:36:47.236 --> 00:36:50.836
가장자리에 이렇게 파란색이 남는 경우들이 있습니다

561
00:36:52.036 --> 00:36:54.986
우리가 오브젝트를 선택하지 않더라도

562
00:36:54.986 --> 00:36:59.436
이런 식으로 가장자리에 이게 남죠

563
00:36:59.436 --> 00:37:01.736
여기에서 참고로 지금 화면을 보시면

564
00:37:01.736 --> 00:37:04.836
제가 따로 조작을 하지 않는다고 하더라도

565
00:37:04.836 --> 00:37:09.336
계속해서 떨림이 있는 것을 보실 수가 있을 텐데요

566
00:37:09.336 --> 00:37:17.186
이것은 Edit에서 프로젝트 세팅에 렌더링 항목을 보시면

567
00:37:17.186 --> 00:37:22.586
Mobile Anti-Aliasing 말고요 좀 더 내려가 보시면

568
00:37:22.586 --> 00:37:28.736
PC 버전에 적용되는 Anti-Aliasing 항목이 있습니다

569
00:37:28.736 --> 00:37:31.086
Default Settings 부분에 있죠

570
00:37:31.086 --> 00:37:35.986
이것을 Multisample Anti-Aliasing으로 바꿨을 때

571
00:37:35.986 --> 00:37:37.936
떨림이 멈추게 됩니다

572
00:37:38.286 --> 00:37:42.886
이것은 Anti-Aliasing 되는 원리 때문에 좀 차이가 있는 건데

573
00:37:42.886 --> 00:37:46.536
Temporal 같은 경우에 작은 사이즈를 그렸다가

574
00:37:46.536 --> 00:37:49.436
나중에 포스트 단계에서 해상도를

575
00:37:49.436 --> 00:37:51.986
우리가 최종 모니터에 그리는 걸로

576
00:37:51.986 --> 00:37:55.836
사이즈를 Upscaling 한다고 보통 얘기를 하죠

577
00:37:55.836 --> 00:37:58.136
이런 식으로 작동하는 반면에

578
00:37:58.136 --> 00:38:00.686
Multisampling 같은 경우에는 반대로

579
00:38:00.686 --> 00:38:04.836
화면에 픽셀이 있으면 이 픽셀을 몇 개로 쪼개서

580
00:38:04.836 --> 00:38:10.236
이 포인트들을 몇 개로 쪼개서 데이터들을 추적할 거냐

581
00:38:10.236 --> 00:38:12.236
픽셀을 더 잘게 쪼개는

582
00:38:12.236 --> 00:38:18.286
지금은 4x MSAA라고 되어 있는 이 부분 있죠

583
00:38:18.286 --> 00:38:23.986
이거는 1개의 픽셀을 4개로 쪼개서 추적하겠다는 얘기고요

584
00:38:23.986 --> 00:38:28.586
이거를 8개로 쪼개거나 2개로 쪼개는 옵션들이 있습니다

585
00:38:28.586 --> 00:38:33.286
그래서 원래 FHD 사이즈면 FHD 그대로

586
00:38:33.286 --> 00:38:37.136
좀 더 정확하게는 이거보다 더 큰 해상도를 했다가

587
00:38:37.136 --> 00:38:41.836
오히려 줄이는 것에 가까운 개념이 Multisampling이고요

588
00:38:41.836 --> 00:38:45.136
Temporal 같은 경우에는 한 사이즈 작은

589
00:38:45.136 --> 00:38:50.486
만약에 FHD라고 하면 이거보다 작은 HD 화면 같은 거

590
00:38:50.486 --> 00:38:53.986
이런 걸로 그렸다가 화면을 FHD에 맞게

591
00:38:53.986 --> 00:38:55.986
늘리는 과정이 있기 때문에

592
00:38:55.986 --> 00:38:59.086
상대적으로 좀 떨림이 있었던 겁니다

593
00:38:59.736 --> 00:39:03.336
이제 이런 것까지 잡아주고 나서

594
00:39:03.336 --> 00:39:05.086
우리가 필요한 값들이 있죠

595
00:39:05.086 --> 00:39:09.286
이를테면 pixelMove를 Distance로 뺐던 것처럼

596
00:39:09.286 --> 00:39:12.336
일정한 거리에서만 그려질 수 있게끔

597
00:39:12.336 --> 00:39:16.286
이 Distance 값도 ScalarParameter를 이용해서

598
00:39:16.286 --> 00:39:18.836
Dist라고만 적겠습니다

599
00:39:18.836 --> 00:39:23.786
이것을 단순하게 1/10인 1,000 유닛으로 바꿔볼게요

600
00:39:23.786 --> 00:39:29.686
모든 것들을 다 1,000 유닛으로 바꾸도록 하겠습니다

601
00:39:29.686 --> 00:39:34.286
나중에 SceneDepth도 다시 활용하려면 있어야겠죠

602
00:39:34.286 --> 00:39:38.586
그리고 컬러도 Convert to Parameter를 이용해서

603
00:39:38.586 --> 00:39:43.186
LineColor 이렇게 만들어 주고요

604
00:39:43.186 --> 00:39:46.286
저장을 한 다음에 보게 되면

605
00:39:46.286 --> 00:39:49.987
1,000 유닛이기 때문에 어디까지만 그려집니까?

606
00:39:49.987 --> 00:39:53.787
카메라로부터 1,000 유닛만큼 떨어진

607
00:39:53.787 --> 00:39:57.287
여기까지만 그려지는 겁니다

608
00:39:57.287 --> 00:40:01.437
그래서 우리가 효과를 거리 값을 조절해서

609
00:40:01.437 --> 00:40:04.487
얼만큼 앞에 있는 것만 그릴 거냐

610
00:40:04.487 --> 00:40:07.437
이건 실루엣도 마찬가지입니다 실루엣을 표시할 때도

611
00:40:07.437 --> 00:40:11.037
내가 10미터 앞까지만 실루엣을 표시할 거냐

612
00:40:11.037 --> 00:40:13.537
100미터 앞에까지 표시할 거냐 이런 것들을

613
00:40:13.537 --> 00:40:19.087
Distance 값을 통해서 여러분들이 조절하시면 됩니다

614
00:40:19.087 --> 00:40:22.237
전체적으로 보면 좀 어려운

615
00:40:22.237 --> 00:40:26.887
개념적으로는 좀 어렵지만 사실 공식으로만 따지면

616
00:40:26.887 --> 00:40:31.087
더하고 올리고 0에서 1로 줄이는 것도

617
00:40:31.087 --> 00:40:36.087
그리고 Divide 하는 것도 결국엔 거의 사칙연산에 가까운

618
00:40:36.087 --> 00:40:41.287
그 이상 복잡한 개념들은 잘 안 쓰이는 효과들이죠

619
00:40:41.287 --> 00:40:46.537
지금 보면 전부 다 Multiply, Subtract, Add, Divide

620
00:40:46.537 --> 00:40:49.537
사칙연산은 다 나왔습니다

621
00:40:49.537 --> 00:40:51.187
우리는 이것을 통해서

622
00:40:51.187 --> 00:40:55.387
실루엣과 아웃라인 효과를 만들어 봤습니다

623
00:40:55.387 --> 00:40:57.537
포스트 프로세스를 사용하여

624
00:40:57.537 --> 00:41:01.037
실루엣 효과와 아웃라인을 제작하였습니다

625
00:41:01.037 --> 00:41:05.387
0에서 1까지의 수치를 시각화하고 계산하여

626
00:41:05.387 --> 00:41:07.637
Custom Pass를 활용한 방식으로

627
00:41:07.637 --> 00:41:09.837
서로 다른 Depth를 계산하여

628
00:41:09.837 --> 00:41:13.787
중복되는 영역을 찾아내는 과정을 다루었습니다

629
00:41:13.787 --> 00:41:19.037
또한 UV를 이동하기 위한 픽셀의 간격 계산 등

630
00:41:19.037 --> 00:41:22.187
단순한 계산식의 반복으로 얻어지는 효과를

631
00:41:22.187 --> 00:41:23.537
확인할 수 있었습니다

632
00:41:23.537 --> 00:41:28.487
이상으로 언리얼 셰이더에 대한 강의를 마치도록 하겠습니다

633
00:41:28.487 --> 00:41:29.737
감사합니다

634
00:41:29.737 --> 00:41:30.387
포스트 프로세스 실루엣

635
00:41:30.387 --> 00:41:30.987
포스트 프로세스 머티리얼
기본 렌더패스(Render Pass)가 렌더링 된 후 처리 효과

636
00:41:30.987 --> 00:41:31.637
Render Pass : 화면을 그리는데 필요한 각각의 정보
(Base Color, Scene Depth 등)

637
00:41:31.637 --> 00:41:32.237
Scene Texture
다양한 렌더 패스 정보를 전달하는 노드

638
00:41:32.237 --> 00:41:32.887
Scene Texture ID : PostProcessInput0
Component Mask를 RGB로 설정하여 연결

639
00:41:32.887 --> 00:41:33.487
Constant3Vector 노드와 Multiply 후 Emissive Color에 연결

640
00:41:33.487 --> 00:41:34.137
포스트 프로세스 머티리얼 적용
PostProcessVolume 액터 선택

641
00:41:34.137 --> 00:41:34.737
Rendering Features > PostProcessMaterial > Choose
> Asset reference 설정 후 머티리얼 연결

642
00:41:34.737 --> 00:41:35.237
실루엣 표현
Scene Depth: 월드에 배치된 3D 액터들을 대상으로 거리 값을 표현

643
00:41:35.237 --> 00:41:35.737
Custom Depth: 3D 액터 중 Rendering / Advanced
> Render Custom Pass 항목이 활성화된 액터들만 거리 값을 표현

644
00:41:35.737 --> 00:41:36.237
Scene Texture ID: Custom Depth로 설정
Divide 생성 A : Scene Texture, B : 10000

645
00:41:36.237 --> 00:41:36.737
1-x(OneMinus) > Ceil 적용
Scene Textures: PostProcessInput0 > ComponentMask RGB

646
00:41:36.737 --> 00:41:37.237
> Lerp : A와 Multiply A
Constant3Vector > Multiply B > Lerp : B

647
00:41:37.237 --> 00:41:37.737
Depth 표현에 Ceil(올림) > Saturate(0, 1로 값을 단순화)
> Lerp : Alpha에 연결

648
00:41:37.737 --> 00:41:38.237
Scene Textures 생성: SceneDepth > Divide(A, B : 10,000)

649
00:41:38.237 --> 00:41:38.737
Subtract 생성, A : CustomDepth를 Divide 한 결과,
B : SceneDepth Divide 한 결과

650
00:41:38.737 --> 00:41:39.237
Subtract 후, Ceil > Saturate 적용

651
00:41:39.237 --> 00:41:39.737
Multiply 생성 후 Multiply A : CustomDepth ~ Saturate 결과,
Multiply B : SceneDepth ~ Saturate 결과

652
00:41:39.737 --> 00:41:40.587
포스트 프로세스 아웃라인

653
00:41:40.587 --> 00:41:41.397
UV 이동
다양한 렌더 패스 정보를 전달하는 노드

654
00:41:41.397 --> 00:41:42.197
Texture Coordinate 생성
Add와 Subtract 노드 생성

655
00:41:42.197 --> 00:41:42.997
SceneTexture 노드 복사

656
00:41:42.997 --> 00:41:43.797
Add, Subtract A : TextureCoordinate
Add, Subtract B : SceneTexture > InvSize

657
00:41:43.797 --> 00:41:44.637
계산된 결과를 각각의 CustomDepth 노드 UV에 연결

658
00:41:44.637 --> 00:41:45.337
UV 이동 결과 연산

659
00:41:45.337 --> 00:41:46.037
UV 이동시킨 두 결과를 Add 후 Saturate 적용,
Subtract 생성 후 A에 연결

660
00:41:46.037 --> 00:41:46.737
기존의 CustomDepth 효과를 Subtract B에 연결

661
00:41:46.737 --> 00:41:47.487
Subtract 한 결과를 Lerp : Alpha에 연결

662
00:41:47.487 --> 00:41:48.187
픽셀 이동 파라미터 전환

663
00:41:48.187 --> 00:41:48.937
UV 이동시켰던 InvSize와 ScalarParameter(pixelMove, 2)를 Multiply

664
00:41:48.937 --> 00:41:49.637
Multiply 된 결과를 Add와 Subtract 각각 B에 연결
아웃라인 두께 조절