pmndrs/glyph

Что это?

Ключевые возможности

• 01Запекает шрифты в файлы glb с данными bitmap, MSDF и Slug с помощью CLI.
• 02Unicode-шэйпинг с поддержкой лигатур, двунаправленного текста и сложных письменностей.
• 03Вёрстка абзацев: выравнивание, перенос слов, обрезка и многоточие.
• 04Пакетный рендеринг текста в three.js с помощью WebGPURenderer.
• 05Интеграции с React Three Fiber и TresJS (Vue), включая хуки для загрузки шрифтов.
• 06Не зависящий от фреймворков API GlyphConfig для собственных рендереров.

Сценарии использования

• Рендеринг подписей и текста HUD в сценах three.js на WebGPU.
• Создание интерактивных 3D-интерфейсов с React Three Fiber или TresJS.
• Запекание иконочных шрифтов в таблицы поиска с ключами по именам глифов.
• Извлечение контуров глифов для физических коллайдеров или пользовательской графики.

Быстрый старт

1. 1

   Установите пакет и three.js

   pnpm add @pmndrs/glyph three
2. 2

   Встройте шрифт в файл glb с помощью CLI glyph

   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 для веб-графики: подготовка шрифтов, Unicode-шэйпинг, вёрстка абзацев и пакетный рендеринг текста для three.js и WebGPU. Glyph — типографический движок для веб-графики. С помощью CLI он запекает шрифты в файлы glb с данными bitmap, MSDF и/или Slug, чтобы ускорить их загрузку и обойтись без ресурсоёмкой обработки во время выполнения. Движок поддерживает Unicode-шэйпинг, в том числе лигатуры, двунаправленный текст и границы с учётом графем, а также выравнивание абзацев, перенос слов, обрезку и многоточие.

glyph можно использовать бесплатно? Какая у него лицензия?

glyph распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

glyph всё ещё поддерживается?

Активно поддерживается. Последний коммит в glyph — 21 окт. 2026 г..

Для чего можно использовать glyph?

Рендеринг подписей и текста HUD в сценах three.js на WebGPU. Создание интерактивных 3D-интерфейсов с React Three Fiber или TresJS. Запекание иконочных шрифтов в таблицы поиска с ключами по именам глифов. Извлечение контуров глифов для физических коллайдеров или пользовательской графики.

Как установить glyph?

Установите пакет и three.js: pnpm add @pmndrs/glyph three Встройте шрифт в файл glb с помощью CLI glyph: pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug Создайте текст с помощью интеграции с three.js и отобразите его в сцене

Где скачать glyph?

Исходный код и инструкции по установке — на GitHub: https://github.com/pmndrs/glyph