GPU 텍스트 렌더링, Slug가 아틀라스 없이 외곽선에서 직접 그리다
SDF vs. MSDF vs. Slug: GPU Text Rendering
SDF, MSDF, Slug, 텍스처 아틀라스, Rive 등 GPU 텍스트 렌더링 기법을 비교한다. 아틀라스는 확대 시 흐려지고, SDF는 모서리가 뭉개지며, MSDF는 이를 개선했지만 여전히 베이킹이 필요하다. Slug는 2017년 Eric Lengyel이 발표하고 2026년 퍼블릭 도메인으로 공개한 알고리즘으로, 텍스처 아틀라스나 테셀레이션 없이 프래그먼트 셰이더에서 외곽선으로부터 직접 커버리지를 계산해 어떤 배율과 원근 변환에서도 선명함을 유지한다.
베이킹된 해상도가 없기 때문에 같은 글리프가 6픽셀이든 6000픽셀이든 날카롭게 유지되며, 커버리지가 변환 후 픽셀 단위로 계산되므로 원근을 포함한 임의의 2D 및 3D 변환에서도 선명함을 잃지 않는다.
HN 토론
50- YuechenLi
이 글에는 부정확한 정보가 좀 있는데, MSDF 아틀라스는 꼭 정적으로 굽지 않아도 되기 때문에 아틀라스에 비동기로 업로드할 수 있다면 "CJK 문자는 거대한 아틀라스를 의미한다"는 건 별 문제가 아니다. (C 라이브러리에서는 비동기 외곽선 추출이 좀 더 어렵기 때문에 파이프라인이 대부분 아틀라스 업로드로 제한되는 것이다.)
또 하나는 MSDF 렌더링이 꽤 저렴하고 GPU 셰이더 없이 CPU에서도 쉽게 할 수 있다는 점이다. 아틀라스 생성/업로드가 비싼 부분이지만, 아틀라스는 그냥 일반 비트맵 텍스처 파일이기 때문에 폰트당 문자당 한 번만 지불하면 되는 비용이다. MSDF 텍스트는 대부분의 줌 해상도에서 가장자리가 선명하고, 작은 크기 텍스트는 어차피 단순한 CPU 래스터로 처리하는 게 더 낫다.
작은 폰트에 대해 MSDF + 래스터 폴백 대신 Slug를 사용하는 게 확실히 더 정확하긴 하지만, 훨씬 더 복잡한 GPU 의존 렌더링에 비해 한계 해상도 이점이 그만한 가치가 있는지 잘 모르겠다. 그래서 명백히 AI가 쓴 글의 말을 그대로 믿기보다는 시간이 될 때 직접 테스트해보고 싶다.
- exDM69
취미 프로젝트로, 나는 (실제로는 두 가지) 폰트 래스터라이저 알고리즘을 작성했는데, Slug처럼 픽셀 완벽한 안티앨리어싱 이미지를 생성한다. Slug의 영리한 베지어 곡선 루트 분류기를 사용하는 대신, 나는 베지어 곡선을 단조 구간으로 세분화하는데, 여기서 와인딩 넘버를 평가하는 것이 훨씬 간단하고 픽셀 그룹에 대해 병렬로 수행할 수 있다. 이는 GPU에서 warp/wave/subgroup 연산으로, CPU에서는 SIMD로 잘 작동한다.
언뜻 보면 베지어 곡선을 세분화하는 것이 나쁜 생각처럼 들릴 수 있지만(래스터화할 베지어가 더 많아짐), 이는 병렬성의 문을 열어주며, 폰트에 나타나는 대부분의 베지어 곡선은 애초에 단조적이다(따라서 증가량은 매우 미미하다). 이는 폰트 래스터화에 관한 재미있지만 그다지 진지하지 않은 비디오 [0]에서 영감을 받았다.
첫 번째 병렬 최적화는 곡선 경계 상자와 픽셀의 직사각형(uv 공간) 영역을 비교하는 것으로, 이를 통해 베지어를 평가해야 하는지 빠르게 판단할 수 있다. 이는 GPU warp별로 수행할 수 있다.
두 번째 최적화는 직교 변환(회전, 기울기, 원근 없음)에만 작동한다. 이차 방정식을 푸는 데는 제곱근과 나눗셈이 포함되는데(이것만으로도 계산의 30% 이상을 차지), 이는 픽셀마다가 아니라 픽셀의 각 행과 열마다 계산할 수 있다(n^2 대신 2n).
두 최적화 모두 단조성이라는 수학적 불변량에 의존한다. 즉, 베지어 곡선의 도함수는 반드시 […]
- GuB-42
예전에 SDF 텍스트 렌더링을 구현한 적이 있다. 내가 이 기법에서 가장 좋아했던 점은 효과를 추가하기가 얼마나 쉬운지였다. 몇 줄의 셰이더 코드로 외곽선과 가장자리 부드럽게 하기(안티앨리어싱)를 구현할 수 있었다. MSDF 변형은 시도해보지 않았는데, 확대했을 때 모서리가 선명하지 않은 게 신경 쓰이지 않았기 때문이다. 그래서 이런 효과들이 MSDF에서 깨지는지는 모르겠다.
Slug는 이런 것들을 전혀 지원하지 않는 것 같다. 그저 "주어진 점에 대해, 내가 안에 있는가 밖에 있는가?"일 뿐이고, 얼마나 안에 있는지는 알려주지 않는다. 이는 정말 높은 해상도 디스플레이와 큰 크기에서는 훌륭하지만, SDF로 할 수 있는 종류의 효과를 할 수 있는 능력을 잃게 되고, 안티앨리어싱을 별도로 처리해야 한다.
- jdanford
아, LLM이 생성한 글을 읽는 게 정말 지겹다.
- mattdesl
나는 또한 GPU 곡선 렌더러인 Windfoil을 작업해왔는데, 이는 Fable 5가 원래 나에게 방향 탐색 중에 제안한 공식을 기반으로 한다 [1]. 어떤 면에서는 Slug와 비슷하고, 항상 그렇게 빠르지는 않지만, 셰이더 저장 공간을 덜 사용하고(두 개 대신 단일 밴드) 더 높은 품질의 안티앨리어싱을 생성한다. 즉, 박스 필터링된 실제값에 더 가깝다.
여기 있는 일부 게임/그래픽 개발자들에게 흥미로울 수 있겠다...