Bloom

Bloom 효과에 대해 알아보자.

 

Bloom 은 light bloom 혹은 glow라고도 한다. 

Bloom 효과

위 그림과 같이 밝은 빛에 뿌연 효과를 주는 컴퓨터 그래픽 효과이다.

 

주로 hdr과 함께 사용되며, 비디오 게임등에 많이 사용되었다.(2005 ~ 2010에 출시한 게임들에서 많이 사용됨)

 

그럼 어떤 과정으로 Bloom효과를 구현할 수 있을까?

1. 효과를 적용할 원본 이미지를 백업.
2. 특정 밝기(relative luminance : 상대 휘도) 이하의 픽셀들을 전부 RGB(0, 0, 0)로 바꿔줌.
3. 바꿔준 이미지에 가우시안 블러를 적용함.
4. 원본 이미지와 변경된 이미지를 합침.

가우시안 블러에 대한 글은 이곳에서 확인하자.

https://mumu3997.tistory.com/12

가우시안 블러 (Separable Gaussian blur)

Bloom 적용 전

위 사진은 비교를 위한 원본 이미지이다.

 

이제 특정 밝기 이하의 픽셀들을 모두 검정으로 바꿔주자.

// 특정 밝기, 블러 반복 횟수, 강도
void Image::Bloom(const float& th, const int& numRepeat, const float& weight)
{
	const std::vector<Vec4> pixelsBackup = this->pixels;// 메모리 내용물까지 모두 복사

	/* Brightness가 th 보다 작은 픽셀들을 모두 검은색으로 바꾸기
	* Relative Luminance Y = 0.2126*R + 0.7152*G + 0.0722*B
	*/
	for (int j = 0; j < height; j ++)
		for (int i = 0; i < width; i++)
		{
			float Relative_Luminance_Y = 0.2126 * this->GetPixel(i, j).v[0] + 0.7152 * this->GetPixel(i, j).v[1] + 0.0722 * this->GetPixel(i, j).v[2];
			if (Relative_Luminance_Y < th) {
				this->GetPixel(i, j).v[0] = 0.0f; 
				this->GetPixel(i, j).v[1] = 0.0f;
				this->GetPixel(i, j).v[2] = 0.0f;
			}
		}
  }

 

특정 밝기 이하의 픽셀들 전부 검정색으로 변환

 

// 특정 밝기, 블러 반복 횟수, 강도
void Image::Bloom(const float& th, const int& numRepeat, const float& weight)
{
	const std::vector<Vec4> pixelsBackup = this->pixels;// 메모리 내용물까지 모두 복사

	/* Brightness가 th 보다 작은 픽셀들을 모두 검은색으로 바꾸기
	* Relative Luminance Y = 0.2126*R + 0.7152*G + 0.0722*B
	*/
	for (int j = 0; j < height; j ++)
		for (int i = 0; i < width; i++)
		{
			float Relative_Luminance_Y = 0.2126 * this->GetPixel(i, j).v[0] + 0.7152 * this->GetPixel(i, j).v[1] + 0.0722 * this->GetPixel(i, j).v[2];
			if (Relative_Luminance_Y < th) {
				this->GetPixel(i, j).v[0] = 0.0f; 
				this->GetPixel(i, j).v[1] = 0.0f;
				this->GetPixel(i, j).v[2] = 0.0f;
			}
		}
    // 밝은 부분만 Blur 
	for (int i = 0; i < numRepeat; i++)
	{
		this->GaussianBlur5();
	}
  }

 

특정 밝기 이상인 픽셀만 블러처리

 

이제 원본 이미지와 합쳐주면된다.

// 특정 밝기, 블러 반복 횟수, 강도
void Image::Bloom(const float& th, const int& numRepeat, const float& weight)
{
	const std::vector<Vec4> pixelsBackup = this->pixels;// 메모리 내용물까지 모두 복사

	/* Brightness가 th 보다 작은 픽셀들을 모두 검은색으로 바꾸기
	* Relative Luminance Y = 0.2126*R + 0.7152*G + 0.0722*B
	*/
	for (int j = 0; j < height; j ++)
		for (int i = 0; i < width; i++)
		{
			float Relative_Luminance_Y = 0.2126 * this->GetPixel(i, j).v[0] + 0.7152 * this->GetPixel(i, j).v[1] + 0.0722 * this->GetPixel(i, j).v[2];
			if (Relative_Luminance_Y < th) {
				this->GetPixel(i, j).v[0] = 0.0f; 
				this->GetPixel(i, j).v[1] = 0.0f;
				this->GetPixel(i, j).v[2] = 0.0f;
			}
		}
    // 밝은 부분만 Blur 
	for (int i = 0; i < numRepeat; i++)
	{
		this->GaussianBlur5();
	}
    
    // 밝은 부분만 Blur한 것과 원본 이미지를 더하기 (밝은 부분 Blur에 weight 곱해서 강도 조절)
	for (int i = 0; i < pixelsBackup.size(); i++)
	{
		this->pixels[i].v[0] = std::clamp(pixels[i].v[0] * weight + pixelsBackup[i].v[0], 0.0f, 1.0f);
		this->pixels[i].v[1] = std::clamp(pixels[i].v[1] * weight + pixelsBackup[i].v[1], 0.0f, 1.0f);
		this->pixels[i].v[2] = std::clamp(pixels[i].v[2] * weight + pixelsBackup[i].v[2], 0.0f, 1.0f);
	}
  }

 

Bloom적용 후

 

 

가우시안 블러를 이용해 또 다른 효과를 만들어내는것을 알게됐다.

그래픽스가 어렵기는 하지만 그만큼 결과물을 보는게 재밌는것같다 ㅎㅎ

 

 

참고

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

LearnOpenGL - Bloom

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

Bloom (shader effect) - Wikipedia

https://jmhongus2019.wixsite.com/mysite

Home | Mysite