ycw/babylon.font

Generate text mesh for BabylonJS using WASM, written in AssemblyScript.

About

Generate text mesh for babylonjs using WASM, written in AssemblyScript.

Example

Installation

With cdn

https://cdn.jsdelivr.net/gh/ycw/babylon.font@{VERSION}/build/babylon.font.js

or npm

npm i ycw/babylon.font
npm i ycw/babylon.font#{VERSION_TAG}

Usage

import * as BABYLON from "babylonjs"
import * as opentype from "opentype.js"
import earcut from "earcut"
import { Compiler, Font, TextMeshBuilder } from "babylon.font";

(async function() {
  const compiler = await Compiler.Build();
  const font = await Font.Install("a.ttf", compiler, opentype);
  const builder = new TextMeshBuilder(BABYLON, earcut);
  const scene = ..;
  const mesh = builder.create({ font, text: "foo" }, scene);
})();

Docs

Compiler

// (1) auto-probe .wasm url
await Compiler.Build();

// (2) specify .wasm url
await Compiler.Build(wasmUrl);

The signature(2) is useful when using bundler / dev server :

// ex. obtain static asset url for ViteJS/Vite
import wasmUrl from "babylon.font/build/optimized.wasm?url";
const compiler = await Compiler.Build(wasmUrl);

---

Font

await Font.Install(fontUrl, compiler, opentype);
// fontUrl:  font(.otf/.ttf) url
// compiler: a Compiler instance
// opentype: the 'opentype.js' lib

• .measure(text, fontSize) : measure text; return a Metrics.

Metrics

• .advanceWidth
• .ascender
• .descender

---

TextMeshBuilder

Construct a text mesh builder

new TextMeshBuilder(BABYLON, earcut);
// BABYLON: the 'babylonjs' lib
// earcut: the 'earcut' lib

• .create(options, scene) : create extruded text mesh.
  • returns Mesh if a mesh is created.
  • returns null if no mesh is created, e.g. text are all whitespaces.
  • returns undefined if wasm failed to process (e.g. out of mem)

builder.create({
  font, // Font instance
  text, // text
  size, // font size; default is 100
  ppc, // points per curve, [0, 255], default is 2
  eps, // decimation threshold, default is 0.001

  // plus `BABYLON.MeshBuilder.CreatePolygon` options
  depth,
  sideOrientation,
  faceColors,
  faceUV,
  backUVs,
  frontUVs,
  updatable,
}, scene);

ex. fallback

var mesh = builder.create(opt1, scene)
if (mesh === undefined) mesh = builder.create(opt2, scene) 

Thanks

MaxGraey - Helps with AssemblyScript/WASM optimizations

OpentypeJS - Read and write OpenType fonts using JavaScript.

Earcut - The fastest and smallest JavaScript polygon triangulation library for your WebGL apps

BabylonJS - A powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

AssemblyScript - Compiles a strict subset of TypeScript (basically JavaScript with types) to WebAssembly using Binaryen.

License

MIT

babylon.font's Issues

Exceeding some character count results in a memory related crash

This seems to be both font and character specific.

Experimenting with the NotoSansMono-Thin and updating the example (bare/index.js) text value to 241 * characters results in the following traceback:

bf.0.1.0.babylon.font.wasm:0x237 Uncaught (in promise) RuntimeError: memory access out of bounds
    at bf.0.1.0.babylon.font.wasm:0x237
    at bf.0.1.0.babylon.font.wasm:0x268
    at bf.0.1.0.babylon.font.wasm:0xed
    at bf.0.1.0.babylon.font.wasm:0x6f5
    at bf.0.1.0.babylon.font.wasm:0xb37
    at bf.0.1.0.babylon.font.wasm:0x250d
    at bf.0.1.0.babylon.font.wasm:0x207c
    at curr.<computed> [as compile] (loader.js:379:18)
    at Compiler.compileEncoded (babylon.font.js:104:45)
    at Compiler.compile (babylon.font.js:146:21)

Using 241 l characters instead, does not result in this crash. Other fonts can result in much lower limits before this happens.

Is this some kind of natural limitation (if so, is there a calculation that can prevent it) or a bug in memory management somewhere?

Could you use more simpler render in live demo?

Currently live deom uses post-processing (sharping & glow effect) + soft shadows. It's ok for desktop but quite expensive for mobile devices. Also WebGL2.0 not supported on any iOS device (and in Desktop Safari browser). So will be great fallback to WebGL1 in this case.

why demo have be removed ?

why demo have be removed ? It is powerful