Skip to content
Create 3d text in BabylonJS
WebAssembly JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app/gen
dist
rc
src
src_wasm
.gitignore
LICENSE
README.md
index.html
package-lock.json
package.json

README.md

Babylon.Font

Library

  • Compile glyph to shapes using WebAssembly.
  • Build mesh from shapes.

Tool - Gen

  • Dump mesh geometry to json.
  • Screenshot to png.

Usage

<script src='babylon.js'></script>
<script src='earcut.js'></script>
<script src='opentype.js'></script>
<script src='babylon.font.js'></script>
<script>
(async function() {

  // Create BabylonJS environment
  const scene = ..;
  
  // Build compiler
  const compiler = await BF.Compiler.Build('compile_wa.wasm');
  
  // Install font(s)
  const font = await BF.Font.Install('a.ttf', compiler); 

  // Build mesh for single character
  const fontSize = 1;
  const ppc = 0;
  const eps = 0;
  const shapes = Font.Compile(font, 'c', fontSize, ppc, eps);
  const depth = 1;
  const sideOrientation = BABYLON.Mesh.DOUBLESIDE;
  const mesh = Font.BuildMesh(shapes, { depth, sideOrientation }, scene);

  // Measure a character
  const metrics = Font.Measure(font, 'c', fontSize);
  metrics.advanceWidth;
  metrics.ascender;
  metrics.descender;

})();
</script>

API

Compiler

Compiler.Build

const compiler = await Compiler.Build(
  wasmUrl   // compiler (.wasm) url
);          //-> Compiler{} 

Font

Font.Install

const font = await Font.Install(
  fontUrl,   // font (.otf/.ttf) url 
  compiler   // Compiler{}
);           //-> Font{}

font.raw;    // opentype.Font{}

Font.Measure

const metrics = Font.Measure(
  font,   // Font{}
  name,   // char name, e.g. 'B'
  size    // font size
);        //-> Font.Metrics{}

metrics.advanceWidth;
metrics.ascender;
metrics.descender;

Font.Compile

const shapes = Font.Compile(
  font, // Font{} 
  name, // char name, e.g. 'B'
  size, // font size
  ppc,  // no. intermediate points used to interp. a bezier curve
  eps   // threshold of decimation (>1/1000 of font size)
);      //-> Array<Font.Shape> 

Font.BuildMesh

const mesh = Font.BuildMesh(
  shapes, // Array<Font.Shape> 
  option, // option of MeshBuilder.CreatePolygon() [optional] 
  scene   // BABYLON.Scene{} [optional]  
);        //-> BABYLON.Mesh
You can’t perform that action at this time.