はじめに
タイトルの通り,ttf/otfフォントをSDFで描画する方法が何かないかを探してみました. PythonとOpenGLで実装する場合は,以下のポイントさえ押さえれば実現できそうです. Githubにソースコードを置いているので,実際に動かしてみたい人はそちらをご参照ください!
TL;DR
fonttoolsの cu2quと removeOverlaps を使おう!!
2次ベジエ曲線のSDFレンダリング
ttfもotfもベジエカーブと直線で文字の輪郭を定義しています. これらの情報のみでフォントをレンダリングする方法は shadertoy に良さそうなものが紹介されていました.取り合えずOpenGLのシェーダはこれを使うことにします.
otfから2次ベジエ曲線を取得する
ttfが2次ベジエ曲線を使用しているのに対してotfは3次ベジエ曲線を使用しているんですよね. 今回使うシェーダーは2次ベジエ曲線を前提としているのでこのままだとotfをレンダリング出来ないわけです. ここでやりたいことは3次ベジエ曲線から2次ベジエ曲線への変換,これは fonttoolsの cu2quを使用すれば実現できそうです.
from fontTools.cu2qu.cu2qu import *
qus = curve_to_quadratic(cu, 0.1)
(最後)フォントの輪郭を抽出しよう
ここまでやれば十分かと思ったら
うおっ!?なんか違う!!
どうやらベジエ曲線が重なっている部分をマージしないといけないみたいです.ということで fonttoolsの removeOverlaps を使います.
from fontTools.ttLib import TTFont
from fontTools.ttLib.removeOverlaps import removeOverlaps
font = TTFont(font_path)
removeOverlaps(font) # これを追加するだけ
すると
次こそいけるか?
きたー✌(おわり)