SlideShare une entreprise Scribd logo
1  sur  33
이민웅






「GRAVITY DAZE」의 특수한 셰이딩 비밀(1)~
단순 툰 셰이더가 아닌 반데시네 셰이더란 무엇인
가
「GRAVITY DAZE」의 특수한 셰이딩 비밀(2)~
윤곽선 생성
「GRAVITY DAZE」의 특수한 셰이딩 비밀(3)~
배경의 톤맵핑 처리와 톤맵핑의 영향을 받지 않는
캐릭터 모델


bande dessinée (방드 데시네)

◦ 프랑스어로 만화의 한장면
◦ 대표적 만화 틴틴의 모험, 스머프
◦ 아래 그림의 느낌의 셰이더를 구현하기 위해
툰세이더를 새로 만듬






일반적인 Lambert 기법에 의한 디퓨즈 라이팅을
계산
밝기를 3단계로 분리한 처리방식
각 단계의 밝기 경계는 아티스트가 설정
3단계의 각 경계부분은 매끄러운 그라디에이션이
되도록 블렌딩
bande dessinée Shader
「GRAVITY DAZE」의 툰 셰이더(반데시네 셰이더 기초부분)
// 캐릭터용 플래그먼트 셰이더의 요점부분만을 추출한 의사코드
// 버텍스 셰이더에서 입력버퍼나 유니폼 버퍼등의 선언은 생략
// 라이트의 영향을 계산한다
//디렉셔널 라이트・포인트 라이트・앰비언트 라이트・카메라 라이트(카메라 측에서 비
추는 빛)의 영향을 받는다
float light = CalcDiffuseLight(dirLight, shadowMap, position, normal,
ambientLight, pointLights ...etc );
// 가장 밝은 색의 중간색과의 블렌드율을 계산
// borderDifAmbH/L은 아티스트에 의해 설정된 보더 라인 값
float diffuseAmbientBlend = smoothstep(borderDifAmbL, borderDifAmbH,
light);
// 중간색과 그림자색과의 블렌드율을 계산.
// borderAmbShaH/L는 아티스트에 의해 설정된 보더 라인 값
float ambientShadowBlend = smoothstep(borderAmbShaL, borderAmbShaH,
light);
// 블렌드율을 기초로 블렌딩한다
// diffuseColor, ambientColor, shadowColor는 아티스트가 설정한 고정색
float3 color = albedoTextureColor * lerp(diffuseColor, ambientColor,
diffuseAmbientBlend );
float3 color = lerp(color, shadowColor, ambientShadowBlend );
최종영상의 모
델을 와이어프
레임으로 표시
한샷

모델의 할당되
어있는 알베도
텍스처를 그대
로 표시한 샷

윤곽선을 제거한 샷

라이팅 영
향만을 가
시화한 샷

노멀맵의
영향만을
제거한 샷

최종샷


물리적으로는 올바르지 않을지도 모르지만, 원하
는 그림자색이 나오도록 의도적으로 추가한 광원
을 적당히 위치시키는것







툰 셰이더의 3단계
중간단계의 그라이데이션
이 포인트
여배우광원은 카메라(시점)
방향으로 부터 비춰짐
3단계의 가장어두운부분은
아티스티가 설정한 색이 나
옴
광원의 반대편으로 캐릭터
를 볼 경우 음영색만 나오
므로 디테일이 없어짐

◦ 카메라 방향으로 추가적인 광
원(여배우광원)을 비추도록함

밝을명

그늘음

중간








반데시네의 느낌을 지향하는 매우 커다란 특징은
윤곽선
캐릭터나 배경에 대해서 마치 펜으로 그린것 같은
선
리얼타임으로 생성
캐릭터와 배경은 윤곽선 생성방식이 틀림
◦ 캐릭터는 2패스 랜더링
◦ 배경은 Sobel(소벨) Filter를 사용




버텍스 셰이더에서 버텍스를 해당 노멀방향으로
확대
카메라(시선)방향을 향하지 않는 폴리곤(뒷면)만을
검게 렌더링
◦ 확대시킨 캐릭터는, 카메라(시선)방향으로 향하고 있는
것(앞면)을 그리지 않는 것
 캐릭터에 덧그리지않기 위해서



스케일시킨 부분이 삐져나와 어두운형태로 남아
그것이 윤곽선




윤곽선 렌더링을 할때에 캐릭터에 부여하는 확대
값을 고정치로 해버리면 시점에서 멀거나 가깝게
생성되는 윤곽선의 두께가 변해버리므로, 그 캐릭
터의 시점으로부터 깊이 위치와 시야 화각의 값을
바탕으로 스케일값을 조정
캐릭터가 가깝던 멀던 윤곽선에 두께가 변하지 않
는 것은 이러한 조정값의 덕분
왼쪽부터 캐릭터 모델, 노멀방향으로 확대시킨 캐릭터 모델, 최종 렌더링 상태
최종영상의 모델을 와이어
프레임으로 표시한 샷

라이팅의 영향만을 가시화한 샷

알베도 텍스처를
그대로 표시한 샷

노멀맵의 영향만을 제거한 샷

윤곽선을 제거한 샷

최종 샷


폴리곤 수가 방대한 배경 오브젝트를 윤곽선 렌더
링을 위해 2번 렌더링하는것은 높은 부하와 연결
◦ 득이 없다



포스트이펙트 처리



시선 벡터와 렌더링 대상 픽셀의 법선 벡터

◦ 렌더타겟의 α채널에 대해서 영상처리
◦ 엣지 강조 필터중 한개인「Sobel 필터」를 적용해 주는
것
◦ 2개의 벡터가 이루는 각도가 작을수록 2개의 벡터의 내
적값은 커지며, 이루는 각도가 클 수록 내적값은 작아짐
◦ 인접하는 내적값끼리의 차가 큰 부분이 윤곽선이라고 간
주하기 대문에 이것을 Sobel 필터로 하여 강조화하고 표
면화 시키는 것
내적대

내적소
그림에서 빨간색 화살표가 시선 벡터, 검은색 화살표가 법선벡터
2개의 벡터가 이루는 각도가 작을수록 2개의 벡터의 내적값은 커지고
이루는 각도가 클수록 내적값은 작아짐
인접한 내적값끼리의 차가 큰 곳이 윤곽선이 되며, Sobel 필터는
이 내적값차를 강조화하는 역할
법선과 시선의 내적값을 저장한 α채널의 내용을 가시화한 샷


윤곽 : 영상 안에서의 영역의 경계를 나타내는 특징으로
픽셀의 밝기의 불연속 점을 나타낸다
- 스텝 불연속 점 : 영상의 밝기가 갑자기 변하는 곳(스텝 에지)
- 라인 불연속 점 : 영상의 밝기가 갑자기 변화하나 조금 지나면
다시 돌아오는 곳(라인 에지)
잡음 제거 필터 수행 후 윤곽선 검출
스텝에지 램프에지, 라인에지 루프에지
(밝기변화에 의한 윤곽선의 기울기 변화 차이 쉽게 느낄 수 있음)



윤곽의 성질
농담 변화를 수반하므로, 윤곽 추출에서는 우선 농도에 주목

오브젝트와 배경의 경계에서 계단형 농도 변화가 생김
깨끗하게 윤곽을 추출하는게 의외로 어려워 여러가지 알고리즘이 고안되어
있음




2차 미분 연산자이며 X축, Y축으로 각각 한번씩
미분
기울기의 크기 :
"G

Gx2 Gy 2 "
윤곽선 Off

윤곽선 On








720×408 16비트 ARGB 부동소수점(FP16의 HDR
(HIGH DYNAMIC RANGE)렌더링 파이프라인을 채택
◦ 단 HDR 렌더링이 적용되고 있는것은 배경 오브젝트
배경과 캐릭터 모두 한 개의 렌더 타겟에 랜더링
PS Vita도 TV와 PC처럼 RGB 8비트 디스플레이
HDR 렌더링된 렌더타겟의 평균휘도를 얻어서, 그 평균
휘도를 기준으로 하여 어두운 곳과 밝은 곳을 LDR로 압
축하는 비선형 감색(減色)을 적용하는 쪽이 외관이 리얼
하게 됨
카메라의 자동노출 보정 효과나 혹은 눈동자의 조리개에
의한 암순응효과(밝은곳-> 어두운곳 순서)나 명순응 효
과( 어두운 곳 -> 밝은 곳에 순서)를 재현하는 효과
• 「Photographic Tone Reproduction for Digital Images」
◦ 주어진 HDR 프레임의 평균휘도를 대수차원에서 구해, 대
수평균 휘도를 기준으로 어두운 값에 대해서는 선형에 가
까운 값을 주는 반면에 밝은쪽으로 갈수록 값의 변화가
더디는 특성
◦ 물리적인 정확성은 제쳐두고 상당히 인간이 일반적으로
보는 느낌과 비슷하기에 산술적인 처리의 톤맵핑 기법
32 X 16

대수평균휘도의 계산을 부하절감을 위해 32 X 16 텍셀까지
축소한 최종영상 프레임에 대해서 수행
빨간색 원으로 대수 평균 휘도를 구하기 위한 축소판의 최종영상 프레임
캐릭터를 렌더링할때 메인 렌더타겟과 같은 해상도의 스텐실 버퍼에도 동시 출력
비 HDR 렌더링의 캐릭터들에게 톤맵핑을 적용하지 않기 위한 스텐실 마스크
톤맵핑 없음

톤맵핑 있음


하늘
◦ 녹색에서 노란색의 그라디에이션이거나, 노란색에서 핑
크, 보라색에서 빨강색으로의 그라디에이션형태



안개
◦ 보라색, 녹색, 노란색등 매우 유니크



특수한 리얼리티를 느낄수 있으며, 하늘과 포그에
묘한 일체감 느낄 수 있음









안개의 색과 하늘 텍스처는 씬의 깊이 값을 매개로하여 결
정
가까이 있는 배경일 수록 안개의 색이 강하게 나타나며, 멀
리 있는 배경일 수록 하늘 텍스처의 색이 지배적으로 나타
나도록 설정
씬의 렌더링 결과로 합성하면 시점으로부터 본 공기층의 두
깨가 무시되므로, 합성시에는 깊이 값을 보고 공기층이 두
꺼울 수록 안개의 색이 강하게 나타나도록 합성
먼 거리에 배경 오브젝트에 관해서는 라이팅 및 셰이딩을
생략하여, 배경 오브젝트를 폴리곤으로만 렌더링
폴리곤으로 렌더링된 영역에도 시선 벡터와 배경 오브젝트
상의 각 픽셀의 노멀벡터와의 내적값은 α채널에 집어넣기
에, 배경에 대한 윤곽선 렌더링은 구별없이 수행
근거리 포그색

프레임버퍼

하늘 텍스처

포그 색

깊이 버퍼

농도
텍스처는 카메라 방향을 기
준으로 별도의 버퍼에 매
프레임 렌더링

깊이 버퍼
절차적인 기법에 의해 생성된 안개・하늘 텍스처
• PS3 이건 Xbox 360이건, 일반적인 GPU에서는 렌더 타겟
의 내용을 읽어낼수 없음
 일반적인 GPU에서는 한번 렌더링을 완료 시키고, 그것을 텍
스처로하여 다음 패스에서 참조
 2패스 방법

• PowerVR SGX543MP4+

 렌더타겟의 내용을 해당 패스에서 읽어 내고 다시 그릴수 있
음
 셰이더에서 렌더타겟의 내용을 읽어 다시 그릴수 있다는 것은
실질적으로 프로그래머블한 블렌딩을 구현할수 있다는 것
 하늘과 안개 씬에서 합성처리
 배경 오브젝트 윤곽선의 합성 결과를 그려 넣을때에 이 기능
이 효과적으로 활용
안개, 하늘 off

가장 멀리 있는 배경
이 폴리곤으로만 렌
더링되고있는 것을
알수 있다

안개, 하늘 on

폴리곤의 렌더링은
보여지지 않는다 오
히려 멀리있는 배경
은 윤곽선만이 남아,
비쥬얼의 깊은 맛을
살리고 있다
Q&A
http://blog.naver.com/sorkelf/40186870502
http://blog.naver.com/sorkelf/40187881873

Contenu connexe

Tendances

2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑Sukwoo Lee
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리changehee lee
 
[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자MoonLightMS
 
[데브루키] Color space gamma correction
[데브루키] Color space gamma correction[데브루키] Color space gamma correction
[데브루키] Color space gamma correctionMinGeun Park
 
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & GlassDae Hyek KIM
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기동석 김
 
[0212 박민수]환경 매핑
[0212 박민수]환경 매핑[0212 박민수]환경 매핑
[0212 박민수]환경 매핑MoonLightMS
 
후처리알아보기
후처리알아보기후처리알아보기
후처리알아보기종규 우
 
Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더동석 김
 
언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFogDae Hyek KIM
 
니시카와젠지의 3 d 게임 팬을 위한 ps4
니시카와젠지의 3 d 게임 팬을 위한 ps4니시카와젠지의 3 d 게임 팬을 위한 ps4
니시카와젠지의 3 d 게임 팬을 위한 ps4민웅 이
 
Game Visual Art Technologies
Game Visual Art TechnologiesGame Visual Art Technologies
Game Visual Art TechnologiesSangYun Yi
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링Sukwoo Lee
 
언차티드4 테크아트 파트3 MicroShadowBRDF Term
언차티드4 테크아트 파트3 MicroShadowBRDF Term언차티드4 테크아트 파트3 MicroShadowBRDF Term
언차티드4 테크아트 파트3 MicroShadowBRDF TermDae Hyek KIM
 
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑MinGeun Park
 
Unite2015 probelight(150417)
Unite2015 probelight(150417)Unite2015 probelight(150417)
Unite2015 probelight(150417)SangYun Yi
 

Tendances (20)

2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑
 
Bump Mapping
Bump MappingBump Mapping
Bump Mapping
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
그림자 이야기
그림자 이야기그림자 이야기
그림자 이야기
 
[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자
 
[데브루키] Color space gamma correction
[데브루키] Color space gamma correction[데브루키] Color space gamma correction
[데브루키] Color space gamma correction
 
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass
언차티드4 테크아트 파트4 Special Case Materials - Moss & Wetness & Glass
 
Uncharted4 part1
Uncharted4 part1Uncharted4 part1
Uncharted4 part1
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
 
High dynamic range
High dynamic rangeHigh dynamic range
High dynamic range
 
[0212 박민수]환경 매핑
[0212 박민수]환경 매핑[0212 박민수]환경 매핑
[0212 박민수]환경 매핑
 
후처리알아보기
후처리알아보기후처리알아보기
후처리알아보기
 
Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더
 
언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog
 
니시카와젠지의 3 d 게임 팬을 위한 ps4
니시카와젠지의 3 d 게임 팬을 위한 ps4니시카와젠지의 3 d 게임 팬을 위한 ps4
니시카와젠지의 3 d 게임 팬을 위한 ps4
 
Game Visual Art Technologies
Game Visual Art TechnologiesGame Visual Art Technologies
Game Visual Art Technologies
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링
 
언차티드4 테크아트 파트3 MicroShadowBRDF Term
언차티드4 테크아트 파트3 MicroShadowBRDF Term언차티드4 테크아트 파트3 MicroShadowBRDF Term
언차티드4 테크아트 파트3 MicroShadowBRDF Term
 
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
 
Unite2015 probelight(150417)
Unite2015 probelight(150417)Unite2015 probelight(150417)
Unite2015 probelight(150417)
 

Similaire à 니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌

카툰 렌더링
카툰 렌더링카툰 렌더링
카툰 렌더링samagu0030
 
06_HDR 소개
06_HDR 소개06_HDR 소개
06_HDR 소개noerror
 
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링Mark Choi
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019devCAT Studio, NEXON
 
I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기hanstar17
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadowMoonLightMS
 
10_Human Skin Rendering
10_Human Skin Rendering10_Human Skin Rendering
10_Human Skin Renderingnoerror
 
Gpu Gems 2 Chapter 15 Sketchy Rendering
Gpu Gems 2 Chapter 15 Sketchy RenderingGpu Gems 2 Chapter 15 Sketchy Rendering
Gpu Gems 2 Chapter 15 Sketchy Renderingyong gyun im
 
구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2Kyoung Seok(경석) Ko(고)
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환Yggdrasil610
 
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)해강
 

Similaire à 니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌 (12)

카툰 렌더링
카툰 렌더링카툰 렌더링
카툰 렌더링
 
06_HDR 소개
06_HDR 소개06_HDR 소개
06_HDR 소개
 
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
 
I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadow
 
Ndc11 이창희_hdr
Ndc11 이창희_hdrNdc11 이창희_hdr
Ndc11 이창희_hdr
 
10_Human Skin Rendering
10_Human Skin Rendering10_Human Skin Rendering
10_Human Skin Rendering
 
Gpu Gems 2 Chapter 15 Sketchy Rendering
Gpu Gems 2 Chapter 15 Sketchy RenderingGpu Gems 2 Chapter 15 Sketchy Rendering
Gpu Gems 2 Chapter 15 Sketchy Rendering
 
구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
 
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
 

Plus de 민웅 이

Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...
Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...
Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...민웅 이
 
PowerVR Low Level GLSL Optimisation
PowerVR Low Level GLSL Optimisation PowerVR Low Level GLSL Optimisation
PowerVR Low Level GLSL Optimisation 민웅 이
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11민웅 이
 
Post processing in_color
Post processing in_colorPost processing in_color
Post processing in_color민웅 이
 
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리민웅 이
 
Valient killzone ps4 lighting
Valient killzone ps4 lightingValient killzone ps4 lighting
Valient killzone ps4 lighting민웅 이
 
Microfacet brdf
Microfacet brdfMicrofacet brdf
Microfacet brdf민웅 이
 
Wrapped diffuse
Wrapped diffuseWrapped diffuse
Wrapped diffuse민웅 이
 
3D Engine Tools with C++/CLR
3D Engine Tools with C++/CLR3D Engine Tools with C++/CLR
3D Engine Tools with C++/CLR민웅 이
 
Light in screen_space(Light Pre Pass)
Light in screen_space(Light Pre Pass)Light in screen_space(Light Pre Pass)
Light in screen_space(Light Pre Pass)민웅 이
 
Cheap realisticskinshading kor
Cheap realisticskinshading korCheap realisticskinshading kor
Cheap realisticskinshading kor민웅 이
 

Plus de 민웅 이 (12)

Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...
Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...
Siggraph15 A Novel Sampling Algorithm for Fast and Stable Real-Time Volume Re...
 
PowerVR Low Level GLSL Optimisation
PowerVR Low Level GLSL Optimisation PowerVR Low Level GLSL Optimisation
PowerVR Low Level GLSL Optimisation
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11
 
Post processing in_color
Post processing in_colorPost processing in_color
Post processing in_color
 
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리
「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리
 
Valient killzone ps4 lighting
Valient killzone ps4 lightingValient killzone ps4 lighting
Valient killzone ps4 lighting
 
Microfacet brdf
Microfacet brdfMicrofacet brdf
Microfacet brdf
 
Wrapped diffuse
Wrapped diffuseWrapped diffuse
Wrapped diffuse
 
3D Engine Tools with C++/CLR
3D Engine Tools with C++/CLR3D Engine Tools with C++/CLR
3D Engine Tools with C++/CLR
 
Light in screen_space(Light Pre Pass)
Light in screen_space(Light Pre Pass)Light in screen_space(Light Pre Pass)
Light in screen_space(Light Pre Pass)
 
Cheap realisticskinshading kor
Cheap realisticskinshading korCheap realisticskinshading kor
Cheap realisticskinshading kor
 
Ceh
CehCeh
Ceh
 

니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌

  • 2.    「GRAVITY DAZE」의 특수한 셰이딩 비밀(1)~ 단순 툰 셰이더가 아닌 반데시네 셰이더란 무엇인 가 「GRAVITY DAZE」의 특수한 셰이딩 비밀(2)~ 윤곽선 생성 「GRAVITY DAZE」의 특수한 셰이딩 비밀(3)~ 배경의 톤맵핑 처리와 톤맵핑의 영향을 받지 않는 캐릭터 모델
  • 3.  bande dessinée (방드 데시네) ◦ 프랑스어로 만화의 한장면 ◦ 대표적 만화 틴틴의 모험, 스머프 ◦ 아래 그림의 느낌의 셰이더를 구현하기 위해 툰세이더를 새로 만듬
  • 4.     일반적인 Lambert 기법에 의한 디퓨즈 라이팅을 계산 밝기를 3단계로 분리한 처리방식 각 단계의 밝기 경계는 아티스트가 설정 3단계의 각 경계부분은 매끄러운 그라디에이션이 되도록 블렌딩
  • 5. bande dessinée Shader 「GRAVITY DAZE」의 툰 셰이더(반데시네 셰이더 기초부분) // 캐릭터용 플래그먼트 셰이더의 요점부분만을 추출한 의사코드 // 버텍스 셰이더에서 입력버퍼나 유니폼 버퍼등의 선언은 생략 // 라이트의 영향을 계산한다 //디렉셔널 라이트・포인트 라이트・앰비언트 라이트・카메라 라이트(카메라 측에서 비 추는 빛)의 영향을 받는다 float light = CalcDiffuseLight(dirLight, shadowMap, position, normal, ambientLight, pointLights ...etc ); // 가장 밝은 색의 중간색과의 블렌드율을 계산 // borderDifAmbH/L은 아티스트에 의해 설정된 보더 라인 값 float diffuseAmbientBlend = smoothstep(borderDifAmbL, borderDifAmbH, light); // 중간색과 그림자색과의 블렌드율을 계산. // borderAmbShaH/L는 아티스트에 의해 설정된 보더 라인 값 float ambientShadowBlend = smoothstep(borderAmbShaL, borderAmbShaH, light); // 블렌드율을 기초로 블렌딩한다 // diffuseColor, ambientColor, shadowColor는 아티스트가 설정한 고정색 float3 color = albedoTextureColor * lerp(diffuseColor, ambientColor, diffuseAmbientBlend ); float3 color = lerp(color, shadowColor, ambientShadowBlend );
  • 6. 최종영상의 모 델을 와이어프 레임으로 표시 한샷 모델의 할당되 어있는 알베도 텍스처를 그대 로 표시한 샷 윤곽선을 제거한 샷 라이팅 영 향만을 가 시화한 샷 노멀맵의 영향만을 제거한 샷 최종샷
  • 7.  물리적으로는 올바르지 않을지도 모르지만, 원하 는 그림자색이 나오도록 의도적으로 추가한 광원 을 적당히 위치시키는것
  • 8.      툰 셰이더의 3단계 중간단계의 그라이데이션 이 포인트 여배우광원은 카메라(시점) 방향으로 부터 비춰짐 3단계의 가장어두운부분은 아티스티가 설정한 색이 나 옴 광원의 반대편으로 캐릭터 를 볼 경우 음영색만 나오 므로 디테일이 없어짐 ◦ 카메라 방향으로 추가적인 광 원(여배우광원)을 비추도록함 밝을명 그늘음 중간
  • 9.
  • 10.     반데시네의 느낌을 지향하는 매우 커다란 특징은 윤곽선 캐릭터나 배경에 대해서 마치 펜으로 그린것 같은 선 리얼타임으로 생성 캐릭터와 배경은 윤곽선 생성방식이 틀림 ◦ 캐릭터는 2패스 랜더링 ◦ 배경은 Sobel(소벨) Filter를 사용
  • 11.   버텍스 셰이더에서 버텍스를 해당 노멀방향으로 확대 카메라(시선)방향을 향하지 않는 폴리곤(뒷면)만을 검게 렌더링 ◦ 확대시킨 캐릭터는, 카메라(시선)방향으로 향하고 있는 것(앞면)을 그리지 않는 것  캐릭터에 덧그리지않기 위해서  스케일시킨 부분이 삐져나와 어두운형태로 남아 그것이 윤곽선
  • 12.   윤곽선 렌더링을 할때에 캐릭터에 부여하는 확대 값을 고정치로 해버리면 시점에서 멀거나 가깝게 생성되는 윤곽선의 두께가 변해버리므로, 그 캐릭 터의 시점으로부터 깊이 위치와 시야 화각의 값을 바탕으로 스케일값을 조정 캐릭터가 가깝던 멀던 윤곽선에 두께가 변하지 않 는 것은 이러한 조정값의 덕분
  • 13. 왼쪽부터 캐릭터 모델, 노멀방향으로 확대시킨 캐릭터 모델, 최종 렌더링 상태
  • 14. 최종영상의 모델을 와이어 프레임으로 표시한 샷 라이팅의 영향만을 가시화한 샷 알베도 텍스처를 그대로 표시한 샷 노멀맵의 영향만을 제거한 샷 윤곽선을 제거한 샷 최종 샷
  • 15.  폴리곤 수가 방대한 배경 오브젝트를 윤곽선 렌더 링을 위해 2번 렌더링하는것은 높은 부하와 연결 ◦ 득이 없다  포스트이펙트 처리  시선 벡터와 렌더링 대상 픽셀의 법선 벡터 ◦ 렌더타겟의 α채널에 대해서 영상처리 ◦ 엣지 강조 필터중 한개인「Sobel 필터」를 적용해 주는 것 ◦ 2개의 벡터가 이루는 각도가 작을수록 2개의 벡터의 내 적값은 커지며, 이루는 각도가 클 수록 내적값은 작아짐 ◦ 인접하는 내적값끼리의 차가 큰 부분이 윤곽선이라고 간 주하기 대문에 이것을 Sobel 필터로 하여 강조화하고 표 면화 시키는 것
  • 16. 내적대 내적소 그림에서 빨간색 화살표가 시선 벡터, 검은색 화살표가 법선벡터 2개의 벡터가 이루는 각도가 작을수록 2개의 벡터의 내적값은 커지고 이루는 각도가 클수록 내적값은 작아짐 인접한 내적값끼리의 차가 큰 곳이 윤곽선이 되며, Sobel 필터는 이 내적값차를 강조화하는 역할
  • 17. 법선과 시선의 내적값을 저장한 α채널의 내용을 가시화한 샷
  • 18.  윤곽 : 영상 안에서의 영역의 경계를 나타내는 특징으로 픽셀의 밝기의 불연속 점을 나타낸다 - 스텝 불연속 점 : 영상의 밝기가 갑자기 변하는 곳(스텝 에지) - 라인 불연속 점 : 영상의 밝기가 갑자기 변화하나 조금 지나면 다시 돌아오는 곳(라인 에지) 잡음 제거 필터 수행 후 윤곽선 검출 스텝에지 램프에지, 라인에지 루프에지 (밝기변화에 의한 윤곽선의 기울기 변화 차이 쉽게 느낄 수 있음)  윤곽의 성질 농담 변화를 수반하므로, 윤곽 추출에서는 우선 농도에 주목 오브젝트와 배경의 경계에서 계단형 농도 변화가 생김 깨끗하게 윤곽을 추출하는게 의외로 어려워 여러가지 알고리즘이 고안되어 있음
  • 19.   2차 미분 연산자이며 X축, Y축으로 각각 한번씩 미분 기울기의 크기 : "G Gx2 Gy 2 "
  • 21.      720×408 16비트 ARGB 부동소수점(FP16의 HDR (HIGH DYNAMIC RANGE)렌더링 파이프라인을 채택 ◦ 단 HDR 렌더링이 적용되고 있는것은 배경 오브젝트 배경과 캐릭터 모두 한 개의 렌더 타겟에 랜더링 PS Vita도 TV와 PC처럼 RGB 8비트 디스플레이 HDR 렌더링된 렌더타겟의 평균휘도를 얻어서, 그 평균 휘도를 기준으로 하여 어두운 곳과 밝은 곳을 LDR로 압 축하는 비선형 감색(減色)을 적용하는 쪽이 외관이 리얼 하게 됨 카메라의 자동노출 보정 효과나 혹은 눈동자의 조리개에 의한 암순응효과(밝은곳-> 어두운곳 순서)나 명순응 효 과( 어두운 곳 -> 밝은 곳에 순서)를 재현하는 효과
  • 22. • 「Photographic Tone Reproduction for Digital Images」 ◦ 주어진 HDR 프레임의 평균휘도를 대수차원에서 구해, 대 수평균 휘도를 기준으로 어두운 값에 대해서는 선형에 가 까운 값을 주는 반면에 밝은쪽으로 갈수록 값의 변화가 더디는 특성 ◦ 물리적인 정확성은 제쳐두고 상당히 인간이 일반적으로 보는 느낌과 비슷하기에 산술적인 처리의 톤맵핑 기법
  • 23. 32 X 16 대수평균휘도의 계산을 부하절감을 위해 32 X 16 텍셀까지 축소한 최종영상 프레임에 대해서 수행 빨간색 원으로 대수 평균 휘도를 구하기 위한 축소판의 최종영상 프레임
  • 24. 캐릭터를 렌더링할때 메인 렌더타겟과 같은 해상도의 스텐실 버퍼에도 동시 출력 비 HDR 렌더링의 캐릭터들에게 톤맵핑을 적용하지 않기 위한 스텐실 마스크
  • 26.
  • 27.  하늘 ◦ 녹색에서 노란색의 그라디에이션이거나, 노란색에서 핑 크, 보라색에서 빨강색으로의 그라디에이션형태  안개 ◦ 보라색, 녹색, 노란색등 매우 유니크  특수한 리얼리티를 느낄수 있으며, 하늘과 포그에 묘한 일체감 느낄 수 있음
  • 28.      안개의 색과 하늘 텍스처는 씬의 깊이 값을 매개로하여 결 정 가까이 있는 배경일 수록 안개의 색이 강하게 나타나며, 멀 리 있는 배경일 수록 하늘 텍스처의 색이 지배적으로 나타 나도록 설정 씬의 렌더링 결과로 합성하면 시점으로부터 본 공기층의 두 깨가 무시되므로, 합성시에는 깊이 값을 보고 공기층이 두 꺼울 수록 안개의 색이 강하게 나타나도록 합성 먼 거리에 배경 오브젝트에 관해서는 라이팅 및 셰이딩을 생략하여, 배경 오브젝트를 폴리곤으로만 렌더링 폴리곤으로 렌더링된 영역에도 시선 벡터와 배경 오브젝트 상의 각 픽셀의 노멀벡터와의 내적값은 α채널에 집어넣기 에, 배경에 대한 윤곽선 렌더링은 구별없이 수행
  • 30. 텍스처는 카메라 방향을 기 준으로 별도의 버퍼에 매 프레임 렌더링 깊이 버퍼 절차적인 기법에 의해 생성된 안개・하늘 텍스처
  • 31. • PS3 이건 Xbox 360이건, 일반적인 GPU에서는 렌더 타겟 의 내용을 읽어낼수 없음  일반적인 GPU에서는 한번 렌더링을 완료 시키고, 그것을 텍 스처로하여 다음 패스에서 참조  2패스 방법 • PowerVR SGX543MP4+  렌더타겟의 내용을 해당 패스에서 읽어 내고 다시 그릴수 있 음  셰이더에서 렌더타겟의 내용을 읽어 다시 그릴수 있다는 것은 실질적으로 프로그래머블한 블렌딩을 구현할수 있다는 것  하늘과 안개 씬에서 합성처리  배경 오브젝트 윤곽선의 합성 결과를 그려 넣을때에 이 기능 이 효과적으로 활용
  • 32. 안개, 하늘 off 가장 멀리 있는 배경 이 폴리곤으로만 렌 더링되고있는 것을 알수 있다 안개, 하늘 on 폴리곤의 렌더링은 보여지지 않는다 오 히려 멀리있는 배경 은 윤곽선만이 남아, 비쥬얼의 깊은 맛을 살리고 있다