- Compile glyph to shapes using WebAssembly.
- Build mesh from shapes.
<script src='babylon.js'></script>
<script src='earcut.js'></script>
<script src='opentype.js'></script>
<script type='module'>
import { Compiler, Font } from './babylon.font.mjs';
(async function() {
// Create BabylonJS environment
const scene = ..;
// Build compiler
const compiler = await Compiler.Build('compiler.wasm');
// Install font(s)
const font = await Font.Install('a.ttf', compiler);
// Build mesh for single character
const shapes = Font.Compile(font, 'c', ..); // see ### Font.Compile
const mesh = Font.BuildMesh(shapes, ..); // see ### Font.BuildMesh
// Measure a character
const metrics = Font.Measure(font, 'c', fontSize);
metrics.advanceWidth;
metrics.ascender;
metrics.descender;
})();
</script>const compiler = await Compiler.Build(
wasmUrl // compiler (.wasm) url
); //-> Compiler{}const font = await Font.Install(
fontUrl, // font (.otf/.ttf) url
compiler // Compiler{}
); //-> Font{}
font.raw; // opentype.Font{}const metrics = Font.Measure(
font, // Font{}
name, // char name, e.g. 'B'
size // font size
); //-> Font.Metrics{}
metrics.advanceWidth;
metrics.ascender;
metrics.descender;const shapes = Font.Compile(
font, // Font{}
name, // char name, e.g. 'B'
size, // font size
ppc, // no. of intermediate points used to interp. a bezier curve [0, 255]
eps // threshold of decimation, e.g. 0.001
); //-> Array<Font.Shape>const mesh = Font.BuildMesh(
shapes, // Array<Font.Shape>
option, // options(excludes shape & holes[]) of MeshBuilder.CreatePolygon()
scene // BABYLON.Scene{}
); //-> BABYLON.MeshMaxGraey - 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent