ファントレンダリングの基礎から

2026年2月1日

フォントレンダリングは、よく当たり前だと考えられがちな技術です。
それなしでコンピュータを使うことを想像するのは難しいでしょう。
しかし、本当にどれほど難しいのでしょうか？実際には思っているよりもずっと大変です。

1. 独自フォントレンダラーを構築する理由

• 深い理解 – インターネットを利用できるようにしてくれる基盤技術を把握できます。
• 作業量の直感 – Webページや GUI を描画するために必要なものを直感的に掴めます。
• パフォーマンス洞察 – フォントキャッシュが重要である理由と、レンダリング時間を短縮する方法を学べます。
• 拡張性 – SDF を使ったプログラム的境界線の追加など、機能拡張が可能です。

2. TTF ファイル形式

2.1 高レベル概要

TTF は Unicode コードポイント → グリフ情報をマップします。
主なテーブルは以下の通りです。

glyf

その他有用なテーブル（必ずしも必要ではない）：

• head

  ,

  maxp

  – グローバルフォント情報

• hhea

  – 上端/下端、全体縦サイズ

• hmtx

  – 各グリフの水平進行量

• kern

  – カーニングペア

2.2 文字から形状へ

1. cmap を使ってグリフインデックスを取得。
2. loca でそのオフセットを探す。
3. glyf から形状を抽出。

3. グリフ解析

TTF のグリフは 輪郭（contour）で構成され、各輪郭は一連の二次ベジェ曲線で記述されます。

• 曲線は開始点・制御点・終了点の三点からなる。
• 輪郭は閉じたループで、外側の輪郭は時計回り、穴（inner contour）は反時計回りに描かれる。

3.1 ポイント構造

struct GlyphPoint {
    B8   on_curve;   // 曲線上にある場合 true
    V2   position;   // 修正済み（絶対座標）
};

3.2 圧縮処理

• 欠損点 – オフ曲線点が連続している場合、両者の中点に暗黙的な on‑curve 点を挿入。
• 直線ケース – 二つの連続した on‑curve 点は直線であり、退化ベジェとして扱う。

便利なモデル例：

struct GlyphCurve {
    V2 point;   // 曲線開始点
    V2 control;
};
// この曲線の終点は次の曲線の開始点に暗黙的に設定される。

3.3 合成グリフ

一部のグリフはサブグリフ（例えばアクセント）から構築されます。
仕様では、これらを結合する際に適用すべき変換が定義されています。

4. グリフラスタ―化

1. ターゲットビットマップ – アトラスのどこへ描画するか決める。
2. 各スキャンライン（

   y

   ）で：
   • ターゲットピクセル空間からグリフ座標系に変換。
3. すべてのベジェ曲線との交点を求める：
   • 二次方程式を解き、

     0 ≤ t ≤ 1

     を満たす値を取得。
   • 分母がゼロになる退化（直線）ケースに対処。
4. ウォーリングルール – 交点の数 (+1 / -1) をカウントして「内部」か「外部」か判定。
5. 内部にあるピクセルを塗りつぶす。

結果: 生のビットマップアトラスが得られる。

5. 生ビットマップの欠点

6. Signed Distance Fields (SDF)

6.1 SDFとは？

SDF は各ピクセルに対し、形状の最も近いエッジまでの符号付き距離を格納します：

• 内部では負値
• 外部では正値

この滑らかな勾配は、ハードウェアが任意解像度で線形補間できるようにする。

6.2 SDF の構築

1. 高解像度ビットマップを描画（例：高さ＝64）。
2. ターゲット SDF ビットマップの各ピクセルについて：
   • カーネル（拡散係数、例 4）内で反対側のピクセルまでの距離を検索。
   • 距離を記録し

     [0, max]

     にクリップ。
3. 距離を 8 ビット値へマッピングしてアトラスに保存。

6.3 GLSL でのレンダリング

#version 330 core
uniform sampler2D atlas_image;
uniform vec3   text_color;
uniform float  threshold; // 内部/外部の切り替え点
uniform float  smoothing; // 遷移帯域幅

in  vec2 glyph_tex_coord;
out vec4 frag_color;

void main()
{
    float dist = texture(atlas_image, glyph_tex_coord).r;
    float alpha = smoothstep(threshold - smoothing,
                             threshold + smoothing,
                             dist);
    frag_color = vec4(text_color, alpha);
}

• threshold

  は形状が内部から外部へ変わる位置を決めます。

• smoothing

  はその遷移の滑らかさを調整します。

6.4 結果

SDF を使ったレンダリングは、すべての解像度でクリーンに見え、複数高解像度ビットマップを保存するよりメモリ効率が良いです。

7. 要約と参考資料

• 独自レンダラーを構築するとフォント技術への深い洞察が得られます。
• TTF の解析はコードポイント → グリフインデックス → 形状データのマッピングで構成されます。
• 生ビットマップのラスタ―化は単純ですが制限があります；SDF がスケーリングとアンチエイリアス問題を解決します。

参考資料

実装は[こちら]（リンク省略）で確認できます。