» VR開発メモトップへ

Mozilla Hubs(Hubs Cloud)メモ

最終更新日:2023年05月26日

オープンソースのソーシャルVRシステム・Mozilla HubsおよびHubs Cloudについてメモしていく場所です。

更新履歴

(2023年5月26日)Hubsの無料スタータープランが追加されたのを反映
(2023年3月20日)「管理者を追加するには」を追加
(2023年2月20日)「プレビュー画面のカメラの動きを変更したい」を追加
(2023年2月3日)「移動可能範囲を作成するには」を追加
(2023年1月30日)「ブルームをかけるには」を追加


Mozilla Hubsについて

Mozilla Hubsは、ブラウザで動作するオープンソースのソーシャルVRシステムです。PC・スマートフォン・Meta Quest等でインストールなしでURLを開くだけで動作するほか、ウェブベースのためブラウザとの親和性が高く、PCでは画面共有をしてVR空間内で見せることができたりといった特徴的な機能があります。

Hubsのデモページでルームを作るとすぐ試せるほか、AWS等でHubs Cloudを自分で立ち上げることもできます。

サブスクリプションについて

(2022年11月30日)Hubsの新しいサブスクリプションが早期アクセス版として発表されました。まだ日本からは利用できませんが、月20ドルでHubs CloudをAWSで立ち上げるのとほぼ同様のことができ、https://[任意のID].myhubs.net/ のURLが発行され、専用のダッシュボードにアクセスできるようです。

(2023年5月25日)日本から利用できる無料のスタータープランが追加されました。同時接続10人まで、ストレージ500MBまでで、URLはカスタムできない(https://[識別子].myhubs.net/)ようになっています。

シーン(ワールド)を作るには

シーンを作るには、Spokeというブラウザ上で動作するシーンエディタで制作する方法と、BlenderのHubs Blender Exporterを使用する方法があります。後者のほうができることが多いです。

Spoke

Spokeというブラウザ上で動くシーンエディタが用意されています。作ったシーンを利用してルームを立ち上げたり、.spokeファイルとしてエクスポート・インポートすることができます。

Hubs Cloudをインストールした場合、ページ上にScene EditorのメニューがありここからSpokeが起動します。

Hubs Blender Exporter

Hubs Blender Exporterを使用すると、BlenderでHubsのシーンを制作できます。オブジェクト等にHubs用のコンポーネントを設定したり、ライトマップを焼いたりできます。

Blenderにインストールするには、Hubs Blender Exporter and ImporterのReleasesページからio_hubs_addon.zipをダウンロードして、BlenderでEdit > Preferences > Add-onsでInstall…でzipファイルを選択し、Generic: Hubs Blender Addonをオンにします。

Scenes、Objects、Materials、BonesのプロパティにHubsのセクションが追加されていてAdd ComponentでHubsのコンポーネントが追加できます。Waypointでプレイヤー登場地点を設定したり、Navigation Meshでプレイヤーの移動可能領域を設定したりできます。UVスクロールやパーティクルシステム等のエフェクトも使用できます。

Hubsにシーンをエクスポートするには、File > Export > glTF 2.0で.glbファイルとしてエクスポートして、SpokeでNew Projectを作成し、右上のImport From Blenderボタンを押します(128MBまでのサイズ制限があります)。なお、この方法でインポートしたシーンはSpoke上では編集できません(シーンに「GLB」のアイコンが表示されます)。

Hubs公式の解説記事が下記にあります。

プレイヤーが登場する場所(Spawn Point)を設定するには

Add > Emptyで空オブジェクトを配置して、HubsセクションでWaypointコンポーネントを追加しUse As Spawn Pointをオンにします。

移動可能範囲を作成するには

移動可能な領域を表すメッシュを作成し、ObjectプロパティのHubsセクションでNavigation Meshコンポーネントを追加します。

なお、メッシュは連続したメッシュである必要があります。複数のオブジェクトやメッシュを重ねて移動範囲にするようなことはできません。メッシュが少しでも繋がっていない場合、テレポートしないと乗り越えられなくなります。下記ページが詳しいです。

傾斜面を作ると上り下りできる坂を作れます(どれくらいの傾斜まで登れるのかは未確認)。

BGMを再生するには

あらかじめMP3ファイルをどこかのウェブサーバーにアップロードしておきます。

Emptyオブジェクトを配置して、Add ComponentでAudioコンポーネントを追加します。Audio URLにMP3ファイルのURLを設定します。デフォルトでは3Dサウンドになっており、音源から離れると音が小さくなります。シーン内で一様にステレオ再生したい場合は、下のAudio TypeをBackground audio (stereo)に設定します。

ウェブページのリンクを貼るには

EmptyオブジェクトにLinkコンポーネントを追加してURLを設定すると、そのページの16:9のサムネイル画像が表示され、マウスホバーで「Open Link」の文字が表示され、クリックすると設定したURLが別タブで開きます。

サムネイル画像の大きさはTransformのScaleで変更できます。アスペクト比は変更できません(サムネイル画像が歪んでしまいます)。

日本語が含まれているとサムネイル画像で文字が□に化けてしまいます。ウェブページで日本語Webフォントを使用すると回避可能です。

YouTubeのリンクを貼ると動作が変わり、クリックするとシーン内で動画を再生しようとしますが、不安定のようです。TroubleshootingのページにYouTube動画は安定しないという記述があります。

YouTube videos don't work reliably in Hubs. We recommend trying Vimeo or saving your video to Dropbox and streaming from there.

画像にリンクを貼るには

EmptyオブジェクトにImageコンポーネントを追加して、画像のURLを設定します。Controlsをオンにしていると、右クリックで画像にフォーカスしてPin、Link、View、Deleteのメニューが出てきます(PinとDeleteは権限がないと選択できない?)。「Link」をクリックすると画像のURLを開きます。

さらにLinkコンポーネントを追加してURLを設定すると、マウスホバーで「Open Link」の文字が表示され、クリックすると設定したURLが別タブで開きます。右クリックのLinkのリンク先も変わります。

全天球画像を背景に設定するには

SceneのHubsセクションでEnvironment Settingsを追加して、Background Imageを設定します。エクスポートデータには反映されませんが、Blender側のWorldプロパティにも設定しておくとシーンでプレビューしやすいです。

環境マップを設定するには

金属マテリアルが環境マップを反射するようにするには、SceneのHubsセクションでEnvironment Settingsを追加して、EnvMapを設定します(なお解像度が大きすぎると正常に表示されないようです)。

リアルタイムシャドウを出すには

SceneのライトのCast Shadowをオンにして、オブジェクトにShadowコンポーネントをアタッチしてCast ShadowやReceive Shadowをオンにし、ユーザーが右下のメニューからPreferences > Misc > Enable Dynamic Shadowsをオンにすれば影が描画されるはず……なんですが不具合があるっぽい?

Chromeでダイナミックシャドウが描画されないというissue。

また、Questではフレームレートがあまりに低下するためダイナミックシャドウは無効化されているようです。

どのみちユーザーが能動的に設定を変更しないと影が出ませんので、ライトマップを焼いたほうがいいような気がします。

ライトマップを焼くには

TODO

ブルームをかけるには

SceneのHubsセクションでEnvironment Settingsを追加してBloomをチェックするとポストエフェクトのブルーム(明るく輝いている部分の光が周辺に漏れる効果)をかけられます。なお、デフォルトではエフェクトはかからず、ユーザーがルーム内で右下のメニューから環境設定 > その他 > Enable Post Processing Effectsを有効にする必要があります。

水面を作るには

Add > Mesh > Planeで平面を配置して、Simple Waterコンポーネントをアタッチします。パラメーターがたくさんありますが、Hubs Blender ExporterだとエクスポートしてHubsにインポートしないと確認できないので、SpokeでSimple Waterをシーンに配置してパラメーターを探るほうが簡単です。Tideはポリゴンの大波、Waveはポリゴンの小波、Ripplesはテクスチャの波紋といった感じです。

プレビュー画面のカメラの動きを変更したい

Hubsでルームに参加する前のプレビュー画面でカメラがゆっくり動きますが、シーンによってはこのときカメラが壁や床を突き抜けてしまう場合があります。

現状カメラの動きを変更する方法はなく、シーン全体を動かす等して対処するしかないようです。下記が該当issueです。

アバターを作るには

オリジナルのモデルを使用したい場合は、右下メニューからChange Name & Avatar > Change Avatar > Create Avatar > Custom GLBで.glbファイルをアップロードします。

下記ページにBlenderの雛形ファイルがありますので、こちらから.glbをエクスポートします。

下記ページで、Blenderを使用して既存のモデルをHubs仕様に改造する方法が解説されています。

下記に公式の説明があります。

手っ取り早く独自アバターが必要ならReady Player Meを利用するのが簡単です。

Hubs Cloudについて

Hubs CloudをAWSのサーバーで立ち上げることができます。Hubsの公式サイトで動作しているものと同様、ルームを作ったり、シーンを制作したり、アバターをアップロードできます。Hubs CloudはAWS Marketplaceで公開されており、CloudFormationで比較的簡単にセットアップできます(AWSの使用経験が多少あったほうがいいと思います)。

下のような管理画面もあります。WordPressのソーシャルVR版と思えばだいたいあってます。が、常時起動しようとすると費用が結構かかります。

Hubs Cloudの費用

下記ページにHubs CloudをAWSで動かす際の料金のガイドがあります。

AWS MarketplaceでHubs Cloudをインストールして動かす場合、ネットワーク転送料金やストレージ使用料金を含め諸々の料金がかかってきます。特にオンラインで動作している間、EC2とAuroraの料金が大きくかかります。費用を節約したい場合、適宜オフラインにしたり、EC2のインスタンスを変更したりする必要があります。

Hubs Cloud Personalの場合、データベースにAmazon Aurora (PostgreSQL)のServerless型が使用され、Aurora Capacity Unitが2に設定されているため、動作中は$0.2/時かかります(本稿執筆時)。デフォルトではHubs Cloudにしばらく誰もアクセスしていないとデータベースが自動的に停止し、誰かがアクセスすると復帰する設定になっています。復帰には数十秒かかり、その間ブラウザはページ読み込み中のまま何も表示されません。Auto-Pause DatabaseをNoにするとこの動作を止められますが、$0.2/時が常時かかり続けるため注意が必要です($144/月になります。ベースコストとしてこれが一番大きいです)。

EC2はインスタンスの使用料金に加えて、t3.medium以下のインスタンスで$0.014/時間、t3.large以上のインスタンスで$0.1/時間のソフトウェア使用料金が追加でかかるようです。

「Minimize your Costs - A User Story」の項目で、イベント等を開催するときにHubs Cloudをオンラインにしてスケールアップ、スケールダウンしてオフラインに戻す一般的な手順が解説されています。CloudFormationでHubs CloudのスタックでUpdateボタンを押して、パラメーターや構成を変更できます。

セットアップ方法

前準備として、ドメインを用意しておく必要があります。Amazon Route 53で新規ドメインを2つ取るのが簡単です(Domain Recipesのレシピ1)。自分はkorinhub.com ($12/年)とkorinhub.link($5/年)を取得しました。

ドメインは2つともRoute 53でネームサーバーを設定しておきます。DNS Checkerあたりを使ってNSレコードの設定が反映されているか確認します。また、Registered domainsでTransfer Lockを2つともDisabledにしておきます。

ドメインの設定が上手くいっていない状態でインストールしようとすると、イベント進行がしばらく停止したのち下記エラーでロールバックされるので注意してください。

Custom::DNSCertificate InternalZoneSSLCert ... CREATE_FAILED Failed to create resource Certificate not issued in time  
Received response status [FAILED] from custom resource. Message returned: Certificate not issued in time

また、デプロイするリージョンでEC2のSSHのキーペアを作成しておく必要があります。

AWS Quick Startの手順に従います。インスタンスタイプはt3.microはおすすめしない、t3.smallは小さな集まりやカジュアルテストには十分かもとのことです。CloudFormationでのデプロイに20~30分、手順全体ではだいたい1時間ほどかかると思います。

なお、東京リージョンでデフォルト設定だと下記エラーでデプロイに失敗しました。Subnet Availability Zonesでacdのうち2つを設定(たとえばUse zone c and dを選択)すると成功しました。

Resource handler returned message: "Mount targets are not supported in subnet's availability zone.

(2023年2月6日)Use zone c and dだと下記エラーが出てUse zone a and cにすると通過しました。

Template error: Fn::Select cannot select nonexistent value at index 3

CloudFormationのスタックがCREATE_COMPLETEの表示になるのを待ちます。

デプロイ時にAmazon Simple Email Serviceからログイン認証のメールを送信できるようにする設定が行われます。登録時に設定した管理者メールアドレスにメールが来ていると思いますので、確認のリンクをクリックします。

デプロイ先のドメインのURLを開くとHubs Cloudが起動していると思いますので、管理者のメールアドレスでサインインします。パスワードレスログインなのでサインインするためのメールが送られてきます。

管理者以外もサインインできるようにするには、Amazon Simple Email Serviceでメールを送信できるよう申請する必要があります。こちらの指示に従って、Amazon SESの画面でN. Virginia(us-east-1)リージョンを選択し、Request production accessをクリックして申請の手続きを行います。

セットアップ直後は画像リンク切れが起きていると思います。上のadminから管理画面に入って、Setup > App Setings > IMAGESで画像を設定します(App Logoは3:2で300x200の透過PNGがよさそう? どこかに説明がありそう)。

また、管理画面のContent > Import Contentを開き、Find Avatars & Scenesをクリックして開くページから適当なアバターとシーンのpackファイルをインポートします。

動作モードを変更するには

AWS CloudFormationでHubs Cloudのスタックを選択してUpdateをクリックし、Use current templateが選択された状態でNextをクリックします。

オンライン・オフラインの状態(Offline Mode)と、EC2インスタンスの変更(App server EC2 instance type)が運用時の主な変更点になります。

Nextを何回かクリックしてacknowledgeのチェックを入れてSubmitをクリックするとスタックの更新が走るのでしばらく待ちます。

アバターを登録するには

Hubs Cloudで使用できるアバターを登録するには、admin画面のContent > Import Contentからインポートします。

このとき https://xxxxxxxx.xxx/avatars/xxxxxxx のような形式のURLを登録します。とても分かりにくいのですが、プレイヤーとして普通にルームに入って、アバター選択画面でCreate Avatarをクリックし、Custom GLBをクリックして.glbファイルをアップロードして保存し、アバターのサムネイル画像の上で右クリックしてCopy link addressすると、この形式のURLが取得できます。

登録したアバターはAvatasやFeatured avatarsで選択します。登録したアバターの削除はできないようです。代わりに、EditでStateをdelistedに変更して非表示にできます。

FEATUREされたアバターはアバター選択画面のFeaturesのところに出てきます。UNFEATUREをクリックするとUNFEATUREになる(つまりFEATUREと表示されていればFEATUREされていない状態)ので注意してください(トグル表示よくない)。

管理者を追加するには

Hubs CloudのAdmin画面で、Content > Accountsを選択して、管理者のメールアドレスを入力してCREATEし、Editを押してIs adminをオンにします。

なお、インストールしたての状態では、最初に設定した管理者メールアドレス以外にサインインのためのメールを送信できるようになっていません。上記の申請の手続きをするか、Amazon SESのダッシュボードのVeridfied identitiesにメールアドレスを個別に登録してください。

カスタムクライアントをビルドするには

TODO

トラブルシューティング

SpokeのAssetsでSketchfabのモデルがロードされない

APIキーを設定する必要があります。SketchfabのMy Settings > Password & APIにあるAPI tokenを、管理画面のSetup > Server Settings > API Keysに設定します。

日本語ドキュメントについて

GREE VR Studio LaboratoryHubsドキュメント日本語訳があります。

Hubsのアーキテクチャのメモ

以下のページにHubsのアーキテクチャの説明があります。

Hubsはサーバー・クライアント方式で、クライアントはNetworked-Aframe(JavaScript)を使用。A-Frameにネットワーク位置同期機能が追加されたライブラリ。物理シミュレーションはすべてクライアントサイドで行われ、特定のユーザーがオブジェクトのオーナーシップを持つ。A-FrameはThree.jsの上に構築されHTMLでセマンティックに3Dシーンが記述できるライブラリ(Three.jsから二段重ねなのでオーバーヘッドがちょっと心配)。

メッセージ通信全般はReticulum(Elixir製)を使用。ルームに接続するとロードバランスされたWebSocketのメッシュネットワークに接続され、Phoenix Channelsでルーム内のユーザーにメッセージがリレーされる。永続的なデータはReticulumからPostgreSQLデータベースに保存。

ボイスチャットや映像通信はJanus WebRTC ServerをSFUとして使用しています。

参考文献

Mozilla Hubsのエンジニアリングマネージャーを努めていたGreg Fodor氏によるHubsのマスタープランの解説があり、Hubsがどのようなプロダクトか知る助けになります。 

また、白井先生のスライドが非常に詳しいです。

書いた人:こりん(@korinVR
» VR開発メモトップへ