안티에일리어싱

안티에일리어싱은 화면에 그린 선과 도형의 테두리가 톱니처럼 깨져 보이는 것을 줄입니다. 칸 하나를 칠할지 말지 둘 중 하나로 정하지 않습니다. 도형이 그 칸을 덮은 만큼 중간 색을 칠해 테두리를 부드럽게 보이게 합니다. 소리 같은 신호를 숫자로 바꾸기 전에 거는 필터도 같은 이름으로 부릅니다.

쉽고 빠른 이해

안티에일리어싱은 선과 도형의 테두리에 생기는 톱니를 줄입니다. 흰 바탕에 비스듬한 검은 선을 그으면 칸의 경계를 따라 계단이 보입니다. 계단 모서리 칸을 회색으로 칠하면 눈에는 매끄러운 선으로 보입니다.

화면은 네모난 칸이 늘어선 격자입니다. 칸 하나에는 색이 하나만 들어갑니다. 칸마다 선 안인지 밖인지를 한 번만 물으면 칸은 검정 아니면 흰색이 됩니다. 그래서 계단이 생깁니다. 화면이 움직이면 그 계단이 떨려 더 눈에 띕니다.

어떻게 도나:

칸 하나 안을 여러 곳에서 들여다봅니다
선이 그중 몇 곳을 덮었는지 셉니다
덮은 비율만큼 선 색과 바탕색을 섞어 칠합니다

여러 곳을 들여다보는 대신, 다 그린 그림에서 색이 급하게 바뀌는 곳을 찾아 흐리게 만드는 방법도 있습니다.

대가는 비용입니다. 들여다보는 곳을 늘리면 계산이나 메모리가 그만큼 늡니다. 싸게 가려고 다 그린 그림을 흐리면 글자처럼 가는 무늬까지 함께 흐려집니다.

칸 하나하나가 그림인 픽셀 아트처럼 중간 색이 끼면 안 되는 그림에서는 안티에일리어싱을 끕니다.

상세

이 절은 톱니가 왜 생기는지부터 봅니다. 그다음 톱니를 줄이는 방법들이 그림이 만들어지는 흐름의 어디에 손을 대는지, 각 방법이 무엇을 치르는지를 차례로 봅니다. 흰 바탕 위에 그은 비스듬한 검은 선 하나를 예로 들어 샘플을 늘리는 방법까지 따라갑니다.

타일로 흰 벽에 비스듬한 검은 줄을 붙인다고 합시다. 타일마다 검정이나 흰색 하나만 고를 수 있으면 줄의 가장자리가 계단처럼 각져 보입니다. 가장자리에 걸친 타일만 회색으로 바꾸면 조금 떨어져서 볼 때 줄이 한결 매끄럽게 보입니다.

안티에일리어싱은 화면에서 이 회색 타일을 고르는 일을 합니다. 도형의 테두리에 걸친 칸을 도형 색과 바탕색 사이의 중간 색으로 칠합니다. 그 중간 색을 어떻게 정하느냐에 따라 방법이 여럿으로 갈립니다.

한 칸에 한 색만 들어가는 화면

화면은 작은 칸이 격자로 늘어선 것입니다. 그 칸 하나가 픽셀입니다. 픽셀 하나는 한 번에 색 하나만 냅니다.

선이나 삼각형을 그리려면 어느 픽셀이 그 도형 안에 드는지부터 골라야 합니다. 이 고르는 절차가 래스터화입니다. 기본 래스터화는 픽셀마다 한가운데 한 점만 봅니다. 그 점이 도형 안이면 픽셀을 칠하고 밖이면 비워 둡니다.

이렇게 모양을 알아보려고 찍어 보는 점을 샘플이라고 부릅니다. 이어져 있는 대상에서 띄엄띄엄 값을 집어 오는 일을 통틀어 샘플링이라고 합니다. 화면에 도형을 그리는 일도 매끄러운 모양을 픽셀 수만큼의 샘플로 집어 오는 샘플링입니다.

한 점만 볼 때 생기는 계단

샘플이 하나뿐이면 픽셀은 전부 칠해지거나 전부 비워집니다. 선이 픽셀 한가운데를 조금만 비껴가도 결과가 뒤집힙니다. 그래서 비스듬한 선을 따라 칸이 들쭉날쭉 칠해집니다.

이 톱니 모양을 계단 현상이라고 부릅니다. 흰 바탕에 검은 선이면 테두리 픽셀은 검정 아니면 흰색입니다. 그 사이 단계가 없어서 계단이 또렷하게 드러납니다.

움직이는 화면은 그림을 1초에 여러 장씩 새로 그립니다. 그 한 장을 프레임이라고 부릅니다. 선이 프레임마다 조금씩 움직이면 테두리 픽셀이 칠해졌다 비워졌다를 되풀이합니다. 멈춘 그림에서는 톱니였던 것이 움직이는 화면에서는 테두리를 따라 떨리는 모습이 됩니다.

에일리어싱이라는 이름

매끄러운 모양을 성긴 샘플로만 볼 때 생기는 왜곡을 통틀어 에일리어싱이라고 부릅니다. 계단 현상은 그 한 모습입니다. 안티에일리어싱은 이 에일리어싱을 누그러뜨리는 기법들을 통틀어 부르는 이름입니다.

에일리어스(alias)는 영어로 「다른 이름」이라는 뜻입니다. 샘플 간격보다 촘촘한 무늬를 성기게 찍으면, 찍힌 값들이 원래보다 훨씬 느슨한 다른 무늬처럼 보입니다. 촘촘한 무늬가 느슨한 무늬의 이름을 빌려 나타나는 셈이라 이런 이름이 붙었습니다.

에일리어싱이 화면에 나타나는 모습은 계단 말고도 여럿입니다. 아래 표는 흔히 보는 넷을 모은 것입니다.

모습	어디서 보이나	왜 생기나
계단 현상	도형의 비스듬한 테두리	테두리 칸이 칠함과 비움 둘 중 하나로만 정해진다
테두리 떨림	움직이는 물체의 테두리	프레임마다 테두리 칸이 칠해졌다 비워졌다 한다
모아레	멀리 보이는 줄무늬와 격자무늬	무늬 간격이 픽셀보다 촘촘해 원래 없던 물결이 생긴다
끊기는 가는 선	픽셀보다 가는 전선과 머리카락	선이 샘플 사이로 빠져 군데군데 사라진다

넷의 뿌리는 같습니다. 샘플이 모양을 따라잡지 못할 만큼 성긴 것입니다. 모아레는 벽돌 벽이나 줄무늬 셔츠처럼 규칙적인 무늬에서 특히 잘 보입니다.

샘플을 늘려도 남는 계단

성긴 샘플이 문제라면 샘플을 늘리면 됩니다. 한 번 오르내리는 무늬를 제대로 담으려면 그 한 주기 안에 샘플이 둘보다 많이 들어가야 합니다. 이 조건을 나이퀴스트 정리라고 부릅니다.

도형의 테두리는 이 조건을 끝내 못 채웁니다. 테두리에서는 색이 폭 없이 한순간에 바뀝니다. 이렇게 급한 변화는 아주 촘촘하게 오르내리는 무늬를 담은 것과 같습니다. 그 무늬는 샘플 간격을 아무리 좁혀도 그 간격보다 촘촘합니다.

그래서 샘플을 늘리면 에일리어싱이 줄어들 뿐 사라지지는 않습니다. 안티에일리어싱은 톱니를 없애지 않습니다. 눈이 알아채지 못할 만큼 계단을 흐리게 합니다.

방법이 손대는 단계

그림 한 장은 세 단계를 거쳐 나옵니다. 먼저 그릴 도형과 그 안쪽에 입힌 무늬가 있습니다. 무늬는 벽돌 벽 그림처럼 물체 표면에 입힌 그림, 곧 텍스처입니다. 그것을 샘플로 찍어 픽셀 색을 정하면 마지막에 다 그린 이미지가 남습니다.

안티에일리어싱 방법은 이 흐름의 어디에 손을 대느냐로 넷으로 갈립니다. 아래 그림에서 점선이 가리키는 곳이 각 방법이 손대는 단계입니다.

flowchart TD
    P["찍기 전에 무디게 한다"] -.-> A
    A["도형과 무늬"] --> B["샘플을 찍어 픽셀 색을 정한다"]
    S["샘플을 늘린다"] -.-> B
    T["지난 프레임의 샘플을 빌린다"] -.-> B
    B --> C["다 그린 이미지"]
    F["다 그린 뒤 경계를 흐린다"] -.-> C

둘은 샘플을 찍는 단계에 붙습니다. 나머지 둘은 하나씩 그 앞과 뒤에 붙습니다. 뒤 단계에 손대는 방법일수록 앞 단계에서 잃은 것을 되찾지 못합니다. 샘플 사이로 빠진 무늬는 다 그린 이미지에 이미 없기 때문입니다.

네 방법이 무엇을 고치고 무엇을 치르는지는 아래와 같습니다.

방법	고치는 것	대가
샘플을 늘린다	도형 테두리의 계단	계산이나 메모리가 샘플 수만큼 는다
찍기 전에 무디게 한다	도형 안쪽 무늬의 모아레와 떨림	먼 무늬가 흐릿해진다
다 그린 뒤 경계를 흐린다	이미지에 보이는 경계 전부	가는 무늬와 글자까지 흐려진다
지난 프레임의 샘플을 빌린다	테두리의 계단과 떨림	빠르게 움직이는 물체 뒤에 잔상이 남는다

아래 네 소절이 방법을 하나씩 짚습니다.

샘플을 늘리는 방법

픽셀 안에 샘플을 여럿 두고 도형이 그중 몇 개를 덮는지 셉니다. 샘플 넷 중 셋을 덮었다면 그 픽셀을 도형 색 4분의 3과 바탕색 4분의 1로 섞습니다. 픽셀이 칠함과 비움 두 값 대신 중간 값을 갖게 됩니다.

아래는 흰 바탕 위 검은 선이 걸친 픽셀 하나의 색을 셈한 것입니다. 밝기는 0 이 검정, 1 이 흰색인 수로 둡니다.

Python

n = 4                # 픽셀 안 샘플 수
hit = 3              # 선이 덮은 샘플 수
cov = hit / n        # 0.75
line, bg = 0.0, 1.0  # 검정 · 흰색
px = line*cov + bg*(1-cov)  # 0.25

오른쪽 주석은 그 줄을 계산한 결과입니다. 결과 0.25 는 검정에 가까운 짙은 회색입니다. 선이 덮은 샘플이 적을수록 이 값은 흰색 쪽으로 옮겨 갑니다. 테두리 픽셀들이 이렇게 단계가 다른 회색을 띠면서 계단이 흐려집니다.

가장 단순한 방법은 화면을 몇 배 크기로 그린 뒤 원래 크기로 줄이는 것입니다. 가로세로 두 배로 그리면 크게 그린 그림의 픽셀 넷이 원래 픽셀 하나 안의 샘플 넷이 됩니다. 줄일 때 그 넷을 평균 내 원래 픽셀의 색으로 삼습니다. 이 방식이 슈퍼샘플링이고, 테두리와 안쪽 무늬를 가리지 않고 고칩니다.

대가는 색 계산에서 나옵니다. 위 코드에서는 선 색을 0.0 으로 못박았지만, 실제 픽셀 색은 프래그먼트 셰이더라는 프로그램이 픽셀마다 따로 계산합니다. 무늬에서 그 자리의 색을 읽어 오는 일도 이 계산에 들어갑니다. 슈퍼샘플링에서는 이 프로그램이 샘플 수만큼 더 돕니다.

멀티샘플링은 이 계산량을 줄인 방식입니다. 도형이 어느 샘플을 덮었는지는 샘플마다 봅니다. 색 계산은 픽셀마다 한 번만 하고, 그 색을 덮인 샘플에만 적습니다. 마지막에 픽셀 안 샘플들을 평균 내 픽셀 색을 얻습니다.

이 방식은 테두리의 계단을 다듬습니다. 테두리 픽셀에서는 덮인 샘플 수에 따라 섞이는 비율이 달라지기 때문입니다. 하지만 색은 픽셀마다 한 점에서만 계산하니, 안쪽 무늬는 여전히 픽셀마다 한 점으로 찍힙니다. 그래서 도형 안쪽 무늬의 떨림은 고치지 못합니다.

찍기 전에 무디게 하는 방법

샘플을 늘리는 대신 찍을 대상을 미리 무디게 만드는 길도 있습니다. 샘플 간격보다 촘촘한 무늬를 먼저 뭉개 두면 찍을 때 에일리어싱이 생길 거리가 없습니다. 이렇게 샘플을 찍기 전에 촘촘한 성분을 걸러 내는 일을 프리필터링이라고 부릅니다.

화면에서는 텍스처가 대표적인 대상입니다. 멀리 있어 작게 보이는 벽돌 벽은 픽셀 하나에 벽돌 여러 장이 들어갑니다. 그래서 원본 그림을 절반, 또 절반으로 줄여 평균 낸 여러 벌을 미리 만들어 둡니다.

이렇게 미리 줄여 둔 그림 묶음이 밉맵입니다. 물체가 멀수록 더 작게 줄인 벌을 읽습니다.

도형의 테두리에도 같은 생각을 쓸 수 있습니다. 샘플을 찍는 대신 도형이 픽셀을 덮은 넓이를 직접 계산해 그 비율로 칠합니다. 글자처럼 모양이 곡선 식으로 주어질 때 이 방식을 쓰기도 합니다.

다 그린 뒤 경계를 흐리는 방법

다 그린 이미지를 한 번 더 가공하는 단계를 포스트 프로세싱이라고 부릅니다. 이 단계에서 안티에일리어싱을 하는 방식을 후처리 안티에일리어싱이라고 합니다. 샘플을 늘리지 않고 이미지 한 장만 보고 고칩니다.

이웃한 픽셀끼리 색이 급하게 바뀌는 곳을 테두리로 봅니다. 그 테두리가 뻗은 방향을 따라 양쪽 색을 섞습니다. 이미지를 한 번 훑는 계산이라 비용이 적게 듭니다.

대가는 구별하지 못하는 데서 옵니다. 이미지만 봐서는 도형의 테두리와 글자나 가는 무늬를 가를 수 없어 함께 흐려집니다. 샘플 사이로 빠져 이미 사라진 가는 선도 되살리지 못합니다. 찍을 때 잃은 것은 이미지에 남아 있지 않기 때문입니다.

지난 프레임의 샘플을 빌리는 방법

프레임마다 샘플 위치를 픽셀 안에서 조금씩 옮겨 가며 찍습니다. 그리고 지난 프레임들의 결과와 섞습니다. 한 프레임에는 샘플이 하나뿐이어도, 여러 프레임을 모으면 픽셀 하나에 샘플 여럿을 찍은 효과가 납니다. 이 방식을 시간적 안티에일리어싱이라고 부릅니다.

물체가 움직이면 지난 프레임의 색이 지금은 다른 물체가 있는 곳에 섞입니다. 그래서 빠르게 움직이는 물체 뒤로 흐릿한 잔상이 끌립니다. 이 잔상을 고스팅이라고 부릅니다.

잔상을 줄이려고 픽셀마다 물체가 얼마나 움직였는지를 따로 적어 둡니다. 이 값을 모션 벡터라고 합니다. 지난 프레임의 색을 이 값만큼 옮겨 온 뒤에 섞습니다.

그래픽스 밖의 안티에일리어싱

썸네일처럼 큰 사진을 작게 줄이는 일도 샘플링입니다. 원본 픽셀 가운데 몇 개만 골라 새 픽셀로 삼으면, 줄무늬 셔츠 사진에 원래 없던 물결이 생깁니다. 그래서 크기를 줄이는 이미지 리샘플링은 새 픽셀 하나에 들어갈 원본 픽셀 여럿을 평균 내서 씁니다. 찍기 전에 무디게 하는 방법과 같은 생각입니다.

소리를 숫자로 바꾸는 아날로그-디지털 변환도 샘플링입니다. 1초에 정해진 횟수만큼 소리의 세기를 찍습니다. 그 간격으로 담을 수 없는 높은 소리가 섞여 있으면, 찍힌 값에서 원래 없던 낮은 소리가 들립니다.

이를 막으려고 값을 찍기 전에 높은 소리를 걸러 내는 저역 통과 필터를 겁니다. 이 필터를 안티에일리어싱 필터라고 부릅니다. 개요에서 말한 두 번째 뜻이 이것입니다.