オンライン勉強会が増えたことによって、VR空間を使ったイベントの需要が増えています。そのため、Mozillaの「Mozilla Hubs」にも注目が集まっています。
今回は、Mozilla Hubsを調べるうちに見つけた「networked-aframe」の概要について説明いたします。
以下の環境で動作確認しています。
・Firefox 76.0.1 (64 ビット) on Mac OSX 10.15.4
・iOS 13.3.1 on iPhone8
・iOS 13.3.1 on iPad 6th
・Firefox 76.0.1 (64ビット) on Windows10 (1909)
・Oculusアプリ 16.0.0.118.452 with Oculus Rift CV1
- 1. Mozilla Hubsとは？
- 2. networked-aframeとは？
- 3. networked-aframeの環境構築
- 4. 動作確認
- 5. tips： VRヘッドセットや端末のセンサを使うには、https化が必要
- 6. おわりに
1. Mozilla Hubsとは？
Twitter公式アカウントの説明がわかりやすかったので引用します。
Hubs is an online 3D collaboration platform that works for desktop, mobile, and VR platforms.
引用元：Mozilla Hubs (@MozillaHubs) | Twitter
VR空間でアバターを介して音声会話ができたり、3DCGオブジェクト、画像、動画などを共有できる仕組みです。Webベースのため、アプリインストールは不要で、Webブラウザだけで動きます。
専用のVR空間をRoomと呼びます。Roomの作成、入室、他の人を招待するなどはこちらからできます。
Hubs - Private social VR in your web browser
基本的な使い方については、東京大学 バーチャルリアリティ 教育研究センターでまとめられている資料がありましたので、こちらをご参考ください。
東大 VR センターが教える Mozilla Hubs の使い方
Hubsで作ったRoomはMozillaの持つクラウドに作られます。しかし、下記のドキュメントによると、AWSを使用することでオンプレミス (自分の組織の中だけで使用できる環境) のHubsを作ることもできるようです。
Hubs Cloud allows you to run your own hub on a private server.
(途中省略)
Currently, Hubs Cloud is offered on AWS and DigitalOcean.
引用元：Introduction to Hubs Cloud · Hubs by Mozilla
Digital Oceanはこちらです。（詳細未確認です）
2. networked-aframeとは？
HaydenLeeさんという方がMozilla Hubsをベースに開発された、VR空間を共有するためのフレームワークです。
2017. Created Networked-Aframe, an open source WebVR networking library used extensively by Mozilla Hubs.
引用元：Hayden Lee, Virtual Reality Developer
こちらでMIT Licenseとしてソースが公開されています。
ReadmeにA framework for writing multi-user VR apps in HTML and JS.とあるように、同じVR空間を複数人数で共有することができます。Hubsと比較してできることは少ないですが、あえてVR空間共有に絞っているようにみえます。
（例：画像/動画共有、線を描く、URLの共有、テキストチャットなどは、Hubsではできますが、networked-aframeには入っていません）
なお、networked-aframeは、Hubsの公式GithubのAdditional Resourcesで紹介されています。
Additional Resources
Reticulum - Phoenix-based backend for managing state and presence.
NAF Janus Adapter - A Networked A-Frame adapter for the Janus SFU service.
Janus Gateway - A WebRTC proxy used for centralizing network traffic in this client.
Janus SFU Plugin - Plugins for Janus which enables it to act as a SFU.
Hubs-Ops - Infrastructure as code + management tools for running necessary backend services on AWS.
引用元：GitHub - mozilla/hubs: Duck-themed multi-user virtual spaces in WebVR. Built with A-Frame.
3. networked-aframeの環境構築
networked-aframeは、Hubsの概要説明で紹介したAWSやDigital Oceanがなくても動作させることができます。実際、自宅のネットワーク内で、iPad、WindowsPC (Oculus Rift併用)、MacPC、Androidスマートフォンで連携させることができました。
以下、構築方法を説明します。
3.1 githubからクローン
任意のディレクトリを作り、git cloneします。
$ git clone https://github.com/networked-aframe/networked-aframe.git
3.2 npmパッケージをインストール
以下のコマンドを実行します。
$ cd networked-aframe $ npm install # Install dependencies.
3.3 実行する
以下のコマンドを実行すると、ExpressというWebサーバが起動します。
$ npm run dev 〜省略〜 listening on http://localhost:8080
このように表示されたら、Webブラウザで http://localhost:8080 にアクセスします。このように表示されます。
この画像ではhttpsになっていますが、これはVRヘッドセットを使うために追加したためで、出てくる画面はhttpでも同様です。httpsについては後述します。
4. 動作確認
複数のデバイス（または同一デバイスの中で２つ以上ブラウザを開く）を準備して、サーバとしたPCにアクセスします。それぞれのデバイスが同じサンプルのページを開くと、同一のVR空間を共有できます。
Exmapleのうち５つを動かしたときの画面を動画にしました。
5. tips： VRヘッドセットや端末のセンサを使うには、https化が必要
VRヘッドセットやセンサによって見える向きを変えるには、サイトがhttps対応している必要があります。もしhttpのままだと、トラッキングができず、VRヘッドセットはコントローラ相当のオブジェクトが画面に表示されません。たとえばiPhooneだとこのように表示されます。
closeをタッチすると、画面は表示されますが、タッチドラックしても左右の視点変換しかできません。
今回は、自己認証証明書（いわゆる「オレオレ証明書」）でhttpsにして動作しましたので、そのやり方を紹介します。
手順は以下の通りです。
(1) https化に必要な秘密鍵、証明書署名要求、証明書を作成
(2) 秘密鍵、証明書をサーバに配置し、Expressでhttps対応のコードを書く
(1)については、以前書いた記事の「1. https対応に必要な証明書を作成する」を参照ください。証明書はサーバのIPアドレス (またはサーバ名)が必要です。自宅ネットワークで実行するには、IPアドレスを固定にするか、DNSを立てて指定する必要があります。
私の場合、サーバのアドレスを192.168.0.5で固定しました。 作成したら、certkeyというフォルダを作って、それぞれ格納します。
(2)については、networked-aframe / server / index.jsを以下のように書き換えます。
ここでは、秘密鍵：naf-server.key、サーバ証明書：naf-server.crtとしています。
この後、npm run devを実行してから、ブラウザでhttps://192.168.0.5:8080とアクセスすると、先ほどのExample一覧が表示されます。例えばiPhoneではこのようになります。
VRヘッドセットでも、Deny, Allowが出て、Allowを選択することでヘッドトラッキングが効くようになります。
6. おわりに
networked-aframeはドキュメントも親切で、Readme.mdだけでも、まだ読み切れていないところがあります。今回はHubs Scrumでのオンラインイベントでの発表に合わせて最低限の確認箇所だけを書きました。今後、もう少し詳しく調べたことを書いていきたいと思います。
