셰이더 공부 - 툰셰이더

툰세이더는 스트리트 파이터4, 보더랜드 같은 비실사적인 그래픽을 구현하는 셰이더입니다.

만화를 보면 명암 처리를 부드럽게 하는 대신에 칼같이 딱딱 끝어서 2~3단계로 합니다. 사실 구현하는 건 굉장히 쉽습니다. 전에 만든 난반사광 셰이더를 조금만 고치면 됩니다.

둥근 코사인 곡선이 일반적인 난반사광 셰이더라면 뚝뚝 끊기는 계단 모양이 툰셰이더입니다.

픽셀셰이더에서 쓰는 diffuse값을 5단계로 나누기만 하면 됩니다.

1.정점 셰이더

float4x4 gWorldViewProjectionMatrix;

float4x4 gWorldInverseMatrix;

float4 gWorldLightPosition;

struct VS_INPUT 

{

   float4 Position : POSITION0;

   float3 mNormal:NORMAL;

};

struct VS_OUTPUT 

{

   float4 Position : POSITION0;

   float3 Diffuse:TEXCOORD1;

};

VS_OUTPUT vs_main( VS_INPUT Input )

{

   VS_OUTPUT Output;

   Output.Position = mul( Input.Position, gWorldViewProjectionMatrix );

   

   float3 gLocalLightPosition = mul(gWorldLightPosition,gWorldInverseMatrix);

   float3 lightDir = normalize(Input.Position.xyz - gLocalLightPosition);

   

   Output.Diffuse = dot(-lightDir,normalize(Input.mNormal));

   

   return( Output ); 

}

float4x4 gWorldViewProjectionMatrix;

float4x4 gWorldInverseMatrix;

사실 행렬형태로 물체변환을 하는 것은 행렬 곱으로 여려 행렬들을 합쳐서 계산하기 쉽기 때문입니다. 정점마다 월드행렬, 뷰행렬, 투영행렬을 따로 곱하는 대신 이 세가지 행렬을 미리 합쳐서 세이더로 전달하는 편이 좋습니다.  gWorldInverseMatrix는 월드행렬의 역행렬로 월드공간에서 지역공간으로 전환할 때 필요합니다. 

   float3 gLocalLightPosition = mul(gWorldLightPosition,gWorldInverseMatrix);

전에 난반사광 셰이더에선 정점의 법선벡터를 월드공간으로 바뀐 뒤 조명위치와 계산했는데 이제는 월드행렬을 전역변수로 받아오지 않으므로 그렇게 할 수 없습니다. 대신 월드행렬의 역행렬을 받아와서 조명위치를 법선벡터가 있는 공간인 지역공간으로 변환합니다.

2.픽셀 셰이더

float3 gSurfaceColor;

struct PS_INPUT

{

   float3 mDiffuse:TEXCOORD1;

};

float4 ps_main(PS_INPUT Input) : COLOR0

{

   

   float3 diffuse = saturate(Input.mDiffuse);

   

   diffuse = ceil(diffuse*5)/5.0f;

   

   return( float4(gSurfaceColor*diffuse.xyz,1 ) );

   

}

float3 gSurfaceColor;

이 전역변수는 그릴 모델의 색깔을 얻어오는 변수입니다. 색깔을 넣어서 모델을 그리기 위해 넣었습니다. 

 diffuse = ceil(diffuse*5)/5.0f;

이 부분이 위에서 본 계단식 그래프를 만드는 부분입니다. ceil 함수는 바로 위 정수로 올림하는 함수입니다. 하지만 diffuse값은 0~1이므로 올림하면 0,1 둘중 하나이고 5개 나눌 수가 없습니다. 그래서 diffuse값에 5를 곱해 범위를 0~5로 만든 뒤 올림하여 얻은 0~5 사이 값을 다시 5로 나눠서 0~1 사이의 색상벡터 범위로 바꿨습니다.

   return( float4(gSurfaceColor*diffuse.xyz,1 ) );

gSurfaceColor의 색상값과 diffuse 값을 곱해 그려야할 픽셀의 최종 값을 구합니다.