ホロライブが大好きでARコンテンツが作りたくなった

僕はホロライブが大好きです。 カバー様は2次創作に寛容で、MMDを公開しています。

www.mmd.hololive.tv

素敵な3Dモデルを活用してARコンテンツを作りたいと思いました。 作りました。(アプリは公開していません。)

youtu.be

位置ベースのARコンテンツで、登録した特定の場所に移動するとライバー達が現れます。

技術的な話

3Dモデルとアニメーション

ライバーの3Dモデルは、公式のMMDをお借りしました。

www.mmd.hololive.tv

アニメーションは、以下の公開されているMMDアニメーションをお借りしました。

Paruparu様

bowlroll.net

KEITEL様

bowlroll.net

bowlroll.net

bowlroll.net

とりわかめ様

bowlroll.net

MMDはNora様のMMD4MecanimからFBXに変換してUnity内で使用しました。

stereoarts.jp

AR

Unity+ARFoundation(ARKit)でARを実装しました。 位置合わせ(空間マッピング)はImmersalを使用しました。

演出を実行するロケーションの作成

Immersalの公式アプリ等を使って、ARマーカーとなる3Dデータを生成することができます。

immersal.gitbook.io

生成したマーカーは、Developer Portal上にアップロードされ、ImmersalSDKを使用してSDKJobという形でマーカー情報をロードすることができます(2021年9月時点の手法)。

JobListJobsAsync j = new JobListJobsAsync();

j.token = m_sdk.developerToken;
j.OnResult += (SDKJobsResult results) =>
{
   // resultsからDeveloperPortal上のマーカー情報群が参照できる
};

await j.RunJobAsync();

SDKJobからARマーカーのidを参照することができ、そのidを元にImmersalSDKを用いて、ARマーカー(ARSpace)をロードしました(2021年9月時点の手法)。

JobLoadMapBinaryAsync j = new JobLoadMapBinaryAsync();

// SDKJobからidを参照して、設定
j.id = job.id;

j.OnResult += (SDKMapResult result) =>
{
    // ARSpace.LoadAndInstantiateARMapからARマップのインスタンスを生成できる
};

await j.RunJobAsync();

生成したARSpaceはGameObjectにアタッチされており、その子に追従させたいGameObjectを設定することで、現実空間に合わせた演出を実現することができます。
本コンテンツではギズモオブジェクトをipad上で操作して、追従する子オブジェクトの位置や回転をキャリブレーションできるようにしました。

また、Developer Portalからダウンロードした3Dデータの原点は下部でなく中心あたりに設定されていたため、ARから平面を検出する必要がありました。 ここは、ARFoundationのARPlaneManagerから解決しました。
以上の方法でキャリブレーションした情報をjsonにパースし、ロケーション情報として管理しました。

影の表現

こちらのForumを参考にさせて頂きました。

forum.unity.com

オクルージョンの表現

ARFoundationのAROcclusionManagerを使用しました。

docs.unity3d.com

作った感想

よくあるコンセプトのARですが、大好きなキャラクターが現れるのはうれしいものですね。ただARマーカーを作る姿がシュールすぎて恥ずかしかったです。