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

• Basic GlyphGeometry
• Fix drawing vertices order
• Basic GlyphShader
• Basic GlyphMaterial
• Basic Glyph (Mesh)
• Glyph anchorX and anchorY
• How to debug example
• Shader "chunkification"
• Handles per lines and per character's index
• 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
• Normal compute fix
• LineHeight bug fix
• Negate map support
• Writing the history of text rendering (resources are welcome at [email protected]).

License

GPLv3

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