블러, 블룸 효과

 

Blur

이미지를 흐리게 만드는 효과

 

• 모션 블러 : 빠르게 움직이는 오브젝트가 잔상처럼 보이도록 함,
• 가우시안 블러 : 화면의 특정 부분을 부드럽게 초점 효과를 강조함.
• 심도 흐림 : 카메라 초점에서 벗어난 부분을 흐리게 만들어 현실적인 포커스 구현.
•  

가장 기본적인 Blur 및 구현 방식 및 기법

 

가우시안 Blur, 박스 Blur

 

가우시안, 박스, 모션 블러 효과를 만들 때 가장 기본적인 방식이 커널을 이용하는 방식이다. 

 

커널 : 이미지 처리에서 사용되는 작은 매트릭스를 의미한다. 이 커널 행렬의 요소마다 가중치를 둘 수 있다. ( 모든 요소의 합은 1로 설정)

 

기본 구현 방식 : 실제 이미지에서 추출한 픽셀 및 주변 픽셀들과  대응되면 커널의 요소를 곱하여 최종 합산한 값의 평균을 해당 픽셀의 수정 값으로 선정한다.

 

Convolution : 커널을 이미지의 모든 픽셀에 적용을 시키는 과정을 컨볼루션이라고 한다.

 

결국 주변 픽셀 값들과 커널 가중치에 의해서 이미지가 흐려지며 부드러운 효과를 연출 할 수 있다.

 

Box Blur : 모든 커널의 요소 별 가중치가 동일하다.

Gaussian Blur : 커널의 요소 별 가중치를 다르게 한다. 이때 가우시안 분포를 기반으로 계산한다. Box Blur 보다 더 부드러운 결과를 제공한다.

출처 : https://en.wikipedia.org/wiki/Kernel_(image_processing)

Kernel (image processing) - Wikipedia

 

박스 블러

for (int j = 0; j < height; j++)
{
	for (int i = 0; i < width; i++)
	{
    	// 5개의 픽셀 값을 받아올 지역 변수
    	Vec4 Color{ 0.0f,0.0f,0.0f,1.0f };
		for (int si = 0; si < 5; si++)
		{
			Vec4 SideColor = this->GetPixel(i + si - 2, j);
			Color.v[0] += SideColor.v[0];
			Color.v[1] += SideColor.v[1];
			Color.v[2] += SideColor.v[2];
		}		
		pixelsBuffer[i + j * width].v[0] = Color.v[0] * 0.2f;
		pixelsBuffer[i + j * width].v[1] = Color.v[1] * 0.2f;
		pixelsBuffer[i + j * width].v[2] = Color.v[2] * 0.2f;
	}
}

 

가우시안 블러

// 가로 세로 한 번씩 진행 혹은 하나의 커널 매트릭스로 대응되는 픽셀과 계산
// 아래는 가로 기준

for (int j = 0; j < this->height; j++)
{
	for (int i = 0; i < this->width; i++)
	{
		Vec4 Color{ 0.0f,0.0f,0.0f,1.0f };
		for (int n = 0; n < 5; n++)
		{
			Vec4 SideColor = this->GetPixel(i + si - 2, j);
            // 커널의 값을 임의의로 설정하여 대응되는 픽셀과 곱한다.
			Color.v[0] += SideColor.v[0] * kernal[n];
			Color.v[1] += SideColor.v[1] * kernal[n];
			Color.v[2] += SideColor.v[2] * kernal[n];
		}
		
		pixelsBuffer[i + j * this->width].v[0] = Color.v[0];
		pixelsBuffer[i + j * this->width].v[1] = Color.v[1];
		pixelsBuffer[i + j * this->width].v[2] = Color.v[2];
	}
}

 

 

박스 블러	가우시안 블러

 

 

블룸 효과

컴퓨터 그래픽스에서 사용되는 그래픽 효과. 이미지의 밝은 영역의 경계에서 뻗어 나오는 빛을 생성하여 빛이 퍼지는 듯한 효과를 블룸 효과라 한다.

 

구현 방식 

1. 이미지의 모든 픽셀에 대해서 밝은 픽셀은 그냥 두고 어두운 픽셀은 까맣게 만들어버림
특정 기준에 따라 밝은지 어두운지 확인한다.

2. 이제 가우시안 블러를 적용하여 밝은 색만 주변으로 퍼져나가는 느낌을 만들어냄.

 

코드에서 만든다면 원본 픽셀을 복사하고 어두운 픽셀들은 검정색으로 만들어두고나서 가우시안 블러를 적용한다.

다음 복사 해둔 원본 픽셀과 블러가 적용된 픽셀을 더 해 최종 블룸 효과를 나타낸다.

 

 

 

 

블룸

// 특정 색보다 어두우면 전부 검정색 취급한다.
// 보통 사람의 원초 세포를 기준으로 L 값을 구한다.

for (int j = 0; j < height; j++)
{
	for (int i = 0; i < width; i++)
	{
		Vec4& color = this->GetPixel(i, j);
		const float L = color.v[0] + color.v[1]+ color.v[2]

		if (Luminance / 3.f < limit) // limit
		{
			color.v[0] = 0.f;
			color.v[1] = 0.f;
			color.v[2] = 0.f;
		}
	}
}

// 이후에 가우시안 블러 진행 및 원본 픽셀과 + 해주면 블룸 효과!!