← 발견
ASTERXOR / 발견

대각선은 왜 계단이 될까

픽셀에는 면적이 있다. 점 하나로만 판단하면 유용한 정보를 버리게 된다.

같은 합성 대각선을 중심 판단과 1,024개 샘플 점유율 추정으로 비교한다.
같은 합성 대각선을 중심 판단과 1,024개 샘플 점유율 추정으로 비교한다.
발견ASTERXOR / LEON LEUNG

기울어진 경계는 왜 수평선보다 거칠어 보일까?

대각선은 정사각형 격자를 어정쩡하게 가른다. 어떤 칸은 경계 한쪽에 완전히 놓이고 다른 칸은 나뉜다. 모든 칸이 검정이나 흰색 중 하나만 골라야 한다면 경계는 계단처럼 뛴다. 안티앨리어싱은 일부만 덮인 칸에 더 나은 질문을 던지는 데서 시작한다.

경계는 반 픽셀을 덮어도 흐릿한 경계가 되지 않는다.
THE IDEA

한 칸에 담긴 두 답

어두운 탁자 위에 흰 종이가 일부를 덮고 있다고 생각하자. 종이 안쪽의 픽셀은 흰색, 바깥쪽은 어두워야 한다. 경계에서는 종이가 픽셀 일부만 덮을 수 있다. 중심점만으로 양자택일하면 그 칸의 나머지 면적을 무시한다.

면적 점유율은 그 비율을 기록한다. 이상적인 선형광 합성에서는 4분의 1 덮인 픽셀에 전경이 4분의 1만큼 기여한다. 경계의 중간 밝기가 반드시 흐릿한 물체를 뜻하지는 않는다. 선명한 경계가 유한한 측정 면적을 가르는 모습일 수 있다.

같은 합성 대각선을 중심 판단과 1,024개 샘플 점유율 추정으로 비교한다.
FIG 01같은 합성 대각선을 중심 판단과 1,024개 샘플 점유율 추정으로 비교한다.
THE MODEL

일부러 작은 이미지를 만든다

합성 이미지는 24 × 24픽셀이다. 흰 영역은 y = 0.63x + 3 아래에 있다. 한 버전은 각 칸의 중심만 검사한다. 다른 버전은 픽셀마다 32 × 32개의 균일한 점을 놓고 안쪽인지 바깥쪽인지 판단한 결과를 평균한다.

픽셀당 1,024번 샘플링하지만 독립적으로 표시할 수 있는 픽셀 1,024개가 생기는 것은 아니다. 하나의 점유율을 추정하는 데 쓰인다. 정확한 해석적 적분이 아닌 유한한 수치 근사다. 샘플을 늘려도 최종 이미지 크기는 같으며 추정만 정교해진다.

THE RESULT

회색 칸은 위치를 전달한다

확대 비교에서 중심 검사 방식은 두 극값 사이에서 갑자기 바뀐다. 점유율 방식에는 중간값의 좁은 띠가 있다. 경계가 각 칸을 어디서 가르는지 알려 주는 값이다. 픽셀 중심의 안팎 구분이 그대로여도 경계가 조금 움직이면 점유율은 서서히 달라질 수 있다.

한 행의 그래프는 이 차이를 분리해서 보여 준다. 각 열에 명시적인 숫자가 있어 대각선 전체보다 읽기 쉽다. 화면 격자의 계단이 물리적으로 사라진 것은 아니다. 밝기 패턴이 연속 경계의 위치를 판단할 근거를 더 제공한다.

10번 행에서 경계의 중간 점유율 값을 따로 볼 수 있다.
FIG 0210번 행에서 경계의 중간 점유율 값을 따로 볼 수 있다.
THE TRADE-OFF

움직이면 잃어버린 정보가 드러난다

다른 비교에서는 경계를 0, 4분의 1, 반 픽셀만큼 위로 옮긴다. 기하는 부드럽게 변한다. 점유율은 중심점이 경계를 넘을 때까지 기다리지 않고 경계 주변에서 반응한다. 이 때문에 안티앨리어싱은 정지 이미지뿐 아니라 애니메이션에도 중요하다. 이진 판단은 부드러운 움직임을 갑작스러운 깜박임으로 바꿀 수 있다.

그림은 몇 위치의 정적 샘플이지 애니메이션 성능 측정이 아니다. 움직이는 장면에는 시간 방향 필터링도 필요할 수 있다. 공간 점유율만으로 시간 앨리어싱, 모션 블러, 투명도 정렬, 텍스처와 셰이딩의 모든 샘플링 문제를 해결하지는 못한다.

출력 격자는 고정한 채 경계를 4분의 1픽셀씩 위로 옮긴다.
FIG 03출력 격자는 고정한 채 경계를 4분의 1픽셀씩 위로 옮긴다.
IN PRACTICE

밝기에도 맞는 계산이 필요하다

점유율은 기하학적 가중치이며 곧바로 디스플레이 코드값이 되지는 않는다. 전경과 배경의 빛을 올바르게 합치려면 색 인코딩을 고려해야 한다. 인코딩된 sRGB 숫자를 바로 평균하면 선형광에서 평균한 뒤 인코딩한 결과보다 어두워질 수 있다.

그림은 분수 값을 잘 보이게 하는 남색에서 밝은색으로의 시각화이며, 보정된 화면 시험이 아니다. 브라우저 확대·축소도 필터링을 추가할 수 있다. 확대해서 수치 구성을 살피는 일과, 보통 크기에서 대비·거리·실제 화면을 통해 경계를 평가하는 일은 다르다.

LOOK AGAIN

매끄러움에도 예산이 있다

샘플이 많아지면 계산 비용이 들며 점유율 추정은 여러 방식 중 하나다. 렌더러는 해석적인 경계 계산, 멀티샘플링, 설계된 필터를 쓸 수도 있다. 비용과 디테일, 안정성의 절충이 다르다. 작은 특징을 구분해야 한다면 더 흐린 결과가 더 좋다고 할 수 없다.

중요한 것은 이미지가 답해야 할 질문에 충분한 정보를 보존하는 것이다. 선명한 대각선이 모든 칸을 완전히 안이나 밖이라고 가장할 필요는 없다. 픽셀을 면적으로 이해하면 중간 음영은 장식이 아니라 유용한 측정으로 보인다.

더 읽어 보기

Physically Based Rendering: sampling theory ↗W3C compositing and blending ↗

공식 문서와 함께 읽으면 좋은 자료입니다.

가져갈 생각 하나

회색 경계가 오히려 날카로운 선을 더 정확하게 설명할 수 있다.