DirectX Blur Shader 코드 구현

안녕하세요 넬다이입니다.

오늘은 셰이더에서 Blur에 대해서 직접 해볼 생각인데요 

 

Blur는 쉽게 생각해서 흐리게 만들거나 뿌옇게 만드는 작업을 하는 것입니다.

저 같은 경우에는 SSAO를 완료하고 나온 작업물을 blur처리를 통해서 부드럽게 표현한 후 이미지를 적용시키는 작업을 진행했는데요 직접 한번 보시면 좋을 것 같습니다.

 

 

자 일단 전체 코드는 이렇습니다

texture g_BlurTex;
sampler g_BlurSam = sampler_state
{
    texture = g_BlurTex;
    AddressU = clamp;
    AddressV = clamp;

	MinFilter = LINEAR;
	MagFilter = LINEAR;
	MipFilter = LINEAR;
};

float m_TexW = 1600.f;
float m_TexH = 900.f;

static const float Weight[13] =
{
	0.0561, 0.1353, 0.278, 0.4868, 0.7261, 0.9231,
	1, 0.9231, 0.7261, 0.4868, 0.278, 0.1353, 0.0561
};

static const float Total = 6.2108;

void VS_MAIN(float3 vPos : POSITION, float2 vTex : TEXCOORD0, out float4 voPos : POSITION, out float2 voTex : TEXCOORD0)
{
    voPos = float4(vPos , 1.f);//우리 모두 다 함께 손벽을 짝짝!
    voTex = vTex;
}

float4 PS_MAINX(float2 vUV : TEXCOORD0) : COLOR0
{
	float4	Out=0;

	float2	t = vUV;
	float2	uv = 0;

	float	tu = 1.f / m_TexW;

	for(int i=-6; i<6; ++i)
	{
		uv = t + float2(tu * i, 0);
		Out += Weight[6 + i] * tex2D(g_BlurSam, uv);
	}

	Out /=Total;

	return Out;
}

float4 PS_MAINY(float2 vUV : TEXCOORD0) : COLOR0
{
	float4 Out = 0;

	float2 t = vUV;
	float2 uv = 0;
	
	float tv = 1.f / (m_TexH / 2.f);
	
	for (int i = -6; i < 6; ++i)
	{
		uv = t + float2(0, tv * i);
		Out += Weight[6 + i] * tex2D(g_BlurSam, uv);
	}
	
	Out /= Total;
	
	return Out;
}

technique DefaultTech
{
	//X
	pass Pass0
	{
		ZWriteEnable = false;
		lighting = false;
		VertexShader = compile vs_3_0 VS_MAIN();
		PixelShader = compile ps_3_0 PS_MAINX();
	}
	//Y
	pass Pass1
	{
		ZWriteEnable = false;
		lighting = false;
		VertexShader = compile vs_3_0 VS_MAIN();
		PixelShader = compile ps_3_0 PS_MAINY();
	}
};

자 이제 코드를 살펴볼 텐데요

Blur X부분과 Blur Y부분이 있는데요 말 그대로 X부분으로 블러 처리를 하는것과 Y부분으로 블러처리를 하는 것입니다

 

얼래 이것 말고도 다양한 블러가 있는데요 지금은 이것만 다루고 나중에는 라디안블러나 모션 블러와 같은 것도 다뤄보는 시간을 가져보겠습니다

 

일단 여기서 보시면은 for문을 돌면서 -6번째부터 6까지 돌면서 블러를 하는데요 주변 블러들의 값을 더한 후 그 값을 Total로 나누는 값을 현제 블러값으로 지정을 하는 건데요 그렇게 된다면은 제일 진한 부분이 있고 그 바로 옆에 연한 부분이 있다면은 진한 부분은 조금 연해지는 효과와 연한 부분은 조금 진해지는 효과를 보여줄 수 있습니다.

 

직접 한번 봐보시면 좋을 듯싶습니다

일단 재료가 된 SSAO의 그림입니다.

자 여기 그림을 보시면은 점으로만 이루어져 있는 SSAO에서 뽑아낸 샘플입니다 여기서 이제 가로로 블러 처리를 하겠습니다.

XBlur 결과

초록색은 투명이라고 생각하시면 좋습니다. 영상 쪽에서는 초록색이 투명인데요 그린 스크린이라고도 불리고 있는데 여담으로 이렇다고 합니다.

자 다시 본론으로 들어가서 지금 보시면은 검은 부분들이 좀 연해져서 퍼진 걸 볼 수 있습니다. 자 이번에는 XBlur의 결과물을 가지고 YBlur를 해보겠습니다

 

YBlur

자 이렇게 보시면은 Y블러까지 들어간 Blur가 된 모습을 보시니깐 어떠신가요?

처음에 SSAO에서 나온 그림이 블러 처리돼서 부드럽게 퍼져나간 것을 볼 수 있습니다.

 

게임에서 블러는 여러 방법으로 활용을 하는데요 저처럼 점으로 표현돼서 바로 처리하기 힘든 부분을 조금 부 드럼 게 표현을 해서 사용하려고 블러를 쓰는 경우도 있고 또 블룸이라고 해서 밝은 부분을 추출해내고 그 부분을 번져 보이는 효과를 주기 위해서 추출 후 블러를 통해 번짐 효과를 구현을 하기도 한답니다.

 

이렇듯 게임 내에서 다양하게 활용되는 Blur를 구현해보았는데요 어떠신가요?

Blur는 다양한 종류가 있지만 저는 그중 기본적인 XBlur와 YBlur에 대해서 보여드린 건데요 후에는 다른 Blur들도 직접 보여드리면서 설명드리겠습니다.

 

그럼 오늘은 여기서 마치도록 하겠습니다.

 

[개발/DirectX3D] - DirectX SSAO(Screen Space Ambient Occlusion) Shader 코드 구현