MSDF Bitmap Fonts implementation for three.js.
ES6 adaptation of three-bmfont-text and more..
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.
npm install -S three-glyph
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
};
const glyph = new Glyph({
text: 'Hello world',
font,
map: texture
});
scene.add(glyph);
The class Glyph
extends the class Object3D
.
-
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 tofont.common.lineHeight
). -
textAlign
The horizontal alignment of each line of text within the overall text bounding box. Can be one ofleft
,right
orcenter
.
- [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).
Copyright (c) 2024-present, Rémi Tran