FXAA (Fast Approximate Anti-Aliasing)

안녕하세요. 랩하는좀비, 줄여서 랩좀비군입니다.
이제 올해로 개발 5년차에 들어섰네요. 하지만 그동안 발매한 게임은 없고(...) 회사에서 열심히 이것 저것하면서 좋은날을 위한 대비를 하고 있습니다. 언젠가는 클베도 하고 오베도 하면서 삶의 보람을 느끼...ㄹ지도 모르겠습니다.

아무튼, 앞으로의 제 글은 알고보면 쉬운, 하지만 이제 게임프로그래밍에 들어선 소년, 소녀들에게는 조금은 까다로운 것들에 대해서 설명해 볼까 합니다. 수준 높은 이야기는 다른 분들이 열심히 해 주실 것이기 때문에 저처럼 다른 분들의 글이 도대체 뭐하는 소리야? 라는 생각이 드시는 분은 저만 따라오세요. 그러면 님도 나와 같은 초보. ㅋㅋㅋ

실없는 소리는 여기까지.
오늘은 FXAA를 엔진에 적용하는 법에 대해서 알아 볼까 합니다. 어떤 단어의 약자인지는 제목을 읽으면 알기 때문에 생략. 대충 번역하면 '속도가 짱 빠른 안티얼라이징의 근사' 정도가 되겠습니다. 뭐 쉽게 말해서 안티얼라이징을 하고 싶은데 그냥 속도 빠르고 나름 성능이 나오는 게 뭐다? FXAA 입니다. MLAA, DLAA, SMAA 등등 여러 가지 AA등이 있지만 오늘은 누구나 쉽게, 심지어는 유저들조차도 쉽게 적용할 수 있는 FXAA를 게임에 적용시키는 방법에 대해서 설명해 볼까 합니다. 다음에 여유가 되면 SMAA를 적용해 보도록 하지요.

우선 알아야 할 것이 FXAA는 Screen공간에서 처리되는 PostEffect의 일종입니다. 포토필터나 칼라그레이딩 등등과 똑같은, 즉, 렌더링 파이프라인과는 독립된 형태의 후처리 효과라는 것이지요.  다른 것들과는 완전 분리되어 있는 소스이기 때문에 엔진에 적용하기도 쉽습니다. 그래서인지 몰라도 FXAA는 nVidia사에서 친히 Shader코드를 업데이트 시켜 주고 있습니다. - 좀 더 찾아보니 nVidia 그래픽카드에 더 잘 최적화되는 형태로 만들고 있다고 하더군요.

자, 이제 스텝을 밟아가면서 적용해 봅시다.

1. 소스를 다운 받는다.
 

FXAA소스 코드 받으러 가기

압축된 파일도 아니고 그냥 코드 파일(Fxaa3_9.h) 1개입니다. .확장자가 .h로 되어 있지만 안에 들어 있는 내용은 Shader코드입니다. 확장자를 변경하고 싶다면 뭐 아무렇게나 변경하셔도 됩니다.

2. FXAA를 include할 코드를 만든다.

Fxaa3_9.h를 인클루드 할 소스 코드를 작성합니다. Fxaa3_9 코드 안에 바로 technique를 만들어서 작성해도 되지만, 매 번 업데이트될 수 있는 코드이므로 그것은 좋지 않은 선택입니다. 파일을 하나 만들어서 include하세요.

#ifndef __FXAA_FILTER_FX__
#define __FXAA_FILTER_FX__

#include "Fxaa3_9.h"

3. define 셋팅. 
include했으니 이제 PC에서 사용하기 위한 설정을 해 봅시다.
Fxaa3_9.h에는 XBOX와 PS3용 소스까지 모두 들어 있거든요.
다음과 같이 define을 해 주면 됩니다.

#ifndef __FXAA_FILTER_FX__
#define __FXAA_FILTER_FX__

#define FXAA_PC 1
#define FXAA_HLSL_3 1

#include "Fxaa3_9.h"

FXAA_PC  : PC용으로 사용할 꺼임.
FXAA_HLSL_3 : shader 3.0모델을 사용할 꺼임.

DirectX10이나 11을 사용하시는 분이라면 FXAA_HLSL_4와  FXAA_HLSL_5도 가능합니다. 입맛에 맛게 설정해 주세요.

4. 함수 호출하기.
그렇다면 이제 함수를 호출해 주면 되겠네요. 호출하는 인자는 다음과 같습니다.

float4 PS_FxAAFilter(in float2 UV : TEXCOORD0) : COLOR
{
	float4 disableParm = float4(0.0f, 0.0f, 0.0f, 0.0f);
	return FxaaPixelShader(UV,				//픽셀의 UV값.
						   disableParm, 	//사용하지 않습니다. 아무 값이나 넣으세요.
						   targetTex, 		//FXAA를 적용할 Texture
						   g_texelSize, 	//텍셀의 크기.xy, x에는 1.0f/pixelWidth, y에는 1.0/pixelHeight
						   disableParm);	//사용하지 않습니다.
}

5. Texture 처리
끝난 것 같지만 끝이 아닙니다. FXAA를 처리하기 위해서는 적용할 Texture의 Alpha값에 해당 픽셀의 Luminance를 저장해 줘야 합니다.  Luminance를 어떻게 구하냐고요? 표준이 있습니다. RGB의 각각의 값에 float3(0.299, 0.587, 0.114)요 값을 곱해서 더해 주면됩니다. 이 변수는 HDR할 때 등등 자주 나오는 값이니 익숙해지면 건강에 좋습니다.

//픽셀의 밝기를 계산해 주어야 FXAA가 제대로 됨.
texColor.a = dot(texColor.rgb, float3(0.299, 0.587, 0.114));

또 중요한 게 한 개 있습니다.
바로 감마 코렉션인데요. 감마 코렉션에 대해서는 이제 해묵은 주제니 넘어가고 -요청이 있다면 한 번 다루겠습니다만...없을 듯. FXAA를 처리하는 곳에서 픽셀의 RGB는 Linear한 공간에 있어야 하지만 Luminance가 저장된 Alpha값은 감마 공간에 있어야 합니다. 이 부분만 잘 하시면 이제 끝!

 어떄요? 참 쉽죠? 이건 뭐 초딩도 10분이면 할 수 있는...
그럼 다음 시간에 만나요.