Mozilla Hubsで手持ちのアバターを使えるようにする手順

TL;DR

• Mozillaが開発するVRプラットフォーム「Hubs」には、GLBファイルをカスタムアバターとして利用できる機能があります
• ただし、Hubsのアバター仕様は、VRChatやclusterなどとは大きく異なるため、手持ちのアバターをファイル形式だけ変換しても正常に動きません
• 本記事では、3DモデリングソフトBlenderを使用して、手持ちのアバターモデルをHubs仕様に改造する手順をご紹介します

とりあえずHubsで使えるかわいいアバターが欲しいという方向けに、筆者がHubs向けに改造したアバターのGLBファイルを公開します。
こちらのアバターは、くつした氏によるCC0ライセンス（パブリック・ドメイン）のモデル 「少女A」 を基にしています。
筆者が実際に使用して動作を確認していますが、Hubsでの使用は自己責任でお願いします。

• Hubs用「少女A」GLBファイル（Google Drive）

はじめに

Hubsとは

Mozilla Hubs（以下Hubs）とは、Firefoxブラウザなどを開発しているMozillaによるソーシャルVRプラットフォームです。
つまり、3次元のバーチャル世界の中でアバターとして動き回り、他の参加者と会話することができます。
日本でよく知られるVRChatやclusterと比べて以下の利点があります。

• Webブラウザだけで手軽に動作し、専用クライアントやアカウントが不要
  • VRプラットフォームを人に使ってもらう際にハードルとなりがちな準備作業はなく、最新のブラウザさえあれば数クリックで参加できます
• ファイルやURLの配置が手軽
  • ブラウザへのドラッグ&ドロップで、画像・動画・URLなどさまざまなファイルを持ち込めます

Hubsの基本的な使い方については、以下の資料や記事をご覧ください。

• 東大 VR センターが教える Mozilla Hubs の使い方．ソーシャル VR 会議で在宅ワークを手軽に面白く
• Mozilla Hubs をとりあえず試してみる

Hubsは、COVID-19の影響でオンライン開催が普通になった学術会議やアートイベントなどで採用が増えています。
2020年9月16日から18日にかけて行われた第25回日本バーチャルリアリティ学会大会でも、オープン・バーチャル・エキシビジョン（OVE） としてHubsを用いたポスターセッションが試みられました。

Hubsのアバター事情とカスタムアバター

Hubsでは、標準で多種多様なアバターを着用できます（左上メニューボタンから「Set name & Avatar」→「Browse Avatars」）。
ただし、そのほとんどはシンプルな筒状のロボットか、海外っぽい見た目の人型アバターです。
日本ではVRChatやclusterなどで自分好みのアバターを普段から使っている方も多いだけに、Hubsでも好きなアバターを使えれば嬉しいはずです。

実際に、前述した日本VR学会大会では、自らモデリングや改造を施したアバターを持ち込んで参加した方が筆者も含め数名いらっしゃいました。

しかし、Hubsのカスタムアバターは他のプラットフォームとは異なる仕様になっており、単純にファイルをアップロードして動くようなものではありません。
筆者はQiitaで公開されていた「hubsにVRoidで作ったアバターを投入する」の方法を試したものの、アバターが頭部に合わせて回転しない・腕も動かない・一人称視点でアバターの見た目が崩れるといった問題が起きました。
その後の試行錯誤の末、「Blenderを使い、Hubs向けアバターのボーンに持ち込みたいモデルを移植する」という方法で持ち込みに成功しました。

本記事では、筆者が成功した際の手順を整理してご紹介します。

Blenderで込み入った作業はしたくない・できないという方向けサービス

Mozilla Hubsでは、カスタマイズしたアバターを簡単に作成する手段がいくつかあります。
手持ちのアバターにこだわらないのであれば、以下のサービスの利用も考えてみてください。

• Quilt
  • Hubs公式が提供する、ロボットアバターに好きなテクスチャを貼れるWebアプリ
• ReadyPlayerMe
  • 自分の顔写真をアップロードすると、画像を解析して似た顔のアバターを作ってくれるWebアプリ
• VOXELCANVAS
  • うたろ（@utautattaro）氏が公開する3次元ドット絵制作サービス
  • VR学会の最中（！）にGLBを出力する機能が追加され、Hubsへ持ち込めるようになりました

また、冒頭でご紹介したようにCC0アバターの「少女A」をHubs用に改造したGLBファイルを以下で配布しています。

• Hubs用「少女A」GLBファイル（Google Drive）

環境

• ソフトウェア
  • Blender 2.83
  • Mozilla Hubs（メール認証してアカウントを作成しておくと良いです）
• ハードウェア
  • （あれば）ヘッドマウントディスプレイ
    • VR機器があると、Hubs内でアバターの手を動かして確認できます
• 筆者の技術力
  • VR使用経験：3年くらい
  • モデリング・Blender：素人
    • 数年前にBlenderを触りかけて、選択が右クリックだったり変な猿が出てきたりして挫折した程度です
    • モデリングに長けた方なら、既存データの流用以外にも取れる手段があるかもしれません

Hubsアバターの基本

まずは、Hubsアバターの仕様を知っておきましょう。Hubsの公式ドキュメント（英語）に、カスタムアバター作成のための仕様解説が載っています。

• Advanced Avatar Customization · Hubs by Mozilla

ドキュメントから得られる情報を列挙します。

• Blender2.83推奨
• 標準のアバターの高さは、ロボアバターにはない脚を含めて1.7m
• 逆運動学（IK）がない、つまり腕や足の関節は表現できない
• 下半身と腕のボーンがない

（右画像はAdvanced Avatar Customization · Hubs by Mozillaより引用）

特に、アバターの高さと位置は正しいサイズのアバターを作る上で重要な情報です。
サンプルとして配布されているロボットアバターのblendファイルを開くと、ちょうど腰に当たる部分に原点があります。

公式で明記されてはいませんが、様々な事例を見ているとロボット以外のアバターでも腰のあたりに原点が来るよう動かす必要があるようです。
そうしないと、原点より下に見えない脚がある扱いとなり、アバターが宙に浮いてしまいます。

また、IKがないという事情でHubsアバターには頭・胴体・右手・左手の分しかボーンがありません。
これ以外のパーツがモデルにあっても、おそらく動かないでしょう。
これが、VRChatなどで使えるアバターのモデルを単純に持ち込んでも動かない理由と思われます。

アバター改造手順の概要

Hubsアバターの特殊事情を踏まえて、以下の方針で改造を進めます。

• 既存のHubs向けアバターのボーンを流用する
• 持ち込むアバターの腕部分は、どうせ動かせないので削ってしまう
• 両手には細かいボーンやアニメーションがあるため、Hubs用アバターのものをそのまま使う

以降、区別のためベースにするHubs用アバターを「アバターA」・持ち込むアバターを「アバターB」 と呼びます。作業のあらましを図にするとこうなります。

以下、Blenderの基本操作については解説を省く場合もあるのでご了承ください。
とはいえ、ほとんどの作業はLayoutワークスペースで行うため、Blenderの機能を完全に理解していなくても大丈夫です。ググりながらお読みください。

Hubs向けアバターAの作成

Hubs用に設定がなされているアバターモデルには、公式のロボットアバター（AvatarBot_base_for_export.blend）や、ReadyPlayerMeのモデルなどがあります。
今回、改造の基として使うのは後者です。なぜなら、アバターの両手部分をそのまま使いたいので、ロボットの手（右）よりReadyPlayerMeのリアル寄りの手（左）のほうが都合がいいためです。

もし、ロボット系のアバターを持ち込みたい場合は、逆にロボットの方がいいかもしれません。

ReadyPlayerMeにアクセスし、「Create Avatar」からアバターを新規作成します。
性別を男性・女性・中性から選択できますが、男女で比べた限り手の形状は変わらないようなので適当に選びましょう。
次に、顔写真を撮影するかアップロードします。欲しいのはボーンと手のメッシュだけなので、自分の顔でも他人の顔でも構いません。

この画面でも肌や服の色をカスタマイズできます。後からでもBlenderで変えられるので、お好みで編集しましょう。
アバターができたら、右上のDoneボタンを押すとGLBファイルへのURLが表示されます。
これをブラウザで開くと、GLBファイルをダウンロードできます。

Blenderを起動し、メニューバー「ファイル→インポート→glTF2.0」からGLBファイルをインポートします。
早速ですが胴体（頭部）のメッシュは使わないので、選択して消してしまいましょう。ReadyPlayerMeの場合、眼球や歯も別途メッシュがあるのでまとめて削除します。

これでベースとなるアバターAの準備は完了です。

持ち込みたいアバターBの読み込み・編集

いよいよ使いたいアバターBを読み込みます。お好きなアバターで構いませんが、なるべく形が複雑でないものの方が失敗しにくく、Hubsの軽量化にも有利かと思います。
ここでは、フリーアバター「少女A」のVRMファイルをVroidHubから入手して使います。

BlenderでVRMをインポートしたい場合、VRM_IMPORTERアドオンを導入しておく必要があります。
アドオン導入の方法については「VRoidをUE4に持っていく自己流メモ」などを参考にしてください。

読み込んだら、アバターBのボーンは使わないので削除します。

次に、アバターBの位置とサイズを調整します。「Hubsアバターの基本」で述べたとおり、Hubsのアバターは原点が腰のあたりにないと高さがおかしくなるので、この工程は重要です。
モデル部分を選択肢、Z軸移動のショートカット「G → Z」・サイズ変更のショートカット「S」を使って調節しましょう。
ビューポート右の「アイテム→トランスフォーム」から寸法を確認できるので、頭から足先までが1.7mくらいになるようにするとよいでしょう。

位置とサイズは（ボーンと一緒に動かせば）後からでも変更できます。Hubsにアップロードして違和感があるようでしたら、Blenderに戻って微調整を繰り返してください。

最後に、アバターBの腕から先のメッシュを削ります。
Hubsは腕のボーンに対応しておらず、残しておいてもTポーズのまま動かすことはできません。
手についてはアバターAから流用したものがあるため、アバターBの方は削ってしまったほうがいいと考えています。

メッシュを選択して編集モードに入り、頂点を選択して削除（Xキー）します。
選択する際は、Zキーでワイヤーフレーム表示にしておくと裏側の頂点も選択できて楽です。
肩の部分の穴は、周りの辺を選択してAlt + Fでフィルしておきます。

「面がフィルされていません」と警告が出て埋まらない場合は、ビューポート上メニューで「メッシュ→マージ→距離で」を実行すると改善しました。

アバターAのボーンとアバターBのモデルを親子設定する

ここまでで改造に必要な要素は揃ったので、いよいよHubs用ボーンとアバターが連動するように親子（ペアレント）設定します。

その前に、ボーンの配置がモデルと合っていない場合は編集モードで修正しておきます。
胴体部分のボーンは下から順にHips / Spine / Neck / Headとなっており、Neckの部分は視点に合わせて動くので、Neckボーンが首付近にあるようにしておきましょう。
また、RightEye / LeftEyeボーンも目の辺りに来るように動かしておくとHubs内での視点位置がアバターの目と合います。

ReadyPlayerMeのモデルでは、Hips～Spine～Neckが「接続」の関係になっていなかったので、ボーンプロパティの「関係→接続」にチェックを入れておいてください。

終わったらオブジェクトモードに戻り、メッシュ→ボーンの順に選択してCtrl + P→「自動のウェイトで」で親子関係にします。
「1つ以上のボーンで解決に失敗しました」という警告が出ることがありますが、失敗していない部分ではウェイトが設定されているので先に進んで構いません。

ウェイト（各頂点がどの程度ボーンに追従するか）がうまく設定できたかどうか確認するため、メッシュを選択してCtrl + Tabでウェイトペイントモードを開きましょう。
Hubsで首を動かしたときに頭部のメッシュがきちんとついてくるよう、Head（・LeftEye・RightEye）には頭部のメッシュを、Spine・Hipsには胴体のメッシュを追従させるようにします。
ボーンを選択してポーズモードに切り替えると実際に首を動かして確認できるので、モードを行き来しながら動きが変な部分がないかチェックしましょう。

ウェイトペイントの操作方法については本記事では扱いません。「Blenderでウェイトペイントでウェイト設定してみた – PERKUP」などをご覧の上がんばってください。

なお、MozillaのGitHubリポジトリのIssueで「ある頂点が頭と胴体の両方に関連付けられていると、一人称視点で表示が崩れる」問題が議論されていました。
これを防ぐには、頭のメッシュはHead（・LeftEye・RightEye）だけに、胴体のメッシュはSpine・Hipsだけにウェイトをつけるときっちり分けるのがいいでしょう。
筆者はさらに、中間のNeckボーンに対してはすべての頂点でウェイトを0にしています（編集モードでNeck頂点グループを選択し、「削除」ボタン）。

• Moving with avatars causes mesh glitches in first person perspective · Issue #8 · MozillaReality/hubs-avatar-pipelines

LeftEyeとRightEyeは、うまく設定しておくとアニメーションで目が動くようになります。
面倒なら、割り当てるウェイトを0にしてしまいましょう。

アバターのマテリアル設定を変更する

ここまででアバターの動きについてはほぼOKですが、この時点でGLBファイルを出力しても、モデルによってはHubs上でテクスチャがなく真っ白になってしまいます。
原因は、おそらくVroidのVRMで使われているMToon_unversionedシェーダーをHubsが表示できないためだと推測しています。
従って、対処法はHubsでも表示可能なシェーダーに差し替えることです。ここでは、Blenderのデフォルトである「プリンシプルBSDF」に変えていきます。

メッシュを選択したら、プロパティウィンドウでマテリアルプロパティを開き、以下のように設定変更します。

• サーフェス：プリンシプルBSDF
• ベースカラー：画像テクスチャ
  • 画像を選ぶプルダウンで対応したテクスチャ画像を選ぶ
  • 画像テクスチャは、持ち込みたいアバタのVRMファイルなどを開くと、同じフォルダ内で「tex_（VRMのタイトル）」のようなフォルダ内に保存されているはずです

このままだと光沢が強くプラスチックのような見た目になるので、お好みで「スペキュラー」を下げるのもいいでしょう。

また、ReadyPlayerMeアバターから流用したの手や袖がアバターBの雰囲気と合わないと思う場合は、両手の部分のマテリアルも差し替えましょう。
筆者は、編集モードで手や袖の面をそれぞれ選択し、新規作成した単色のマテリアルを割り当てる方法で行いました。他にも方法はあると思います。

GLBファイルのエクスポート

いよいよエクスポートです。
メニューバー「ファイル→エクスポート→glTF2.0」でエクスポートダイアログを開きます。
右側の設定では、「フォーマット」がglTFバイナリ（.glb） であることを確認しておきましょう。

また、手などのアニメーションが正しく表示されるよう「アニメーション→アニメーション→常にアニメーションをサンプリング」のチェックを外しておきましょう（カスタムアバターの偉大な先駆者とーやくん @skg_ty氏に教えていただきました！）。

Hubsへ移動して、左上メニューボタンから「Set name & Avatar」→「Browse Avatars」→「+ Create Avatar」でアバター新規作成画面を開きます。
「Custom　GLB」ボタンからアップロードするGLBファイルを選択すると、作ったアバターをプレビューできます。

まずは、デスクトップモードで動きを確認しましょう。
ChromeとFirefoxなど2つのブラウザで同じルームに入って、片方で見回しなどの操作をしながら、サイズ感や高さは正常か・メッシュが崩れている部分はないか観察します。

おそらく、よほどアバター作りに慣れている方以外は、何かしらおかしい点が見つかるでしょう。
特に、ウェイトやテクスチャの設定はHubsでの見た目を確認しながら試行錯誤し、修正→アップロードの流れを繰り返す必要があります。

HMDで使う方は、続いて手の見え方をVRモードで確認しましょう。
きちんとアニメーションが指定されていれば、コントローラー操作で指が動くはずです。
この動きはHubsで会話している相手にも見えるので、ぜひジェスチャーに使いこなしてください。

GLBファイル出力時、「常にアニメーションをサンプリング」のチェックを外し忘れると手は動きません。

おわりに

本記事では、Blenderと既存のHubs用アバターを使って手持ちのアバターをMozilla Hubsで使えるよう改造する方法をまとめました。
この記事を読み、Hubsでカスタムアバターを使う人が増えることを願っています。

Mozilla製のhubs-blender-exporterというBlenderアドオンを使うと、Hubs特有の機能をアバターに追加できるようです。
例えば、口を開くシェイプキーがあるアバターなら、マイク音声と連動してリップシンクできます。
筆者はまだ試せていないので、余裕のある方はぜひやってみてください。