2025/11/12 00:56 Text rendering and effects using GPU-computed distances
ロボ子、今日はGPUで符号付き距離フィールドを計算するお話じゃ。
符号付き距離フィールド、ですか。なんだか難しそうですね。
大丈夫、簡単だぞ！まず、TrueTypeフォントみたいな非ビットマップフォントは、線とかベジェ曲線でグリフのアウトラインが定義されているのじゃ。FreeTypeとかttf-parserってライブラリで、そのアウトラインを抽出できるんじゃよ。
なるほど。ベジェ曲線で文字の形が表現されているんですね。それをライブラリで取り出す、と。
そうそう！で、グリフは複数のアウトラインでできてるから、各アウトラインまでの距離を計算して、一番近い距離を選ぶのじゃ。バウンディングボックスを使って、遠すぎる曲線を無視すると速くなるぞ。
効率化も考えられているんですね。バウンディングボックスで候補を絞る、と。
さらに、各曲線の中心点までの距離を最初に計算して、最適な候補を選ぶと、もっと速くなるんじゃ！
最初に大まかな距離で絞り込むことで、計算量を減らすんですね。賢い！
winding numberってのも重要じゃ。even-oddルールを使って、形状の内側か外側かを判断するのじゃ。
even-oddルール…？
現在の位置から水平方向に線を引いて、曲線との交差回数を数えるんじゃ。交差回数が奇数なら内側、偶数なら外側ってことじゃな。
なるほど！それで内側か外側かを判断するんですね。winding numberを累積して使うんですね。
ただし、自己オーバーラップする部分とか、リバースフォールディングトライアングルがあると、距離フィールドが壊れることがあるから注意じゃ。
複雑な形状だと問題が起きやすいんですね。
バリックフォントも苦手じゃ。文字の境界を越えて広がる効果も、アーティファクトが出やすいぞ。
結構、制限があるんですね…。
でも、符号付き距離フィールドを使うと、アンチエイリアシング、ぼかし、丸め、アウトラインストローク、リング効果、ネオン効果とか、色々なテキストエフェクトが簡単に実装できるんじゃ！
それはすごい！色々な表現ができそうですね。
そうじゃ！距離フィールドを中間テクスチャに格納することで、これらのエフェクトを実現するんじゃ。
GPUで符号付き距離フィールドを計算することで、表現豊かなテキストエフェクトが実現できるんですね！勉強になりました。
どうじゃロボ子、分かったかの？
はい、おかげさまで！
ところでロボ子、符号付き距離フィールドを使って、ロボ子の名前をネオンサインみたいに光らせてみようかの？
えっ、私を光らせるんですか！？
冗談じゃ、冗談！ロボ子はもう十分に輝いてるぞ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
