4月17日「SDFフォントって何」

今日初めて知ったのですが……

こんなのがあるんですね。

SDF、(Signed Distance Field) あるいは、(Signed Distance Function)というマッピング方式・レンダリング方式を使ってフォントを表示する方法があるそうです。

ふつうのビットマップフォントは拡大するとカクカクになってしまうじゃないですか？　

拡大した文字をきれいなエッジで描くためには、アウトラインフォントを使って描画するのがふつう、だと思っていたんですけれど、

このSDFという方法を使うと、きれいな拡大縮小ができるらしいんですね。

SDFでマッピングがされた文字、なんだか普通の文字を単純にぼかしただけに見えます。拡大する前からこんなボケーッとした文字をどうすればいいというのでしょう？

SDFは Signed Distance Field、あるいは Signed Distance Function の略で、『符号つき距離』場、あるいは『符号つき距離』関数という意味だそうです。

呼び名は難しいですが、『対象』からの『距離』を空間にプロットしたもの、ということらしいです。

『対象』というのはフォントの場合は『文字の境界』が選ばれています。
境界と重なっているところの距離はゼロ、境界からはなれるごとに距離は増えていきます。

『符号付き』なのは、文字の外側ならプラス、文字の内側ならマイナス符号を、距離にくっつける、という意味らしいです。

最初のボケボケの文字、文字の内側はマイナス距離なので真っ白、文字の外側はだんだん暗い色になっていって、文字の境界から離れすぎると真っ黒になる、という図だったらしいです。

単純にボケボケなわけではなく、文字のエッジに沿って明暗の勾配ができているのがポイント、なんじゃないかと思います。

ビットマップフォントのようなエッジのきいた画像を拡大すると、拡大による補間処理によってエッジの部分が削れたり丸まったりしてしまい、カクカクしたあまりきれいな画像になりません。

しかしSDF文字を拡大するとやっぱりぼんやりしているのですが、拡大による補間処理がぼんやり部分にうまく作用して、ほとんど形をくずさないままで拡大することができます。

この画像から輪郭線をふたたび取り出すことで、美しいアウトラインが得られる、ということらしいです。

なんとなくできそうな気もしますけれど、え、そんな簡単なことでいいの？　というのがちらついて、釈然としません。

この方法、「A」のナナメ線のような勾配が広く取れる部分にはとてもうまく動作しますが、「A」の穴空き部分のような小さな部分はSDFで表現できる部分が小さいため、角が丸まったりあんまりうまく動作しないそうです。

そんな時のために色を3チャンネル使用する「MSDF」という方法もあるらしいです……！

うーん、調べないといけないことがいっぱいありますね。