pmndrs/glyph

这是什么？

核心功能

• 01通过命令行工具将字体烘焙为包含位图、MSDF 和 Slug 数据的 glb 文件。
• 02支持 Unicode 排版，包括连字、双向文本和复杂文字。
• 03提供对齐、自动换行、裁剪和省略号等段落排版功能。
• 04基于 WebGPURenderer 为 three.js 提供批量文本渲染。
• 05集成 React Three Fiber 与 TresJS（Vue），并提供字体加载钩子。
• 06提供与框架无关的 GlyphConfig 接口，便于接入自定义渲染器。

适用场景

• 在基于 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 排版引擎，支持字体烘焙、Unicode 排版和批量文本渲染，适配 three.js 与 WebGPU。 Glyph 是一个面向网页图形的排版引擎。它通过命令行工具将字体烘焙为包含位图、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