SculptrVRでモデリングしたモデルをmixamoでリギングし、UnityでIK

<img src="http://megamin.jp/wp-content/uploads/2018/02/medama_20180212_1425.png" />

# 疲れた

　記事を書く前にものすごく疲れてしまいました。ブログ記事の扉絵は必ず描くようにしているのですが、およそ６割描けたタイミングで悲劇が訪れました。ブルースクリーン。ブルースクリーン。ブルースクリーン。おのれ！！ またお前か！！ WINDOWS 7 の時はあんなに一か月以上も電源入れっぱなしで激しく使い倒しても全く落ちなかったというのに！！ WINDOWS 10 ！！！ お前めっさ落ちまくりじゃないですか！！！

とまぁ、がんばってもう一度描き直しました。がんばって描き直したので最初より良く描けてると思う（当社比）

さて、本題に入りましょう。

# IKやるぜ

　本日は Unity 公式マニュアルの IK のページを参考にしながらやってみたいと思います。 せっかくなので  SculptrVR smooth beta を使用してモデリングして Blender できちんと補正して mixamo でリギングして Unity にもってきてから IK を適用するところまでやってみたいと思います。 

# SculptrVRでモデリング

　モデリングする様子をスクリーンショットでご覧ください。と思ったら、スクリーンショットが全部真っ黒でした。うーむ、オープンベータだから細かい不具合とかはしょうがないかな。それでもかなり描けます！ できあがりはこんな感じです。　実際に作ってる画面では取れなかったので、Blender 内でレイヤー事に分けて表示したものになります。

<img alt='' class='alignnone size-full wp-image-2056 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7af06a4e.png' />

- まずはミラーモードにして骨を作ります

<img alt='' class='alignnone size-full wp-image-2057 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7be1626a.png' />

- 骨に肉をつけてプロポーションを整えます

<img alt='' class='alignnone size-full wp-image-2058 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7cc8f5f6.png' />

- 服を着せます

<img alt='' class='alignnone size-full wp-image-2059 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7da16447.png' />

- 顔と髪の毛を追加します

　モデリングした後は、保存してから FBX 形式でエクスポートします。モデリングはここまでです。

# Blender で微調整

　次は、Blender にエクスポートした FBX を読み込んで調整します。作業内訳はこんな感じです。

- 余分なレイヤーを削除
- 編集モードでスケールを調整し、メッシュを回転させ、原点を足元に設定
- mixamo でリギングさせるために Blender から FBX をエクスポートする

<img alt='' class='alignnone size-full wp-image-2060 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7e7e9913.png' />

- Blender を起動する

<img alt='' class='alignnone size-full wp-image-2061 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7f416eba.png' />

- X を押下して初期画面のキューブを削除

<img alt='' class='alignnone size-full wp-image-2062 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a7feca720.png' />

- ファイル → インポート → FBX (.fbx)

<img alt='' class='alignnone size-full wp-image-2063 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a80bcc511.png' />

- インポートするファイルを選択して FBXをインポート をクリック

<img alt='' class='alignnone size-full wp-image-2064 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a81cb606e.png' />

- SculptrVR の FBX をインポートしたら SculptrVR の親子ノードを全て展開する
- SculptrVR 内部でのレイヤーは親子関係で構成されているため、これらの親子関係を解消し、単一のオブジェクトに変換する作業を行う

<img alt='' class='alignnone size-full wp-image-2065 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a82c3509b.png' />

- 子階層のオブジェクトノードを一つクリック
- マウスカーソルを 3D ビューまで移動させる
- Alt + P を押下
- トランスフォームを維持してクリア をクリック

<img alt='' class='alignnone size-full wp-image-2066 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a83e6c17b.png' />

- するとこのように親子関係が解除される

<img alt='' class='alignnone size-full wp-image-2067 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a84b5e53b.png' />

とりあえず、残りのオブジェクトも全部同様に親子関係をトランスフォームを維持してクリアする

<img alt='' class='alignnone size-full wp-image-2068 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a85b5a32f.png' />

- 今回のデータでは先に作った下書きの骨レイヤーが不要になるので削除しておく

<img alt='' class='alignnone size-full wp-image-2069 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a86969a73.png' />

- 骨レイヤーを右クリックして削除する

<img alt='' class='alignnone size-full wp-image-2070 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8793cf25.png' />

- 次に、親子関係を解除したオブジェクトを全て選択する
- 最初に一つクリックした後は残りのオブジェクトを全て Shift を押しながらクリックする

<img alt='' class='alignnone size-full wp-image-2071 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8880a432.png' />

- 全部クリックした状態

<img alt='' class='alignnone size-full wp-image-2072 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a89fe483e.png' />

- Ctrl + J を押下し、選択したオブジェクトをひとつのオブジェクトに統合する

<img alt='' class='alignnone size-full wp-image-2073 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8b4862f5.png' />

- 統合した状態

<img alt='' class='alignnone size-full wp-image-2074 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8c1650d9.png' />

- 統合したオブジェクトを選択した状態で、モディファイアをクリック
- 追加をクリック
- ポリゴン数削減をクリック

<img alt='' class='alignnone size-full wp-image-2075 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8d097ff4.png' />

- 比率をクリック

<img alt='' class='alignnone size-full wp-image-2076 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8dd9a2b3.png' />

- 0.01 と入力して ENTER

<img alt='' class='alignnone size-full wp-image-2077 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8e9716e9.png' />

- 適用をクリック

<img alt='' class='alignnone size-full wp-image-2078 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a8f7c62d2.png' />

- HTAB を押下して編集モードへ移行する

<img alt='' class='alignnone size-full wp-image-2079 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9090166b.png' />

- S を押下
- 0.01 を入力して ENTER

<img alt='' class='alignnone size-full wp-image-2080 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a915a61d1.png' />

- テンキーの 1 を押下
- テンキーのピリオドを押下
- 正面から見た状態なのに、オブジェクトは横を向いている
- 回転させて正面を向かせる必要がある

<img alt='' class='alignnone size-full wp-image-2081 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9232b82c.png' />

- R を押下
- Z を押下
- 270 を入力して ENTER

<img alt='' class='alignnone size-full wp-image-2082 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a92f19cf2.png' />

- 少しズームアウトして原点を確認する
- G を押下
- マウス操作でオブジェクトの足元を原点まで移動させる

<img alt='' class='alignnone size-full wp-image-2083 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a93ce0954.png' />

- 正面から見た図で足元が原点に移動できた図

<img alt='' class='alignnone size-full wp-image-2084 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a94c50daf.png' />

- テンキーの 3 を押下
- 横から見た図でも原点に足元があるので今回はこのまま
- もし横から見た図でもズレている場合は先ほどと同様に修正を行う

**以上で Blender での修正は完了 **

<img alt='' class='alignnone size-full wp-image-2085 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a95a39e02.png' />

- ファイル → 名前をつけて保存 をクリック

<img alt='' class='alignnone size-full wp-image-2086 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a965d7692.png' />

- ファイル名を適宜入力し、Blender ファイルを別名で保存 をクリック
- 別に別名でなくても普通に保存でもおｋ

<img alt='' class='alignnone size-full wp-image-2087 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9724ffa2.png' />

- ファイル → エクスポート FBX (.fbx) をクリック

<img alt='' class='alignnone size-full wp-image-2088 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a97d0271d.png' />

- ファイル名を適宜入力して FBXをエクスポート をクリック

以上で、Blender での作業は全て完了です。

# mixamoでリギングする

　Blender でリングするのは以前やったので、今回は mixamo というサイトを利用してリギングしてみます。<a href="https://www.mixamo.com/" target="_blank">mixamo</a>にアクセスします。

<img alt='' class='alignnone size-full wp-image-2089 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a98b83e08.png' />

- 初めての人は SIGN UP FOR FREE をクリック
- Adobe アカウントを持っている人は LOGIN をクリック
- ごめんなさい、すでに自分はアカウントを持っているので LOGIN をクリックした手順で説明します
- LOGIN をクリック

<img alt='' class='alignnone size-full wp-image-2090 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a997cd786.png' />

- メールアドレスとパスワードを入力し、Sign in をクリック

<img alt='' class='alignnone size-full wp-image-2091 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9a2dd524.png' />

- UPLOAD CHARACTER をクリック

<img alt='' class='alignnone size-full wp-image-2092 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9b0a77bd.png' />

- Blender からエクスポートした FBX を点線の枠内にドロップする

<img alt='' class='alignnone size-full wp-image-2093 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9bf10f4c.png' />

- ドロップするとアップロードが始まり

<img alt='' class='alignnone size-full wp-image-2094 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9ce49c68.png' />

- キャラクターが原点にいない場合、多分キャラクターは画面の外に表示されているので結果的に何も表示されない状態になる
- 読み込みが完了すればキャラクターが表示されるので、矢印ボタンでキャラクターを正面に向くように調整し、NEXT をクリック

<img alt='' class='alignnone size-full wp-image-2095 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9de75303.png' />

- 次に間接のマークをガイダンスに従ってキャラクターに設置する

<img alt='' class='alignnone size-full wp-image-2096 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9ed50b96.png' />

- 今回のモデルは指が省略しているモデルなので、2 Chain Fingers(41) を選択し、NEXT をクリック

<img alt='' class='alignnone size-full wp-image-2097 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81a9f997e88.png' />

- リギング中・・・

<img alt='' class='alignnone size-full wp-image-2098 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa087440a.png' />

- リギングが完了
- この図、どうみても肩間接の位置がおかしい
- でも無視して NEXT

<img alt='' class='alignnone size-full wp-image-2099 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa14c84fe.png' />

- NEXT

<img alt='' class='alignnone size-full wp-image-2100 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa23a76ec.png' />

- 完了
- 左のアクションから適当なものを選ぶとインポートしたキャラクターが動きます
- 動きを確認しましょう

<img alt='' class='alignnone size-full wp-image-2101 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa2f1e41d.png' />

- リギングした FBX をダウンロードします
- DOWNLOADをクリック

<img alt='' class='alignnone size-full wp-image-2102 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa3e29bf7.png' />

- とりあえずデフォルトで OK
- DOWNLOAD をクリック

<img alt='' class='alignnone size-full wp-image-2103 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa49156bb.png' />

- ダウンロードが開始され

<img alt='' class='alignnone size-full wp-image-2104 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa54b0dca.png' />

- ファイルを保存

以上で、mixamo での作業は完了です。「SculptrVRでモデリングしたモデルをリギングし、VRChatにINするまで」の記事から mixamo でのリギングまでの手順を確認に来た人は、このあとの作業は<a href="https://qiita.com/medamap/items/e299e940e671ebdcd5fe#blender-%E3%81%A7-fbx-%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%81%9F%E3%83%AA%E3%82%AE%E3%83%B3%E3%82%B0%E3%82%92%E8%A3%9C%E6%AD%A3%E3%81%97%E3%81%A6%E6%9B%B4%E3%81%AB%E6%9B%B4%E3%81%AB%E6%9B%B4%E3%81%AB-fbx-%E3%81%B8%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88" target="_blank">こちらをクリック</a>して戻れます。

# UnityでIK制御する

<img alt='' class='alignnone size-full wp-image-2105 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa613ff4c.png' />

- Unity を起動する

<img alt='' class='alignnone size-full wp-image-2106 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa6e73967.png' />

- New

<img alt='' class='alignnone size-full wp-image-2107 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa78593be.png' />

- 適宜プロジェクト名を入力し、Create project をクリック

<img alt='' class='alignnone size-full wp-image-2108 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa860633c.png' />

- 先ほど mixamo からダウンロードした FBX を Unity の Project ビューへドロップしてインポート

<img alt='' class='alignnone size-full wp-image-2109 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aa91628f7.png' />

- Project ビューのモデルをクリック
- Inspector ビューの Rig をクリック
- Animation Type を Humanoid に設定
- Apply をクリック

<img alt='' class='alignnone size-full wp-image-2110 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aaa17bd0e.png' />

- Project ビューのモデルを Hierarchy ビューへドロップし、シーン内にモデルを配置する

<img alt='' class='alignnone size-full wp-image-2111 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aaaed73aa.png' />

- Hierarchy ビューのモデルのツリーを展開し、Camera と Lamp を Ctrl + クリックで２つ選択状態にする
- 反転状態になったファイル名を右クリックし、Delete をクリック

<img alt='' class='alignnone size-full wp-image-2112 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aab934399.png' />

- プレハブとの関連性が壊れるけどいいの？ と聞かれるけど構わず Continue する

<img alt='' class='alignnone size-full wp-image-2113 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aac352c80.png' />

- ドーン！！
- 色がついてない
- 頂点カラーを有効にするために頂点カラーシェーダを適用する
- <a href="http://megamin.jp/wp-content/uploads/2018/02/VertexColorShader.zip" target="_blank">頂点カラーシェーダー</a> をダウンロードする

<img alt='' class='alignnone size-full wp-image-2114 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aacf38b33.png' />

- ダウンロードしたファイルを Project ビューにドロップする

<img alt='' class='alignnone size-full wp-image-2115 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aada77e98.png' />

- Project ビューの VertexColor シェーダを VertexColor マテリアルにドロップする

<img alt='' class='alignnone size-full wp-image-2116 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aae7e76f6.png' />

- Project ビューの VertexColor マテリアルを Scene ビューのモデルにドロップする

<img alt='' class='alignnone size-full wp-image-2117 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aaf49f562.png' />

- シャキーン！！！
- それにしても手なげぇなおい！！

<img alt='' class='alignnone size-full wp-image-2118 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab006eb8d.png' />

- Project ビューで右クリック → Create → Animation Controller をクリック

<img alt='' class='alignnone size-full wp-image-2119 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab0b1311a.png' />

- Animation Controller 名を Girl にする

<img alt='' class='alignnone size-full wp-image-2120 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab19519e6.png' />

- Hierarchy ビューの モデルオブジェクトを選択
- Project ビューの Animation Controller を Inspector ビューの Controller プロパティにセット

<img alt='' class='alignnone size-full wp-image-2121 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab21c63bc.png' />

- Project ビューの Animation Controller をダブルクリック

<img alt='' class='alignnone size-full wp-image-2122 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab312556c.png' />

- Project ビューの 最初にインポートしたモデルのノードを展開
- mixamo.com と名前の付いたアニメーションデータを Animator ビューにドロップする

<img alt='' class='alignnone size-full wp-image-2123 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab456fe9f.png' />

- このような状態になる

<img alt='' class='alignnone size-full wp-image-2124 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab4e55451.png' />

- Animator ビューの Base Layer の歯車マークをクリック
- IK Pass をチェック

<img alt='' class='alignnone size-full wp-image-2125 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab5b89cf0.png' />

- 次は IK 制御用のスクリプトを作成します
- Project ビューで何もないところを右クリック
- Create → C# Script をクリック

<img alt='' class='alignnone size-full wp-image-2126 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab687e657.png' />

- IKController と命名し、作成した IKController をダブルクリックして Visual Studio を起動して編集

```cs:IKController.cs
using UnityEngine;

[RequireComponent(typeof(Animator))]
public class IKController : MonoBehaviour
{
    protected Animator animator;

    public bool ikActive = false;
    public Transform rightHandObj = null;
    public Transform lookObj = null;

    void Start() {
        animator = GetComponent<Animator>();
    }

    //a callback for calculating IK
    void OnAnimatorIK() {
        if (animator) {

            //if the IK is active, set the position and rotation directly to the goal. 
            if (ikActive) {

                // Set the look target position, if one has been assigned
                if (lookObj != null) {
                    animator.SetLookAtWeight(1);
                    animator.SetLookAtPosition(lookObj.position);
                }

                // Set the right hand target position and rotation, if one has been assigned
                if (rightHandObj != null) {
                    animator.SetIKPositionWeight(AvatarIKGoal.RightHand, 1);
                    animator.SetIKRotationWeight(AvatarIKGoal.RightHand, 1);
                    animator.SetIKPosition(AvatarIKGoal.RightHand, rightHandObj.position);
                    animator.SetIKRotation(AvatarIKGoal.RightHand, rightHandObj.rotation);
                }

            }

            //if the IK is not active, set the position and rotation of the hand and head back to the original position
            else {
                animator.SetIKPositionWeight(AvatarIKGoal.RightHand, 0);
                animator.SetIKRotationWeight(AvatarIKGoal.RightHand, 0);
                animator.SetLookAtWeight(0);
            }
        }
    }
}
```

- 編集したら保存する

<img alt='' class='alignnone size-full wp-image-2127 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab7b30233.png' />

- Project ビューの IKController を Hierarchy ビューのモデルにドロップする

<img alt='' class='alignnone size-full wp-image-2128 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab877eeac.png' />

- Hierarchy ビューの何もないところを右クリックする
- 3D Object → Cube をクリック

<img alt='' class='alignnone size-full wp-image-2129 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab92df06c.png' />

- Hierarchy ビューで先ほど追加した Cube を選択する
- Inspector ビューでスケールを XYZ 全て 0.01 にする

<img alt='' class='alignnone size-full wp-image-2130 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81ab9f46f8e.png' />

- Hierarchy ビューで Cube を選択した状態にする
- Scene ビューで Cube をモデルの右上あたりにドラッグして動かしておく

<img alt='' class='alignnone size-full wp-image-2131 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81aba98e200.png' />

- Hierarchy ビューのモデルを選択状態にする
- Hierarchy ビューの Cube を Inspector ビューの Right Hand Obj と Look Obj のプロパティに設定
- Hierarchy ビューの Ik Active プロパティをチェック

<img alt='' class='alignnone size-full wp-image-2132 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81abb1b9aad.png' />

- 実行！！

<img alt='' class='alignnone size-full wp-image-2133 ' src='http://megamin.jp/wp-content/uploads/2018/02/img_5a81abba73e46.png' />

- 動いた！
- ちゃんと Scene ビューで Cube を動かすと手が Cube に追従します

# プログラムは簡単でしたが

　はっきりいってモデリングやら準備やらの方に時間がかかりました。今日の記事を書くのに要した時間がおよそトータルで１１時間くらい。でもまぁ、また次回同じ事をやろうとした時に色々忘れててまた同じことを調べる手間を考えれば作業記録を残すというのはとても良い事です。それに記録に残すために細かい作業をしたことも記憶の強化に繋がります。

というわけで、次回は Oculus Touch のコントローラに連動して動かしてみたいと思います。

ではまた！