툰 셰이더(실습)

---

1. 툰 셰이딩(Toon Shading)

툰셰이딩(Toon Shading = Cell Shading) : 만화 같은 명암을 입히기 위해서 난반사광을 단계적으로 줄어들게 만든 셰이딩입니다.

주전자 모델을 사용하기 위해 모델을 바꾸겠습니다.

[ ※ ] Model → (오른쪽) → Change Model → "Teapot.3ds"

설정을 하면 다음과 같은 주전자 모델이 보입니다.

// Vertex Shader
float4x4 gWorldViewProjectionMatrix; // 월드 x 뷰 x 투영
float4x4 gInvWorldMatrix; // 월드 행렬의 역행렬

float4 gWorldLightPosition; // 광원 위치 벡터

struct VS_INPUT 
{
   float4 Position : POSITION0;
   float3 mNormal : NORMAL; // 법선 벡터
};

struct VS_OUTPUT 
{
   float4 Position : POSITION0;
   float3 mDiffuse : TEXCOORD1;
};

VS_OUTPUT vs_main( VS_INPUT Input )
{
   VS_OUTPUT Output;

   Output.Position = mul( Input.Position, gWorldViewProjectionMatrix );
   
   float3 objectLightPosition = mul(gWorldLightPosition, gInvWorldMatrix);
   float3 lightDir = normalize(Input.Position.xyz - objectLightPosition);
   
   Output.mDiffuse = dot(-lightDir, normalize(Input.mNormal));
   
   return( Output );
}

광원의 위치(gWorldLightPosition)은 (500, 500, -500, 1)로 설정했습니다.

정점의 법선정보(mNormal)을 알기위해서 NORMAL 신택스를 사용하여 float3 타입으로 받아왔습니다.

공간변환 시 여러 행렬(월드, 뷰, 투영)들을 미리 합쳐(곱해서) 불필요한 연산을 줄일 수 있습니다.

따라서, 월드행렬, 뷰행렬, 투영행렬을 곲한 gWorldViewProjectionMatrix를 통해 한번의 연산으로 공간을 이동시킬 수 있습니다.

Variable Semantic에서 WorldViewProjection을 연결시켜 줍니다.

하지만, 월드 공간에 있는 광원의 위치와의 연산을 위해서는 월드행렬이 필요합니다. 월드행렬을 만들어 줘도 되지만, 월드행렬의 역행렬을 이용하여 광원의 위치를 지역 공간으로 이동시키겠습니다.

gInvWorldMatrix를 WorldInverse라는 Variable Semantic에 연결시켜 줍니다.

다음 작업을 마치면 위의 세 전역변수를 얻을 수 있습니다.

---

// Pixel Shader
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);
}

전체 표면 색을 지정하기 위한 gSurfaceColor를 (0, 1, 0)으로 설정했습니다.

---

위의 코드를 각각 실행(F5)시키면 다음과 같은 결과 화면이 보입니다.