テキスト
テキストコンポーネントは、符号付き距離フィールド（SDF）フォントのテキストをレンダリングします。 [exampleimage]: https://cloud.githubusercontent.com/assets/674727/22357731/f704544a-e3ee-11e6-8e6e-96c3c4e84958.png ![サンプルイメージ][exampleimage]
# 導入
なお、3Dでテキストをレンダリングするのは大変です。2DのWeb開発では、ブラウザのレンダラーとレイアウトエンジンがすべてを処理するため、テキストは最も基本的なものです。3Dでは、そのような贅沢はできないのです。A-Frameでテキストをレンダリングする方法には、他にも以下のようないくつかの異なる方法があります。
デフォルトとして、その比較的良いパフォーマンスとわかりやすさから、SDFベースのテキストをコアコンポーネントとして搭載しています。このコンポーネントは mattdesl の three-bmfont-text (opens new window) ライブラリを使用しています。標準のテキストコンポーネントは長い歴史を持っており、コミュニティコンポーネントとして始まり、A-Frameに搭載されるまでに何度もフォークされ、改良されました!
# 例
ここでは、他の設定をあまり行わず、内容だけを定義したテキストの基本的な例を示します。
<a-entity text="value: Hello World;"></a-entity>
アラインメント、アンカー、ベースライン、スケーリング、オートサイズの設定については、他の例を参照してください。
- テキストの例 (opens new window) (code (opens new window))
- テキストのアンカー例 (opens new window) (code (opens new window))
- テキストシナリオ (opens new window) (code (opens new window))
- テキストサイズ (opens new window) (code (opens new window))
これらのサンプルシーンのいずれかを開き、<ctrl> + <alt> + i を押してインスペクタを開き、可能なすべての値で遊んでみて、その効果を即座に確認してください。
# プロパティ
| Property | 概要 | デフォルト値 |
|---|---|---|
| align | 複数行のテキストの配置(左、中央、右) | left |
| alphaTest | アルファ値がこの値より小さい場合、テキストピクセルを破棄します。 | 0.5 |
| anchor | 水平方向の位置決め（左、中央、右、整列）。 | center |
| baseline | 縦位置（上、中央、下）。 | center |
| color | 文字色 | white |
| font | フォント テキストをレンダリングするためのフォント（A-Frame のストックフォントの名前、またはフォントファイルの URL デフォルト | default |
| fontImage | テキストをレンダリングするためのフォント画像テクスチャのパス。デフォルトはフォント名で、拡張子は.pngに置き換えています。純正フォントを使用している場合は指定する必要はありません。 | derived from font name |
| height | テキストブロックの高さ。 | derived from text size |
| letterSpacing | 文字の間隔をピクセル単位で指定します。 | 0 |
| lineHeight | 行の高さ（ピクセル）。 | derived from font file |
| opacity | 0 から 1 までの値で、0 は完全な透明、1 は完全な不透 明を意味する。 | 1.0 |
| shader | テキストをレンダリングするために使用されるシェーダー。 | sdf |
| side | レンダリングする側面。(front, back, double) | front |
| tabSize | タブサイズ（スペース）。 | 4 |
| transparent | テキストが透明であるかどうか。 | true |
| value | 実際のテキストの内容。改行とタブは \n と \t でサポートされます。 | '' |
| whiteSpace | 空白をどのように扱うか（normal, pre, nowrapなど）。ホワイトスペースについてもっと読む (opens new window)。 | normal |
| width | 幅をメートル単位で表したもの。 | ジオメトリ由来 |
| wrapCount | 文字を折り返す前の文字数（多かれ少なかれ）。 | 40 |
| wrapPixels | 文字を折り返す前の画素数 | wrapCount由来 |
| xOffset | パディングを追加するために適用する X オフセット。 | 0 |
| zOffset | 背景としてジオメトリを使用する場合に、Zファイトを回避するために適用するZオフセット。 | 0.001 |
The implementation is based on mattdesl's three-bmfont-text (opens new window). Read more about the text properties (opens new window).
# イベント
| イベント名 | 概要 |
|---|---|
| textfontset | フォントソースが読み込まれたときに発行される |
# フォント
Web Fontsのように簡単にはいきませんが、異なるフォントを指定することができます。テキストコンポーネントのデフォルトは、マルチチャンネル符号距離（MSDF）フォントを使用するrobotoです。MSDFは、シャープなコーナーやエッジを保持するのに役立ちます。
# Stock Fonts
A-Frameの内蔵フォントから1つ選択します。これらのフォントは、CDN上から読み込まれます。アプリケーションをオフラインでより良く動作させたい場合は、これらのフォントをローカルにダウンロードし、URL経由でそれらを指定してください。
| Stock MSDF Fonts | URL |
|---|---|
| roboto | https://cdn.aframe.io/fonts/Roboto-msdf.json |
| Stock SDF Fonts | URL |
|---|---|
| aileronsemibold | https://cdn.aframe.io/fonts/Aileron-Semibold.fnt |
| dejavu | https://cdn.aframe.io/fonts/DejaVu-sdf.fnt |
| exo2bold | https://cdn.aframe.io/fonts/Exo2Bold.fnt |
| exo2semibold | https://cdn.aframe.io/fonts/Exo2SemiBold.fnt |
| kelsonsans | https://cdn.aframe.io/fonts/KelsonSans.fnt |
| monoid | https://cdn.aframe.io/fonts/Monoid.fnt |
| mozillavr | https://cdn.aframe.io/fonts/mozillavr.fnt |
| sourcecodepro | https://cdn.aframe.io/fonts/SourceCodePro.fnt |
# カスタムフォント
font プロパティと fontImage プロパティで異なるフォントを指定することができます。
<a-entity text="font: mozillavr; value: Via stock font name."></a-entity>
<a-entity text="font: https://cdn.aframe.io/fonts/mozillavr.fnt; value: Via URL."></a-entity>
<a-entity text="text: Hello World; font: ../fonts/DejaVu-sdf.fnt; fontImage: ../fonts/DejaVu-sdf.png"></a-entity>
指定しない場合、fontImageはフォントの名前になりますが、拡張子は.pngに置き換えられます。例えば、フォントパスの末尾が mozillavr.fnt の場合、fontImage テクスチャのデフォルトは mozillavr.png になります。
# SDFフォントを生成する
純正フォントに加え、ビットマップフォントパッキングツール「Hiero」 (opens new window)を使用してSDFフォントを生成することができます。SDFフォントの生成については、こちらのガイド (opens new window)をご覧ください。
また、WebベースのMSDFツール (opens new window)や、コマンドラインでmsdfgen (opens new window)やmsdf-bmfont (opens new window)を使用してMSDFフォントを生成することも可能です。MSDFフォントのためのツールは、SDFの代替品よりも成熟していない場合があります。
以下は、Hieroで生成したフォントArial BlackとSDFフォントDejaVuを比較した例です。
# 非ASCII文字
非アスキー文字を使用するには、独自のカスタムフォントを作成する必要があります。最も簡単な方法は、ウェブベースのMSDFツール (opens new window)を使用することです。必要な文字セットを選択し、独自のカスタムmsdfフォントのzipファイルを生成します。
以下は、使用できるフランス語の文字セットの例です。
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.?!/:;,*§£$ø@+°-~#&²'{}[]|`\()=%*µ àâéèëêïîöôùüûÀÂÉÈËÊÏÎÖÔÜÛçÇ€
msdfフォントのzipファイルをダウンロードしたら、それを解凍し、pngファイルとjsonファイルの両方をA-Frameのディレクトリに置きます。A-Frame 0.9.0以降では、*.pngを*-msdf.pngにリネームする必要はなくなり、A-Frameはjsonファイルで定義された画像を読み込むようになりました。
最後に、文字化けを防ぐために、<meta>タグでHTMLに使用する文字セットを指定する必要があります。文字化けした場合、レンダリングされません。
<html>
<head>
<meta charset="UTF-8">
<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-text value="ABCあいうえお日本語" font="custom-msdf.json" font-image="custom-msdf.png" negate="false" scale="2 2 1" position="-2 2 -4"></a-text>
</a-scene>
</body>
</html>
# サイズ変更
テキストのサイズを変更するには
widthを変更する。wrapCountを変更する。（決めた幅の中にどれくらいの文字数を納めるか）wrapPixelsを変更する。- スケールコンポーネントを変更する。
- Position でテキストを近づけたり遠ざける。。
テキストは、A-Frame単位で幅を指定することで折り返すことができます。
カスタムレイアウトが必要な場合や、テキストの境界を知る必要がある場合は、テキストの出力長を以下のように動的に事前計算することができます。
totalWidth = data.value.length * (data.width / data.wrapCount)
# 自動縮尺調整
テキストコンポーネントは、ジオメトリコンポーネント（例：背景の平面）と一緒に使用すると、フィットするように特別な動作を導入します。これは、幅と高さが定義されている 2D フレンドリーなジオメトリ（ボックス、プレーンなど）でのみ機能することに注意してください。テキストは、ジオメトリに対して拡大縮小、境界線、整列させることができ、また、テキストに合わせてジオメトリを自動拡大縮小することができます。
# テキストに合わせたジオメトリのスケーリング
To have the text component's width property automatically scale to match the
geometry component's width, do not specify a width for the text component:
ジオメトリをテキストに合わせて自動的に拡大縮小するには、ジオメトリ コンポーネントの幅と高さのプロパティを自動に設定し、テキスト コンポーネントの幅を希望どおりに設定します。この例では、平面の幅は 4 単位に設定され、高さはテキストの実際の高さに一致するように設定されます。
<a-entity
geometry="primitive: plane; width: 4; height: auto"
material="color: blue"
text="value: This text will be 4 units wide."></a-entity>
# テキストに合わせたジオメトリのスケーリング
ジオメトリをテキストに合わせて自動的に拡大縮小するには、ジオメトリ コンポーネントの幅と高さのプロパティを自動に設定し、テキスト コンポーネントの幅を希望どおりに設定します。この例では、平面の幅は 4 単位に設定され、高さはテキストの実際の高さに一致するように設定されます。
<a-entity
geometry="primitive: plane; height: auto; width: auto"
material="color: blue"
text="width: 4; value: This text will be 4 units wide."></a-entity>
なお、ジオメトリとテキストのどちらにも幅が指定されていない場合、テキストの幅のデフォルトは1単位（メートル）となり、ジオメトリの幅も1単位になります。
<a-entity
geometry="primitive: plane"
material="color: blue"
text="value: 1-wide\ndefault."></a-entity>
# 制限事項
テキストコンポーネントは、three-bmfont-text ライブラリ (opens new window)およびその姉妹モジュールのすべての機能を利用するものではありません。
ビットマップフォントレンダリングは、フォントに含まれる文字に制限されます（Unicodeには対応していません）。SDFフォントレンダリングは、滑らかでシャープなエッジを生成する傾向がありますが、これを回避する方法はあります (opens new window)。
生成されたテキストはレイキャスターの交差テストには適していません。レイキャスターやカーソルの検出には、テキスト コンポーネントと一緒にジオメトリ コンポーネントを使用する必要があります。
# より理解を深めるために
WebGL、three.js、A-Frameにおけるテキストレンダリングの詳細について興味がある方は、以下のリンクから背景を読むことができます。 [mattdesl]: http://slides.com/mattdeslauriers/hacking-with-three-js#/7 [parris]: https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/ [valve]: http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
three-bmfont-textドキュメント (opens new window)- [three.jsをハッキングする][mattdesl]
- [2015年になってもテキストを描くのは難しい (WebGL, ThreeJS)][parris]
- [ベクターテクスチャと特殊効果のアルファテスト倍率の改善][valve]
← ステータス トラックドコントロール →