SlideShare a Scribd company logo
1 of 36
Unity의 툰셰이딩을 사용한
3D 애니메이션 표현
박민근 (알콜코더)
@agebreak / agebreak@gmail.com
2016.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를 사용해 보자
의 애셋을 임포트 한다
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
(저자의 허락을 받았음을 미리 알려 드립니다)

More Related Content

What's hot

Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
henjeon
 
[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리
KyeongWon Koo
 
06_게임엔진구성
06_게임엔진구성06_게임엔진구성
06_게임엔진구성
noerror
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
devCAT Studio, NEXON
 

What's hot (20)

Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
[KGC2014] DX9에서DX11로의이행경험공유
[KGC2014] DX9에서DX11로의이행경험공유[KGC2014] DX9에서DX11로의이행경험공유
[KGC2014] DX9에서DX11로의이행경험공유
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11
 
Igc2016 Technical Artist가 뭐하는 사람이에요?
Igc2016 Technical Artist가 뭐하는 사람이에요?Igc2016 Technical Artist가 뭐하는 사람이에요?
Igc2016 Technical Artist가 뭐하는 사람이에요?
 
모바일 게임 최적화
모바일 게임 최적화 모바일 게임 최적화
모바일 게임 최적화
 
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
 
[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리
 
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
 
나만의 엔진 개발하기
나만의 엔진 개발하기나만의 엔진 개발하기
나만의 엔진 개발하기
 
[0821 박민근] 렌즈 플레어(lens flare)
[0821 박민근] 렌즈 플레어(lens flare)[0821 박민근] 렌즈 플레어(lens flare)
[0821 박민근] 렌즈 플레어(lens flare)
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희
 
06_게임엔진구성
06_게임엔진구성06_게임엔진구성
06_게임엔진구성
 
C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현
 
NDC11_슈퍼클래스
NDC11_슈퍼클래스NDC11_슈퍼클래스
NDC11_슈퍼클래스
 
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipeline
 
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
 
NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계
NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계
NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계
 

Similar to 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현

최신영화제작기술 Mit
최신영화제작기술 Mit최신영화제작기술 Mit
최신영화제작기술 Mit
heeruem
 
다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)
hahahiho
 
병렬처리를 활용한 피부 보정 프로그램(Open cv)
병렬처리를 활용한 피부 보정 프로그램(Open cv)병렬처리를 활용한 피부 보정 프로그램(Open cv)
병렬처리를 활용한 피부 보정 프로그램(Open cv)
Ji-Sik Kim
 

Similar to 유니티의 툰셰이딩을 사용한 3D 애니메이션 표현 (12)

유니티에서 MMD 사용해보기
유니티에서 MMD 사용해보기유니티에서 MMD 사용해보기
유니티에서 MMD 사용해보기
 
최신영화제작기술 Mit
최신영화제작기술 Mit최신영화제작기술 Mit
최신영화제작기술 Mit
 
영상 스터디 3회차
영상 스터디 3회차영상 스터디 3회차
영상 스터디 3회차
 
INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701
 
03애니메이션s
03애니메이션s03애니메이션s
03애니메이션s
 
다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)
 
Google Cloud Machine Learning을 이용한 Motion Detection 및 Notification 구현
Google Cloud Machine Learning을 이용한 Motion Detection 및 Notification 구현Google Cloud Machine Learning을 이용한 Motion Detection 및 Notification 구현
Google Cloud Machine Learning을 이용한 Motion Detection 및 Notification 구현
 
병렬처리를 활용한 피부 보정 프로그램(Open cv)
병렬처리를 활용한 피부 보정 프로그램(Open cv)병렬처리를 활용한 피부 보정 프로그램(Open cv)
병렬처리를 활용한 피부 보정 프로그램(Open cv)
 
INBRIEF_STARTstart with Prezi vol.01-입문편
INBRIEF_STARTstart with Prezi vol.01-입문편INBRIEF_STARTstart with Prezi vol.01-입문편
INBRIEF_STARTstart with Prezi vol.01-입문편
 
Windows Phone Design Camp
Windows Phone Design Camp Windows Phone Design Camp
Windows Phone Design Camp
 
NDC 2011 이은석 - 마비노기 영웅전 아트 디렉팅
NDC 2011 이은석 - 마비노기 영웅전 아트 디렉팅NDC 2011 이은석 - 마비노기 영웅전 아트 디렉팅
NDC 2011 이은석 - 마비노기 영웅전 아트 디렉팅
 
언리얼 애니메이션.pptx
언리얼 애니메이션.pptx언리얼 애니메이션.pptx
언리얼 애니메이션.pptx
 

More from MinGeun Park

More from MinGeun Park (20)

[CSStudy] 코딩인터뷰 완전 분석 #7.pdf
[CSStudy] 코딩인터뷰 완전 분석 #7.pdf[CSStudy] 코딩인터뷰 완전 분석 #7.pdf
[CSStudy] 코딩인터뷰 완전 분석 #7.pdf
 
[Cs study] 코딩인터뷰 완전 분석 #6
[Cs study] 코딩인터뷰 완전 분석 #6[Cs study] 코딩인터뷰 완전 분석 #6
[Cs study] 코딩인터뷰 완전 분석 #6
 
[Cs study] 코딩인터뷰 완전 분석 #5
[Cs study] 코딩인터뷰 완전 분석 #5[Cs study] 코딩인터뷰 완전 분석 #5
[Cs study] 코딩인터뷰 완전 분석 #5
 
[Cs study] 코딩인터뷰 완전 분석 #3
[Cs study] 코딩인터뷰 완전 분석 #3[Cs study] 코딩인터뷰 완전 분석 #3
[Cs study] 코딩인터뷰 완전 분석 #3
 
[Cs study] 코딩인터뷰 완전 분석 #2
[Cs study] 코딩인터뷰 완전 분석 #2[Cs study] 코딩인터뷰 완전 분석 #2
[Cs study] 코딩인터뷰 완전 분석 #2
 
[Cs study] 코딩인터뷰 완전 분석
[Cs study] 코딩인터뷰 완전 분석[Cs study] 코딩인터뷰 완전 분석
[Cs study] 코딩인터뷰 완전 분석
 
[데브루키_언리얼스터디_0525] 애니메이션 노티파이
[데브루키_언리얼스터디_0525] 애니메이션 노티파이[데브루키_언리얼스터디_0525] 애니메이션 노티파이
[데브루키_언리얼스터디_0525] 애니메이션 노티파이
 
[데브루키] 이벤트 드리븐 아키텍쳐
[데브루키] 이벤트 드리븐 아키텍쳐[데브루키] 이벤트 드리븐 아키텍쳐
[데브루키] 이벤트 드리븐 아키텍쳐
 
[데브루키 언리얼 스터디] PBR
[데브루키 언리얼 스터디] PBR[데브루키 언리얼 스터디] PBR
[데브루키 언리얼 스터디] PBR
 
[데브루키 언리얼 스터디] 스터디 안내 OT
[데브루키 언리얼 스터디] 스터디 안내 OT[데브루키 언리얼 스터디] 스터디 안내 OT
[데브루키 언리얼 스터디] 스터디 안내 OT
 
[데브루키/페차쿠차] 유니티 프로파일링에 대해서 알아보자.
[데브루키/페차쿠차] 유니티 프로파일링에 대해서 알아보자.[데브루키/페차쿠차] 유니티 프로파일링에 대해서 알아보자.
[데브루키/페차쿠차] 유니티 프로파일링에 대해서 알아보자.
 
[데브루키] Color space gamma correction
[데브루키] Color space gamma correction[데브루키] Color space gamma correction
[데브루키] Color space gamma correction
 
유니티 팁&트릭 Unity Tip & Trick
유니티 팁&트릭 Unity Tip & Trick유니티 팁&트릭 Unity Tip & Trick
유니티 팁&트릭 Unity Tip & Trick
 
Live2D with Unity - 그녀들을 움직이게 하는 기술 (알콜코더 박민근)
Live2D with Unity - 그녀들을 움직이게 하는 기술 (알콜코더 박민근)Live2D with Unity - 그녀들을 움직이게 하는 기술 (알콜코더 박민근)
Live2D with Unity - 그녀들을 움직이게 하는 기술 (알콜코더 박민근)
 
[RAPA/C++] 1. 수업 내용 및 진행 방법
[RAPA/C++] 1. 수업 내용 및 진행 방법[RAPA/C++] 1. 수업 내용 및 진행 방법
[RAPA/C++] 1. 수업 내용 및 진행 방법
 
[Unite17] 유니티에서차세대프로그래밍을 UniRx 소개 및 활용
[Unite17] 유니티에서차세대프로그래밍을 UniRx 소개 및 활용 [Unite17] 유니티에서차세대프로그래밍을 UniRx 소개 및 활용
[Unite17] 유니티에서차세대프로그래밍을 UniRx 소개 및 활용
 
[데브루키160409 박민근] UniRx 시작하기
[데브루키160409 박민근] UniRx 시작하기[데브루키160409 박민근] UniRx 시작하기
[데브루키160409 박민근] UniRx 시작하기
 
[160404] 유니티 apk 용량 줄이기
[160404] 유니티 apk 용량 줄이기[160404] 유니티 apk 용량 줄이기
[160404] 유니티 apk 용량 줄이기
 
[160402_데브루키_박민근] UniRx 소개
[160402_데브루키_박민근] UniRx 소개[160402_데브루키_박민근] UniRx 소개
[160402_데브루키_박민근] UniRx 소개
 
[150523] live2d 그녀들을 움직이게 하는 기술
[150523] live2d 그녀들을 움직이게 하는 기술[150523] live2d 그녀들을 움직이게 하는 기술
[150523] live2d 그녀들을 움직이게 하는 기술
 

유니티의 툰셰이딩을 사용한 3D 애니메이션 표현