WebGLのルールと同様に、シンプルであると思われるものはすべて、実際には非常に複雑です。描畫(huà)線、デバッグシェーダー、テキストレンダリングなど、WebGLでうまくやるのは非常に難しいです。

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

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

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

目次

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

WebGL以外のテキストに関する簡(jiǎn)単なメモ

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

フォントジオメトリ

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

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

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

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

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

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

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

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

方法1：自動(dòng)と簡(jiǎn)単

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

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

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

方法2：手動(dòng)と痛みを伴う

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

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

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

ええ、それはたくさんです。そして、この実裝はすべての書(shū)體に対して機(jī)能しない場(chǎng)合があります。それにもかかわらず、それはあなたを始めさせます。

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

ありがたいことに、ThreeJSは箱から出してテキストのジオメトリをサポートしています。お?dú)荬巳毪辘违榨━螗趣违佶弗ㄇ€の.JSONを渡し、3JSは実行時(shí)に頂點(diǎn)を三角形にします。

 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、
  }）;
}

利點(diǎn)

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

短所

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

デモ：フェードレター

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

手紙の量が少ないことで、三角形の量がすでに數(shù)萬(wàn)にあることに注意してください！

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

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

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

束の最も複雑ではないテクニックであることは別として。テキストテクスチャとキャンバステクスチャには、テクスチャごとに1つのクワッドのみが必要な場(chǎng)合、または與えられたテキストが必要です。本當(dāng)に望んでいれば、英國(guó)百科事典全體を単一のテクスチャーに書(shū)くことができます。そうすれば、単一のクワッド、6つの頂點(diǎn)、2つの顔をレンダリングするだけでいいです。もちろん、スケールでそれを行うでしょうが、アイデアはまだ殘っています。複數(shù)のグリフを同じクワッドにバッチすることができます。テキストとキャンバスの両方のテクスチャの両方の経験には、特に多くのテキストを使用する場(chǎng)合、スケーリングに問(wèn)題があります。

テキストのテクスチャの場(chǎng)合、ユーザーはテキストを構(gòu)成するすべてのテクスチャをダウンロードし、メモリに保つ必要があります。キャンバステクスチャの場(chǎng)合、ユーザーは何もダウンロードする必要はありませんが、ユーザーのコンピューターは実行時(shí)にすべてのラスタリングを行う必要があり、すべての単語(yǔ)がキャンバス內(nèi)にある場(chǎng)所を追跡する必要があります。さらに、大きなキャンバスを更新するのは本當(dāng)に遅い場(chǎng)合があります。

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

テキストのテクスチャには、彼らのために派手なことは何もありません。お?dú)荬巳毪辘违楗攻咯`グラフィックエディターを開(kāi)き、キャンバスにテキストを描き、畫(huà)像としてエクスポートします。次に、テクスチャとしてロードし、平面にマップできます。

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

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

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

 function createTextCanvas（string、parameters = {}）{
    
    const canvas = document.createelement（ "canvas"）;
    const ctx = canvas.getContext（ "2d"）;
    
    //測(cè)定できるようにフォントを準(zhǔn)備します
    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";
    
    //キャンバスがサイズ変更されるため、フォントを再申請(qǐng)します。
    ctx.font = `$ {fontsize} px monospace`;
    ctx.textalign = parameters.align || "中心" ;
    ctx.textbaseline = parameters.baseline || "真ん中";
    
    //簡(jiǎn)単にするためにキャンバスを透明にします
    ctx.fillstyle = "透過(guò)";
    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（ "これはテキスト"））;

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

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

利點(diǎn)

• これにより、靜的テキストで優(yōu)れた1対1の品質(zhì)が提供されます。
• 低い頂點(diǎn)/顔數(shù)があります。各文字列は、わずか6つの頂點(diǎn)と2つの面を使用できます。
• クワッドにテクスチャを簡(jiǎn)単に実裝できます。
• キャンバスやグラフィックスエディターを使用して、境界や輝きなど、効果を追加することはかなり些細(xì)なことです。
• Canvasを使用すると、マルチラインテキストを簡(jiǎn)単に作成できます。

短所

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

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

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

ビットマップフォント

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

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

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

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

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

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

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

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

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

アプリを開(kāi)くと、使用できる文字でいっぱいの畫(huà)面が表示されます。これについての良い點(diǎn)は、ギリシャのシンボルを送信する代わりに必要なグリフだけをつかむことができるということです。

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

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

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

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

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

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

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

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

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

ビットマップフォントのジオメトリを作成することは、自分で文字列を構(gòu)築する必要があるため、テクスチャを使用するよりも少し複雑です。各グリフには獨(dú)自の高さと幅があり、テクスチャの異なるセクションをサンプリングします。弦の各グリフのクワッドを作成する必要があります。そうすれば、グリフをサンプリングするために正しい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）{
  //詰め込まれたビットマップグリフのジオメトリを作成します。 
  //単語(yǔ)は300pxにラップされ、右整合されています
  var geometry = creategeometry（{
    フォント：フォント、
    テキスト：「私のテキスト」
  }）
    
  var textureloader = new 3.textureloader（）;
  textureloader.load（ 'fonts/arial.png'、function（texture）{
    //単純な3JS素材を使用できます
    var material = new 3.meshbasicmaterial（{
      マップ：テクスチャ、
      透明：本當(dāng)、
      色：0xaaffff
    }）

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

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

利點(diǎn)

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

短所

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

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

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

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

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

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

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

多角形のメッシュ（フォントジオメトリ）と同様に、SDFは形狀を表します。 SDF上の各ピクセルは、最も近い表面までの距離を保存します。標(biāo)識(shí)は、ピクセルが形狀の內(nèi)側(cè)または外側(cè)にあることを示します。記號(hào)が負(fù)の場(chǎng)合、ピクセルは內(nèi)側(cè)にあります。正しい場(chǎng)合は、ピクセルが外側(cè)にあります。このビデオは、コンセプトをうまく示しています。

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

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

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

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

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

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

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

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

利點(diǎn)

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

短所

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

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

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

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

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

利點(diǎn)

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

短所

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

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

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

また、SDFまたは書(shū)體の生成を検討している場(chǎng)合、問(wèn)題のあるグリフのおかげで特別な調(diào)整が必要です。 MSDF-BMFONT-XML CLIは、物事を過(guò)度に混亂させることなく、幅広いオプションを提供します。どのように使用するかを見(jiàn)てみましょう。

まず、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は、フォントを微調(diào)整するための多くのオプションを提供しますが、MSDFを正しく生成するために必要なオプションはほんのいくつかあります。

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

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

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

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

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

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

 const fragmentshader = `

  均一なVEC3色;
  均一なsampler2dマップ。
  変化するVEC2 VUV;
  
  void main（）{
    vec4 texcolor = texture2d（map、vuv）;
    //グリフの內(nèi)側(cè)のみをレンダリングします。
    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（{{
  マップ：テクスチャ、
  透明：本當(dāng)、
  色：0x000000
}））;

MSDFフォントは少し異なります。彼らは、2つのカラーチャンネルの交差點(diǎn)で鋭い角を再現(xiàn)します。 2つ以上のカラーチャネルが同意する必要があります。アルファテキストメッセージを?qū)g行する前に、3つのカラーチャネルの中央値を取得して、彼らが同意する場(chǎng)所を確認(rèn)する必要があります。

 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）;
    //グリフの內(nèi)側(cè)のみをレンダリングします。
    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（{{
  マップ：テクスチャ、
  透明：本當(dāng)、
  色：0x000000
}））;

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

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

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

ボーナスヒント：高さマップを備えた3Dテキストの生成

フォントのジオメトリは別として、私たちがカバーしたすべてのテクニックは、単一のクワッドに文字列またはグリフを生成します。フラットテクスチャから3Dジオメトリを構(gòu)築したい場(chǎng)合は、高さマップを使用することが最善です。

高さマップは、テクスチャを使用してジオメトリの高さが跳ね上がる手法です。これは通常、ゲームで山を生成するために使用されますが、テキストをレンダリングするのにも役立つことがわかります。

唯一の警告は、テキストが滑らかに見(jiàn)えるために多くの顔が必要であることです。

さらに読む

さまざまな狀況では、さまざまなテクニックが必要です。ここで私たちが見(jiàn)たものは銀の弾丸であり、彼らはすべて彼らの利點(diǎn)と短所を持っています。

WebGLテキストを最大限に活用するのに役立つ多くのツールとライブラリがあります。學(xué)習(xí)を続けたい場(chǎng)合は、WebGLを超えてこれらのリンクのいくつかをチェックしてください。

• 3Jにフォントをロードする方法の數(shù)
• テキストHeavy Spotifyキャンペーンに関するケーススタディ
• MSDFについての興味深い會(huì)話
• より多くのフォントレンダリングテクニック
• GPUでベクターアート（グリフ）をレンダリングします
• Freetypeはテキストレンダリングをどのように行いますか
• ビットマップフォントを使用して興味深いエフェクトを作成します

以上がWebGLでテキストをレンダリングするための手法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。