pmndrs/glyph

これは何？

主な機能

• 01CLIを使って、ビットマップ、MSDF、Slugのデータを含むglbファイルにフォントをベイクします。
• 02合字、双方向テキスト、複雑な文字体系に対応したUnicodeシェーピング。
• 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 とは？

フォントのベイク、Unicodeシェーピング、段落レイアウト、three.jsとWebGPU向けのバッチテキスト描画に対応する、Webグラフィックス用のTypeScript組版エンジンです。 GlyphはWebグラフィックス用の組版エンジンです。CLIを使ってフォントをビットマップ、MSDF、Slugのデータを含むglbファイルにベイクするため、ベイク済みフォントは実行時に重い処理を行わず素早く読み込めます。合字、双方向テキスト、書記素を考慮した境界を含むUnicodeシェーピングに加え、段落の配置、単語の折り返し、クリッピング、省略記号にも対応します。

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