일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- gitea
- legacy lightmap
- 언리얼 한글
- 내장 그래픽
- 언리얼5 화면 움직임
- 랜더러
- 유니티
- 애프터이펙트 aftereffect ram preview no sound 소리 안날때
- 언리얼5
- 와콤 feel 드라이버
- 노트북 아답터
- 언리얼 팁
- wacom feel
- Unity2018
- unity4
- mx150
- msi gf63
- 3dsmax
- Unreal5
- 언리얼 메뉴 한글
- 언리얼 뷰포트 움직임
- unity5
- legacy lightmapped
- shader
- 노트북 그래픽 카드
- 언리얼 pan
- 3ds max #spring #스프링
- gtx1050
- 요가북
- 로스트 아크
- Today
- Total
애니메이터
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으로 나눈 색상의 값을 그레이 색상으로 출력했습니다. ^^;
팔레트의 조작에 대해서는 가장 대표적인 게임이 디아블로나~ 스타크래프트를 보셔서 잘 이해가 될듯 합니다.
팔레트의 조작은 적은용량과 빠른 속도를 구현하기 위해서 쓰고 있습니다. 요즘은 모바일쪽에서 많이들 쓰는것 같습니다. ^^
글구 블렌딩은 효과는 계산이 무지 많아지기 때문에~ 대체적으로 검정색으로 효과를 냅니다. 일반적으로 잘 먹고여~ ^^
그럼 멋진 겜 만드시기 바랍니다. ^