先週、Mozilla Hubs（VR空間でイベント体験ができる仕組み）を使ったオンライン勉強会で発表をしました。
Hubsの体験はほぼ初めてで、発表をしたのは初めてでした。最近参加したclusterとも異なる点が多かったです。
そこで、Hubsで発表をすることになったときにどんなことをすればよいかをまとめてみました。
注意：
Hubsは昨今の事情で活用例が増えているので、開発が活発化し、今後変わるかもしれません。この記事に書かれている内容はあくまで2020/5/16時点の情報です。最新の情報はHubsのドキュメントも確認してください。
動作環境
Firefox 76.0.1 (64ビット) on Windows10 (1909)
Firefox 76.0.1 (64 ビット) on Mac OSX 10.15.4
1.Mozilla Hubsとは？
WebブラウザだけでVR空間を共有できる仕組みです。詳しいことは前回のブログの冒頭や、東京大学 バーチャルリアリティ教育センターが公開されている資料をご確認ください。
2. 発表者の事前準備
2.1 できるだけ高性能なPCを準備する
Mozilla HubsはWebブラウザがあれば使用できる仕組みですが、参加人数が多いとモバイルデバイス、Oculus Questのようなスタンドアロンデバイスでは、動作が不安定になります。
low power devices, such as mobile phones and standalone VR headsets, may begin experiencing performance issues in busier rooms.
そのため、発表の場合はPCの方が安心です。
2.2 発表スライドを作ったらpdfにする
HubsはPowerPointファイルの表示には対応していません。スライドはpdfにする必要があります。
Can I share a powerpoint presentation in Hubs?
To use a powerpoint in Hubs, you can convert it to a .pdf file and import it directly into Hubs, or you can use screen sharing to stream a view of your presentation into Hubs.
例えばPowerPointで作ると、名前をつけて保存を選ぶとpdfにできます。ドキュメントからはサイズ上限に関する記述を見つけられなかったのですが、サイズが小さい方がアップロードが短時間で棲むので、私はできるだけ小さくしています。
私の場合、clusterの時と同様に、PowerPointで一通り作ってpdfに出力した後、Adobe Acrobatでpdfを開いて、「ファイルサイズを縮小」で容量を減らしています。
2.3（動画を使う場合）音声入りの動画ファイルを準備する
発表中にスライドだけではなく、動画を再生することもできます。対応フォーマット、解像度やビットレートの制限についてはドキュメントに記載ありませんでしたが、たとえば、以下の動画は再生できました。
コーデック：H2.264 (.mp4)
解像度：960*540
ビットレート：1.38Mbps
再生時間：1分36秒
サイズ：43MB
このように書いてあるので、他のフォーマットでも再生できるかもしれません。
Can I play video content in Hubs?
Hubs has the ability to play videos in the room, which allows you to watch with friends or live stream content from an existing stream. For videos, Hubs supports standard video formats.
なお、音声データがない動画ファイルだとアップロード完了後、このようなアイコンが空中に表示されます。
わざとPowerPointファイルをアップロードした時も同じアイコンが出たので、再生不可能ファイルがアップロードされたときの共通アイコンのようです。
ということで、動画を再生させるには少しで良いので音声データを入れる必要があります。clusterも同じ仕様だったので、何か共通ルールがあるのかもしれません。今回は1秒だけ無音のオーディオデータを入れました。
音だけを撮る方法は色々ありますが、たとえば騒音などが無い状態でiPhoneで部屋を撮影し、出来上がった動画データから音だけ抜き出して1秒に縮めました。
2.4 プライベートルームを作って、事前に操作手順を確認する
Mozilla Hubsでは誰でも自由にルーム（VR空間）を作ることができます。ルームの作り方は、こちらの「1. Mozilla Hub を起動する」、「2. ユーザ名とアバタを選択する」、「3. 3D 空間への移動」を実行してください。これらは数分かからずに実行できます。
なお、ユーザ名とアバターはルーム入室後も変更可能です。
ルーム入室後は基本操作を確認します。PCで操作する場合、以下の通りです。VRヘッドセット、その他の細かい操作はこちらをご覧ください。
Hubs Controls · mozilla/hubs Wiki · GitHub
・移動
キーボードのW、A、S、Dキーで、前、左、後ろ、右方向に移動します。
・視点切り替え
マウスの左ボタンを押しながらドラッグします。
・エモーションの使用
タブキーを押すと以下のようなメニューが出ます。好きなアイコンを左クリックします。余談ですが、スペースキーを押すと、スペースキーを押している間だけ同じメニューが出ます。
・資料のアップロード
メディアアイコンからアップロードします。
・アップロードした資料の位置移動、拡大、縮小
空中に配置されている資料の前で、タブキーを押してメニューを表示します。この状態で資料にマウスカーソルを合わせると、このようになります。
矢印がバツ印になっている箇所をクリックしたままマウスを動かすと、資料を拡大、縮小することができます。また、資料を選択したままドラッグすると移動もできます。たとえば、こちらの動画のように調整すると、机の前に資料を配置できます。
なお、clusterとは異なり、資料はルーム別に管理されるので、当日の発表会場でも新たにアップロードする必要があります。
2.5 (オプション)アバターを変更する
プリセットでもたくさんのアバターが準備されています。(これ以外にもあります)
もう少し違ったアバターにしたい、というときは、いくつか手段があります。
(1) 「Quilt」を使って見た目を変える .
アバターの形はプリセットに近いままで、好きな写真を貼ったモデルを作ることができます。以下は単に画像を貼っただけですが、この様なモデルが簡単に作れます。
(2) IEEEVR2020向けに公開されたAvator Cutomizerを使用する
.
このように、体型、髪型、シャツの色、模様をWeb上で調整してから出力できます。
IEEE VR 2020 | Avatar Customizer.
(3) 公開されているBlenderファイルを元に自分で作成する .
アバターの3Dモデルを作成するための.blendファイルが以下に公開されています。
hubs-avatar-pipelines/Blender/AvatarBot at master · MozillaReality/hubs-avatar-pipelines · GitHub
「AvatarBot_base_for_export_altbody.blend」をダウンロードしてBlender2.8以上で開いて編集すると、オリジナルアバターが作れます。
Githubのリポジトリには複数の.blendファイルがあります。しかし、For the most part, you can ignore these files, but they are left here for demonstration purposes. とあるように無視しても大丈夫です。
とーやくんはすでにカスタムアバターを試されていました。このようにオリジナルアバターを使うことができます。
Mozilla Hubsへのカスタムアバターアップロードできた。Hubsのアバター仕様おもしろい。まずIKは一切なし。デフォルトアバターのBlendファイルが公開されてるので、それを改変するかたちでglbを出力した。BlenderとWEBで完結するのが良い pic.twitter.com/3h63BDsQ5A
— とーやくん (@skg_ty) 2020年5月8日
3. トラブルシューティング
3.1 音声が繰り返し再生される
スピーカーで音声を聴いていて、マイクがオンになっていると発生することがあります。スピーカーの音声をマイクが拾う、マイク音声を会場に出力、会場音声に自分のマイク音声（少し前にスピーカーから聴いた音）が混じる、少し前の会場音声が混じった音声がスピーカーから聴こえる、、を繰り返すためと思われます。
マイクが会場音声を拾わないように、ヘッドフォンを視聴し、話さないときはマイクをミュートすることをお勧めします。公式HPにもヘッドフォンの使用、マイクミュートが推奨されています。
There is echo in the room
Echo may occur if a participant is not wearing headphones. You can ask participants to mute their mic when they are not speaking, or as a room moderator you can mute them yourself in their avatar menu. You can also reduce the volume of the user in their avatar menu.
引用元：Troubleshooting · Hubs by Mozilla
3.2 Webブラウザがクラッシュする
きちんと測定できていませんが、PCでHubsを使うとCPUやメモリ消費が激しいように感じます。例えばMacのFirefoxでHubs (ルーム参加者は自分１人だけ)に入ると、1.3GB近くのメモリを消費していました。
また、2時間近く参加していた5/13のイベント終了後、Webブラウザが固まってしまいました。ブラウザはタブを１つ作るだけでもメモリを消費するので、なるべく他のタブは閉じておくことをお勧めします。
3.3 動画ファイルや3Dモデルをアップロードすると変なアイコンが表示された
このようなアイコンが表示される場合、Hubsに対応していないフォーマットのファイルであるため、別フォーマットに変換してからアップロードをお試しください。
3.4 ルームから退室できない
タブキーを押すと、画面中心の上側に「Leave Room」というボタンが表示されるので、ここを選択します。
4. おわりに
Hubsはclusterに比べると安定性が低いですが、できることが多く、IEEEVR2020で採用されたり、他国のミートアップでも使われるなど、事例が増えつつあります。以下でも言及されているように、今後も増えていくと思います。
Hubsはとても良いサービス！いろんな学会でVR開催だとHubsが使われる事が多いね．ブラウザ起動でアプリを入れる必要がない，画面共有が使える，全員声出せる，画像，動画のアップロードもできる，で会議にはかなり向いてるね．カスタムアバターの文化が広まれば人増えるかな？ https://t.co/xLCvjt7Uzc
— T.Kameoka/ふぁるこ@失禁研究会 (@faruco10032) May 12, 2020
少し長くなりましたが、何かの参考になれば幸いです。
