Summary
このブログを読むと、.vrm ファイルを .glb ファイルに変換して他の glb ファイルからアニメーションをコピーできます。また、好きな vrm ファイルを使ってアバター付きAIエージェントを実装できます。
やりたかったこと
AWS-SamplesのGenerative AI Avatar Chatは、Amazon Bedrock を使ってアバター付き AI Agent を構築できるサンプルです。
ところでこのサンプルの女の子も可愛いですが、自分の好きなアバターを使いたいですよね。
例として、こちらの商用利用可能のアバター(vrm)を使ってみました。
https://sonovr.booth.pm/items/4252664
.glb ファイルの用意
まず、VRM ファイルを GLB ファイルに変換します。
https://booth.pm/ja/items/4104649
次に、Blender を使って、アニメーションを移植します。
サンプルの女の子には、 Idle, Thinking, RaiseHand, RaiseToIdle という4つのNLAトラックが収録されていますが、この動きを移植したいです。
- アニメーションが正しく反映されるようにボーンの名前を参照元アバターと同じになるように変更します。これは手作業でやりました...（大体で良い）
- こちらのコードを使ってsample-avatar からアニメーションをコピーします https://blender.stackexchange.com/questions/74183/how-can-i-copy-nla-tracks-from-one-armature-to-another
- このままだとなぜか後ろを向いてしまうので、z軸に沿って180度回転しましょう（アプリのコードで回転できると思ったら、なぜかできなかった）
最後に、GLBファイルに書き出します。
https://blender.atom-box.net/glb_export/
アニメーションモードは NLA トラックにしてください。
glTF Viewer などで、アニメーションが再生できるか確認してください。
https://gltf-viewer.donmccurdy.com/
unlit への変更
このままだと、モデルが真っ黒に表示されてしまいます。ライトモードをunlitに変更します。
https://gltf-transform.dev/cli
gltf-transform unlit test.glb test-unlit.glb
generative ai avatar chat への反映
あとは、/packages/web/src/models/sample-avatar.glbを今作ったファイルで置き換えるだけです。
アバターのサイズが小さかったり大きかったりするとカメラがズレるので、様子を見て/packages/web/src/hooks/useAvatar.ts 内の以下の部分を書き換えましょう。
rootMesh?.position.set(0, -2.6, 0);
rootMesh?.scaling.set(1.8, 1.8, 1.8);
rootMesh?.rotation.set(0, Math.PI / 2, 0);
猫メイドちゃんは身長が低かったのと、後ろ向きだったので、このくらいにするとちょうどよかったです。
rootMesh?.position.set(0, -2.3, 0);
rootMesh?.scaling.set(2.4, 2.4, 2.4);
rootMesh?.rotation.set(0, Math.PI / 2, 0);
終わったらデプロイしましょう。
完成！
以下のようになりました。
