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

• [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 [email protected]).

License

GPLv3

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