WebGLでテキストをレンダリングするための手法-CSSチュートリアル-php.cn

それは奇妙ではありませんか？ WebGLには、テキストをレンダリングするための機能が組み込まれていません。テキストは機能の最も基本的なようですが。実際にそれをレンダリングすることになると、物事は複雑になります。すべての言語の膨大な量のグリフをどのように説明しますか？固定幅、または比例幅のフォントをどのように使用しますか？テキストをトップからボトム、左から右へ、または左から右へとレンダリングする必要がある場合はどうしますか？数学的方程式、図、楽譜？

突然、テキストレンダリングがWebGLのような低レベルのグラフィックスAPIに位置がない理由が理にかなっています。テキストレンダリングは、多くのニュアンスを伴う複雑な問題です。テキストをレンダリングしたい場合は、創造的になる必要があります。幸いなことに、多くの賢い人々がすでにすべてのWebGLテキストのニーズに合わせて幅広いテクニックを思いつきました。

この記事では、これらのテクニックのいくつかで、必要な資産を生成する方法や、WebGLレンダラーを含むJavaScript 3DライブラリであるThreeJSでそれらを使用する方法など、学習します。ボーナスとして、各手法にはユースケースを紹介するデモがあります。

WebGL以外のテキストに関する簡単なメモ
フォントジオメトリ
テキスト（およびキャンバス）テクスチャ
ビットマップフォント
署名された距離フィールド
マルチチャネル署名距離フィールド
高さマップで3Dテキストを生成します
さらに読む

WebGL以外のテキストに関する簡単なメモ

この記事はすべてWebGL内のテキストに関するものですが、最初に考慮すべきことは、hmtlテキストを使用して逃げることができるか、WebGLキャンバスの上にオーバーレイされるキャンバスを使用できるかどうかです。テキストはオーバーレイとして3Dジオメトリを閉塞することはできませんが、スタイリングとアクセシビリティを箱から出すことができます。多くの場合に必要なのはそれだけです。

フォントジオメトリ

テキストをレンダリングする一般的な方法の1つは、通常のモデルによく似た一連の三角形でグリフを構築することです。結局のところ、ポイント、線、三角形をレンダリングすることは、WebGLの強度です。

文字列を作成するとき、各グリフは、三角形のポイントのフォントファイルから三角形を読み取ることによって作成されます。そこから、グリフを押し出して3Dにするか、マトリックス操作を介してグリフを拡大することができます。

フォントジオメトリは、少量のテキストに最適です。それは、各グリフに多くの三角形が含まれているため、描画が問題になるためです。

フォントジオメトリで今読んでいるこの正確な段落をレンダリングすると、185,084の三角形と555,252の頂点が作成されます。これはわずか259文字です。フォントジオメトリを使用して記事全体を書くと、コンピューターファンも飛行機のタービンになる可能性があります。

三角形の数は三角測量の精度と使用中の書体によって異なりますが、フォントジオメトリを使用する場合、多くのテキストをレンダリングすることはおそらく常にボトルネックになります。

フォントファイルからフォントジオメトリを作成する方法

必要なフォントを選択してテキストをレンダリングするのと同じくらい簡単な場合。私はこの記事を書いていません。通常のフォント形式は、ベジエ曲線でグリフを定義します。反対に、WebGLでそれらを描くことはCPUで非常に高価であり、複雑です。テキストをレンダリングしたい場合は、ベジエ曲線から三角形（三角形）を作成する必要があります。

いくつかの三角測量方法を見つけましたが、決して完璧ではなく、すべてのフォントで動作しない可能性があります。しかし、少なくとも彼らはあなた自身の書体を三角測量するためにあなたを始めさせるでしょう。

方法1：自動と簡単

ThreeJSを使用している場合は、FaceType.jsを介して書体を渡して、フォントファイルのパラメトリック曲線を読み取り、.jsonファイルに配置します。 3JSのフォントジオメトリ機能は、ポイントを三角測量することを処理します。

 const geometry = new 3.fontgeometry（ "hello there"、{font：font、size：80}）

ログイン後にコピー

または、3JSを使用しておらず、リアルタイムの三角測量を必要としない場合。 3Jを使用してフォントを三角測量することにより、手動プロセスの痛みを節約できます。次に、ジオメトリから頂点とインデックスを抽出し、選択したWebGLアプリケーションにそれらをロードできます。

方法2：手動と痛みを伴う

フォントファイルを三角測量するための手動オプションは、少なくとも最初は非常に複雑で複雑です。詳細に説明するためだけに記事全体が必要です。とはいえ、Stackoverflowからつかんだ基本的な実装の手順をすぐに調べます。

実装は基本的にこのように分解されます：

Opentype.jsとearcut.jsをプロジェクトに追加します。
opentype.jsを使用して、.tffフォントファイルからBezier曲線を取得します。
ベジエ曲線を閉じた形に変換し、下降エリアで並べ替えます。
どの形状が他の形状の中にあるかを把握して、穴のインデックスを決定します。
すべてのポイントを2番目のパラメーターとしてホールインデックスを使用して、イヤーカットに送信します。
ジオメトリのインデックスとしてEarcutの結果を使用してください。
呼吸。

ええ、それはたくさんです。そして、この実装はすべての書体に対して機能しない場合があります。それにもかかわらず、それはあなたを始めさせます。

ThreeJSでテキストジオメトリを使用します

ありがたいことに、ThreeJSは箱から出してテキストのジオメトリをサポートしています。お気に入りのフォントのベジエ曲線の.JSONを渡し、3JSは実行時に頂点を三角形にします。

 var loader = new 3.fontloader（）;
varフォント;
var text = "hello world"
var loader = new 3.fontloader（）;
loader.load（ 'fonts/helvetiker_ remulary.typeface.json'、function（helvetiker）{
  font = helvetiker;
  var geometry = new 3.TextGeometry（テキスト、{
    フォント：フォント、
    サイズ：80、
    高さ：5、
  }）;
}

ログイン後にコピー

利点

3D文字列を作成するために簡単に押し出されます。
マトリックス操作により、スケーリングが簡単になります。
使用する三角形の量に応じて、優れた品質を提供します。

短所

これは、三角形のカウントが高いため、大量のテキストではうまく拡張されません。各文字は多くの三角形で定義されているため、「Hello World」と同じくらい簡単なものをレンダリングすることで、7,396の三角形と22,188の頂点が得られます。
これは、一般的なテキスト効果に役立ちません。
アンチアリアシングは、後処理エイリアシングまたはブラウザのデフォルトに依存します。
大きすぎるものをスケーリングすると、三角形が表示される場合があります。

デモ：フェードレター

次のデモでは、フォントジオメトリを使用して3Dテキストを作成することがどれほど簡単かを利用しました。頂点シェーダーの内部では、時間が経つにつれて押出が増加し、減少します。それを霧と標準的な素材と組み合わせると、これらの幽霊のような文字が空白から出入りすることができます。

手紙の量が少ないことで、三角形の量がすでに数万にあることに注意してください！

テキスト（およびキャンバス）テクスチャ

テキストテクスチャを作成することは、おそらくWebGLでテキストを描く最も簡単で最も古い方法です。 Photoshopまたはその他のラスターグラフィックエディターを開き、テキストが付いた画像を描画してから、これらのテクスチャをクワッドにレンダリングすると完了です！

または、キャンバスを使用して、実行時にオンデマンドでテクスチャを作成することもできます。キャンバスをクワッドにテクスチャとしてレンダリングすることができます。

束の最も複雑ではないテクニックであることは別として。テキストテクスチャとキャンバステクスチャには、テクスチャごとに1つのクワッドのみが必要な場合、または与えられたテキストが必要です。本当に望んでいれば、英国百科事典全体を単一のテクスチャーに書くことができます。そうすれば、単一のクワッド、6つの頂点、2つの顔をレンダリングするだけでいいです。もちろん、スケールでそれを行うでしょうが、アイデアはまだ残っています。複数のグリフを同じクワッドにバッチすることができます。テキストとキャンバスの両方のテクスチャの両方の経験には、特に多くのテキストを使用する場合、スケーリングに問題があります。

テキストのテクスチャの場合、ユーザーはテキストを構成するすべてのテクスチャをダウンロードし、メモリに保つ必要があります。キャンバステクスチャの場合、ユーザーは何もダウンロードする必要はありませんが、ユーザーのコンピューターは実行時にすべてのラスタリングを行う必要があり、すべての単語がキャンバス内にある場所を追跡する必要があります。さらに、大きなキャンバスを更新するのは本当に遅い場合があります。

テキストテクスチャの作成と使用方法

テキストのテクスチャには、彼らのために派手なことは何もありません。お気に入りのラスターグラフィックエディターを開き、キャンバスにテキストを描き、画像としてエクスポートします。次に、テクスチャとしてロードし、平面にマップできます。

 //テクスチャをロードします
texture =;
const geometry = new 3.planebuffergeometry（）;
const Material new 3.meshbasicmaterial（{map：texture}）;
this.scene.add（new Mesh（Geometry、Material））;

ログイン後にコピー

WebGLアプリに多くのテキストがある場合、特に接続が遅いユーザーにとって、巨大なスプライトシートをダウンロードすることは理想的ではないかもしれません。ダウンロード時間を回避するために、オフスクリーンキャンバスを使用してオンデマンドをラスター化し、そのキャンバスをテクスチャとしてサンプリングできます。

多くのテキストをラスタ化するには少し時間がかかるので、パフォーマンスのためにダウンロード時間を取引しましょう。

 function createTextCanvas（string、parameters = {}）{
    
    const canvas = document.createelement（ "canvas"）;
    const ctx = canvas.getContext（ "2d"）;
    
    //測定できるようにフォントを準備します
    fontsize = parameters.fontsize || 56;
    ctx.font = `$ {fontsize} px monospace`;
    
    const textmetrics = ctx.measureText（text）;
    
    width = textmetrics.width;
    height = fontsize;
    
    //テキストサイズに合わせてキャンバスをサイズ変更します 
    canvas.width = width;
    canvas.height = height;
    canvas.style.width = width "px";
    canvas.style.height = height "px";
    
    //キャンバスがサイズ変更されるため、フォントを再申請します。
    ctx.font = `$ {fontsize} px monospace`;
    ctx.textalign = parameters.align || "中心" ;
    ctx.textbaseline = parameters.baseline || "真ん中";
    
    //簡単にするためにキャンバスを透明にします
    ctx.fillstyle = "透過";
    ctx.fillrect（0、0、ctx.canvas.width、ctx.canvas.height）;
    
    ctx.fillstyle = parameters.color || "白";
    ctx.filltext（text、width / 2、height / 2）;
    
    キャンバスを返します。
}

texture = new Three.texture（createTextcanvas（ "これはテキスト"））;

ログイン後にコピー

これで、以前のスニペットのように、飛行機のテクスチャーを使用できます。または、代わりにスプライトを作成することもできます。

別の方法として、より効率的なライブラリを使用して、Three-Text2DやThree-SpriteTextなどのテクスチャやスプライトを作成できます。テキストのマルチラインテキストが必要な場合は、この素晴らしいチュートリアルをチェックする必要があります。

利点

これにより、静的テキストで優れた1対1の品質が提供されます。
低い頂点/顔数があります。各文字列は、わずか6つの頂点と2つの面を使用できます。
クワッドにテクスチャを簡単に実装できます。
キャンバスやグラフィックスエディターを使用して、境界や輝きなど、効果を追加することはかなり些細なことです。
Canvasを使用すると、マルチラインテキストを簡単に作成できます。

短所

ラスター化後にスケーリング、回転、または変換された場合、ぼやけて見えます。
網膜には、テキストがカリカリに見えます。
使用するすべての文字列をラスター化する必要があります。多くの文字列は、ダウンロードする多くのデータを意味します。
キャンバスを絶えず更新し続けると、キャンバスを使用した需要のあるラスタリングは遅くなる可能性があります。

デモ：キャンバステクスチャ

Canvasテクスチャは、頻繁に変更されない限られた量のテキストでうまく機能します。そこで、同じテクスチャを再利用するクワッドを備えた単純なテキストの壁を作りました。

ビットマップフォント

フォントのジオメトリとテキストテクスチャの両方が、多くのテキストを処理するのと同じ問題が発生します。テキスト1枚あたり100万個の頂点を持つことは非常に非効率的であり、テキスト1個ごとに1つのテクスチャを作成することは実際には拡大しません。

ビットマップフォントは、すべての一意のグリフをテクスチャアトラスと呼ばれる単一のテクスチャにラスタ化することにより、この問題を解決します。つまり、各グリフのクワッドを作成し、テクスチャアトラスのセクションをサンプリングすることにより、実行時に任意の文字列を組み立てることができます。

これは、ユーザーがすべてのテキストに単一のテクスチャをダウンロードして使用するだけであることを意味します。また、グリフごとに1つのクアッドをレンダリングするだけでいいことを意味します。

この記事全体をレンダリングするには、約117,272の頂点と58,636の三角形になります。これは、 1つの段落のみをレンダリングするフォントジオメトリに比べて3.1倍効率的です。それは大きな改善です！

ビットマップフォントはグリフをテクスチャにラスター化するため、通常の画像と同じ問題に苦しんでいます。ズームインまたはスケールすると、ピクセル化されたぼやけた混乱が見え始めます。別のサイズでテキストが必要な場合は、その特定のサイズにグリフを使用してセカンダリビットマップを送信する必要があります。または、次のセクションで説明する署名付き距離フィールド（SDF）を使用することもできます。

ビットマップフォントを作成する方法

ビットマップを生成するためのツールがたくさんあります。ここに、より関連性の高いオプションがあります。

AngelCodeのBMFont - これは、BitMap形式の作成者によるものです。
Hiero - これはJavaオープンソースツールです。 AnglecodeのBMFontに非常に似ていますが、テキスト効果を追加できます。
Glyphs Designer - これは有料MacOSアプリです。
Shoebox - これは、ビットマップフォントを含むスプライトを扱うためのツールです。

この例には、AnglecodeのBMFontを使用します。これは、開始するのが最も簡単なものだと思うからです。このセクションの下部には、探している機能がないと思われる場合は、他のツールを見つけることができます。

アプリを開くと、使用できる文字でいっぱいの画面が表示されます。これについての良い点は、ギリシャのシンボルを送信する代わりに必要なグリフだけをつかむことができるということです。

アプリのサイドバーを使用すると、グリフのグループを選択して選択できます。

エクスポートの準備はできましたか？オプションに移動します→ビットマップを保存します。そしてやった！

しかし、私たちは自分よりも少し先を行っています。エクスポートする前に、確認する必要があるいくつかの重要な設定があります。

フォント設定：これにより、使用するフォントとサイズを選択できます。ここで最も重要な項目は「charの高さの一致」です。デフォルトでは、アプリの「サイズ」オプションは、ポイントの代わりにピクセルを使用します。グラフィックエディターのフォントサイズと生成されるフォントサイズの間に大きな違いが表示されます。グリフを意味のあるものにしたい場合は、「charの高さの一致」オプションを選択します。
エクスポート設定：エクスポートの場合、テクスチャサイズが2つのパワーであることを確認してください（例：16×16、32×32、64×64など）。次に、必要に応じて、「リニアMIPMAPリニア」フィルタリングを利用できます。

設定の下部には、「ファイル形式」セクションが表示されます。ここでどちらのオプションを選択しても、ファイルを読んでグリフを作成できる限り、問題ありません。

最小のファイルサイズを探している場合。私は超科学的なテストを実行し、そこですべてのlowecaseと大文字のラテン文字のビットマップを作成し、各オプションを比較しました。フォント記述子の場合、最も効率的な形式はバイナリです。

フォント記述子形式	ファイルサイズ
バイナリ	3 kb
生のテキスト	11 kb
XML	12 kb

テクスチャ形式	ファイルサイズ
PNG	7 kb
タルガ	64 kb
直接ドローの表面	65 kb

PNGは、テキストテクスチャの最小ファイルサイズです。

もちろん、ファイルサイズだけよりも少し複雑です。どのオプションを使用するかについてより良いアイデアを得るには、時間とランタイムのパフォーマンスを解析する必要があります。各フォーマットの長所と短所を知りたい場合は、このディスカッションをご覧ください。

ビットマップフォントの使用方法

ビットマップフォントのジオメトリを作成することは、自分で文字列を構築する必要があるため、テクスチャを使用するよりも少し複雑です。各グリフには独自の高さと幅があり、テクスチャの異なるセクションをサンプリングします。弦の各グリフのクワッドを作成する必要があります。そうすれば、グリフをサンプリングするために正しいUVを与えることができます。

ThreeJSで3-BMFont-Textを使用して、ビットマップ、SDFS、MSDFSを使用して文字列を作成できます。マルチラインテキストを処理し、すべてのグリフを単一のジオメトリにバッチします。 NPMのプロジェクトにインストールする必要があることに注意してください。

 var creategeometry = require（ 'three-bmfont-text'）
var loadfont = require（ 'load-bmfont'）

loadfont（ 'fonts/arial.fnt'、function（err、font）{
  //詰め込まれたビットマップグリフのジオメトリを作成します。 
  //単語は300pxにラップされ、右整合されています
  var geometry = creategeometry（{
    フォント：フォント、
    テキスト：「私のテキスト」
  }）
    
  var textureloader = new 3.textureloader（）;
  textureloader.load（ 'fonts/arial.png'、function（texture）{
    //単純な3JS素材を使用できます
    var material = new 3.meshbasicmaterial（{
      マップ：テクスチャ、
      透明：本当、
      色：0xaaffff
    }）

    //今すぐメッシュで何かをしてください！
    var mesh = new 3.mesh（幾何学、素材）
  }）
}）

ログイン後にコピー

テキストが完全な黒または完全な白として描画されるときはいつでも、反転オプションを使用します。

利点

レンダリングは速くて簡単です。
1：1の比率と解像度が独立しています。
グリフを考えると、任意の文字列をレンダリングできます。
頻繁に変更する必要がある多くのテキストに適しています。
限られた数のグリフで非常にうまく機能します。
それには、実行時のカーニング、ラインの高さ、ワードラッピングなどのサポートが含まれています。

短所

限られたキャラクターとスタイルのセットのみを受け入れます。
最適な使用法のために、事前にラスター化グリフと追加のビンパッキングが必要です。
それはぼやけて、大きなスケールでピクセル化されており、回転または変換することもできます。
レンダリングされたグリフごとに1つのクアッドしかありません。

インタラクティブなデモ：シャイニングクレジット

ラスタービットマップフォントは、いくつかのサイズとスタイルしか必要ないため、映画のクレジットに最適です。欠点は、レスポンシブデザインでは、より大きなサイズでぼやけてピクセル化されるため、テキストが応答性のあるデザインではあまり良くないということです。

マウス効果については、マウスの位置をビューのサイズにマッピングして、マウスからテキスト位置までの距離を計算することにより計算を行います。また、Z軸とY軸の特定のポイントにヒットしたときに、テキストを回転させています。

署名された距離フィールド

ビットマップフォントと同じように、署名された距離フィールド（SDF）フォントもテクスチャアトラスです。ユニークなグリフは、実行時に任意の文字列を作成できる単一の「テクスチャアトラス」にバッチになります。

しかし、ラスター化されたグリフをテクスチャに保存する代わりに、ビットマップフォントのやり方で、グリフのSDFが生成および保存され、低解像度画像から高解像度の形状が可能になります。

多角形のメッシュ（フォントジオメトリ）と同様に、SDFは形状を表します。 SDF上の各ピクセルは、最も近い表面までの距離を保存します。標識は、ピクセルが形状の内側または外側にあることを示します。記号が負の場合、ピクセルは内側にあります。正しい場合は、ピクセルが外側にあります。このビデオは、コンセプトをうまく示しています。

SDF Sは、レイトレースと体積レンダリングにも一般的に使用されます。

SDFは各ピクセルに距離を保存するため、生の結果は元の形状のぼやけたバージョンのように見えます。ハードシェイプを出力するには、グリフの境界である0.5でアルファテストする必要があります。文字「A」のSDFが通常のラスター画像とどのように比較されるかを見てください。

前述したように、SDF Sの大きな利点は、低解像度SDFから高解像度の形状をレンダリングできることです。これは、16ptのフォントSDFを作成し、あまり鮮明さを失うことなくテキストを最大100pt以上にスケーリングできることを意味します。

SDFは、2つのポイント間で値を取得できるという派手な方法である双線形補間で距離をほぼ完全に再構築できるため、スケーリングに優れています。この場合、通常のビットマップフォント上の2つのピクセル間の双線形補間により、中間の色が得られ、線形のぼやけが生じます。

SDFでは、2つのピクセル間の双線形の補間により、最寄りのエッジまでの距離が得られます。これらの2つのピクセル距離は最初と似ているため、結果の値はGLYPHに関する多くの情報を失いません。これはまた、SDFが大きくなればなるほど、より正確で、情報が少ないことを意味します。

ただし、このプロセスには注意が必要です。ピクセル間の速度の変化が線形ではない場合 -鋭い角の場合のように - 双線形補間は不正確な値を与え、SDFを元のサイズよりもはるかに高くスケーリングするとチップまたは丸い角になります。

テクスチャサイドをぶつけることは別として、唯一の実際の解決策はマルチチャネルSDFを使用することです。これが次のセクションで説明するものです。

SDF Sの背後にある科学に深く掘り下げたい場合は、このトピックに関するChris Greenの修士論文（PDF）をチェックしてください。

利点

回転、スケーリング、または変換された場合でも、パリスネスを維持します。
ダイナミックなテキストに最適です。
それらは、サイズ比に良質の品質を提供します。単一のテクスチャを使用して、品質を大幅に失うことなく、小さくて巨大なフォントサイズをレンダリングできます。
彼らは、グリフごとに4つの頂点のみの頂点数が低いです。
アンチアリアーシングは、境界線、ドロップシャドウ、およびアルファテストであらゆる種類の効果を作るため、安価です。
それらはMSDFよりも小さい（少し見ることができます）。

短所

テクスチャが解像度を超えてサンプリングされると、角または欠けたコーナーが生じる可能性があります。（繰り返しますが、MSDFがどのようにそれを防ぐことができるかがわかります。）
小さなフォントサイズでは効果がありません。
それらはモノクログリフでのみ使用できます。

マルチチャネル署名距離フィールド

マルチチャネル署名距離フィールド（MSDF）フォントは、3つのカラーチャネルすべてを使用してほぼ完璧な鋭い角を生成できるSDFのかなり最近のバリエーションであり、かなり最近のバリエーションです。彼らは最初はかなり気になりますが、彼らが現れるよりも使いやすいので、あなたを先送りさせないでください。

3つのカラーチャネルすべてを使用すると、より重い画像が発生しますが、それがMSDFSに通常のSDFよりもはるかに優れた品質比率を与えます。次の画像は、最大50pxまでスケーリングされたフォントのSDFとMSDFの違いを示しています。

通常のSDFのように、MSDFは距離を最も近いエッジまで保存しますが、鋭いコーナーを見つけるたびにカラーチャネルを変更します。 2つのカラーチャンネル以上が同意する場所で描画することで形状を取得します。もう少しテクニックが関係していますが。このMSDFジェネレーターのREADMEをチェックして、より徹底的に説明してください。

利点

それらは、SDFよりも高い品質とスペースの比率をサポートしています。多くの場合、より良い選択です。
スケーリングすると鋭い角を維持します。

短所

それらには小さなアーティファクトが含まれているかもしれませんが、それらはグリフのテクスチャサイズを上げることで避けることができます。
彼らは、実行時に3つの値の中央値をフィルタリングする必要がありますが、これは少し高価です。
それらはモノクログリフとのみ互換性があります。

MSDFフォントを作成する方法

MSDFフォントを作成する最も簡単な方法は、MSDF-BMFont-WEBツールを使用することです。関連するカスタマイズオプションのほとんどがあり、すべてブラウザで数秒でジョブを完了します。または、Aフレームの人々によってすでにMSDFに変換されているGoogleフォントが多数あります。

また、SDFまたは書体の生成を検討している場合、問題のあるグリフのおかげで特別な調整が必要です。 MSDF-BMFONT-XML CLIは、物事を過度に混乱させることなく、幅広いオプションを提供します。どのように使用するかを見てみましょう。

まず、NPMからグローバルにインストールする必要があります。

 NPMインストールMSDF-BMFONT-XML -G

ログイン後にコピー

次に、オプションを備えた.ttfフォントファイルを指定します。

 msdf-bmfont ./open-sans-black.ttf  -  output-type json  -  font-size 76 -texture-size 512,512

ログイン後にコピー

これらのオプションは少し掘り下げる価値があります。 MSDF-BMFONT-XMLは、フォントを微調整するための多くのオプションを提供しますが、MSDFを正しく生成するために必要なオプションはほんのいくつかあります。

-t または -Field-Type <msdf>：MSDF-BMFONT-XMLは、デフォルトでMSDFS GLYPH ATLASESを生成します。代わりにSDFを生成する場合は、-T SDFを使用して指定する必要があります。</msdf>
-f または--output-type ：msdf-bmfont-xmlは、実行時にJSONに解析する必要があるXMLフォントファイルを生成します。 JSONをすぐにエクスポートすることで、この解析ステップを回避できます。
-s、 - font-size ：フォントサイズが非常に小さい場合、いくつかのアーティファクトと欠陥が表示される場合があります。フォントサイズを上げると、ほとんどの場合、それらを取り除きます。この例は、「M.」という文字の小さな欠陥を示しています。
-m または - テクスチャーサイズ：すべてのキャラクターが同じテクスチャーに収まらない場合、2番目のテクスチャが作成されて作成されます。マルチページのグリフアトラスを利用しようとしない限り、テクスチャサイズを増やして、1つのテクスチャーに合うように、特別な作業を避けることをお勧めします。

MSDFとSDFフォントの生成に役立つ他のツールがあります。

MSDF-BMFONT-WEB：MSDFSを作成するためのWebツール（SDFではなく）をすばやく簡単に作成します
MSDF-BMFONT：CairoとNode-Canvasを使用したノードツール
MSDFGEN：他のすべてのMSDFツールがに基づいている元のコマンドラインツール
Hiero：ビットマップとSDFフォントの両方を生成するためのツール

SDFおよびMSDFフォントの使用方法

SDFおよびMSDFフォントもGlyph Atlaseであるため、BitMapフォントのように3-BMFont-Textを使用できます。唯一の違いは、フラグメントシェーダーで距離フィールドのグリフを取得しなければならないことです。

SDFフォントでの仕組みは次のとおりです。距離フィールドはグリフの外側の.5を超え、グリフ内の0.5未満の値であるため、各ピクセルのフラグメントシェーダーでアルファテストを行う必要があります。

 const fragmentshader = `

  均一なVEC3色;
  均一なsampler2dマップ。
  変化するVEC2 VUV;
  
  void main（）{
    vec4 texcolor = texture2d（map、vuv）;
    //グリフの内側のみをレンダリングします。
    float alpha = step（0.5、texcolor.a）;

    gl_fragcolor = vec4（color、alpha）;
    if（gl_fragcolor.a <p>同様に、ボックスからアンチアリアーシングを伴う3-BMFontテキストからフォントをインポートできます。その後、Rawshadermaterialで直接使用できます。</p><pre rel="JavaScript"> let sdfshader = require（ 'three-bmfont-text/shaders/sdf'）;
let material = new 3.Rawshadermaterial（msdfshader（{{
  マップ：テクスチャ、
  透明：本当、
  色：0x000000
}））;

ログイン後にコピー

MSDFフォントは少し異なります。彼らは、2つのカラーチャンネルの交差点で鋭い角を再現します。 2つ以上のカラーチャネルが同意する必要があります。アルファテキストメッセージを実行する前に、3つのカラーチャネルの中央値を取得して、彼らが同意する場所を確認する必要があります。

 const fragmentshader = `

  均一なVEC3色;
  均一なsampler2dマップ。
  変化するVEC2 VUV;

  フロート中央値（フロートR、フロートG、フロートB）{
    return max（min（r、g）、min（max（r、g）、b））;
  }
  
  void main（）{
    vec4 texcolor = texture2d（map、vuv）;
    //グリフの内側のみをレンダリングします。
    float sigdist = median（texcolor.r、texcolor.g、texcolor.B）-0.5;
    float alpha = step（0.5、sigdist）;
    gl_fragcolor = vec4（color、alpha）;
    if（gl_fragcolor.a <p>繰り返しますが、箱からのアンチアリアーシングも伴うMSDFShaderを使用して、Three-BMFont-Textからインポートすることもできます。その後、Rawshadermaterialで直接使用できます。</p><pre rel="JavaScript"> msdfshader = require（ '3-bmfont-text/shaders/msdf'）;
let material = new 3.Rawshadermaterial（msdfshader（{{
  マップ：テクスチャ、
  透明：本当、
  色：0x000000
}））;

ログイン後にコピー

デモ：スターウォーズイントロ

Star Wars Drawlのイントロは、MSDFとSDFフォントが複数のサイズでテキストを提供する必要があるため、MSDFとSDFフォントがうまく機能する良い例です。単一のMSDFを使用でき、テキストは常にシャープに見えます！ただし、悲しいことに、3-BMフォントは正当なテキストをまだサポートしていません。左の正当化を適用すると、よりバランスのとれたプレゼンテーションが行われます。

軽いセイバー効果のために、私は平面のサイズの目に見えない平面をレイキャストし、同じサイズのキャンバスに描き、シーンの位置をテクスチャ座標にマッピングすることでキャンバスをサンプリングします。