Blenderでポーズを作ってUnityに取り込む

この記事は クラスター Advent Calendar 2023 の12/5の分です。
昨日は @so1_ さんの[Cluster Lobby - もっとも多くの人が行き交うメタバースを目指して](https://qiita.com/so1_/items/7359169e2bc1773d6fda)でした。安心できる場を作るロビー運営の考え方、興味深かったですね。

## ポーズが作りたいんじゃあ～
Cluster Creator Kit ScriptのBeta APIには[Humanoid Animation](https://docs.cluster.mu/script/interfaces/ClusterScript.html#humanoidAnimation)が存在し、これを使うと例えばアバターを特定のポーズに設定することができます。このAPIの使い方はCreators Guideにも記事[【ベータ機能】アバターをアニメーションで動かしてみよう](https://creator.cluster.mu/2023/10/30/beta_avataranimation/)があります。 
ここで「アセットとしてのHumanoid Animationを作るにはどうすればいいんだろう?」という疑問があります。記事にあるようにMixamoなどから既存のアニメーションを取り込む方法もありますが、任意のポーズを作りたい時にどうすればよいのでしょうか。
今回はBlenderを用いて自分でHumanoid Animation、特に1フレーム分の姿勢を作る方法を調べてみました。自分はBlender初心者なので、同じ初心者の方にもわかりやすいようスクリーンショット多めでお送りします。

## Blenderをインストール
Blender 4.0を使いました。

## Rigifyを有効化する
Preferenceの画面から、「Rigging: Rigify」を有効化します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/ccb9cbaf-40ef-db28-80fd-8959d5637d61.png)

## Basic HumanをAdd
AddメニューからBasic HumanをAddします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/420a7f86-0213-88b4-bd4d-f9d9c8968962.png)

## キーフレームの追加
画面上部のAnimationをクリックしてワークスペースをアニメーションに切り替えます。
その後「a」「i」キーを押して、初期状態でキーフレームを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/2fda9856-d0ff-207f-c873-bc8d2eb2a5f8.png)
この時「Location & Rotation」を選択します。

これで1フレーム目にキーフレームを追加できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/ed6d3cb2-27eb-ddc2-be55-d0ac679678f3.png)

次に、フレームのカーソルを2に動かし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/2f4446e2-b6d7-fbda-8f3f-aa26f050656b.png)

ボーンをクリック、「r」、角度を変更してクリック、を繰り返して、任意のポーズを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/4c145390-4ee7-2acc-12ba-7181b84b224a.png)
その後「a」「i」キーを押してキーフレームを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/36de4dff-0b4e-98b4-2790-dc21b193108e.png)

## fbxファイルのexport
Fileメニューからexportします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/dda353a2-ac75-517a-51d0-d8c5bdf62948.png)

## UnityへFBXファイルの取り込み

ここからはUnityを操作します。今回はCluster Creator Kitが対応しているUnity 2021.3.4を使用しました。

exportしたファイルをUnityのProjectウィンドウにドラッグ&ドロップすると、FBXファイルが取り込まれます。
ただしインポート設定をデフォルトから一部変更する必要があるため、まず一番左の箱をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/2b2a7218-5658-5aca-652d-d1663c398b7f.png)
Inspectorウィンドウをみて、RigのAnimation TypeをHumanoidにし、Applyします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/0497fec3-3886-736f-480b-b4eeef71eba9.png)
Animationから、Clipの名前を変更できます。デフォルトの「metarig|metarigAction」から変更しておくとわかりやすいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/7fb98cf5-5992-8b23-de88-e99c8a2dc0aa.png)

デフォルトの姿勢が1フレーム目、変更した姿勢が2フレーム目に入っている状態で取り込めていることが確認できました。
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/c61d3c5e-4986-990e-0921-8316d240dd3d.gif)

## clusterへの組み込み
今回はこちらの記事を参考にして、インタラクトするとポーズを反映するアイテムを作ってみました。
[clusterベータ アバターにアニメーションを付けるボタンを作る方法 #cluster #clusterベータ](https://zenn.dev/t_furu/articles/914e6ea51fce0b)

スクリプトは以下のようにシンプルに書いてみました。
```javascript
const anim = $.humanoidAnimation("MaruAnim");
$.onInteract((player) => {
  var sample = anim.getSample(1);
  player.setHumanoidPose(sample);
})
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242291/405e3c53-e63f-3fc7-d077-a24b3a4e55f8.png)
まる！

## おわりに

[整体](https://cluster.mu/w/e3f5f0f1-4402-4cee-8f81-535a8250fed4)ワールドもこちらの方法を使って実現しています。
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">整体に行きました<a href="https://twitter.com/hashtag/cluster?src=hash&amp;ref_src=twsrc%5Etfw">#cluster</a> <a href="https://twitter.com/hashtag/cluster%E3%83%99%E3%83%BC%E3%82%BF?src=hash&amp;ref_src=twsrc%5Etfw">#clusterベータ</a> <a href="https://t.co/vLuzxGbnIS">pic.twitter.com/vLuzxGbnIS</a></p>&mdash; neguse (@neguse) <a href="https://twitter.com/neguse/status/1726635860622524880?ref_src=twsrc%5Etfw">November 20, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
何かしら参考になれば幸いです。

明日は @tsgcpp さんの「何か(多分VRM関連)」です。どんな記事か楽しみですね。