본문 바로가기

개발/DirectX3D

DirectX Shader Bloom 코드 구현

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

오늘은 Bloom에 대해서 배워보는 시간을 가져볼까 하는데요

Bloom은 무엇일까? Bloom은 렌더링 되는 부분에서 밝은 부분을 좀 더 밝게 표현하는 기법입니다.

 

이를 통해서 주변의 밝은 부분이 있다면은 그 경계선을 기준으로 어두운 부분으로 번지는 현상을 만들어 낼 수 있습니다.

 

자 직접 봐보시면 이해하기 쉽습니다.

 

첫 번째로 렌더링 된 화면에서 밝은 부분을 추출합니다.

이렇게 밝은 부분을 추출을 하게 된 후 이것을 Blur처리를 하게 되는데요 위에 렌더링에서 블러 처리를 하게 되면은

이런 모양으로 변하게 되고 결과적으로는 이런 모습이 됩니다

 

이와 마찬가지로 다른 렌더링 화면도 준비를 했는데요 직접 봐보시지요 위에 3단계를 진행한 결과입니다.

 

자 그러면 간단하게 보기 위해서 코드를 봐보겠습니다.

 

자 일단 Bloom에서 밝은 부분을 추출하는 코드입니다.

texture g_FinalTex;
sampler g_FinalSam = sampler_state
{
    texture = g_FinalTex;
};

texture g_BlurTex;
sampler g_BlurSam = sampler_state
{
    texture = g_BlurTex;
};

float4 PS_MAIN(float2 vUV : TEXCOORD0) : COLOR
{
    float BrightColor = 0.f;
    float4 FragColor = tex2D(g_FinalSam, vUV);

    float brightness = dot(FragColor.rgb, float3(0.2126f, 0.7152f, 0.0722f));
    if (brightness > 0.99)
        BrightColor = float4(FragColor.rgb, 1.0);

    return BrightColor;
}

technique DefaultTech
{
    pass Pass0
    {
        ZWriteEnable = false;
        lighting = false;
        VertexShader = NULL;
        PixelShader = compile ps_3_0 PS_MAIN();
    }
}

자 별로 어려울 것은 없는 코드인데요

실제로도 보시면은 PS_MAIN에서 밝은 부분을 추출하고 있습니다.

보시면은 brightness > 0.99 조건이 참이 된다면은 Color를 채워주고 있는데요 이렇게 밝은 부분을 추출을 하게 되고

기존에 배우셨던 XBlur, YBlur를 통해서 펴주시고 그것을 마지막 장면에다가 처리를 진행했습니다.

실제로 Blur는 

[개발/DirectX 3 D] - DirectX Blur Shader 코드 구현

 

DirectX Blur Shader 코드 구현

안녕하세요 넬다이입니다. 오늘은 셰이더에서 Blur에 대해서 직접 해볼 생각인데요 Blur는 쉽게 생각해서 흐리게 만들거나 뿌옇게 만드는 작업을 하는 것입니다. 저 같은 경우에는 SSAO를 완료하고

nellfamily.tistory.com

여기에 있으니깐 참고해주시면 감사하겠습니다.

 

이것은 블룸을 적용하는 코드입니다.

texture g_HDRTex;
sampler g_HDRSam = sampler_state
{
    texture = g_HDRTex;
};


texture g_BloomTex;
sampler g_BloomSam = sampler_state
{
    texture = g_BloomTex;
};

texture g_BloomOriTex;
sampler g_BloomOriSam = sampler_state
{
    texture = g_BloomOriTex;
};

float4 PS_MAIN(float2 vUV : TEXCOORD0) : COLOR
{
	float4 vHDRColor = tex2D(g_HDRSam , vUV);
    float4 vBloomColor = tex2D(g_BloomSam, vUV);
    float4 vBloomOriTex = tex2D(g_BloomOriSam, vUV);

    float4 vBloom = pow(pow(abs(vBloomColor), 2.2f) + pow(abs(vBloomOriTex), 2.2f) , 1.f / 2.2f);

    float4 Out = (vHDRColor);
     
    Out = pow(abs(Out), 2.2f);
    vBloom = pow(abs(vBloom), 2.2f);

    Out += vBloom;

    return pow(abs(Out), 1 / 2.2f);
}

technique DefaultTech
{ 
    pass Pass0
    {
		ZWriteEnable = false;
		Lighting = false;

		VertexShader = NULL;
		PixelShader = compile ps_3_0 PS_MAIN();
    }
}

이것또한 쉬운데요 BloomColor는 Bloom에 Blur를 한 후에 텍스쳐를 넣어주시면 되고 BloomOriTex는 Bloom에 Blur처리를 하지 않은 텍스처를 넣어주시면 되며 HDRColor은 적용시킬 장면에 그러니깐 Bloom추출을 했던 텍스처를 넣어주시면 됩니다.

또한 코드중에 2.2f를 곱해주고 나눠주고 하는데 곱을 하여 감마로 올린뒤 연산 후 다시 원상복귀 하는 코드입니다.

 

실제로 블룸은 밝은 부분을 추출하고 넓히고 장면에 적용시켜주고 이 3가지로 이루어져 있기 때문에 어려운 내용은 아닌데요 실제로 모르고 하게 되면은 어려운 게 또 셰이더라고 생각합니다. 저도 이것저것 찾아다니면서 배웠던 터라 어렵게 공부했지만 여러분들은 아니었으면 하네요.

 

그럼 이만 넬다이 물러가며 모르시는 거 있으시면 꼭 물어봐주세요.

[개발/DirectX3D] - DirectX Blur Shader 코드 구현

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