Provide geometry and material in THREE.js for MSDF (multi-channel signed distance fields) glyph and more
npm install three-glyph
MSDF Bitmap Fonts implementation for three.js.
ES6 adaptation of three-bmfont-text and more..
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.
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`.Copyright (c) 2024-present, Rémi Tran