REALITYのアバターをWebブラウザで踊らせる & Questでモーション生成

2022年9月30日 19:00

GREE VR Studio Laboratory インターン&デジタルハリウッド大学2年のやはぎです！最近はe-sport観戦にハマっています。プロゲーマーすごい。

KIDS WORKSHOP 2022「メタバースで夏祭り」ゼロから作る！〜プログラミング・アバター・ワールド設計(仮) Digest
https://youtu.be/bXxnUdpaX8M

この夏、森ビルさん主催の「キッズワークショップ2022」で「『メタバースで夏祭り』ゼロから作る！〜プログラミング・アバター・ワールド設計(仮)」というワークショップ企画を出展いたしました（詳細）。ワークショップとしてはメタバースの夏休みアバターを動かすモーションをVR機器を使って制作する体験なのですが、その中で「子供でも作れるメタバースのツール」として、ブラウザ上で3Dアバターを動かせるA-frameVRMを使ったツールとスタンドアロンVRデバイスの代表「Meta Quest2」を使ったモーションキャプチャーツール「QueTra」を開発いたしましたので紹介いたします。

BLOCKVROCK

BLOCKVROCKはWebブラウザだけでブロックプログラミングを使いながら3D空間を作ることができるビジュアルプログラミング環境です。ブロックプログラミングによって生成されたコードからA-Frameのコードを生成して小学生やプログラミング未経験者でもVR、ARを構築することができる、教育向けのコーディング学習サービスです。
8月に開催されたキッズワークショップではこのサービスを使って小学生の皆さんにメタバースを作る体験をしていただき。

aframe-vrm

今回ラボではBLOCKVROCKを開発する株式会社レベルエンターさんと協力して、 aframe-vrm を使用してキャラクターデータやモーションデータを読み込む環境を開発してきました。
aframe-vrmはbinzumeさんらによるオープンソースソフトウェア（OSS）で、A-Frame上でVRMのモデルを読み込んで動かすJavaScriptのコンポーネントです。VRM以外にもGLBファイルを読み込むことができ、BVHとvmd形式のアニメーションを使用することができます。このページで実際に動作するDemoを動かすことができます。このDemoを使ってキャラクターを動かすためのAnimationパイプラインを解説していきたいと思います。
今回のシステムのワークフローは下記の画像のようになっています。

Meta QuestとUnityを使ってキャラクターを踊らせる

今回はAnimationを制作するのにUnityとSteamVRに対応しているVR機器を使用しました(Oculus･Meta Quest可)。まずUnity上でキャラクターをVR機器を使って動かします。今回使うライブラリは「DMM VR Connect SDK」です。他には「Steam VR」「UniVRM」「Final IK」を使用しました。Final IKのみ有料で、あとは無料で利用できます（ありがたい）。DMM VR Connect SDKにはVR機器をキャリブレーションしてアバターを動かすDVRAvatarCalibratorがあります。SteamVRExampleのSceneがあるので参考にしながら操作したいアバターをScene内に設置します。シーン再生時に自動でキャリブレーションされてアバターの体型と操作している人間の体型の差を自動で調整し、VRIK(FinalIKのコンポーネント)を設定してくれます。鏡の前に立って自分のアバターが動いているのを確認しましょう。

AnimationをBVHで出力する

aframe-vrmが対応しているモーションデータはBVHとvmdの2種類あります。ラボ内では白井Dとともにかなりいろいろ実験してみたのですが、今回は他のアニメーションシステムとの互換性と、キネマティクス、変換の精度の問題からBVH形式でモーションを出力することにしました。
利用させていただいたOSSである「bvh Tools」はUnityのHumanoid形式に対応したアバターのモーションを録画して出力することができます。BVHRecorderコンポーネントをSceneのGameObjectに追加して録画対象のAnimatorを追加します。その後Editorの再生を開始してモーションを録画し、Saveを押すと指定したパスにBVHファイルが保存されます。
注意点ですが、BVHRecorderから出力されるBVHはA-frame上とScaleが違うので、各フレームの座標を10倍になるようにBVHRecorderコンポーネントを修正する必要があります。

アニメーションとモデルをBLOCKVROCKに組み込む

子供たちがQuest2を使ってモーションを作っていきます。

数秒で「集客できそうな上半身モーション」を作るという課題に挑戦するお子様たち。
監修はパントマイムアーティストの荒木シゲル先生です。
VR Studioの過去のVRゲーム作品にも参加されています。

モーションキャプチャー部分は「QueTra」というVR Studio Labの内部ツールで、HMDと両手のトラッキング、つまり3点トラッキングのモーション収録を子供でも操作できるように超シンプルにしてあるツールです。子供たちがREALITY(スペシャルバージョン)をiPadで操作して、思い思いのアバターを制作して、Unity経由でVRMを出力し、QueTraでモーションを付けてローカルWeb環境でプレビューします。この間20分で6名、という超スピードです。失敗するとお子さんが泣いちゃいますので失敗は許されません。高い品質と快適なUXが求められるソフトウェア技術です。

各パートを担当した参加者のみなさん。各回18名x3セッション実施しました。
ワークショップのフルバージョン動画はこちら

並列で作業しているプログラミングチームはBLOCKVROCK上で用意したアバタとモーションデータを座標や回転を指定しながら配置します。アバターの背後視点（TPS）で動けるような数学を大学院生の堀部さんやレベルエンター社員さんらとともに学んでいます。さらにCGチームはデジタルハリウッド大学の小倉イサク先生らとBlenderで屋台を配置する作業を行っています。生成されたGLBファイルをBLOCKVROCK上で合体させてブラウザでアクセスすると……！

みんなが踊ってくれました！子供たちが作ったメタバース渋谷で、REALITYのアバターがブラウザで動いている様子は動画でご確認ください。BLOCKVROCKを使うとスマホからもARでアクセスできたりします。

実際に「QueTra」を運用してみた上で改善できそうな要素や学んだ要素をメモしておくと、Meta Questを使用する上での問題になり事前に開発者モードを有効にしておく必要、あとはQuestデバイスに複数アカウントを設定している場合apkのインストール先のユーザーを指定する必要があるなどの設定面がありました。また今回はワークショップでの実験的な利用ですが、そもそもQuestは子供向けデバイスではないので（公式としては13歳以上の設計）、HMDではなく、頭部はViveTrackerやコンピュータビジョンで作ったほうがいいかもしれませんね。またVRM+BVHでのWebVRでのアバターアニメーションツールが構築できたことはいい経験でした。REALITYのアバターVRMは一般開放されていませんが、JavaScriptの勉強にはいいかもしれません。

「メタバースをゼロから作るプログラミングワークショップ」自体はとても好評だったそうなので、ご興味ある方は GREE VR Studio Laboratoryにお問い合わせください（jp-gi-vr@gree.net）。
またインターン学生も募集中だそうです。一緒にメタバースの研究開発に参加しませんか？