pmndrs/glyph

어떤 프로젝트인가요?

핵심 기능

• 01CLI로 bitmap, MSDF, Slug 데이터를 포함한 glb 파일에 폰트를 베이킹합니다.
• 02합자, 양방향 텍스트, 복잡한 문자 체계를 지원하는 유니코드 셰이핑을 제공합니다.
• 03정렬, 단어 줄바꿈, 클리핑, 말줄임표를 지원하는 문단 레이아웃을 제공합니다.
• 04WebGPURenderer를 사용해 three.js에서 배치 텍스트를 렌더링합니다.
• 05폰트 로딩 훅을 포함한 React Three Fiber 및 TresJS (Vue) 연동을 제공합니다.
• 06커스텀 렌더러를 연결할 수 있는 프레임워크 중립적인 GlyphConfig API를 제공합니다.

활용 사례

• WebGPU 기반 three.js 씬에서 라벨과 HUD 텍스트를 렌더링합니다.
• React Three Fiber 또는 TresJS로 인터랙티브한 3D 인터페이스를 만듭니다.
• 아이콘 폰트를 글리프 이름을 키로 사용하는 룩업 테이블로 베이킹합니다.
• 물리 콜라이더나 커스텀 그래픽에 사용할 글리프 아웃라인을 추출합니다.

빠른 시작

1. 1

   패키지와 three.js를 설치합니다

   pnpm add @pmndrs/glyph three
2. 2

   glyph CLI로 글꼴을 glb 파일에 베이크합니다

   pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug
3. 3

   three.js 통합 기능으로 텍스트를 만들고 씬에서 렌더링합니다

사용 전 알아둘 점

• !Glyph는 프리릴리스 버전이므로 기능이 향후 변경될 수 있습니다.
• !기존 WebGLRenderer는 지원되지 않습니다. three.js에서는 WebGPURenderer가 필요합니다.
• !세로쓰기 CJK 텍스트, 이중선 또는 물결선 텍스트 장식 등 일부 기능은 부분적으로만 지원됩니다.

토픽

자주 묻는 질문

glyph은(는) 무엇인가요?

웹 그래픽을 위한 TypeScript 타이포그래피 엔진으로, three.js와 WebGPU에서 폰트 베이킹, 유니코드 셰이핑, 문단 레이아웃, 배치 텍스트 렌더링을 지원합니다. Glyph는 웹 그래픽을 위한 타이포그래피 엔진입니다. CLI를 통해 bitmap, MSDF 및/또는 Slug 데이터를 포함한 glb 파일로 폰트를 베이킹하므로, 무거운 런타임 처리 없이 베이킹된 폰트를 빠르게 로드할 수 있습니다. 합자, 양방향 텍스트, 자소 단위 경계를 포함한 유니코드 셰이핑과 문단 정렬, 단어 줄바꿈, 클리핑, 말줄임표도 지원합니다.

glyph은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

glyph은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

glyph은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. glyph의 마지막 커밋은 2026년 10월 21일입니다.

glyph은(는) 어디에 사용할 수 있나요?

WebGPU 기반 three.js 씬에서 라벨과 HUD 텍스트를 렌더링합니다. React Three Fiber 또는 TresJS로 인터랙티브한 3D 인터페이스를 만듭니다. 아이콘 폰트를 글리프 이름을 키로 사용하는 룩업 테이블로 베이킹합니다. 물리 콜라이더나 커스텀 그래픽에 사용할 글리프 아웃라인을 추출합니다.

glyph는 어떻게 설치하나요?

패키지와 three.js를 설치합니다: pnpm add @pmndrs/glyph three glyph CLI로 글꼴을 glb 파일에 베이크합니다: pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug three.js 통합 기능으로 텍스트를 만들고 씬에서 렌더링합니다

glyph은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/glyph