GPU에서 선명한 텍스트 렌더링하기

19 hours ago 3

  • 텍스트 렌더링의 품질 문제, 특히 SDF(거리장) 기반 방식의 한계를 해결하기 위해 새로운 실시간 벡터 렌더링 기법을 제안함
  • 글리프(문자)를 벡터 곡선 형태로 GPU에 직접 전송하여 실시간 래스터라이즈를 수행함으로써 무제한 해상도 및 적은 메모리 사용을 달성함
  • 텍스처 아틀라스시간 누적(temporal accumulation) 기법을 활용해 높은 안티앨리어싱 품질과 효율적 캐싱을 실현함
  • 다양한 서브픽셀 구조(예: OLED, LCD 등)에도 맞춤 적용할 수 있어 프린징(색 번짐) 문제 없이 부드럽고 선명한 결과를 제공함
  • 실시간 텍스트, UI, 게임 등에서 고품질 글꼴 렌더링을 위해 단순하면서도 확장성 높은 접근법을 제시함

서론: 텍스트 렌더링의 고민

  • 실시간 텍스트 렌더링에서는 알리아싱(계단 현상), 대형 텍스처, 빌드 시간, 확대/축소, 부드러운 이동 등 다양한 문제가 존재함
  • 기존에 많이 쓰이는 Multi-Channel Signed Distance Fields(SDFs) 방식은 품질 및 유연성 측면에서 한계가 있었음
  • 최근 OLED 모니터의 비표준 서브픽셀 구조와 프린징 문제로 계기가 되어 서브픽셀 안티앨리어싱까지 고려한 새로운 접근법을 개발하게 됨

기존 SDF 방식의 한계

품질

  • SDF 방식의 경우 세밀한 디테일이나 얇은 획이 많은 글꼴에서는 품질 저하 및 정보 손실 문제가 발생함
  • 해상도를 높이지 않으면 특정 글리프에서 아티팩트가 남음

아틀라스 크기

  • SDF는 처음에 오프라인으로 만든 뒤 아틀라스를 저장하는데, 많은 글리프나 CJK(중국어, 일본어, 한국어) 폰트에서는 현실적으로 불가능할 정도로 커짐
  • 여러 폰트를 동시에 사용할 경우 메모리 소모와 스트리밍 대역폭 부담이 커짐

유연성 및 단순성

  • SDF라는 중간 단계를 거치기에 소스 데이터와 최종 결과까지 전체 흐름이 복잡해짐
  • 실시간 혹은 동적인 벡터 이미지를 바로 활용하거나 편집하는 데 제약이 큼

새 방식: 벡터 곡선 실시간 래스터라이즈

  • 텍스처를 미리 만드는 대신, 화면에 실제로 보이는 글리프의 벡터 곡선 데이터(베지에 곡선 등)를 직접 GPU로 전송하고, 그 자리에서 래스터라이즈
  • 아틀라스 텍스처에 필요한 만큼만 글리프를 넣으며, 사용 빈도에 따라 유지하거나 해제함
  • 글리프가 화면에 남아 있는 동안 표본 샘플의 누적(temporal accumulation)을 통해 매우 고품질의 좀 더 부드러운(anti-aliased) 결과를 구현함
  • 벡터 기반으로 처리하기 때문에 해상도 제한 없이 선명한 결과를 제공함

글꼴 곡선 데이터 처리

  • FreeType 등 오픈소스 라이브러리로 다양한 글꼴 포맷을 읽고, 글리프의 곡선 정보를 추출
  • 글리프를 라인, 2차/3차 베지에 곡선 형태로 파싱하며, 모든 곡선을 2차 베지에 곡선으로 변환해 GPU 셰이더에서 처리 단순화
    • 라인은 중간 제어점을 추가해 2차 곡선으로 변환
    • 3차 곡선은 2개 분할된 2차 곡선으로 변환

커버리지(픽셀 내부 채움) 계산

  • 각 픽셀마다 가로 방향(ray)으로 곡선과의 교차점을 계산, winding number(누적 교차 수)를 통해 내부/외부를 판단
  • 수백 번의 표본(n회 누적 샘플) 을 합산하며, 일부 미세 오차는 최종 결과에 거의 영향 없음
  • 샘플 포인트 배치(quasirandom sequence) 기법으로, 매 프레임마다 다양한 위치에서 결괏값을 누적함

곡선 접근 최적화

  • 글리프를 수평 밴드(band) 단위로 분할, 밴드별로 관련이 있는 곡선들만 테스트하여 연산량 절감
  • 스레드 배치 및 밴드 단위 반복을 통해 GPU에서 벌크 연산 효율성을 극대화

아틀라스 패킹 및 관리

  • 아틀라스(공유 텍스처)에 각 글리프 이미지를 할당후 관리
    • 없는 글리프는 공간을 새로 할당해 래스터라이징, 이미 있는 글리프는 재사용
    • 참고로 같은 글리프라도 서브픽셀 포지션 및 크기에 따라 서로 다른 버전이 필요할 수 있음
  • Z-Order Packing(Morton code 등)을 통해 1차원 비트셋과 2D 공간 간 효율적 패킹 구현
    • 라틴 계열은 세로 기준, 아랍어 계열은 가로 기준 등 언어 구조별 유연한 응용 가능
  • 글리프가 더 이상 필요없어지면, 아틀라스 공간을 다시 할당해 사용

시간 누적(Temporal Accumulation)

  • 글리프 캐싱 및 표본 누적 방식을 통해, 표시 직후엔 빠르게 고품질 샘플 확보, 이후 프레임에서 더 정교하게 보정
    • 첫 프레임은 8샘플/픽셀, 이후 점차 샘플 수 감소, 최대 512회 누적
  • 부드러운 글리프 표시 및 리소스 최적화를 양립

서브픽셀 안티앨리어싱 및 프린징(Fringing) 방지

  • 서브픽셀(RGB 등 각 소자를 샘플로 간주) 단위로 렌더링 영역을 배분하여 수평 해상도 증가 효과 구현
    • LCD 표준 구조, OLED/WOLED 등 다양한 배열 지원
    • 프린징(색 번짐) 없는 부드러운 효과 지정
  • 서브픽셀 샘플이 중첩(Overlapping)되도록 배열 시 실제 모니터의 빛 혼합 효과까지 반영
  • 픽셀 경계나 힌팅(hinting) 없이도 자연스럽고 선명한 출력 가능

디스플레이별 서브픽셀 구조 접근의 중요성

  • 모니터의 서브픽셀 배열 정보를 프로그램적으로 확인 가능하다면 훨씬 정교한 렌더링이 가능
  • 하드웨어의 한계가 아니라 소프트웨어 처리의 문제임을 강조

마무리 및 활용 전망

  • 좋은 텍스트 렌더링이 전체 사용성 및 서비스 품질에 미치는 영향이 큼
  • 특히 UI/게임 등에서 고품질 글꼴 표현이 제품 경험에서 큰 차이를 만들 수 있음
  • 단순·확장성·고품질·유연성이라는 원칙을 실현할 수 있는 작업 구조임
  • 오픈소스 구현, 다양한 서브픽셀 대응 등 실제 산업/프로덕션 활용에 매우 적합

Read Entire Article