SlideShare a Scribd company logo
1 of 15
Download to read offline
카툰 렌더링
이창희(@cagetu)
cagetu79@gmail.com
• 외곽선
• 셰이딩
• 적용된 게임
외곽선 렌더링
• 1st 패스
– 텍스쳐 + 셰이딩

• 2nd 패스
– 외각선 렌더링
외곽선 렌더링
• Geometry 방식

– 노말 부풀리기
– 일정한 두께 적용
– 외곽선 검출(edge dectection)

• 후처리 방식

– Depth와 Normal 정보를 이용

• 1. 깊이 차이를 이용
• 2. 법선과 시선의 내적의 차를 이용

– 외곽선 검출(edge dectection)

• 참고

– <Gravity Rush>의 경우, 근경은 “Geometry 방식” “원
경은 “후처리 방식”으로 최적화!
셰이딩
• 일반적으로 툰 셰이딩(Toon Shading) 혹은
셀 셰이딩(Cell Shading) 이라고 부른다.
1. 셰이더 내부에서 그라데이션 구현
2. 간단하게 1D 텍스쳐를 이용해서 그라데이션
을 표현.
셰이딩
• 최근에는 일반적인 툰 셰이딩이 아니라,
게임에 분위기에 잘 어울리는 셰이딩 방식
을 사용

그라비티 데이즈
• 프랑스 만화의
분위기
• “붓으로 음영을 붙인
것 같은 터치”를 더
살리고자 함
• 20세기 초 광고
일러스트 느낌을
만들고 싶었다고
함.
나루토
나루토
• 더 역동적인 결과
를 얻기 위해 수정
나루토
• “애니메이션 블
러” 용 메쉬
결론
• 카툰 렌더링 방식은 이미 널리 알려진 방
식.
– 널리 알려져 있지만, 결과물이 만족스럽게 나
온다는 것인 매우 어렵다.
– 생각보다 부하도 심해서 폴리곤 본 개수 등을
잘 고려해야 함 (예: 포켓몬 xy)

• 렌더링 목표를 확실히!!
Q&A
[참고자료]
• 나루토
–
–
–
–
–
–
–

http://tlqkfrnfl.blog.me/130088014435
„나루토 나루티밋 스톰‟ #2
„나루토 나루티밋 스톰‟ #3
„나루토 나루티밋 스톰‟ #4
„나루토 나루티밋 스톰‟ #5
„나루토 나루티밋 스톰‟ #6
„나루토 나루티밋 스톰‟ #7

• 후 처리를 이용한 외곽선 렌더링
• 만화같은 명암을 입히는 툰쉐이더

More Related Content

What's hot

NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술
NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술
NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술Ki Hyunwoo
 
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용JP Jung
 
물리 기반 셰이더의 이해
물리 기반 셰이더의 이해물리 기반 셰이더의 이해
물리 기반 셰이더의 이해tartist
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow MappingSukwoo Lee
 
매쉬 베이크 마스터리
매쉬 베이크 마스터리매쉬 베이크 마스터리
매쉬 베이크 마스터리Jooyoung Yi
 
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)포프 김
 
2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성Gunho Shin
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기동석 김
 
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기강 민우
 
Compute shader
Compute shaderCompute shader
Compute shaderQooJuice
 
감마가 어디감마
감마가 어디감마감마가 어디감마
감마가 어디감마JP Jung
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019devCAT Studio, NEXON
 
[2012 대학특강] 아티스트 + 프로그래머
[2012 대학특강] 아티스트 + 프로그래머[2012 대학특강] 아티스트 + 프로그래머
[2012 대학특강] 아티스트 + 프로그래머포프 김
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리changehee lee
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희changehee lee
 
모바일 게임 최적화
모바일 게임 최적화 모바일 게임 최적화
모바일 게임 최적화 tartist
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11민웅 이
 

What's hot (20)

NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술
NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술
NDC2016 프로젝트 A1의 AAA급 캐릭터 렌더링 기술
 
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용
 
물리 기반 셰이더의 이해
물리 기반 셰이더의 이해물리 기반 셰이더의 이해
물리 기반 셰이더의 이해
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
매쉬 베이크 마스터리
매쉬 베이크 마스터리매쉬 베이크 마스터리
매쉬 베이크 마스터리
 
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
 
2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
 
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
 
Compute shader
Compute shaderCompute shader
Compute shader
 
D2 Hdr
D2 HdrD2 Hdr
D2 Hdr
 
감마가 어디감마
감마가 어디감마감마가 어디감마
감마가 어디감마
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
 
[2012 대학특강] 아티스트 + 프로그래머
[2012 대학특강] 아티스트 + 프로그래머[2012 대학특강] 아티스트 + 프로그래머
[2012 대학특강] 아티스트 + 프로그래머
 
High dynamic range
High dynamic rangeHigh dynamic range
High dynamic range
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
Motion blur
Motion blurMotion blur
Motion blur
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희
 
모바일 게임 최적화
모바일 게임 최적화 모바일 게임 최적화
모바일 게임 최적화
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11
 

More from changehee lee

Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glchangehee lee
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicschangehee lee
 
Fortugno nick design_and_monetization
Fortugno nick design_and_monetizationFortugno nick design_and_monetization
Fortugno nick design_and_monetizationchangehee lee
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기changehee lee
 
모바일 엔진 개발기
모바일 엔진 개발기모바일 엔진 개발기
모바일 엔진 개발기changehee lee
 
Mobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraphMobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraphchangehee lee
 
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)changehee lee
 
개발자여! 스터디를 하자!
개발자여! 스터디를 하자!개발자여! 스터디를 하자!
개발자여! 스터디를 하자!changehee lee
 
Gamificated game developing
Gamificated game developingGamificated game developing
Gamificated game developingchangehee lee
 
Windows to reality getting the most out of direct3 d 10 graphics in your games
Windows to reality   getting the most out of direct3 d 10 graphics in your gamesWindows to reality   getting the most out of direct3 d 10 graphics in your games
Windows to reality getting the most out of direct3 d 10 graphics in your gameschangehee lee
 
Basic ofreflectance kor
Basic ofreflectance korBasic ofreflectance kor
Basic ofreflectance korchangehee lee
 
Valve handbook low_res
Valve handbook low_resValve handbook low_res
Valve handbook low_reschangehee lee
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipelinechangehee lee
 

More from changehee lee (20)

Visual shock vol.2
Visual shock   vol.2Visual shock   vol.2
Visual shock vol.2
 
Shader compilation
Shader compilationShader compilation
Shader compilation
 
Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_gl
 
Smedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphicsSmedberg niklas bringing_aaa_graphics
Smedberg niklas bringing_aaa_graphics
 
Fortugno nick design_and_monetization
Fortugno nick design_and_monetizationFortugno nick design_and_monetization
Fortugno nick design_and_monetization
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기
 
Paper games 2013
Paper games 2013Paper games 2013
Paper games 2013
 
모바일 엔진 개발기
모바일 엔진 개발기모바일 엔진 개발기
모바일 엔진 개발기
 
V8
V8V8
V8
 
Wecanmakeengine
WecanmakeengineWecanmakeengine
Wecanmakeengine
 
Mobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraphMobile crossplatformchallenges siggraph
Mobile crossplatformchallenges siggraph
 
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)
개발 과정 최적화 하기 내부툴로 더욱 강력한 개발하기 Stephen kennedy _(11시40분_103호)
 
개발자여! 스터디를 하자!
개발자여! 스터디를 하자!개발자여! 스터디를 하자!
개발자여! 스터디를 하자!
 
Light prepass
Light prepassLight prepass
Light prepass
 
Gamificated game developing
Gamificated game developingGamificated game developing
Gamificated game developing
 
Windows to reality getting the most out of direct3 d 10 graphics in your games
Windows to reality   getting the most out of direct3 d 10 graphics in your gamesWindows to reality   getting the most out of direct3 d 10 graphics in your games
Windows to reality getting the most out of direct3 d 10 graphics in your games
 
Basic ofreflectance kor
Basic ofreflectance korBasic ofreflectance kor
Basic ofreflectance kor
 
C++11(최지웅)
C++11(최지웅)C++11(최지웅)
C++11(최지웅)
 
Valve handbook low_res
Valve handbook low_resValve handbook low_res
Valve handbook low_res
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipeline
 

카툰 렌더링