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