three-glyph


MSDF Bitmap Fonts implementation for three.js.

ES6 adaptation of three-bmfont-text and more..

Context

While creating text in three.js is straightforward, achieving both high fidelity and good performance can prove to be a complex task.

Signed Distance Fields (SDF) are a method of reproducing vector shapes from a texture representation, popularized in this paper by Valve. The integration of signed distance fields into AngelCode BMFont files enables developers to create high-quality bitmap fonts with smooth, scalable outlines in a wide range of applications, offering both performance and visual fidelity benefits.

While SDFs offer efficient and high-quality rendering of simple shapes, Multi-channel Signed Distance Fields (MSDF) extend this capability to capture intricate details and sharp features in complex shapes, making them suitable for a wider range of applications, including text rendering, iconography, and graphic design.
To learn more about MSDFs you can read Viktor Chlumský Master's thesis and check out his github.

Demo

* Basic
* Font atlas previewer
* Animation example

$3

* Per index (read about staggers, source)
* Transmission material

Getting Started

``sh
npm install -S three-glyph
`

Usage

$3

#### Load the font
`js
import * as THREE from "three";
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { Glyph } from "three-glyph";

const manager = new THREE.LoadingManager();
const fontLoader = new FontLoader(manager);
const textureLoader = new THREE.TextureLoader(manager);

const font = null;
fontLoader.load(
'./Roboto-Regular.json',
( raw ) => { font = raw.data }
);
const texture = this.textureLoader.load( "./Roboto-Regular.png");

manager.onLoad = function() {
// Draw glpyhs
};
`
#### Draw glyphs
`js
const glyph = new Glyph({
text: 'Hello world',
font,
map: texture
});
scene.add(glyph);
`

The class Glyph extends the class Object3D.

$3


- text (required)
The text to layout. Newline characters (\n) will cause line breaks.
- font (required)
The BMFont definition which holds chars, kernings, etc..
- map (required)
The texture atlas containing our glyphs.
- width
The desired width of the text box, causes word-wrapping and clipping in "pre" mode. Leave as undefined to remove word-wrapping (default behaviour).
- letterSpacing
The letter spacing in pixels (default: 0).
- lineHeight
The line height in pixels (default to font.common.lineHeight).
- textAlign
The horizontal alignment of each line of text within the overall text bounding box. Can be one of left, right or center`.

Roadmap

* [x] Basic GlyphGeometry
* [x] Fix drawing vertices order
* [x] Basic GlyphShader
* [x] Basic GlyphMaterial
* [x] Basic Glyph (Mesh)
* [x] Glyph anchorX and anchorY
* [x] How to debug example
* [x] Shader "chunkification"
* [ ] Handles per lines and per character's index
* [x] API animation per character
* [ ] API animation per line
* [ ] Example with custom map texture (video)
* [ ] Example with alphaMap per character example with tutorial.
* [ ] Right-to-left layout
* [ ] Responsive : html context mirror layout
* [ ] How to generate a MSDF Bitmap font
* [ ] Font tweakings process
* [ ] MTSDF support (it's a real thing), rust doc, rust quoting Chlumsky, article
* [ ] Documentation
* [x] Normal compute fix
* [x] LineHeight bug fix
* [x] Negate map support
* [ ] Writing the history of text rendering (resources are welcome at tranremi@live.fr).

License

GPLv3

Copyright (c) 2024-present, Rémi Tran