니시카와젠지의 3D 게임 팬을 위한「 GRAVITY DAZE 」 그래픽스 강좌 이민웅

「 GRAVITY DAZE 」의 특수한 셰이딩 비밀（ 1 ） ~ 단순 툰 셰이더가 아닌 반데시네 셰이더란 무엇인가 「 GRAVITY DAZE 」의 특수한 셰이딩 비밀（ 2 ） ~ 윤곽선 생성 「 GRAVITY DAZE 」의 특수한 셰이딩 비밀

(3 ） ~ 배경의 톤맵핑 처리와 톤맵핑의 영향을 받지 않는 캐릭터 모델

차례

bande dessinée ( 방드 데시네 ) ◦ 프랑스어로 만화의 한장면◦ 대표적 만화 틴틴의 모험 , 스머프◦ 아래 그림의 느낌의 셰이더를 구현하기 위해 툰세이더를 새로 만듬

「 GRAVITY DAZE 」의 특수한 셰이딩 비밀（ 1 ） ~ 단순 툰 셰이더가 아닌 반데시네 셰이더란 무엇인가

일반적인 Lambert 기법에 의한 디퓨즈 라이팅을 계산 밝기를 3 단계로 분리한 처리방식 각 단계의 밝기 경계는 아티스트가 설정 3 단계의 각 경계부분은 매끄러운 그라디에이션이 되도록 블렌딩

bande dessinée Shader

　「 GRAVITY DAZE 」의 툰 셰이더（반데시네 셰이더 기초부분）// 캐릭터용 플래그먼트 셰이더의 요점부분만을 추출한 의사코드// 버텍스 셰이더에서 입력버퍼나 유니폼 버퍼등의 선언은 생략// 라이트의 영향을 계산한다// 디렉셔널 라이트・포인트 라이트・앰비언트 라이트・카메라 라이트 ( 카메라 측에서 비추는 빛 ) 의 영향을 받는다float light = CalcDiffuseLight （ dirLight, shadowMap, position, normal, ambient-Light, 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, diffuse-AmbientBlend ） ; float3 color = lerp （ color, shadowColor, ambientShadowBlend ） ;

bande dessinée Shader

최종영상의 모델을 와이어프레임으로 표시한 샷

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

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

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

윤곽선을 제거한 샷 최종샷

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

여배우 광원

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

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

bande dessinée Shader

밝을명

그늘음 중간

여배우 라이트 유무에 따른 차이

반데시네의 느낌을 지향하는 매우 커다란 특징은 윤곽선 캐릭터나 배경에 대해서 마치 펜으로 그린것 같은 선 리얼타임으로 생성 캐릭터와 배경은 윤곽선 생성방식이 틀림

◦ 캐릭터는 2 패스 랜더링◦ 배경은 Sobel( 소벨 ) Filter 를 사용

윤곽선 생성

버텍스 셰이더에서 버텍스를 해당 노멀방향으로 확대 카메라 ( 시선 ) 방향을 향하지 않는 폴리곤 ( 뒷면 )만을 검게 렌더링

◦ 확대시킨 캐릭터는 , 카메라 ( 시선 ) 방향으로 향하고 있는 것( 앞면 ) 을 그리지 않는 것 캐릭터에 덧그리지않기 위해서

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

캐릭터모델의 윤곽선

윤곽선 렌더링을 할때에 캐릭터에 부여하는 확대값을 고정치로 해버리면 시점에서 멀거나 가깝게 생성되는 윤곽선의 두께가 변해버리므로 , 그 캐릭터의 시점으로부터 깊이 위치와 시야 화각의 값을 바탕으로 스케일값을 조정 캐릭터가 가깝던 멀던 윤곽선에 두께가 변하지 않는 것은 이러한 조정값의 덕분

캐릭터모델의 윤곽선

캐릭터모델의 윤곽선

왼쪽부터 캐릭터 모델 , 노멀방향으로 확대시킨 캐릭터 모델 , 최종 렌더링 상태

최종영상의 모델을 와이어 프레임으로 표시한 샷 라이팅의 영향만을 가시화한 샷

알베도 텍스처를 그대로 표시한 샷 노멀맵의 영향만을 제거한 샷

윤곽선을 제거한 샷 최종 샷

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

포스트이펙트 처리◦ 렌더타겟의 α 채널에 대해서 영상처리◦ 엣지 강조 필터중 한개인「 Sobel 필터」를 적용해 주는 것

시선 벡터와 렌더링 대상 픽셀의 법선 벡터◦ 2 개의 벡터가 이루는 각도가 작을수록 2 개의 벡터의 내적값은 커지며 , 이루는 각도가 클 수록 내적값은 작아짐◦ 인접하는 내적값끼리의 차가 큰 부분이 윤곽선이라고 간주하기 대문에 이것을 Sobel 필터로 하여 강조화하고 표면화 시키는 것

배경 오브젝트에 대한 윤곽선

배경 오브젝트에 대한 윤곽선

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

내적대

내적소

배경오브젝트에 대한 윤곽선

법선과 시선의 내적값을 저장한 α 채널의 내용을 가시화한 샷

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

윤곽의 성질농담 변화를 수반하므로 , 윤곽 추출에서는 우선 농도에 주목오브젝트와 배경의 경계에서 계단형 농도 변화가 생김깨끗하게 윤곽을 추출하는게 의외로 어려워 여러가지 알고리즘이 고안되어 있음

윤곽

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

Sobel( 소벨 ) Filter

"" 22 GyGxG

윤곽선 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 프레임의 평균휘도를 대수차원에서 구해 , 대수평균 휘도를 기준으로 어두운 값에 대해서는 선형에 가까운 값을 주는 반면에 밝은쪽으로 갈수록 값의 변화가 더디는 특성◦ 물리적인 정확성은 제쳐두고 상당히 인간이 일반적으로 보는 느낌과 비슷하기에 산술적인 처리의 톤맵핑 기법

HDR

톤 매핑

대수평균휘도의 계산을 부하절감을 위해 32 X 16 텍셀까지 축소한 최종영상 프레임에 대해서 수행빨간색 원으로 대수 평균 휘도를 구하기 위한 축소판의 최종영상 프레임

32 X 16

캐릭터 스텐실 마스크

캐릭터를 렌더링할때 메인 렌더타겟과 같은 해상도의 스텐실 버퍼에도 동시 출력비 HDR 렌더링의 캐릭터들에게 톤맵핑을 적용하지 않기 위한 스텐실 마스크

톤맵핑 없음

톤맵핑 있음

하늘과 안개

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

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

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

하늘과 안개

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

하늘과 안개

【「안개」와「하늘」의 생성 알고리즘】근거리 포그색 하늘 텍스처 깊이 버퍼

프레임버퍼 포그 색 농도

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

절차적인 기법에 의해 생성된 안개・하늘 텍스처깊이 버퍼

• PS3 이건 Xbox 360 이건 , 일반적인 GPU 에서는 렌더 타겟의 내용을 읽어낼수 없음 일반적인 GPU 에서는 한번 렌더링을 완료 시키고 , 그것을 텍스처로하여 다음 패스에서 참조 2 패스 방법

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

PS Vita

안개 , 하늘 off

안개 , 하늘 on

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

폴리곤의 렌더링은 보여지지 않는다 오히려 멀리있는 배경은 윤곽선만이 남아 , 비쥬얼의 깊은 맛을 살리고 있다

감사합니다Q&A

http://blog.naver.com/sorkelf/40186870502http://blog.naver.com/sorkelf/40187881873