# 텍스처 없는 텍스트 렌더링 기술

> Clean Markdown view of GeekNews topic #17692. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17692](https://news.hada.io/topic?id=17692)
- GeekNews Markdown: [https://news.hada.io/topic/17692.md](https://news.hada.io/topic/17692.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-11-11T10:01:26+09:00
- Updated: 2024-11-11T10:01:26+09:00
- Original source: [poniesandlight.co.uk](https://poniesandlight.co.uk/reflect/debug_print_text/)
- Points: 1
- Comments: 1

## Topic Body

- # 텍스처 없는 텍스트 렌더링

  - 전통적으로 텍스트를 렌더링하려면 폰트의 모든 글리프를 아틀라스로 렌더링하고, 이를 텍스처로 바인딩한 후, 화면에 삼각형을 그려 글리프를 하나씩 렌더링해야 함.
  - 디버그 메시지를 빠르게 출력하기 위한 간단한 방법을 소개함.
  - 모든 텍스트를 단일 드로우 콜로 그릴 수 있는 기술을 설명함.

- # 폰트: 텍스처 없는 픽셀

  - 폰트 아틀라스 텍스처를 제거하기 위해, 프래그먼트 셰이더 내부에 폰트 아틀라스와 유사한 것을 저장해야 함.
  - 정수 상수를 사용하여 비트맵을 저장할 수 있으며, 이를 통해 글리프를 렌더링할 수 있음.
  - 8비트 정수를 비트맵으로 사용하여 GLSL 프래그먼트 셰이더에서 화면에 그릴 수 있음.

- # 단일 드로우 콜

  - 인스턴스 드로우 콜을 사용하여 반복적인 드로우 명령을 피할 수 있음.
  - 각 인스턴스에 대해 위치 오프셋과 출력할 텍스트를 포함한 데이터를 사용함.
  - 메시지를 4개의 문자로 나누어 uint32_t로 변환하여 word_data 구조체에 저장함.

- # 버텍스 셰이더

  - 버텍스 셰이더는 세 가지 출력을 생성함.
  - gl_Position에 삼각형의 정점을 화면에 배치함.
  - 출력할 단어를 프래그먼트 셰이더로 전달함.
  - 텍스처 좌표를 생성하여 uv 좌표를 계산함.

- # 프래그먼트 셰이더

  - 프래그먼트 셰이더는 텍스트를 렌더링하기 위해 세 가지 정보를 필요로 함.
  - uv 좌표를 글리프 비트맵의 올바른 비트에 매핑하여 글리프를 렌더링함.
  - 비트가 설정된 경우 전경색으로, 설정되지 않은 경우 배경색으로 렌더링함.

- # 전체 구현 및 소스 코드

  - 이 기술의 구현은 le_print_debug_print_text 모듈의 소스 코드에서 찾을 수 있음.
  - 이 모듈은 디버그 메시지를 화면에 쉽게 출력할 수 있도록 함.

## Comments



### Comment 31117

- Author: neo
- Created: 2024-11-11T10:01:26+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42093037) 
- ShaderToy에서 간단한 산술을 통해 코드를 작성하는 것이 재미있고 쉬운 작업임. 다양한 텍스트 해킹 예시가 많음
  - 예: 300자 미만의 Matrix, 녹색 CRT 디스플레이 효과 등
- 이 방법은 창의적이지만 결과물이 아름답지는 않음. 더 나은 결과를 위해 더 많은 비트를 추가할 수 있지만, 효율적인 방법은 흑백 픽셀을 사용하여 텍스처로 저장하는 것임
- 현대 3D 렌더링 엔진에서 텍스트를 그리는 일반적인 방법은 SDF 텍스트를 사용하는 것임. 이는 전통적인 텍스처 아틀라스를 사용하여 서명 거리 필드의 아틀라스를 생성함
- 텍스트 렌더링 알고리즘을 직접 시도해본 적이 없지만 여러 가지를 구현한 경험이 있음. 해상도 독립성과 안티앨리어싱이 필요했기 때문에 이 방법은 도움이 되지 않았음
- 이 방법은 Will Dobbie의 방법과 개념적으로 유사하지만 더 간단함. 픽셀 데이터를 배열에 저장하는 방식임
- 텍스트를 메쉬로 렌더링하는 옵션도 있음. TextMeshPro는 서명 거리 필드를 사용하여 임의의 스케일을 처리함
- 전통적인 텍스처 방식과 성능 비교를 하면 재미있을 것임. 현대 GPU의 간단한 작업에서는 성능이 "예"라는 답변이 나올 가능성이 큼
- Sebastian Lague의 비디오에서 다양한 폰트 렌더링 기법을 다룸
- 폰트 데이터를 프래그먼트 셰이더 소스 코드에 포함시키는 유사한 기술을 사용한 경험이 있음. `snprintf`를 사용하여 GPU 버퍼에 직접 출력함
- 이 방법은 BBC Basic에서 작은 8x8 스프라이트를 그리는 것과 유사함. 35년 전의 추억을 떠올리게 함
- GPU는 텍스처에서 렌더링하는 데 효율적이지만 비트 조작에는 상대적으로 느림. 메모리를 절약하지만 실제로 아틀라스를 사용하는 것보다 빠른지는 의문임
- 작은 텍스처를 GPU에 업로드하는 것이 성능에 큰 영향을 미치는지에 대한 질문이 있음. 2D로 텍스처에 문자열을 렌더링하고 두 삼각형에 텍스처를 표시하는 것이 가능한지 궁금함