Text Rendering 1.0.0

last update : 2026/9/28

同じ Ag を6つの方法で描き、拡大して見比べます。

ビットマップ、SDF、MSDF、三角形化は assets/fonts/roboto の変換ファイルを使用します。

A の角と g の曲線に差が出ます。回転バーで各面の角度を調整できます。三角形化だけ厚みとライトを付けています。

曲線はステンシルとMSAAを使用します。拡大時は枠の外が切れるため輪郭の一部を比較してください。

Canvas / Bitmap128px
SDF / MSDF48px
距離範囲8px
フィルターLinear / mipmapなし

Comparison

同じフォントと拡大率で比較します。生成解像度は方式ごとに異なります。MTSDFは含みません。