tlab-games.com

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

はじめに

ttf/otfフォントをSDFで描画する方法を探してみました．PythonとOpenGLで実装しています．完成版のソースコードは，Githubに置きました．

TL;DR

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

ttfもotfもベジエカーブと直線で文字の輪郭を定義しています．これらの情報のみで2Dのシェイプをレンダリングするシェーダーが 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)   # これを追加するだけ

すると

次こそいけるか？

完成!! (おわり)

来てくれてありがとう!!

技術ブログ