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

Advanced

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

Getting Started

npm install -S three-glyph

Usage

Basic

Load the font

  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

  const glyph = new Glyph({
    text: 'Hello world',
    font,
    map: texture
  });
  scene.add(glyph);

The class Glyph extends the class Object3D.

Properties

• 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

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

License

GPLv3

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