技術ブログ

ttf/otfフォントをSDFで描画するする方法 (?)

はじめに

タイトルの通り,ttf/otfフォントをSDFで描画する方法が何かないかを探してみました. PythonとOpenGLで実装する場合は,以下のポイントさえ押さえれば実現できそうです. Githubにソースコードを置いているので,実際に動かしてみたい人はそちらをご参照ください!


TL;DR

fonttoolscu2quremoveOverlaps を使おう!!


2次ベジエ曲線のSDFレンダリング

ttfもotfもベジエカーブと直線で文字の輪郭を定義しています. これらの情報のみでフォントをレンダリングする方法は shadertoy に良さそうなものが紹介されていました.取り合えずOpenGLのシェーダはこれを使うことにします.


otfから2次ベジエ曲線を取得する

ttfが2次ベジエ曲線を使用しているのに対してotfは3次ベジエ曲線を使用しているんですよね. 今回使うシェーダーは2次ベジエ曲線を前提としているのでこのままだとotfをレンダリング出来ないわけです. ここでやりたいことは3次ベジエ曲線から2次ベジエ曲線への変換,これは fonttoolscu2quを使用すれば実現できそうです.


    from fontTools.cu2qu.cu2qu import *
    qus = curve_to_quadratic(cu, 0.1)
                    

(最後)フォントの輪郭を抽出しよう

ここまでやれば十分かと思ったら


うおっ!?なんか違う!!


どうやらベジエ曲線が重なっている部分をマージしないといけないみたいです.ということで fonttoolsremoveOverlaps を使います.


    from fontTools.ttLib import TTFont
    from fontTools.ttLib.removeOverlaps import removeOverlaps
    font = TTFont(font_path)
    removeOverlaps(font)   # これを追加するだけ
                    

すると




次こそいけるか?




きたー✌(おわり)