Repolode
Enviar
pmndrs

pmndrs/glyph

Mecanismo de tipografia em TypeScript para gráficos na web, com geração de fontes, composição Unicode, layout de parágrafos e renderização de texto em lote para three.js e WebGPU.

Ver no GitHub
Estrelas
404
Forks
7
Issues abertas
53
Último commit
há 9 horas

O que é?

Glyph é um mecanismo de tipografia para gráficos na web. Ele gera arquivos glb com dados bitmap, MSDF e/ou Slug a partir de fontes por meio de uma CLI, permitindo carregá-las rapidamente, sem processamento pesado em tempo de execução. O mecanismo lida com composição Unicode, incluindo ligaduras, texto bidirecional e limites que respeitam os grafemas, além de alinhamento de parágrafos, quebra de linha, recorte e reticências.

Na renderização, Glyph oferece renderização de texto em lote para three.js por meio do WebGPURenderer, com integrações para React Three Fiber e TresJS (Vue). O núcleo é independente de framework, e a API GlyphConfig permite que desenvolvedores conectem seus próprios renderizadores. Os shaders TSL e TypeGPU são exportados para uso em engines personalizadas.

O projeto está em pré-lançamento, e a tabela de recursos indica que algumas áreas estão parcialmente implementadas, como a escrita vertical em CJK e decorações de texto além de sublinhado, linha superior e tachado sólidos. Emojis coloridos e escrita vertical estão listados como trabalhos futuros.

Recursos principais

  • 01Gera arquivos glb com dados bitmap, MSDF e Slug a partir de fontes por meio de uma CLI.
  • 02Composição Unicode com ligaduras, texto bidirecional e scripts complexos.
  • 03Layout de parágrafos com alinhamento, quebra de linha, recorte e reticências.
  • 04Renderização de texto em lote para three.js usando WebGPURenderer.
  • 05Integrações com React Three Fiber e TresJS (Vue), incluindo hooks para carregamento de fontes.
  • 06API GlyphConfig independente de framework para renderizadores personalizados.

Casos de uso

  • Renderizar rótulos e texto de HUD em cenas three.js com WebGPU.
  • Criar interfaces 3D interativas com React Three Fiber ou TresJS.
  • Gerar fontes de ícones em tabelas de consulta indexadas pelo nome do glifo.
  • Extrair contornos de glifos para colisores de física ou gráficos personalizados.

Início rápido

  1. 1

    Instale o pacote e o three.js

    pnpm add @pmndrs/glyph three
  2. 2

    Incorpore uma fonte em um arquivo glb com a CLI do glyph

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

    Crie texto com a integração do three.js e renderize-o na sua cena

Antes de usar

  • Glyph está em pré-lançamento, então seus recursos podem mudar com o tempo.
  • O WebGLRenderer clássico não é compatível; o three.js requer o WebGPURenderer.
  • Alguns recursos têm suporte parcial, como a escrita vertical em CJK e as decorações de texto duplas ou onduladas.

Tópicos

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

Perguntas frequentes

O que é glyph?
Mecanismo de tipografia em TypeScript para gráficos na web, com geração de fontes, composição Unicode, layout de parágrafos e renderização de texto em lote para three.js e WebGPU. Glyph é um mecanismo de tipografia para gráficos na web. Ele gera arquivos glb com dados bitmap, MSDF e/ou Slug a partir de fontes por meio de uma CLI, permitindo carregá-las rapidamente, sem processamento pesado em tempo de execução. O mecanismo lida com composição Unicode, incluindo ligaduras, texto bidirecional e limites que respeitam os grafemas, além de alinhamento de parágrafos, quebra de linha, recorte e reticências.
glyph é gratuito? Qual é a licença?
glyph é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
glyph ainda é mantido?
Manutenção ativa. O último commit de glyph foi em 21 de out. de 2026.
Para que posso usar glyph?
Renderizar rótulos e texto de HUD em cenas three.js com WebGPU. Criar interfaces 3D interativas com React Three Fiber ou TresJS. Gerar fontes de ícones em tabelas de consulta indexadas pelo nome do glifo. Extrair contornos de glifos para colisores de física ou gráficos personalizados.
Como instalar glyph?
Instale o pacote e o three.js: pnpm add @pmndrs/glyph three Incorpore uma fonte em um arquivo glb com a CLI do glyph: pnpm glyph bake --input Inter-Regular.ttf --output Inter.font.glb --bitmap 32 --msdf --slug Crie texto com a integração do three.js e renderize-o na sua cena
Onde consigo glyph?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pmndrs/glyph

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados