Blending & Alpha Blending

Blending and Alpha Blending

 

1. Blending Equation

어떻게 두개의 픽셀 컬러 값을 결합시키라? 그것은 매우 간단한 공식을 이용한다.

 

Final color = (src pixel color × src pixel blend factor)  

Blending operator (＋,－,×)

   (dest pixel color × dest pixel blend factor)

그래픽에서는 새로 그려질 픽셀은 SRC pixel 이고, Backbuffer에 들어가있는것은 DEST(destination) pixel 이다.

Blending operation 은 더하기, 빼기 와 같은 기본적인 수학이다.
 Blending Equation에 대해서 알아보기 전에 투명도에 대해서 간단하게 살펴 보자. 모두 알다시피 color는 4개의 구성요소로 이루어져 있다. Red, Green, Blue, Alpha. 간단히 - R, G, B, A. 이중에서 Alpha 는 무엇인가? 그것은 색상이 얼마나 투명하거나 불투명할지를 결정하고 1 일경우 완전 불투명, 0 일 경우 완전 투명하다. 그렇다면 왜 0~1 값을 가지나?
이미지의 각 픽셀의 컬러값을 구할때 픽셀의 컬러값에 알파채널의 값을 곱하여 표현한다. 그래서 알파값이 1 이면 픽셀의 컬러가 변하지 않고 그대로 출력되고 알파채널이 그것보다 낮으면 컬러가 원래의 색보다 좀 더 우중충하게 나올것이다.
 
자~ Blending Equation 으로 돌아와서, DirectX SDK 의 Tutorials 를 보면

이 경우에 두개의 텍스쳐를 블렌딩 하고 있다. 각 텍스쳐의 새로운 필셀의 알파값을 곱하고 Dest pixel color 에 더하고 있다.

 

Direct3D Blending

 

위의 순서도에서는 Source1 이 Source Pixel Blending Factor 이고 Source2는 Destination Pixel Blending Factor 이다. Source Pixel(SRC) 은 언제나 Pixel Shader의 결과로서 나오는 부분이고 Destination Pixel(Dest) 은 현재 Render Target이 가지고 있는 값이다. 기억할것!!! - source1이든 source2 이든 Blending  데이터 소스인 것이다.

 

 이 블렌딩 공식을 code로 어떻게 정의할 것인가? Direct3D 는 Blend state structure를 내장하고 있다. : ID3D10BlendState

 이 Blend state를 만들기 위해 D3D10_BLEND_DESC structure를 넣어줘야 한다. 아래 내용 참고

 

struct D3D10_BLEND_DESC
{
    BOOL AlphaToCoverageEnable;
    BOOL BlendEnable[8];
    D3D10_BLEND SrcBlend;
    D3D10_BLEND DestBlend;
    D3D10_BLEND_OP BlendOp;
    D3D10_BLEND SrcBlendAlpha;
    D3D10_BLEND DestBlendAlpha;
    D3D10_BLEND_OP BlendOpAlpha;
    UINT8 RenderTargetWriteMask[8];

SrcBlend - 이 블랜딩 옵션은 source의 블랜딩 요소를 정의하고 부차적인 pre-blend를 포함한다.

DestBlend - 이 블랜딩 옵션은 destination의 블랜딩 요소를 정의, 부차작 pre-blend를 포함한다.

SrcBlendAlpha - 위 설명과 같으나 _COLOR는 정의되지 않는다.

DestBlendAlpha - 위 설명과 같으나 _COLOR는 정의되지 않는다.

 

Alpha Blending

Alpha Blending 이라는 것은 두가지 색과 두가지 투명도의 블랜딩이다. 계산식은 다음과 같다.

 

Final Color = src color × src alpha + dest color × (1 - src alpha)

 

표로 잠깐 나타내 보면

 

 

src color	src alpha	dest color	1-src alpha	Final color
0	0	1	1	1
0.25	1	1	0	0.25
0.5	0	1	1	1
0.75	0.5	1	0.5	0.875
1	0	1	1
1	1	0.5	0	1

 

 

그림으로 보자면

 

 

 

배경으로 쓰이는 여성의 이미지와 알파 블렌딩에 쓰일 무늬 이미지를 단순하게 겹쳐놓았다.

무늬 이미지는 다음과 같은 alpha 채널을 가지고 있다.

 

 

 

이 이미지를 Alpha Blending  공식으로 적용해주면 다음과 같다.

 

 

이상으로 Alpha Blending을 살펴 보았다.

 

 

---

 

 

게임의 특수한 비주얼씬을 연출할 때 사용되는 것으로 이펙트(Effect)라고 한다.
- 2D 게임에 쓰는 그래픽 이펙트는 하드웨어나 컴퍼넌트가 지원해 주지 않으므로 프로그래머가 직접 만들어야 한다.

3.1 반투명
2D 게임 그래픽에서 물체가 겹쳤을 때 마치 두 이미지가 섞여 보이는데 이것을 반투명이라고 한다.

==> 걍 50% 알파블렌딩이라고 생각하시면 됩니다. ^^;

구현 계산식은 아래와 같다.
R = 뒷 이미지 R / 2 + 앞 이미지 R / 2
G = 뒷 이미지 G / 2 + 앞 이미지 G / 2
B = 뒷 이미지 B / 2 + 앞 이미지 B / 2
이 방법은 계산이 쉽고 쉬운 계산식에 비해서 효과가 좋다
- 예를 들어 색상 값인 RGB( 0, 0, 0)인 검은 배경에 RGB(255, 255, 255)의 흰점이 만난다면 반투명색은 RGB(122, 122, 122)인 회색이 된다는 원리이다.


3.2 광원 효과
두 이미지가 만나면 빛이 비추는 듯한 느낌을 주는 효과를 광원 효과라고 한다. 계산 원리는 반투명과 비슷하지만 계산식은 아래와 같다
R = 뒷 이미지 R + 앞 이미지 R
G = 뒷 이미지 G + 앞 이미지 G
B = 뒷 이미지 B + 앞 이미지 B
이렇게 하면 두 이미지가 겹치면서 밝아져 버린다. 빛의 원리와 같다. 이식에서 RGB각 요소가 255를 넘을 수 없기 때문에 계산 후 RGB값이 255를 넘게 되면

255로 값을 고정시켜야 한다.


알파블렌딩 (alpha-blending)
2 반투명과 비슷한 효과이다. 다른 점은 알파값을 이용하여 투명한 명한 정도의 농도를 조절할 수 있다는 점에서 그냥 반투명과는 다르다. 즉 알파블렌딩을 이용하면 완전한 색의 캐릭터에서 점차적으로 투명해지는 캐릭터를 만들 수 있고 거의 완전한 투명에 가까운 캐릭터도 만들어 낼 수 있다. 알파블렌딩의 계산식은 다음과 같다.

R = 뒷 이미지 R * (100 - Alpha) / 100 + 앞 이미지 R * Alpha / 100
G = 뒷 이미지 G * (100 - Alpha) / 100 + 앞 이미지 G * Alpha / 100
B = 뒷 이미지 B * (100 - Alpha) / 100 + 앞 이미지 B * Alpha / 100

- Alpha값은 투명화의 정도를 의미한다.


3.4. 팔레트 조작
다른 용어로는 컬러 인덱스 조절이라고도 한다.
팔레트의 주 기능은 256 게임을 만들어도 6만 가지 색을 쓰는 게임처럼 만들 수 있단 것이다.
이미 출력된 색을 바꿔주는 효과를 팔레트 애니메이션이라고 한다.
- 이미 출력되고 있는 색이 붉은 색이라면 붉은 색을 지정한 인덱스 값을 알맞게 변화해서 프레임의 변화 없이 바로 애니메이션을 만들어 낼 수 있는 그래픽 효과이다.

위 설명이 워낙 잘 나와 있어서~

두개의 이미지를 찍을때~ 예를 들어 아이템창이 있을때~ 마우스를 가져다 놓으면~

뒤에 아이템이 비취면서 관련된 설명이 나오져? 많이들 사용하는것 같습니다. ^^

덧붙쳐서~ 구현된 이펙트 효과중~ 그레이는

R G B의 색상에 대해서~ R*20 G*50 B*30색상을 적당히 섞어서 100으로 나눈 색상의 값을 그레이 색상으로 출력했습니다. ^^;

팔레트의 조작에 대해서는 가장 대표적인 게임이 디아블로나~ 스타크래프트를 보셔서 잘 이해가 될듯 합니다.

팔레트의 조작은 적은용량과 빠른 속도를 구현하기 위해서 쓰고 있습니다. 요즘은 모바일쪽에서 많이들 쓰는것 같습니다. ^^

글구 블렌딩은 효과는 계산이 무지 많아지기 때문에~ 대체적으로 검정색으로 효과를 냅니다. 일반적으로 잘 먹고여~ ^^

그럼 멋진 겜 만드시기 바랍니다. ^