비실사 렌더링 기법

데브루키 스터디2012. 1. 14. 해보리

(Non-Photorealistic Rendering)

비실사 렌더링(NPR)

비실사 렌더링이란 ?

NPRNon-Photorealistic RenderingStylistic Rendering

드래곤볼 온라인

스트리트파이터 4

소울워커

한게임의 크리티카

http://www.gameshot.net/common/con_view.php?code=GA4dccbb99ab4b0

띵소프트의 프로젝트 NT

다양한 비실사 렌더링 필터http://www.psoft.co.jp/en/product/pencil/sample.html

다양한 비실사 렌더링 필터http://www.psoft.co.jp/en/product/pencil/sample.html

다양한 비실사 렌더링 기법카툰 렌더링연필 스케치 렌더링수채화 렌더링흑백 일러스트레이션 렌더링유채화 렌더링기술도면 렌더링

카툰렌더링(Cartoon Rendering)

카툰렌더링 이란 ?

Toon ShadingCel Shading

카툰렌더링이 적용된 게임들씰 온라인마비노기팡야카트라이더무크요구르팅…

스콧 맥클라우드 만화의 이해(Understanding Comics)

단순화를 통한 강조Amplification through simplification

카툰렌더링의 특징제한적인 단계의 음영외곽선 강조느낌을 잘 살린 텍스쳐

제한적인 단계의 음영

θ90′

명암 1.0

θ90′

명암 1.0

http://cafe.naver.com/devrookie/2660http://cafe.naver.com/devrookie/4619

제한적인 단계의 음영GPG 2 권 5.2 에 나온 권장사항‘1 차원 텍스쳐로 충분하나 대부분의 그래픽 하드웨어들과 그래픽 API 들에서는 2 차원 텍스쳐가 더 빠른 속도를 낸다’‘ 카툰 셰이딩에서는 점광원을 사용한다고 해서 현실감이 크게 증가하진 않기 때문에 처리 속도 향상을 위해 지향광을 사용한다’

단계적 명암 사용 예제

자동 생성 명암 텍스쳐IDirect3DTexture9 D3DFMT_L8 포맷의 텍스쳐 생성해당 텍스쳐의 Surface 를 얻어와서 범위별 색상값을 기록

셰이더를 사용하지 않고 하려면 임의의 라이트를 설정하여 명암 텍스쳐와 Diffuse 텍스쳐 정보 블렌딩

for ( DWORD i = 0 ; i < desc.Height ; i++ ) {

for ( DWORD j = 0 ; j < 170 ; j++ ) *pmemptr++ = 0x50;

for ( ; j < 220 ; j++ ) *pmemptr++ = 0xa0;

for ( ; j < desc.Width ; j++ ) *pmemptr++ = 0xff;

}

SetTransform(D3DTS_TEXTURE1, &matLightDir);SetTexture(1, ToonLine );SetTexture(0, Textures[i]);

카툰렌더링 샘플

버텍스 셰이더를 이용한 방법광원과 정점의 법선 벡터의 내적을 구한 후 이 값을 선형 텍스쳐의 좌표로 활용

SetVertexShaderConstant(5, &LightDir, 1);

;Dot product of light vector with normal vector;and output it as the first texture coordinate.dp3 oT0.x, v3, -c5

http://msdn.microsoft.com/en-us/library/windows/desktop/bb219758(v=VS.85).aspx

버텍스 셰이더를 이용한 방법VS_OUTPUT vs_main( VS_INPUT Input ){ VS_OUTPUT Output;

Output.Position = mul( Input.Position, matViewProjection ); float3 N = normalize( mul( Input.Normal, matView ) ); float3 L = normalize( -vLight ); float diffuse = max( 0, dot( N, L ) ); Output.Texcoord = float2( diffuse, 0.5f );

return( Output );}

제한적인 단계의 음영 처리

외곽선 강조

외곽선을 추출하는 방법윤곽이 될 폴리곤의 변을 검색하여 그 변에 따라 검은 선을렌더링하는 방법 , CPU 로 윤곽을 검색해야 하므로 최근의그래픽 칩 진화에 다른 혜택을 받지 못함

원본 모델과 같은 형태로 검은 폴리곤 모델을 렌더링 하는 방법검은색 모델을 렌더링 할 때 , 모델을 늘여서 뒤를 향하고 있는 면만을 출력

포스트이펙트의 엣지 필터 알고리즘을 이용하는 방법 , 렌더링 후 일부 정보를 이용해 객체의 경계선을 찾아 낸 후 그 부분을 검게 칠함그 외 부분은 하얗게 만든 뒤 원래 화면과 곱셈하는 방법

셰이더 없이 외곽선 그리기

http://gamedevforever.com/18

외곽선 추출 예제

색 성분에 의한 윤곽 추출인접한 주변의 색상 정보를 합산하여 나온 특정 값을 기준으로 하는 방법

휘도 정보를 사용한 윤곽 추출 방법색 강도 Y = 0.2989 * R + 0.5866 * G + 0.1145 * B

휘도 뿐만 아니라 동일한 피부색이라면 선을 넣지않도록 YCbCr 색 좌표계의 색상 성분인 Cb, Cr 에 관한 색 차이를 구하는 방법Cb = -0.1687 * R ? 0.3312 * G + 0.5 * BCr = 0.5 * R ? 0.4183 * G – 0.0816 * B

색 성분에 의한 윤곽 추출PixelShader PS_NormalEdge = asm{ ps_1_1

tex t0 // 현재프레임 ( 좌측상단 )tex t1 // 현재프레임 ( 우측하단 )tex t2 // 현재프레임 ( 좌측하단 )tex t3 // 현재프레임 ( 우측상단 )

// RGB 각각의 휘도차sub_x2 r0, t0, t1sub_x2 r1, t2, t3

// 절대값의 근사값을 얻기위해서 제곱dp3_x4 r0, r0, r0dp3_x4 r1, r1, r1

// (1 - 휘도차 ) 로 흰색바탕에 검은엣지add r0, 1-r0, -r1 // 1 - r0 - r1

};

색 성분에 의한 윤곽 추출pass P2 // 엣지{

// 셰이더PixelShader = <PS_NormalEdge>;// 텍스처Sampler[0] = (SrcSamp);Sampler[1] = (SrcSamp);Sampler[2] = (SrcSamp);Sampler[3] = (SrcSamp);

}

T4VERTEX Vertex[4] = {// x y z rhw tu tv{ 0.0f, 0, 0.1f, 1.0f, 0.0f-du, 0.0f-dv // 좌측상단

, 0.0f+du, 0.0f+dv // 우측하단

, 0.0f-du, 0.0f+dv // 좌측하단

, 0.0f+du, 0.0f-dv},// 우측상단{ w, 0, 0.1f, 1.0f, 1.0f-du, 0.0f-dv

, 1.0f+du, 0.0f+dv

, 1.0f-du, 0.0f+dv

, 1.0f+du, 0.0f-dv, },{ w, h, 0.1f, 1.0f, 1.0f-du, 1.0f-dv

, 1.0f+du, 1.0f+dv

, 1.0f-du, 1.0f+dv

, 1.0f+du, 1.0f-dv, },{ 0.0f, h, 0.1f, 1.0f, 0.0f-du, 1.0f-dv

, 0.0f+du, 1.0f+dv

, 0.0f-du, 1.0f+dv

, 0.0f+du, 1.0f-dv, },};m_pEffect->SetTexture( m_htSrcTex, m_pOriginalTex );m_pd3dDevice->SetFVF( D3DFVF_XYZRHW | D3DFVF_TEX4 );

휘도 (Luminance) 윤곽 추출PixelShader PS_Edge = asm{ ps_1_1 def c0, 0.299f, 0.587f, 0.114f, 0.0f ; 휘도 가중치

tex t0 // 현재프레임 ( 좌측상단 )tex t1 // 현재프레임 ( 우측하단 )tex t2 // 현재프레임 ( 좌측하단 )tex t3 // 현재프레임 ( 우측상단 )

dp3 r0, t0, c0 ; rgb adp3 r1, t1, c0 ; r0 = (t3 휘도 , t0 휘도 )dp3 r0.rgb, t3, c0 ; r1 = (t2 휘도 , t1 휘도 )dp3 r1.rgb, t2, c0 ; rgb aadd_x4 r0, r0,-r1 ; r0 = 4( t3-t2 휘도 , t0-t1 휘도 )mul_x4 r0, r0, r0 ; r0 = 64((t3-t2 휘도 )^2, (t0-t1 휘도 )^2)add_x4 r0, 1-r0,-r0.a ; r0 = 4*(1-64((t3-t2 휘도 )^2+(t0-t1 휘도 )^2))

};

휘도 (Luminance) 윤곽 추출float4 PS_Edge (EDGE_INPUT In) : COLOR{

float3 d0 = tex2D( SrcSamp, In.Tex0 ).rgb -tex2D( SrcSamp, In.Tex1 ).rgb;float3 d1 = tex2D( SrcSamp, In.Tex2 ).rgb -tex2D( SrcSamp, In.Tex3 ).rgb;

// 렌더링타겟 2:CbCrfloat3x3 RGB2CrCb = {

{ 0, 0, 0 },// Y(=0){ 0.50000, - 0.41869, - 0.08131},// Cr{-0.16874, - 0.33126, + 0.50000},// Cb

};d0 = mul( RGB2CrCb, d0 );d1 = mul( RGB2CrCb, d1 );

float diff = dot(d0, d0)+dot(d1,d1);

return 1.0 - 100.0 * diff;}

외곽선 추출 예제

색 성분 추출법의 단점다른 물체라도 색이 같으면 외각선이 없다다른 물체라도 휘도값이 같으면 외각선이 없다

ID 윤곽 추출알파값에 적용시킨 ID 를 이용해 셰이더 상수 레지스트리에 각각의 ID 를 설정하고 ID 의 차이로 외각선을 추출하는 방법원하는 객체에만 선택적으로 적용할 수 있다

m_pEffect->SetFloat( m_hfId, 1.0f );Out.a = fId;

ID 윤곽 추출의 단점알파값에 아이디를 넣어 관리할 경우 256단계 밖에는 사용할 수 없음필터를 거칠 경우 알파값이 뭉개질 수가 있기 때문에 적당한 크기 조절이 필요

깊이 외각선 추출

Z 버퍼 ( 깊이 ) 값의 차이를 통해 윤곽선을 찾는 방법

물체가 접하게 되는 부분의 윤곽선은 사라질 수 있다

노멀맵을 이용한 외각선 추출

객체를 렌더링 할 때 생성된 노멀맵 정보를 이용해 시야 정보와 계산하여 외각선을 찾아내는 방법

외곽선 추출 예제

외곽선 추출 예제

픽셀 셰이더를 이용한 방법

스트리트파이터 4 텍스쳐

카툰렌더링 예제

Toon Shader in Unity

해칭(Hatching)

해칭 (Hatching) 이란 ?

물체의 단면을 알기 쉽게 빗금을 그어 나타내는 것

가늘고 세밀한 평행선이나 교차선을 사용하여 대상의 요철이나 음영을 표현하는 묘사법

해칭 예제

해칭 기법광원의 영향에 따라 단계적으로 적용될 해치 패턴 배열을 적용(Tonal Art Map)각 픽셀별로는 각 정점들로부터 보간된 가중치에 따라 색조아트맵을 혼합(Pixel Shader 에서 처리 )

색조아트맵 (Tonal Art Map)

http://blog.naver.com/pch413/10001173790

해칭 기법

float diffuse = dot(normalW,lightDir);diffuse=pow(diffuse,4);�float hatchFactor = diffuse * 6.0;�

해칭 예제

해칭 예제

Hatch Shader in Unity

Q / A

알쏭달쏭 외래어 표기원어 맞는 표기 틀린 표기

Presentation 프레젠테이션 프리젠테이션

license 라이선스 라이 ( 센 ) 스

Balance 밸런스 발란스

Circle 서클 ( 써 ) 클

Solution 설루션 솔루션

total 토털 토탈

알쏭달쏭 외래어 표기원어 맞는 표기 틀린 표기

Scene 신 씬

lucky 러키 럭키

Message 메시지 메 ( 세 ) 지

Concept 콘셉트 컨셉

Contents 콘텐츠 컨텐츠

target 타깃 타겟