[Graphics] Bloom (shader effect)

 

 

 

---

• 이번에는 빛이 퍼지는 효과를 나타내주는 Bloom 효과를 구현해보려고 합니다.
• 다음 이미지는 일반 이미지와 Bloom 효과를 적용한 이미지를 비교해주는 이미지입니다.

 

(좌) Bloom 적용 전 (우) Bloom 적용 후

 

• 이미지에서 볼 수 있듯이, 빛이 주변으로 퍼져서 뽀샤시한 느낌을 주는 것을 알 수 있습니다.
• 주로 HDR과 함께 사용되는 효과입니다.
• Bloom 효과를 구현하기 위해서는 다음 4단계를 거칩니다.

 

1. 원본 이미지를 백업한다. 
2. 특정 밝기(brightness) 이하의 픽셀들은 전부 0.0f의 검은색으로 처리한다.
3. Gaussian Blur 효과를 적용한다.
4. 원본 이미지와 2, 3번이 적용된 이미지를 합치고 출력한다. 
( 2, 3번이 적용된 이미지에 특정 weight 값( weight >= 1 )을 곱해주면 빛의 밝기를 조절할 수 있다. )

 

1. 원본 이미지를 백업한다. 

원본 이미지

const std::vector<Vec4> pixelsBackup = this->pixels;// 메모리 내용물까지 모두 복사

 

 

2. 특정 밝기(brightness) 이하의 픽셀들은 전부 0.0f의 검은색으로 처리한다.

특정 밝기를 제외한 픽셀을 모두 0.0f(블랙)으로 처리

float r = 0.0f, g = 0.0f, b = 0.0f;
float relativeLuminace = 0.0f;
for ( int y = 0; y < height; ++y )
{
    for ( int x = 0; x < width; ++x )
    {
        Vec4& pixel = this->GetPixel( x, y );
        r = pixel.v[0] * 0.2126f;
        g = pixel.v[1] * 0.7152f;
        b = pixel.v[2] * 0.0722f;
        relativeLuminace = r + g + b;
        if ( relativeLuminace <= th )
            pixel = Vec4{ 0.0f, 0.0f, 0.0f, 1.0f };
    }
}

 

• Brightness의 relative luminance Y를 구하려면 { 0.2126f, 0.7152f, 0.0722f }를 대상 픽셀의 RGB에 합성곱하면 된다.

 

 

3. Gaussian Blur 효과를 적용한다.

Gaussian Blur 적용

for (int i = 0; i < numRepeat; i++)
{
    GaussianBlur5();
}

 

• Gaussian Blur 구현 방법은 이전 글을 참고

 

 

4. 원본 이미지와 2, 3번이 적용된 이미지를 합치고 출력한다. 

Bloom의 결과 이미지

for (int i = 0; i < pixelsBackup.size(); i++)
{
    pixels[i].v[0] = std::clamp( pixelsBackup[i].v[0] + ( pixels[i].v[0] * weight ), 0.0f, 1.0f );
    pixels[i].v[1] = std::clamp( pixelsBackup[i].v[1] + ( pixels[i].v[1] * weight ), 0.0f, 1.0f );
    pixels[i].v[2] = std::clamp( pixelsBackup[i].v[2] + ( pixels[i].v[2] * weight ), 0.0f, 1.0f );
}

 

---

Reference :

https://en.wikipedia.org/wiki/Bloom_(shader_effect)

https://jmhongus2019.wixsite.com/mysite

https://learnopengl.com/Advanced-Lighting/Bloom

https://en.wikipedia.org/wiki/Relative_luminance