Repolode
Enviar
pmndrs

pmndrs/glyph

Motor de tipografía en TypeScript para gráficos web, con generación de fuentes, composición Unicode, maquetación de párrafos y renderizado de texto por lotes para three.js y WebGPU.

Ver en GitHub
Estrellas
404
Forks
7
Issues abiertos
53
Último commit
hace 9 horas

¿Qué es?

Glyph es un motor de tipografía para gráficos web. Genera archivos glb con datos de mapa de bits, MSDF o Slug mediante una CLI, para que las fuentes generadas se carguen rápido y sin un procesamiento pesado en tiempo de ejecución. Gestiona la composición Unicode, incluidas las ligaduras, el texto bidireccional y los límites que tienen en cuenta los grafemas, además de la alineación de párrafos, el ajuste de línea, el recorte y los puntos suspensivos.

Para el renderizado, Glyph ofrece renderizado de texto por lotes para three.js mediante WebGPURenderer, con integraciones para React Three Fiber y TresJS (Vue). Su núcleo es independiente del framework, y la API GlyphConfig permite a los desarrolladores integrar su propio renderer. También exporta shaders de TSL y TypeGPU para usarlos en motores personalizados.

El proyecto está en fase de prelanzamiento, y su tabla de funcionalidades indica que algunas áreas son parciales, como la escritura vertical CJK y las decoraciones de texto, salvo el subrayado, el suprarrayado y el tachado sólidos. Los emojis a color y la escritura vertical figuran como trabajo futuro.

Funciones clave

  • 01Genera archivos glb con datos de mapa de bits, MSDF y Slug mediante una CLI.
  • 02Composición Unicode con ligaduras, texto bidireccional y escrituras complejas.
  • 03Maquetación de párrafos con alineación, ajuste de línea, recorte y puntos suspensivos.
  • 04Renderizado de texto por lotes para three.js con WebGPURenderer.
  • 05Integraciones con React Three Fiber y TresJS (Vue), con hooks para cargar fuentes.
  • 06API GlyphConfig independiente del framework para renderers personalizados.

Casos de uso

  • Renderizar etiquetas y texto de HUD en escenas de three.js con WebGPU.
  • Crear interfaces 3D interactivas con React Three Fiber o TresJS.
  • Generar tablas de búsqueda de fuentes de iconos indexadas por nombre de glifo.
  • Extraer contornos de glifos para colliders de física o gráficos personalizados.

Inicio rápido

  1. 1

    Instala el paquete y three.js

    pnpm add @pmndrs/glyph three
  2. 2

    Incrusta una fuente en un archivo glb con la CLI de glyph

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

    Crea texto con la integración de three.js y muéstralo en tu escena

Antes de usarlo

  • Glyph es una versión preliminar, por lo que sus funciones pueden cambiar con el tiempo.
  • No se admite el WebGLRenderer clásico; three.js requiere WebGPURenderer.
  • Algunas funciones tienen compatibilidad parcial, como la escritura vertical en CJK y las decoraciones de texto dobles o onduladas.

Temas

#typography#text-rendering#webgpu#threejs#fonts#msdf#unicode#typegpu

Preguntas frecuentes

¿Qué es glyph?
Motor de tipografía en TypeScript para gráficos web, con generación de fuentes, composición Unicode, maquetación de párrafos y renderizado de texto por lotes para three.js y WebGPU. Glyph es un motor de tipografía para gráficos web. Genera archivos glb con datos de mapa de bits, MSDF o Slug mediante una CLI, para que las fuentes generadas se carguen rápido y sin un procesamiento pesado en tiempo de ejecución. Gestiona la composición Unicode, incluidas las ligaduras, el texto bidireccional y los límites que tienen en cuenta los grafemas, además de la alineación de párrafos, el ajuste de línea, el recorte y los puntos suspensivos.
¿glyph es gratuito? ¿Qué licencia tiene?
glyph es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿glyph sigue mantenido?
Mantenimiento activo. El último commit de glyph fue el 21 oct 2026.
¿Para qué puedo usar glyph?
Renderizar etiquetas y texto de HUD en escenas de three.js con WebGPU. Crear interfaces 3D interactivas con React Three Fiber o TresJS. Generar tablas de búsqueda de fuentes de iconos indexadas por nombre de glifo. Extraer contornos de glifos para colliders de física o gráficos personalizados.
¿Cómo se instala glyph?
Instala el paquete y three.js: pnpm add @pmndrs/glyph three Incrusta una fuente en un archivo glb con la CLI de glyph: pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug Crea texto con la integración de three.js y muéstralo en tu escena
¿Dónde consigo glyph?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/glyph

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados