1.
Unity의 툰셰이딩을 사용한
3D 애니메이션 표현
박민근 (알콜코더)
@agebreak / agebreak@gmail.com
2016.4.4

2.
위 스샷들은
리얼타임으로 돌아가는
유니티의 기본 툰셰이딩 활용!!

3.
Youtube

4.
링크
Youtube https://www.youtube.com/watch?v=2nrVDDusxQ0
리얼타임으로 실행되는!
Web버전 https://ec1f9851fbdd1308bdb683d172fb5e3e89320d44-www.googledrive.com/host/0B-Sk1sZsiDidUVVTWmU5VWJBOHM/UnityChan_Live_toon_WebPlayer.html

5.
제작자

6.
이 슬라이드는 아래 블로그의 내용을 번역하였습니다.
http://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b
(저자의 허락을 받았음을 미리 알려 드립니다)

7.
시작하기
유니티 5의 툰셰이딩을 사용한 3D 아니메(애니메이션) 표현(Cell-Look 표현)의 설명 입니다.
적용전 적용후

8.
Toon Shader를 사용해 보자
의 애셋을 임포트 한다
ToonShader와 ImageEffect를 사용할 수 있게 됨으로,
우선은 Toon/Lit Outline을 사용하면서, 머테리얼의 조정을 합니다
포인트는 3가지.
• 음영을 붙이는 방법
• 텍스쳐의 단순화
• 색의 발란스

9.
1. 음영의 설정

10.
음영의 설정
툰셰이딩의 설정에서
[Toon Ramp]의 설정에서
셰이딩이 크게 변합니다

11.
Toon Ramp의 설정에 따른 차이

12.
Toon Ramp의 설정에 따른 차이
이 예제에서는 애니메이션 풍의 분위기를 만드려 하기 위해서,
왼쪽에서 2번째의 타입으로 설정 하였습니다

13.
2. 텍스쳐의 설정

14.
텍스쳐의 설정
셰이더의 변경만으로는 아직 셀 애니메이션틱하지 않기 때문에,
텍스쳐의 변경을 합니다.
텍스쳐를 그라데이션을 사용한 방식이 아니라, 평면의 단색 타입으로
변경합니다.

15.
텍스쳐의 설정

16.
텍스쳐의 설정
단색 처리 하는것뿐만 아니라,
선을 그려 넣는등의 작업을 하면 더욱 좋습니다

17.
텍스쳐의 설정
ToonShader 변경 ToonShader 변경
텍스쳐 변경
ToonShader 변경
텍스쳐 변경
ToonRamp 텍스쳐 설정

18.
텍스쳐의 설정
색의 밸러스등을 조정 하면 결과가 우측의 그림처럼 됩니다
이것으로 머테리얼의 설정은 끝입니다.

19.
3. 라이팅으로 음영의 조정

20.
라이팅으로 음영의 조정
툰셰이딩을 사용했을 때에,
“뭔가 3D 같다” 라던가,
“싸보인다” 라고 느끼는 일이 많습니다.
그것은 왜 일까?
바로 그림자(음영)를 만드는 방법입니다.

21.
라이팅으로 음영의 조정
음영을 만드는 방법으로 인상이 바뀌기 때문에,
그림자가 예쁘게 들어가도록 라이팅으로 조정 합니다.
특히 얼굴의 그림자는 위화감을 느끼기 쉽기 때문에,
조정이 어렵게 느껴진다면,
얼굴에는 그림자가 생기지 않도록 하는 것이 좋습니다.
(역자주* 버추어파이터등 여러 3D 게임에서도 사용하는 방법)

22.
라이팅으로 음영의 조정
좌측 : Directional Light 1개
우측 : 얼굴, 복장, 몸등에 따로따로 Directional Light로 조정

23.
4. Image Effect를 사용해보자

24.
Image Effect를 사용해 보자
다음은 ImageEffect를 사용해서 화면 전체의 분위기를 만듭니다.
일명 영상처리라고 불리는 과정을 넣습니다.
이 처리를 넣는것으로 확실히 공기감이 생깁니다.
주로 [Bloom]과 [Color Correction Curves]를 사용해서
조정합니다.

25.
ImageEffect 없음

26.
Bloom
(부드러운 빛이 들어간것처럼 화면전체를 조절합니다)

27.
Color Correction Curves
(화면 전체의 색 밸런스를 조정합니다.
조금만 바꿔도 인상이 바뀌기 때문에, 세밀하게 조정합니다)

28.
5. 광원에 맞추어 빛을 넣기

29.
광원에 맞추어 빛을 넣기
광원에 맞추어 빛을 넣기
(애니메이션 용어에서 말하는 플레어입니다)
플레어용 텍스쳐

30.
광원에 맞추어 빛을 넣기
이 텍스쳐를 빌보드에 붙여서 사용합니다. 머테리얼은 Particles/Additive등을 사용
이런 식으로 카메라에 대해서 플레어 영상을 공간에 배치 합니다

31.
광원에 맞추어 빛을 넣기
광원을 의식해서 플레어를 넣으면 완료 입니다.

32.
완성판
완성 버전은 아래 링크에서 확인할 수 있습니다.
YouTube 버전 / WebPlayer 버전
(WebPlayer는 크롬에서는 볼수 없기 때문에, 다른 브라우저를 사용해 주세요)
역자주* 실제 작업물은 Web은 물론 모바일, VR에서도 잘 돌아갑니다

33.
이 슬라이드는 아래 블로그의 내용을 번역하였습니다.
http://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b
(저자의 허락을 받았음을 미리 알려 드립니다)