Blenderでアバターとモーションを合体！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/83bfde68-80e7-d4a4-361b-75318dcf3100.png)

こんばんは！
野球好きのりまきです。
年の瀬に何をしているんだと思いながら、WEBARで表示すべく、Blenderを使って、アバターとモーションを合体していきます！
シーズンオフの時に進めていきます！

## 目次
[1. 準備するもの](#準備するもの)
[2.Blenderをダウンロード](#Blenderをダウンロード)
[3. アバターファイルをインポート](#アバターファイルをインポート)
[4. モーションキャプチャをインポート](#モーションキャプチャをインポート)
[5. アバターとモーションを合体](#アバターとモーションを合体)
[6. 動作を確認する](#動作を確認する)
[7. おわりに](#おわりに)


## 【準備するもの】
　・アバター（FBX）
　・モーションファイル（bvh）
　・Blender

 アバターは以前に作成しているものを使用します。
 作り方の記事はコチラです。
 
 https://qiita.com/n0rimaki_san/items/9af522d78bbe78c7d90c

 モーションはコチラのスタジオで撮影して作成しました。
 
 https://atl-space.recruit.co.jp/

 ## Blenderをダウンロード

 Blenderをダウンロードします。ブラウザ上で動くと思ったらダウンロードせなアカンようです。
 バージョンアップが激しいような気がしています。その時の最新版をインストールします。

 https://www.blender.jp/

 ダウンロードして立ち上げます。
 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/6dd3e766-fb88-79cf-a66b-e2053a3920b2.png" width=60%>


この画面から公式サイトのチュートリアルやマニュアルが確認できます。
とっても便利♡

新規ファイルの全般を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/281b01db-f94a-16a3-181d-c3eef788a839.png" width=70%>


真ん中の四角って何？と思いつつ、サクッと削除します。鉛筆みたいなのも一緒に削除します。

## アバターファイルをインポート
まずはアバターファイルをインポートします。

［ファイル］→［インポート］→［FBX］を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/35a47cba-898b-860a-06ce-02c0fba4ed2b.png" width=50%>

アバターが表示されましたが、グレイです・・・・
グレイで四苦八苦してましたが、シェーディングを変更することで色がつきます！

Blenderのシェーディングは、3Dモデルの表面の見た目を設定するプロセスです。シェーディングを通じて、オブジェクトの質感（マテリアル）、色、反射、透明性、光の反応などを定義します。これにより、3Dモデルがリアルで説得力のある外観を持つようになります。

右上で変更できます。

［変更前］
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/b1546a94-e830-acdf-875f-956aece07d7d.png)

［変更後］
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/4cdba48c-9df4-4c85-5b41-0a626f7f822d.png)

ツノ（アーマチュア：骨組み）が邪魔なので削除します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/82b2cdaf-b33c-3f0e-f3b7-43cac7b43187.png)

ツノを選択してDelete
骨組みがなくなるので、倒れます。今はこのまま倒れさせておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/9c3fdbda-dab1-d33a-30ba-eb785c0fdb26.png)

## モーションキャプチャをインポート

モーションファイルをインポートします。
［ファイル］→［インポート］→［FBX］を選択します。

画面上で確認できない場合は、縮小等して表示します。
私の場合は、モーションファイルが大きすぎたので、かなり画面を縮小しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/6cf57eb3-665c-8186-3725-27df7f8aeaac.png" width=70%>

モーションが動作するかを確認します。
再生ボタンをクリックします。モーションファイルが動けばOKです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/ea3bf951-f626-b63c-4200-238e2a076a27.png" width=70%>

次に、以下選択と設定をします。

・モード：ポーズモード
・タイムライン：0
・モーションファイル選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/d127b031-1686-0e41-3c2b-aae38d710f8d.png" width=70%>

［ポーズ］→［トランスフォームをクリア］→［すべて］を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/01685a1d-66b2-632f-0938-aac21e9e8474.png" width=70%>

Tのポーズになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/9c76ab2d-71ac-18a9-e276-e0742ae62fc6.png" width=70%>

## アバターとモーションを合体

FBXファイルとbvhファイルを合体させます。

さっき倒れたアバターファイルとＴになったモーションファイルのサイズを合わせます。

モーションファイルが邪魔な場合、右の「シーンコレクション」の目を閉じて、非表示にします。
アバターは倒れたままなので、Ｘの角度を90°にします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/977ffb8a-0e2c-f79a-3d2c-ca62baa0ef84.png" width=70%>

### アバターとモーションの大きさを揃える

3Dオブジェクトを選択して「S」キーを押し、Ｔポーズのモーションファイルにあわせて大きさ、位置を調整します。

この際、モーションファイルが前面に来た方が合わせやすいので、モーションファイルを選択できていることを確認し、右下の［ビューポート表示］→［最前面］にチェツクをいれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/b472ba92-ac51-1b5f-f36a-96a399ca1672.png" width=70%>

微調整しながらサイズと手足を揃えます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/8f8658eb-0cc5-2fa4-c4df-5fb161f2ca53.png" width=70%>

整えたら、アバター、モーションファイルの順で選択します。
全体を囲って選択してもOKです。
アバターが赤のライン、モーションファイルが黄色のラインで囲まれてたらOKです！

アバターの上で右クリックし、[ペアレント]→[自動のウエイトで]を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/e4f2477c-3560-2e02-7351-eaa774cce740.png" width=70%>

画面左下の「ペアレントを作成」を開き、「トランスフォーム維持」にチェックをつけます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/e5085bf1-5937-dad3-e0cd-ad125d390e9c.png" width=70%>

画面下の再生ボタンを押して問題なく動作したらOKです！

ファイルをダウンロードします。
[ファイル]→[エクスポート]→[glTF2.0]を選択してファイルを保存します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/d285dafa-3bcf-23f8-c155-187a8617774e.png" width=70%>

## 動作を確認する

ダウンロードしたファイルの動作を確認します。
以下のサイトはファイルをドラッグ＆ドロップするだけで確認できるので便利です。

https://gltf-viewer.donmccurdy.com/

無事に動作しました！

https://x.com/n0rimaki_san/status/1873734777205059811

## おわりに

腕や脚がピクピクしたり、思ったようなモーションになっていない箇所もあるので、微調整はしたいなと思います。

アバターのサイズも大きかったりするので、Blender上で調整も試してみたいと思います。