Firefox Reality

MozillaがMixed RealityやWebVRの研究に力を入れていて、最近VR用のブラウザをリリースしたので、Firefox RealityとWebVRコンテンツの制作について調べてみました。

• Mixed Reality Blog:Firefox Reality
• Explore the immersive web with Firefox Reality.

Firefox Reality

Firefox Realityは、ユーザー、コンテンツ制作者、ハードウェアパートナーとの議論と研究を重ね、ヘッドマウントディスプレイ用に一から全て再考して開発されたブラウザです。

Firefox Realityは、VRの空間に（自由にリサイズできる）ブラウザウィンドウが浮いているように表示されます。まだ2Dコンテンツが多いため、2Dコンテンツと3Dコンテンツをスムーズに切り替えられるようになっていて、操作はコントローラーで行います。VRは3D空間なので、コントローラーからはビームが飛び、トリガーをクリックするとビームが当たっているところを選択できます。
コントローラーはスマホ以上にタイピング操作が難しく、解決策として考え出されたのが音声入力で、Firefox Realityには音声入力による検索機能が搭載されています。

ユーザーにヒアリングを行った結果、最も多かったフィードバックは、面白いコンテンツを探すのが大変ということでした。そこで、ブラウザをたち上げたホーム画面に、クリエイターの制作したコンテンツを集めて表示するようにしています。

また、最近の個人情報保護の観点からプラバシーモードも搭載しています。

Firefox Realityの開発はまだまだ始まったばかりで、これからいろいろな機能を実装してベストなブラウザを目指す！ということで、今後どのような進化を遂げるか楽しみです！

デベロッパーズガイド

WebVRコンテンツの制作方法を調べてみたら、MozillaのBlogに「デベロッパーズガイド」があったので、要約します。

WebVRコンテンツを制作する場合、WebGLが必要になりますが、多くのデベロッパーはライブラリーやフレームワーク、ゲームエンジンなどを使用します。WebGLをサポートしているものには、「three.js」、「A-Frame」、「Babylon」、「Amazon Sumerian」「PlayCanvas」などがあり、どのツールを使用するにしても、新しいWebXR APIを実装しているブラウザはまだないため、WebVR 1.1 APIをサポートしているものを使用する必要があります。

● 制作はスマホ用に最適化するイメージで

PCを使用するヘッドマウントディスプレイもありますが、スマートフォンを使用するものやOculus GoやLenovo Mirageなど、スタンドアロンのヘッドマウントディスプレイもあるため、WebVRコンテンツを制作する場合は、スマホ用に最適化するイメージで制作します。少なくとも、両目用に2回レンダリングする必要があり、それだけの負荷がかかることをは覚えておいた方が良いでしょう。

WebVRコンテンツを快適に再生させるためには、ドローコールを最小限にする心がけが必要です。ドローコール数は、オブジェクトのポリゴン数よりもはるかに重要で（ポリゴン数も十分重要なのですが）、10ポリゴンのオブジェクトを100回コールするのは、100ポリゴンのオブジェクトを10回コールするのに比べて、遥かに遅くなってしまいます。

3Dモデルは、glTFの代わりにGLBファイルに圧縮します。復元の時間は変わりませんが、ダウンロード時間を短縮できます。変換ツールはさまざまあり、「このツール（by SBtron）」でも変換することができます。

テクスチャは、1024px × 1024px以下の2のべき乗のサイズを使用します。モバイルのGPUはPCのようなテクスチャメモリはなく、また、テクスチャサイズが大きいとダウンロード時間も長くなります。通常は512pxか、128pxを使用すると良いでしょう。

最初の画面の読み込みを早くするために、可能であれば最初の読み込みを1MB以内におさめるなど、データの読み込み設計には注意を払う必要があります。多くのフレームワークには、データの読み込みに関する仕組みが用意されていて、例えば、Three.jsは、DefaultLoadingManagerを使用しています。

フレームレートは最も優先されるべき事項です。ユーザーは、内容が面白ければローポリの3Dモデルや多少荒いグラフィック我慢はできても、フレームレートが飛んでしまったり、カクカクした動きのアニメーションにはストレスを感じます。

WebVRのエコシステムは今まさに進化している最中なので、これから次々と新しいデバイスが登場することが予測されます。デバイスを判別して、特定のデバイス向けだけにハードコーディングするようなプログラミングは、今は動くかもしれませんが、新しいデバイスが登場した途端すぐに破綻してしまうので、やめたほうが良いでしょう。また、2Dコンテンツを制作する際も、どんなサイズのブラウザにも対応できるようにレスポンシブで制作した方が良いでしょう。

6DoFコントローラーのヘッドマウントディスプレイや3DoFのもの、マウスを使っているものやタッチスクリーンを使っているもの、インプットデバイスはなく視線だけのものなど様々なものがあるため、すべてのケースにおいてきちっと動作することを検討しなくてはいけません。もし、あるケースで動かない場合は、その旨をユーザーに通知しましょう。

ユーザーの許可なく3DのVRコンテンツを見せたり、サウンドを再生させることを禁止しているデバイスもあるため、どのようなことが起こるか説明する2Dのスプラッシュ画面を制作し、「Enter VR」ボタンを設置しましょう。

Oculus GoやFirefox Realityがリリースされたばかりで、まだまだこれからのWebVR業界。コンテンツも少なく、便利なライブラリーもない状態ですが、だからこそいろいろなアイデアを実装していく楽しみと可能性があって、まさにブルーオーシャンな状態で、これからが楽しみです。