Babylon.Font

について

assemblyscriptで記述されたwasmを使用して、babylonjsのテキストメッシュを生成します。

例

インストール

CDNで

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

またはnpm

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

使用法

 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 ) ;
} ) ( ) ;

ドキュメント

Compiler

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

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

署名（2）は、Bundler / Devサーバーを使用する場合に役立ちます。

 // 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) ：テキストを測定します。 Metricsを返します。

Metrics

• .advanceWidth
• .ascender
• .descender

---

TextMeshBuilder

テキストメッシュビルダーを作成します

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

• .create(options, scene) ：押し出したテキストメッシュを作成します。
  • メッシュが作成された場合、 Meshを返します。
  • メッシュが作成されていない場合、 nullを返します。
  • WASMが処理に失敗した場合、 undefined返品（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 ) ;

元。後退する

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

ありがとう

Maxgraey- Assemblyscript/WASMの最適化に役立ちます

opentypejs -JavaScriptを使用してOpenTypeフォントを読み取り、書き込みます。

Earcut-あなたのwebglアプリ用の最速かつ最小のJavaScriptポリゴン三角測量ライブラリ

Babylonjs-フレンドリーなJavaScriptフレームワークに詰め込まれたパワフルで、美しく、シンプルで、オープンなゲームとレンダリングエンジン。

assemblyscript-タイプスクリプトの厳格なサブセット（基本的には、型を備えたJavaScript）をBINARYENを使用してWebAssemblyにコンパイルします。

ライセンス

mit