Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

WebVR でのテキストのレンダリング

（https://with.in/）は、ニュースメディアでストーリーテリングを行うためのプラットフォームであり、バーチャルリアリティWebVRの存在を知ったのは 2015 年、私たちはすぐにその可能性に注目しました。今日、その興味の対象は Google のウェブプラットフォーム固有のサブドメインに https://vr.with.in/.VR 対応ブラウザを使用すれば、誰でもサイトにアクセスし、ボタンをクリックしてヘッドセットを装着すると、さまざまな VR 映画をご紹介します。

現在、これには Daydream View の Chrome が含まれますが、これらに限定されるものではありません。対象ヘッドマウントディスプレイに搭載された https://webvr.info/.

他のバーチャルリアリティ固有のレンダリング環境と同様に、シーンの 3 次元表現に大きく依存しています。このシーンには、カメラ、視点、任意の数のオブジェクトが含まれます。リソースの管理とこのシーン、カメラ、オブジェクトは Three.js: <canvas> 要素を利用してスローします。 GPU にレンダリングできますさまざまなタイプの Three.js アドオンがシーンを WebVR で表示できます主な 2 つは、 THREE.VREffect それぞれの目に合わせてビューポートを作成し、 THREE.VRControls 視点（例: 回転、位置）を翻訳するためのヘッドマウントディスプレイなど）を迫力のある方法で撮影します。データの有効活用の見てみましょう。詳しくは、 Three.js WebVR の例をご覧ください。

WebVR についてさらに探求を進めると、問題が発生しました。結果ウェブコンテンツにおいて、テキストはその重要な要素です。大半の企業は動画ベースです。「サイト内」というテキストでコンテンツを囲みます。ユーザーインターフェースと映画や関連映画に関する追加情報はすべてテキストで構築します。さらに、このテキストはすべて DOM 内で作成されています。Google WebVR 探索と https://vr.with.in/ はすべて <canvas>。

どのような選択肢がありますか？

幸い、これを実現するための取り組みが進行中です。実際、Google の調査ではテキストを 3 次元でレンダリングする効果的な方法を <canvas> 要素で環境を構築します。以下は、見つかった数例のマトリックスです。それぞれに長所と短所が示されています

	解像度に依存しない	活字上の特徴	パフォーマンス	実装の容易さ
2D キャンバステキスト		○	○	○
三角ベクトルテキスト	○		○
押し出し 3D テキスト	○
符号付き距離フィールドのビットマップテキスト	○	○	○

Google の決定: SDF ビットマップフォント

ctx.fillText() を含む 2D キャンバスでは、テキストの折り返し、文字間隔、行を可能にただし、拡大すると文字がぼやけて表示されるため、文字がぼやける遠くはなれません。キャンバスのテクスチャのサイズを大きくすることもできますが、上限を超えてしまう可能性があります。テクスチャが大きすぎると、テクスチャのサイズが制限されたり、パフォーマンスに影響したりする可能性があります。

押し出し成形された 3D テキストは、三角形をしたベクターテキストと本質的に同じですが、少なくとも 2 倍のジオメトリとなるよう、深さと場合によってはベベルを用意します。次のいずれかタイトルやロゴでは少量ですが、効果は得られません。大量のテキストに対応しており、タイポグラフィも備えていません。

ビットマップフォントでは、1 文字につき 1 つのクワッド（2 つの三角形）が使用されるため、パフォーマンスが三角測量ベクトルを使用します。テクスチャマップスプライトを使用するため依然としてラスターベースですが、SDF が使用されます基本的に解像度に依存しないため、2D よりも見栄えが良くなります。キャンバスのテクスチャです Matt DesLauriers 氏の 3-bmfont-text には、テキストの折り返し、文字間隔、行の高さ、配置ですはみ出しが途切れない。フォントサイズはスケールによって制御されます。この方法を選んだのは、パフォーマンスを維持しながら設計に最適なオプションです残念ながら簡単に実装できますので皆様のお役に立つことを願って手順を説明します開発者の作業効率を高めます

1. ビットマップフォントを生成（.png + .fnt）

Hiero はビットマップフォントのパッキングです実行するためのツールです。Hiero のドキュメントには、複雑なビルドプロセスを実行せずに実行できますまず Java をインストールします。できます。runnable-hiero.jar をダブルクリックしても Hiero を開き、コンソールで次のコマンドを入力します。

java -jar runnable-hiero.jar

Hiero を起動したら、.ttf または .otf のデスクトップフォントを開き、レンダリングを Java に変更してエフェクトを有効にする文字がグリフキャッシュの正方形全体を埋めるようにサイズを大きくする距離フィールド効果を追加したり、距離フィールドのスケールと広がりを調整したりできます。「スケール値は解像度のようなものです。数値が高いほどぼやけにくくなりプレビューのレンダリングに時間がかかります次に、使用できます。.png 画像と AngelCode .fnt フォントの説明ファイル。

2. AngelCode を JSON に変換する

ビットマップフォントが生成されたので、次は Matt DesLauriers 氏の JavaScript アプリ load-bmfont npm パッケージ

load-bmfont をブラウザ化してフロントエンドで使用することはできますが、実行する load-bmfont.js と Hiero の AngelCode .fnt を .json ファイル:

npm install
node load-bmfont.js

これで、load-bmfont をバイパスして、 .json フォントファイル。

var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');

r.onreadystatechange = function() {
    if (r.readyState === 4 && r.status === 200) {
    setup(JSON.parse(r.responseText));
    }
};

r.send();

function setup(font) {
    // pass font into TextBitmap object
}

3. Browserify の 3-bmfont-テキスト

フォントが読み込まれたら、Matt の 3 つの bmfont-text があります。今回のアプリでは Node は使用していないため、 browserify three-bmfont-text.js 使用可能な three-bmfont-text-bundle.js に変換する

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. SDF シェーダー

[afwidth] スライダーと [threshold] スライダーを調整します。 vr.with.in/archive/text-sdf-bitmap/ 符号付き距離フィールドシェーダーの影響を確認しましょう。

5. 用途

便宜上、 TextBitmap ラッパークラスブラウザ化された 3 つの bmfont-text のようになります。

<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>

.json フォントファイルの XHR リクエストを作成し、次のコールバックを使用します。

var bmtext = new TextBitmap({ options });

テキストを変更するには:

bmtext.text = 'The quick brown fox jumps over the lazy dog.';

scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );

ビットマップフォントの .png は、text-bitmap.js の THREE.TextureLoader で読み込まれます。

TextBitmap には、three.js レイキャストインタラクション用の目に見えないヒットボックスも含まれているマウス、カメラ、手で追跡するモーションコントローラ（Oculus Touch や Vive のコントローラもサポートしています。テキストを変更すると、ヒットボックスのサイズは自動更新されます。

3.js シーンに Bmtext.group が追加されます。子データにアクセスする必要がある場合 / Object3D の場合、テキストのシーングラフは次のようになります。

6. JSON の非圧縮と xoffset の変更

カーニングが不完全な場合は、json の xoffset を編集する必要があるかもしれません。貼り付けこの json を Jsbeautifier.org にアップロードして圧縮解除されます。

xoffset は基本的に、1 文字のグローバルカーニングです。カーニングは 2 つの特定の文字を並べて表示するDeployment のデフォルト値は、実際には違いはなく、簡単に行うにはその配列を空にして JSON のファイルサイズを減らすことができます。その後カーニングの xoffset を編集する

まず、HTML パターンのどの文字がどの char ID に関連付けられているかを把握する必要があります json。three-bmfont-text-bundle.js で、 240 行目の後に console.log を挿入します。

    var id = text.charCodeAt(i)
    // console.log(id);

次に、[dat.gui] テキストフィールドに https://vr.with.in/archive/text-sdf-bitmap/ コンソールで文字の ID を確認します。

たとえば、Google のビットマップフォントでは、「j」は右に離れすぎている可能性がありますその char ID は 106 です。JSON で "id": 106 を見つけて、その xoffset を -1 から変更します。 -10 に変更します。

7. レイアウト

複数のテキストブロックがあり、絶対位置指定と同様に、すべて手動で配置する必要があるすべての DOM 要素を自分で CSS で作成できる。これを CSS で実現できると想像できるでしょうか。

    * { position: absolute; }

3D のテキストレイアウトはそういうものです。詳細ビュー: タイトル、著者、 description、duration はそれぞれ新しい TextBitmap オブジェクトで、スタイル、色、スケールなど:

author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;

これは、各 TextBitmap グループのローカル原点が垂直方向であることを前提としています。 TextBitmap メッシュの上部に合わせて配置されます（ text-bitmap.js あります。後でこれらのオブジェクトのテキストを変更した場合、それらの位置も再計算する必要があります。ここでは、テキストの y 位置のみが変更されるが、テキストを Z 方向に押したり引いたりすることや、軸を中心として描画されます

まとめ

WebVR のテキストとレイアウトは、それほど簡単でなく、 HTML や CSS として広く使用されています。実用的なソリューションがあれば、もっと多くのことが可能 WebVR では、従来の HTML ウェブページよりも高速です。WebVR はすでに存在します。明日はもっと良いツールがあるでしょう。それまでは、おすすめしますユビキタスなフレームワークなしで開発すると、興味深いですね