유니티의 툰셰이딩을 사용한 3d 애니메이션 표현
TRANSCRIPT
![Page 2: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/2.jpg)
![Page 3: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/3.jpg)
![Page 4: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/4.jpg)
![Page 5: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/5.jpg)
위 스샷들은
리얼타임으로 돌아가는
유니티의 기본 툰셰이딩 활용 !!
![Page 6: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/6.jpg)
Youtube
![Page 7: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/7.jpg)
링크
Youtube https://www.youtube.com/watch?v=2nrVDDusxQ0
리얼타임으로 실행되는 !Web 버전 https://ec1f9851fbdd1308bdb683d172fb5e3e89320d44-www.googledrive.com/host/0B-Sk1sZsiDidUVVTWmU5VWJBOHM/UnityChan_Live_toon_WebPlayer.html
![Page 8: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/8.jpg)
제작자
![Page 9: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/9.jpg)
이 슬라이드는 아래 블로그의 내용을 번역하였습니다 .http://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b( 저자의 허락을 받았음을 미리 알려 드립니다 )
![Page 10: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/10.jpg)
시작하기
유니티 5 의 툰셰이딩을 사용한 3D 아니메 ( 애니메이션 ) 표현 (Cell-Look 표현 ) 의 설명 입니다 .
적용전 적용후
![Page 11: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/11.jpg)
Toon Shader 를 사용해 보자
Assets > Import Package > Effects 의 애셋을 임포트 한다
ToonShader 와 ImageEffect 를 사용할 수 있게 됨으로 , 우선은 Toon/Lit Outline 을 사용하면서 , 머테리얼의 조정을 합니다
포인트는 3 가지 . • 음영을 붙이는 방법
• 텍스쳐의 단순화
• 색의 발란스
![Page 12: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/12.jpg)
1. 음영의 설정
![Page 13: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/13.jpg)
음영의 설정
툰셰이딩의 설정에서
[Toon Ramp] 의 설정에서
셰이딩이 크게 변합니다
![Page 14: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/14.jpg)
Toon Ramp 의 설정에 따른 차이
![Page 15: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/15.jpg)
Toon Ramp 의 설정에 따른 차이
이 예제에서는 애니메이션 풍의 분위기를 만드려 하기 위해서 , 왼쪽에서 2 번째의 타입으로 설정 하였습니다
![Page 16: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/16.jpg)
2. 텍스쳐의 설정
![Page 17: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/17.jpg)
텍스쳐의 설정
셰이더의 변경만으로는 아직 셀 애니메이션틱하지 않기 때문에 , 텍스쳐의 변경을 합니다 .
텍스쳐를 그라데이션을 사용한 방식이 아니라 , 평면의 단색 타입으로
변경합니다 .
![Page 18: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/18.jpg)
텍스쳐의 설정
![Page 19: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/19.jpg)
텍스쳐의 설정
단색 처리 하는것뿐만 아니라 , 선을 그려 넣는등의 작업을 하면 더욱 좋습니다
![Page 20: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/20.jpg)
텍스쳐의 설정
ToonShader 변경 ToonShader 변경
텍스쳐 변경
ToonShader 변경
텍스쳐 변경
ToonRamp 텍스쳐 설정
![Page 21: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/21.jpg)
텍스쳐의 설정
색의 밸러스등을 조정 하면 결과가 우측의 그림처럼 됩니다
이것으로 머테리얼의 설정은 끝입니다 .
![Page 22: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/22.jpg)
3. 라이팅으로 음영의 조정
![Page 23: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/23.jpg)
라이팅으로 음영의 조정
툰셰이딩을 사용했을 때에 , “ 뭔가 3D 같다” 라던가 , “ 싸보인다” 라고 느끼는 일이 많습니다 . 그것은 왜 일까 ?
바로 그림자 ( 음영 ) 를 만드는 방법입니다 .
![Page 24: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/24.jpg)
라이팅으로 음영의 조정
음영을 만드는 방법으로 인상이 바뀌기 때문에 , 그림자가 예쁘게 들어가도록 라이팅으로 조정 합니다 .
특히 얼굴의 그림자는 위화감을 느끼기 쉽기 때문에 , 조정이 어렵게 느껴진다면 , 얼굴에는 그림자가 생기지 않도록 하는 것이 좋습니다 .( 역자주 * 버추어파이터등 여러 3D 게임에서도 사용하는 방법 )
![Page 25: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/25.jpg)
라이팅으로 음영의 조정
좌측 : Directional Light 1 개
우측 : 얼굴 , 복장 , 몸등에 따로따로 Directional Light 로 조정
![Page 26: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/26.jpg)
4. Image Effect 를 사용해보자
![Page 27: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/27.jpg)
Image Effect 를 사용해 보자
다음은 ImageEffect 를 사용해서 화면 전체의 분위기를 만듭니다 . 일명 영상처리라고 불리는 과정을 넣습니다 . 이 처리를 넣는것으로 확실히 공기감이 생깁니다 .
주로 [Bloom] 과 [Color Correction Curves] 를 사용해서
조정합니다 .
![Page 28: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/28.jpg)
ImageEffect 없음
![Page 29: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/29.jpg)
Bloom( 부드러운 빛이 들어간것처럼 화면전체를 조절합니다 )
![Page 30: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/30.jpg)
Color Correction Curves( 화면 전체의 색 밸런스를 조정합니다 . 조금만 바꿔도 인상이 바뀌기 때문에 , 세밀하게 조정합니다 )
![Page 31: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/31.jpg)
5. 광원에 맞추어 빛을 넣기
![Page 32: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/32.jpg)
광원에 맞추어 빛을 넣기
광원에 맞추어 빛을 넣기
( 애니메이션 용어에서 말하는 플레어입니다 )플레어용 텍스쳐
![Page 33: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/33.jpg)
광원에 맞추어 빛을 넣기
이 텍스쳐를 빌보드에 붙여서 사용합니다 . 머테리얼은 Particles/Additive 등을 사용
이런 식으로 카메라에 대해서 플레어 영상을 공간에 배치 합니다
![Page 34: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/34.jpg)
광원에 맞추어 빛을 넣기
광원을 의식해서 플레어를 넣으면 완료 입니다 .
![Page 35: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/35.jpg)
완성판
완성 버전은 아래 링크에서 확인할 수 있습니다 . YouTube 버전 / WebPlayer 버전
(WebPlayer 는 크롬에서는 볼수 없기 때문에 , 다른 브라우저를 사용해 주세요 )역자주 * 실제 작업물은 Web 은 물론 모바일 , VR 에서도 잘 돌아갑니다
![Page 36: 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현](https://reader036.vdocuments.site/reader036/viewer/2022081419/586f715f1a28ab10258b4f0f/html5/thumbnails/36.jpg)
이 슬라이드는 아래 블로그의 내용을 번역하였습니다 .http://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b( 저자의 허락을 받았음을 미리 알려 드립니다 )