一日でVRChatのアバターをblenderで作ってアップするまで~最低限~

# 作るもの
こんな単純なものを作ります
![avatar_blender.png](https://qiita-image-store.s3.amazonaws.com/0/375610/2c6d7b4c-6121-4d27-0055-40af3902d73a.png)
blenderで作成し

![avatar.png](https://qiita-image-store.s3.amazonaws.com/0/375610/ff8045fc-6364-60f5-82bc-f2148de428ee.png)
unityにインポートし
![2019-03-26 (2).png](https://qiita-image-store.s3.amazonaws.com/0/375610/acf91d2b-a911-ec98-a82c-44c6d483b8a8.png)
VRChatで利用

(完成品)
VRChatSDKのインポートが別途必要
https://gitlab.com/vrshuriken/blender_tutorial_cube/blob/master/blender_tutorial_cube.unitypackage


# 概要
blender起動からunityでVRChatのアバターをアップロードするまでの手順の紹介です。
アバターは一番簡単なgenericを作ります、humanoid(人型)は作りません。
blenderは操作が独特なのでそこからの紹介です。

# 前提
VRChatでアバターやワールドがアップロードできること。
まだの方は以下などを参照。
[(外部)VRchat 日本wiki 初心者ガイド (やる事まとめ)](https://vrchatjp.playing.wiki/d/%bd%e9%bf%b4%bc%d4%a5%ac%a5%a4%a5%c9%20%28%a4%e4%a4%eb%bb%f6%a4%de%a4%c8%a4%e1%29)
[(外部)VRchat 日本wiki 【必読】トラスト(Trust)システム](https://vrchatjp.playing.wiki/d/%a1%da%c9%ac%c6%c9%a1%db%a5%c8%a5%e9%a5%b9%a5%c8%28Trust%29%a5%b7%a5%b9%a5%c6%a5%e0)

# 環境
* Windows
* Unity Hub + Unity 2017.4.15f1  
導入方法はVRChat公式から  
https://docs.vrchat.com/docs/setting-up-the-sdk
* blender 2.79 stable  
2.8系はbetaかつUIが変わっているので2.79で進めます。  以下をダウンロード・解凍しblender.exeを起動してください。
https://builder.blender.org/download/blender-2.79-52a7636c2921-win64.zip
* (スクショではCats Blender Plugin 0.12.2 も入れています)

# チートシートを見ながら作業する
操作が独特なので操作の都度チートシートで確認しながら操作してください。  
ショートカット
![ss180530072412s.jpg](https://qiita-image-store.s3.amazonaws.com/0/375610/6c81f9fe-6a07-0c5e-c8e6-24ee6b917eb9.jpeg)
(情報源)
http://rt3dcg.blogspot.com/2016/12/blender-cheatsheet.html  
画面：
![画面blender.png](https://qiita-image-store.s3.amazonaws.com/0/375610/11e89e50-3f1d-d014-c485-89409737695c.png)


# ウィンドウの操作
適当に触っているとよくわからない状態になるので操作方法を書いておきます、間違えて触ったら戻してください。  

T・NキーでToolシェルフ・Propertyシェルフの表示非表示を切り替えられます。(上記チートシートの画面を見てください)

![画面EditorType.png](https://qiita-image-store.s3.amazonaws.com/0/375610/23c6320e-0ef1-ff4f-b4a5-76c8d5562022.png)
すべてのウィンドウは左側の〇の部分を切り替えると別のウィンドウに変更できます。


![3dwindow.png](https://qiita-image-store.s3.amazonaws.com/0/375610/df643d9e-257e-222a-7a1a-637d615bdc5f.png)
<font color="Yellow">・</font>3D Viewウィンドウは黄〇のプルダウンメニュー「Object Mode」クリックでさらにモードを切り替えられます。大体使うのは「Object Mode」と「Edit Mode」でこの二つはTabキーで切り替えられます。
<font color="Blue">・</font>ウィンドウ右上青〇の斜線をつかんでウィンドウ境界線を開くように左にドラッグすると分割でき、逆に閉じるように右にドラッグすると結合できます。
<font color="Red">・</font>ウィンドウ境界をつかんでドラッグするとサイズ変更できます。

# テンキーがない場合は数字キーで代替する設定にする 
テンキーで視点操作が必要になるのでテンキーがないキーボードを利用している場合は以下の方法で数字キーで代替する設定にしてください。
![UserPreferences.png](https://qiita-image-store.s3.amazonaws.com/0/375610/787854cd-287c-124e-ab32-3301324c5165.png)
Infoウィンドウ > File > User Preferences をクリックし
![UserPreferences2.png](https://qiita-image-store.s3.amazonaws.com/0/375610/9ad1f912-11e7-eb6e-bc5f-b401c29600dc.png)
\> Input > Enulate Numpad にチェック > Save User Settings クリックで設定保存。

# 視点操作
![numpad.png](https://qiita-image-store.s3.amazonaws.com/0/375610/317e1dca-1fee-68c8-048a-d09e1d7b8e58.png)
テンキー(上記設定すればテンキーでなくて良い)の数字キーで視点を切り替えられます。1キーを押した視点がアバターを正面から見る視点です。
中ボタン(マウスホイール)ドラッグすると視点回転できます。
Shift押しながらだと視点並行移動です。
マウスホイールでズームできます。
Shift+C(Shiftキー押しながらCキーを押す)で画面センター付近を表示できます。箱を見失ったら押してみてください。

# Camera・Lamp・Cubeを削除
![delete.png](https://qiita-image-store.s3.amazonaws.com/0/375610/1148d4f6-34e5-d760-1174-824019b97934.png)
最初からあるOutlinerウィンドウからオレンジの「Camera」「Cube」「Lamp」のオブジェクトをそれぞれ > 右クリック > Delete で削除してください。
(CameraとLampはアバター制作で使わない)

# Cubeを追加
![3dカーソル.png](https://qiita-image-store.s3.amazonaws.com/0/375610/0d45b509-1b18-f5e6-8daa-add9c2134443.png)
3D viewウィンドウ > Shift+C で3Dカーソルを原点(x,y,z=0,0,0)に移動し、Shift+A > Mesh > Cube で3Dカーソルの位置にCubeを追加します。
![select.png](https://qiita-image-store.s3.amazonaws.com/0/375610/4fca822d-ba84-858d-c483-857d1048aab8.png)
3Dカーソルはオブジェクト・Mesh追加時や回転時に位置を指定するときに利用します。オブジェクト・Meshの選択を表していません。
上記画像はCubeのオブジェクトを選択している状態で3D Viewウィンドウではオレンジの線、Outlinerウィンドウはオレンジの〇で表現されます。

# Cubeなどが見えなくなった時
![visible.png](https://qiita-image-store.s3.amazonaws.com/0/375610/5943962a-adec-8ef6-64d7-fd6589d66db7.png)
なにかの拍子にCubeなどのオブジェクト・Meshが見えなくなった時は赤〇の部分を見てください。
下の格子状のものはレイヤーで、マスはそれぞれ別のレイヤーです。
オブジェクトはいずれかのレイヤーにいるので別のレイヤーを選択すると見えなくなります。点がついているレイヤーを選択してください。
上の目のアイコンはクリックで可視状態を変えることができます。
こちらはオブジェクト選択状態でHキーでも切り替えられます。
すべて表示したいときはAlt+Hキーで表示されます。

# Cubeを真ん中半分で割る
アバターを左右対称に作りたいのでまず真ん中半分で割ります。

![loop1.png](https://qiita-image-store.s3.amazonaws.com/0/375610/daa72faa-7eab-3738-e2e3-e9b53d3cc349.png)
3D view ウィンドウ を Edit Modeにし、Aキーを1,2回押してすべてのポリゴンが選択された状態にしてください。
![loop2.png](https://qiita-image-store.s3.amazonaws.com/0/375610/cb07373b-1140-c1c0-7d07-728b0a3797a7.png)
次にCtrl+Rでループカット開始します、ピンクの線がカット位置です、クリックします
![loop3.png](https://qiita-image-store.s3.amazonaws.com/0/375610/306de095-d671-74c5-08f9-dba844917561.png)
マウスで線を移動しカット位置を調整後、Enterでカットを確定させます。メッシュが真ん中で分割されました。

# 左半分を削除
![delete.png](https://qiita-image-store.s3.amazonaws.com/0/375610/145ad923-6d46-b70d-262f-d11f1f86d183.png)
3D viewウィンドウ > Edit Modeの状態で、
右下赤〇のボタンを選択します。これはFace Selecetで面単位で選択できるようになります。（ほかには隣のボタンで頂点単位のVertex、辺単位のEdgeが選択できます)
この状態でCube左側をShift+右クリックですべて選択 > Deleteキー > Faces で選択した面を削除します。
※選択はBで四角で囲んでまとめて選択などもできます、チートシートを参照してください。選択を間違えたらAキーなどで解除する。
![deleted.png](https://qiita-image-store.s3.amazonaws.com/0/375610/094f9997-ec66-906f-670c-da64202b49de.png)
削除後。

# Mirror Modifierで右半分の変更をを左側にも反映させるように
![selected.png](https://qiita-image-store.s3.amazonaws.com/0/375610/32578844-d9b0-c5eb-1b9f-f5c64bfa4417.png)
OutlinerウィンドウでCuteオブジェクト選択 > Propertiesウィンドウ > スパナアイコンのModifierタブ選択し

![modifier.png](https://qiita-image-store.s3.amazonaws.com/0/375610/e38dc443-f281-8d0f-8e30-80ce3e9e3fc2.png)
Add Modifierプルダウンメニュー > Mirrorを選択
![mirror.png](https://qiita-image-store.s3.amazonaws.com/0/375610/5b5bd9fc-88fc-2a5a-727f-4fcffe0e0893.png)
3D ViewウィンドウにCubeの左半分が表示された。（見えているだけで存在しないので操作はできない)
OutlinerウィンドウのCubeオブジェクト> Modifiers > Mirrorが追加された。
Propertiesウィンドウ > Modifierタブ > MirrorのAxisはデフォルトのX選択状態なのでCubeオブジェクトの編集がX軸でミラーされる。
※applyを押すとミラーが適用されMirror modifierもなくなり普通のオブジェクトになります。

# 地面にめり込まないようにする
原点の位置(x,y平面)が地面になるので位置を調整します。  


3D viewウィンドウ > ObjectモードでCubeオブジェクトを選択すると今これは原点にある状態です。これはこのままでCubeオブジェクト内のMeshの位置だけを修正していきます。
![g_zero.png](https://qiita-image-store.s3.amazonaws.com/0/375610/fbc4d353-5a4f-08b5-ac6f-4c8e9640bc75.png)


![g.png](https://qiita-image-store.s3.amazonaws.com/0/375610/a3d9cb4c-64d0-d541-324e-5bd55b65247b.png)
3D viewウィンドウ > Edit ModeでAキーなどでCubeを全選択、Gキーで移動します。
1,5キーなどで正面からの視点にすると調整しやすいです。
![gz.png](https://qiita-image-store.s3.amazonaws.com/0/375610/5331907f-6fd7-5516-d1c8-f28bb424caa3.png)
Gキーに続けてZキーを押すと移動をZ軸方向に固定できます。
マウスで移動してクリックかenterで移動を確定します。（マウスの代わりに続けて数値入力でも移動できます)
※Gキーの代わりに、propertiesシェルフ > Transform > Demdian > Z でも移動できます。

# 形を作る
変形はE,R,G,Sキーで形を作っていきます。
モードはEdit Modeだけ使用します。
選択は(Shift+)右クリック選択,Aで全選択/解除,Bで四角で選択あたりを利用します。
![editmode.png](https://qiita-image-store.s3.amazonaws.com/0/375610/200cf77b-d3ec-cf56-4b5c-8e1fcf1691b9.png)
中央赤〇で選択方法を点、線、面で切り替えます。
右赤〇のLimit selection to visibleをオフにしておくとBで選択するときに見えていない背面も一緒に選択できます。
また、メッシュは裏表があります。
サイズは人から極端に離れたサイズにするとVRChatにアップするときにエラーではじかれます。

以下箱を作ってみます。
![ez.png](https://qiita-image-store.s3.amazonaws.com/0/375610/dfd17895-e865-4001-934c-6d8262b1788d.png)
上面を選択 > E,Z で面を上に押し出します。
![s_shiftz_0.9.png](https://qiita-image-store.s3.amazonaws.com/0/375610/23196d7e-bab3-208b-2316-91b9790a8ef0.png)
淵をつくっていきます。S,Shift+Z,0.9,Enterでx,y軸方向に0.9倍します。
(Sが拡大縮小、Shift+Zでz軸以外の変更,0.9で倍率を数値で指定,Enterで確定)
![snap_g.png](https://qiita-image-store.s3.amazonaws.com/0/375610/f01b4d67-3136-78d9-b516-fae176dfa555.png)
真ん中の辺を選択,右赤丸のSnap during transformをONに,G,Xで中央に辺を移動させます
![wire.png](https://qiita-image-store.s3.amazonaws.com/0/375610/c3126e49-829c-dfe4-9fed-2b5ab88f36e8.png)
![wire2.png](https://qiita-image-store.s3.amazonaws.com/0/375610/cb1429bc-18b0-13a9-4adf-1c618897139a.png)
上面を選択後,Snap ONのまま,1(,5)で正面の視点に,下赤丸でWireframeを選択,G,Zで面を図の位置にする。
![ez2.png](https://qiita-image-store.s3.amazonaws.com/0/375610/47396648-fb79-124e-bb18-d4e50a7e30a8.png)
E,Zで下に押し出して底を作ります。

![uraomote.png](https://qiita-image-store.s3.amazonaws.com/0/375610/67f7922a-5ccc-5ce3-a8c6-6295262ff3b8.png)
ポリゴンには裏表があります
試しに箱の内側の面を消して、Propertyシェルフ > Shading > Backface Cullingにチェックを入れてください。裏面はレンダリングされなくなります。アバターは裏面が外から見えないように作ってください。

箱中央の邪魔な面も削除しておきます。
以上で箱の形ができました。

# blendファイルとして途中経過を保存
![file.png](https://qiita-image-store.s3.amazonaws.com/0/375610/eed0c43a-351f-57d0-43f5-417ec85a8941.png)
Infoウィンドウ > File > Save As 
![save.png](https://qiita-image-store.s3.amazonaws.com/0/375610/1f8350c4-8a31-e9e8-716a-e0beb3873b38.png)
\> ファイル名を入力し > Save As Blender file
でblendファイルを保存します。
ここから再開する場合はこのファイルをWクリック等で開いてください。


# Mirrorを適用する
![mirror.png](https://qiita-image-store.s3.amazonaws.com/0/375610/ff704315-c6a9-0bea-4f37-63d6fd495d3c.png)
Object Modeで、Cubeオブジェクトを選択 > Propertiesウィンドウ > Modifiers > MirrorのApplyを押下して適用。
![mirror2.png](https://qiita-image-store.s3.amazonaws.com/0/375610/dfcef796-8147-578f-f80a-e4074f9f55de.png)
適用された状態。

# fbxでエクスポート
![export.png](https://qiita-image-store.s3.amazonaws.com/0/375610/54e952ca-94c9-3a91-48c0-ea480b3f555e.png)
Infoウィンドウ > File > Export > FBX
![export.png](https://qiita-image-store.s3.amazonaws.com/0/375610/2abdd093-6e9b-7070-5294-f193aff6af99.png)
画像の設定にします。赤線がblenderとunityの座標の扱いが違うので変換する設定です。このあたりがおかしいとVRChatでアバターがひっくり返った状態になったりします。
Export FBX押下でfbxファイルをエクスポートしてください。

# UnityにVRChat SDKをインポートする
https://vrchat.net/home/download
VRChat公式にログインしVRChat SDKをダウンロードしてください。
「VRCSDK-2019.03.07.12.19_Public.unitypackage」のようなファイル名です。※日時は更新されると変わりますので気にしないでください。
次にUnity Hubを開き > 新規 で新しくunityプロジェクトを作成してください。(templateは3Dでよいです)
先ほどのVRChat SDKをWクリックでインポートします。
※メニューの Assets > Import Package > Custom Package でもインポートできます。
![vrcsdk.png](https://qiita-image-store.s3.amazonaws.com/0/375610/7d2cf16c-b32d-57ea-efb5-9ab244229a3b.png)
インポートできるとAssetsにVRCSDKフォルダが、メニューにVRChat SDKが増えます。
![login.png](https://qiita-image-store.s3.amazonaws.com/0/375610/a14d4d52-59fd-22c2-7552-c6c677944168.png)
メニュー > VRChat SDK > Setting から自分のアカウントで Sign Inしておいてください。

# Unityにfbxをインポートする
![import.png](https://qiita-image-store.s3.amazonaws.com/0/375610/9f8f3e23-fce9-19a3-986f-b92849969801.png)
blenderでエクスポートしておいたfbxファイルをUnityのAssetsにD&D(ドラッグアンドドロップ)してインポートします。
この時点で画像のように箱が見えてなければblenderのエクスポートが失敗しているので設定を見直してください。エクスポート時にCubeが選択状態になっていなかったりすると思います。
アバターは人型のボーンは入れていなくて物なので
インポートしたものを選択し、Inspector > Rig タブを選択し、Animation TypeをGenericにします。

# アバターとして設定
![avatar.png](https://qiita-image-store.s3.amazonaws.com/0/375610/27cee996-1159-e519-dbe5-7ba843e2ba92.png)
AssetsからHierarchyにD&Dして配置し、配置したオブジェクトを選択しAdd ComponentボタンからVRC_AvatarDescriptorを検索し追加します。

![zahyo.png](https://qiita-image-store.s3.amazonaws.com/0/375610/2d4b8d41-bf0e-d326-9313-3bff49e79345.png)

-  緑〇で囲った白い線がアバターの地面位置
 - この線からアバターが埋まっていたりするとVRChat内でも埋まります。ずれている場合はblenderでCubeオブジェクトやメッシュの座標を修正してください。
- 白い線の方向がアバターから見て正面
- 青〇で囲った座標が二つとも一致していること
  - これが違っているとVRChat上でアバターがひっくり返った状態になります。違う場合はBlenderでエクスポートするときの座標回りの設定を確認して修正してください。
- View Positionがアバターの視点位置
  - VRC_AvatarDescriptorコンポーネントの View Positionがアバターの視点位置です。Scene上では赤丸で囲った灰色の玉の位置が対応しています。視界が開けるように適当な位置にしておきます。
X,Y,Zの数値の単位はメートルです。(Unityはメートル単位)
この画像ではアバターが大きかったのでScaleで小さくしています。

# VRChatにPublish(アップロード)
![build.png](https://qiita-image-store.s3.amazonaws.com/0/375610/2cf8512a-13b9-fdd0-b92b-306784eb7faf.png)
メニュー > VRChat SDK > Show Build Control Panelを選択してください。
![publish.png](https://qiita-image-store.s3.amazonaws.com/0/375610/c624db91-a7fc-f62f-dff1-d5f21239749b.png)
アバターに問題がなければBuild & Publishが押せるので押します。
問題があるときは下にエラー表示がでますので修正が必要です。
アバターのサイズが大きすぎ・小さすぎであったり、VRC_AvatarDescriptorが複数割り当てられどのアバターをアップすればよいかわからない状態になっていたりします。
Build & Publishを押したあと2枚ほどあまり意味のないウィンドウが表示されますが閉じてください。
![upload.png](https://qiita-image-store.s3.amazonaws.com/0/375610/0bb4814f-7897-a37b-bacd-f93d0e2894c3.png)
自動でGameタブが開かれこのようなアップロード画面になります。
Avatar Nameを入力し、注意書きを読んでチェックを入れUploadを押せばアップロード開始します。
途中一時的な問題でアップロードが中断し上の再生表示が一時停止になることがありますが、その時は一時停止を解除して再生してください。
![OK.png](https://qiita-image-store.s3.amazonaws.com/0/375610/4d1e54eb-72ad-5d13-000b-e80a0bae147c.png)
この表示が出たらアップロード成功です。

# VRChatで確認
![2019-03-26 (2).png](https://qiita-image-store.s3.amazonaws.com/0/375610/b5f7573b-34c5-2b20-f594-a615e6b72f02.png)
完了です。
目の前が見えないときはView Pointで視点位置を調整してください。