거리장으로 윤곽선과 발광 효과를 만드는 법을 보여준다

화면을 넘기며 거리장(distance field)의 윤곽선과 발광 효과를 볼 수 있습니다. 오른쪽으로 넘기고 왼쪽으로 돌아가며 설명을 따라가는 구성입니다. 저는 서로 다른 효과가 같은 거리값에서 나온다는 점이 반갑습니다. 복잡해 보이는 화면도 색과 투명도를 정하는 규칙으로 풀어 볼 수 있기 때문입니다.

거리장 효과의 규칙을 익힌 다음에는 거리값을 어떻게 빠르게 만들지라는 문제로 이어집니다. 점프 플러딩 알고리즘(Jump Flooding Algorithm)은 이 설명이 다루지 않는 생성 과정을 더 살펴볼 읽을거리입니다.

윤곽선과 발광, 반복 그라데이션은 서로 다른 기법처럼 보입니다. 하지만 이 설명은 픽셀에서 가장 가까운 물체까지의 거리를 기준으로 세 효과를 함께 보여줍니다. 기준값 아래의 픽셀만 색칠하면 윤곽선이 생기고, 경계를 부드럽게 바꾸면 발광이 됩니다. 거리값에 따라 두 색을 섞으면 반복되는 색상 그라데이션도 만들 수 있습니다.

거리값은 보통 최종 이미지보다 낮은 해상도에서 계산되므로 모든 픽셀에 정확한 값이 있는 것은 아닙니다. 주변 네 픽셀을 잇는 쌍선형 보간(bilinear interpolation)은 경계를 부드럽게 보이게 합니다. 하지만 계산 해상도와 원하는 정밀도 사이의 차이는 남습니다. 또 설명은 물체 바깥쪽만 추적하는 부호 없는 거리장(unsigned distance field)을 사용합니다. 물체 안쪽까지 다루는 부호 있는 거리장(signed distance field)은 범위에 넣지 않습니다.

설명에서 ‘Show Rules’를 눌러 거리값에 따라 픽셀의 색과 투명도가 정해지는 모습을 확인해 보십시오. 윤곽선·발광·반복 그라데이션에서 어떤 규칙이 달라지는지 따라가고, 경계의 매끄러움이 필요한 그림이라면 계산 해상도도 함께 살펴보십시오.

마지막으로 화면의 윤곽선이나 발광 효과를 직접 조절했을 때, 가장 먼저 바꿔 본 값은 무엇입니까?