[셰이더 프로그래밍 입문] 11. 흑백/세피아 사진 만들기

11. 흑백/세피아 사진 만들기

• 투영공간에서 화면을 꽉 채우는 사각형을 그리기 -> 2D텍스처(렌더타깃)을 씌우기 ->정점셰이더에서 적절한 정점 출력 -> 화면을 차지하는 픽셀마다 픽셀셰이더 호출

• 포스트프로세싱 : 장면을 2D텍스처에 그린다음 그 위에 영상처리 기법을 입히는 것 -> 쓸데업이 셰이더의 수를 늘리는 것을 막을 수 있다.

• 화면 가득 픽셀을 그리려면 화면을 가득 채우는 사각형을 그린다.

■ 흑백

• tex.rgb=dot(tex.rgb,float3(0.3f,0.59f,0.11f));

■ 세피아

• sepia.r=dot(tex.rgb,float3(0.393f,0.769f,0.189f));

• sepia.g=dot(tex.rgb,float3(0.349f,0.686f,0.168f));

• sepia.b=dot(tex.rgb,float3(0.272f,0.534f,0.131f));

▶렌더몽키 코드 

- 버텍스 셰이더(흑백)

struct VS_INPUT
{
   float4 mPosition:POSITION;
   float2 mUV:TEXCOORD0;
};
struct VS_OUTPUT
{
   float4 mPosition:POSITION;
   float2 mUV:TEXCOORD0;
}; 
 
VS_OUTPUT vs_main(VS_INPUT Input)
{
   VS_OUTPUT Output;
   
   Output.mPosition=Input.mPosition;
   Output.mUV=Input.mUV;
   
   return Output;
}

- 픽셀 셰이더(흑백)

struct PS_INPUT
{
   float2 mUV:TEXCOORD0;
};
 
sampler2D SceneSampler;
 
float4 ps_main(PS_INPUT Input):COLOR
{
   float4 tex=tex2D(SceneSampler,Input.mUV);
   tex.rgb=dot(tex.rgb,float3(0.3f,0.59f,0.11f));
   return tex;
}

- 버텍스 셰이더(세피아)

struct VS_INPUT
{
   float4 mPosition:POSITION;
   float2 mUV:TEXCOORD0;
};
struct VS_OUTPUT
{
   float4 mPosition:POSITION;
   float2 mUV:TEXCOORD0;
}; 
 
VS_OUTPUT vs_main(VS_INPUT Input)
{
   VS_OUTPUT Output;
   
   Output.mPosition=Input.mPosition;
   Output.mUV=Input.mUV;
   
   return Output;
}

- 픽셀 셰이더(세피아)

struct PS_INPUT
{
   float2 mUV:TEXCOORD0;
};
 
sampler2D SceneSampler;
 
float4 ps_main(PS_INPUT Input):COLOR
{
   float4 tex=tex2D(SceneSampler,Input.mUV);
   
   float4 sepia;
   sepia.a=tex.a;
   
   sepia.r=dot(tex.rgb,float3(0.393f,0.769f,0.189f));
   sepia.g=dot(tex.rgb,float3(0.349f,0.686f,0.168f));
   sepia.b=dot(tex.rgb,float3(0.272f,0.534f,0.131f));
   
   return sepia;
}

- 결과

세피아 / 흑백사진 효과입니다. 장면을 그린 뒤, 그 결과를 2D이미지로 가져다가 한번에 고쳐버리는 원리입니다.