오다기리 박의 알고리즘 노트

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

컴퓨터 그래픽스/쉐이더

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

오다기리 박 2018. 7. 1. 23:45

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));



▶렌더몽키 코드 

- 버텍스 셰이더(흑백)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
cs

- 픽셀 셰이더(흑백)
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}
cs

- 버텍스 셰이더(세피아)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
cs

- 픽셀 셰이더(세피아)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
cs

- 결과

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

img

img