VRMをモーション付きでWebブラウザ上で動かしてみる

この記事は whywaita Advent Calendar 2023 12日目の記事です。

前日は id: nersonu さんの「サブスクを整理する」でした。定期的にサブスクの整理をすることは出費を確認する上で大切ですね。

唐突ですが今回は VRM をブラウザ上で描画して Mixamo からダウンロードした fbx ファイルをもとにモーションをつける Web アプリを開発したいと思います。

VRM とは?

VRMは汎用的な3Dのファイル形式であるglTFを拡張した人型3Dアバター向けのファイル形式です。 2018年頃に登場した比較的新しいファイル形式です。

Mixamo は3D CGのモデルやアニメーションを利用できるサービスです。以下に示すように、複数の3Dアニメーションのモデルなどを利用することができます。

Mixamoでは3Dアニメーションを表現するファイルをFBX形式のファイルでダウンロードすることができます。

vrm-mixamo-viewer-waita というサービスを作りました。

VRMファイルを画面にドラッグ&ドロップしてボタンを押すとモーション付きでVRMを描画できます。

このサービスを開発する上で以下のツールを用いました。

詳細について興味のある方は GitHub のコードを見てみてください。

ちなみにUIは glTF Viewer を丸パクリさせてもらいました。

今回はMixamoからダウンロードしたfbxファイルをもとにVRMにモーションをつけて描画するサービスを作りました。 VRMにモーションをつけるとなんかいいですね。