cluster.で自作モデルを使用する(.fbx編)※Windowsのみ

VRルーム「cluster.」で自作アバターを使用する際にUnityでのセットアップが必要になります。
Unityを使ったことのない方でも使用できるよう、アップロード方法を羅列しておきました。ほぼ身内向けですが、よろしければご参照ください。
モデルの読み込みは下記から、cluster.については公式の開発者向けページを参照させて頂きました。
am1tanaka.hatenablog.com

■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをモデル+fbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
2.Unityを立ち上げ、プロジェクトファイルを作成する
3.「Assets」を右クリックして、「Create」を→「Folder」を選択してフォルダを作る
4.「New Folder」の名前を「Textures」にする
5.「Textures」フォルダの中にモデルのテクスチャデータをドラッグする
6.「Assets」を右クリックして、「Inport New Assets」でfbxファイルを選ぶ

7.「Inspector」→「Materials」を選択し、下記のようになっているか確認する
・Import Materialsにチェックが入っている
・「Location」が「Use Embedded Materials」になっている

■ボーンの対応付けを確認する
8.「Assets」→モデルのフォルダをクリックし、「Inspector」→「RIg」を選択する。ここで下記を行う
・「Animation Type」を「Humanoid」にして「Apply」を押す
・「Avator Definition」にチェックが入っているか確認する

※ここで「Avator Definition」に×印がついている場合は、3Dアプリで作ったボーンとUnityとのリンクが上手くいっていないので、下記のような方法を取る
8-1.「configure」をクリックすると、「Hierarchy」に「Avatar Configuration」という項目が出てくるので、対応するボーンを「Inspector」のそれぞれの対応項目にドラッグする

8-2.対応付けが終わったら、人型がすべて緑色になっていることを確認して「Apply」ボタン→「Done」ボタンを押す
8-3.「Avator Definition」が×印からチェック印に変わっていればOK

■モデルを配置する
9.「Assets」→モデルのフォルダをシーンビュー(青空と地面がある上のウィンドウ)にドラッグする


10.モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
11.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動　マウスのスクロールボタンを押す
・視点のズームイン/アウト　マウスのスクロールボタンを動かす
・(必要であれば)回転　マウスの右クリックを押す

※この後、「Hierarchy」→「Main Camera」をクリックし、Ctrl(Command) + Shift + Fを押して「シーンビュー」と「ゲームビュー」のカメラの位置をそろえておくと良い

■モデルの身長を調整する
12.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
13.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
14.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する

15.モデルと立方体の地面の高さが同じになるよう、13.と同じ方法で立方体を動かす
16.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
16-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
16-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す

■cluster.の設定をする その1
17.cluster.公式サイトの「開発者向け」をクリックし、「​cluster.SDKダウンロード」をクリックしてSDKをダウンロードする
18.「Assets」を右クリックし、「Import Package」→「Custom Package」を選択し、先ほどダウンロードしたSDKをクリックする
19.「Import」をクリックしてSDKを読み込む

■マテリアルとシェーダを設定する(アニメっぽくする)
cluster.では下記のシェーダが使用可能。ここではアニメっぽい表現をする「​VRM/MToon​」を使用する
・Standard
・Standard (Roughness setup)
・Standard (Specular setup)
・​VRM/MToon​
​・VRM/UnlitTexture​
​・VRM/UnlitCutout​
​・VRM/UnlitTransparent​
​・VRM/UnlitTransparentZWrite​

20.「Assets」を右クリックし、「Create」→「Material」を選択する。マテリアル名をダブルクリックして名前を変えておくと良い
21.20.で作ったマテリアルをクリックし、「Inspector」→「Shader」を「VRM」→「MToon」にする
22.「Basic」→「Color」の「Lit&Alpha」と「Shade」の下記の赤色の部分をクリックする

23.「Select Texture」のウィンドウが出てくるので、虫メガネのアイコンの横にテクスチャ名を入力する

24.テクスチャが出てくるので、それをクリックして「Lit&Alpha」と「Shade」のテクスチャを設定する
25.デフォルトだと若干ピンクっぽくなってしまうので、「Shade」の横の□をクリックし、薄めのピンクにする。もしくは白にしてもOK
26.「Lighting」→「Shade」→「Toony」で、主な色と影の色をどれだけハッキリ出すかの値を調整する。「1」に近いほど、アニメっぽくなる

27.輪郭線が必要な場合は「Outline」→「Width」→「Mode」を「WorldCoordinates 」にする。必要ないなら「None」にする
28.「Outline」→「Width」→「Mode」→「Width」で輪郭線の太さを調整する
29.「Outline」→「Color」の横の□をクリックし、輪郭線の色を好きな色にする
30.20.で作ったマテリアルをシーンビューに配置してあるモデルにドラッグする

■cluster.の設定をする その2
31.「​cluster.SDK」メニュー→「Avator Upload」を選択する
32.cluster.にログインする
33.Unityに戻り、「Get API acces token」をクリックする
34.Webブラウザが立ち上がるので、「トークン作成」のボタンを押す
33.出てきた文字列をコピーする
34.Unityに戻り、「API acces token」の横に文字列をペーストする

35.きちんとコピペされれば、cluster.のアカウント名が表示される
36.「cluster.」→「Avatar」→「Avatar」の横にモデルのフォルダをドラッグ&ドロップする


37.「cluster.」→「Avatar」→「Avatar name」に名前をつける
38.下記の方法でカメラを動かし、サムネ用の画像を仮決めする
・視点の平行移動　マウスのスクロールボタンを押しながら動かす
・視点のズームイン/アウト　マウスのスクロールボタンを動かす
・(必要であれば)回転　マウスの右クリックを押しながら動かす
39.Ctrl(Command) + Shift + Fを押して、上の「シーンビュー」と下の「ゲームビュー」をほぼ同じ画面にする
40.「Hierarchy」→「Main Camera」を「cluster.」→「Avatar」→「Thumbnail camera」にドラッグする

41.アバターに問題がなければ、「cluster.」→「System Message」に下記のように表示される

42.「cluster.」→「Avatar」→「Build」ボタンを押す
43.ビルドが成功した場合、「ビルド完了」という項目が出る
44.「Upload」ボタンが出るので、押す
※Mac版はアップロードできないので、こちらの方法でアバターをアップロードする
45.アップロード完了
46.cluster.のアプリでアバターを確認し、「ルームの中でアパターを見る」をクリックして挙動を確認する