ボックスコライダーをメッシュコライダーみたいに使うために、Blenderで頑張る！

# 世の中には、メッシュコライダーというのがあるらしい！
Vキャスで使えるコライダーは、Box（直方体）、Sphere（球）、Capsule（カプセル状）の3種類のみです。
ただし、どうやら世の中には、メッシュコライダーというメッシュに合わせてコライダーをつけてくれるものもあるらしいです。
ただ、Vキャスでは、このコライダーは使えないどころか、このコライダーを使っていると、VCIとしてエクスポートする際にエラーが出てしまいます。
ぐぬぬ、Unity君で一つ一つコライダーをつけていくのは辛いです。
下のようなただの球体であれば、Sphereコライダーをつけるだけですが、
![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/5363ba03-ff92-660b-1e71-fc6fc97a4e32.png)
下のような、ここまで複雑な形状となると、大変です！
Unity上で、コライダーを一つ一つつけて、位置調整するととんでもない作業になります！
Unityで、メッシュコライダーを使えないというのは、複雑な形状のVCIを作る上で致命的になります！
（アセットで自動でコライダーをつけてくれるモノがあるらしいですが、自分は使ったことないのでよくわかりません！）
![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/981dd488-ac46-7d1d-c992-36599be9b66d.png)
# Unity君で大変なことはblender筋で解決する！╭( ･ㅂ･)و ぐッ！！
ボールを投げる時、腕だけで投げるより、体全体で体重を移動させながら投げたほうが、より遠くに楽に飛ばせるように、VCIを作るときもUnity力だけでなく、blender筋も使って楽にVCIを作成していきましょう！

上記のモデルは、Unityで一つ一つコライダーをつけて位置調整を行ったわけではなく、すべてのモデルオブジェクトに対して、Boxコライダーを追加するボタン操作のみで、このコライダーをつけてます。
特別なアセットなどは使用してません。
では、どうやっているかというと、blenderで、コライダー用のモデルを別途作成しています。
ただ、作成といっても、元のモデルをベースに、いらないメッシュの削除や角度調整、メッシュの分割などを行っているだけで、blenderの「回転操作」（Rキー）、「オブジェクトの分離操作」（Pキー）、「メッシュの分割操作」（Ctrl + Rキー）、「オブジェクトやメッシュの削除」（Deleteキー）の、最低4つのキー操作を覚えればできる簡単な作業です！
さらに、単純作業で、それほど時間もかかりません！
例えば、下記のモデル（[みぃさん](https://twitter.com/vT982VzLDYbYd4j)作）のモデルにコライダーを入れた際には、約6時間でできましたので、誰でも手軽にできる作業かと思います！
![スクリーンショット (75).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/681f6970-09c7-97de-6ace-e6b33a910ba5.png)
# モデルの回転情報を利用する！（これから行う操作の説明）
blender上のモデルの回転情報は、Unityに取り込んだ際にも引き継がれます。
また、UnityでBoxコライダーをつける際には、モデルのローカル座標のポリゴンの最外端の点の座標を反映して適用されるようです。
例えば、単純なキューブモデルをblenderからインポートして、そのままBoxコライダーをつけると、下図のようになります。
モデルとコライダーが、ピッタリ合ってます。
![スクリーンショット (78).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/3a5fec12-c11c-9236-f866-6e629b88fb11.png)
それに対して、blender上で、編集モードでZ軸に対して45°回転して、unityにインポートして、Boxコライダーをつけると、下図のようになります。
これは、モデル自体は回転していないため、Z軸面の、XY座標の最外端の点となる、対角線の点の座標を参照して、コライダーがつけられています。
![スクリーンショット (77).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/2e6a0bf9-2bfe-916a-2dcd-1a3a5143dd07.png)
さらに、モデルの回転を元に戻し、今度はオブジェクトモードでZ軸に対して、45°回転して、同じくunityにインポートして、Boxコライダーをつけると、下図のようになります。
今度は、モデル自体が回転しているため、モデルとコライダーがピッタリ合い、回転した状態となります。
モデル自体が回転しているので、ロカール座標方向での最外端は2つ上の図と一緒のコライダー状態となります。
![スクリーンショット (79).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/f7c0adf6-f5f2-3904-f106-b22c607fd90b.png)
これを利用して、Boxコライダーをメッシュコライダーのように、メッシュに沿ったコライダーとして、つけていきます。
ここからは、大まかに以下の工程に沿って、作業を進めていきます。
（作業を忘れたオブジェクトなどがあったら、工程を戻っても問題はありませんが、説明上、以下の工程の順としてます。）
1. コライダー毎にモデルを分離（Pキー）
2. コライダーを入れない部分のオブジェクトやメッシュを削除（Deleteキー）
3. 編集モードの回転情報をオブジェクトモードに反映してく（Rキー）
3. 三角などを表現するための、メッシュの分離（Ctrl + Rキー）
# コライダー毎にモデルを分離（Pキー）
通常、モデルはコライダーを意識した、オブジェクト構成にはなっていないので、これをBoxコライダー毎に分離していきます。
例えば、Miさんのモデルも、建物毎などに分離されているため、これをBoxコライダーを適用するオブジェクト毎に分離します。
![スクリーンショット (80).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/0748783a-c531-6ad7-27ca-78e0bdafb265.png)
まず、「オブジェクトモード」ですべてのオブジェクトを選択し、
![スクリーンショット (82).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/d041d293-2cc5-5ed6-3b71-e229b7c4c961.png)
「編集モード」に入って、Pキーを押します。
すると、以下のような選択が出てくるので、「構造的に分離したパーツで」を押します。
![スクリーンショット (83).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/249b54c0-7a38-1fff-7b60-5460bdc4338c.png)
これで大まかに、オブジェクトが分離できました。
![スクリーンショット (85).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/7c46f811-b47a-9069-e49c-9b9abaeaf8ae.png)
このままでは、「ベランダ（？）部分に柵のコライダーがあると中に入れない」、「屋根オブジェクトを分けないと左右に分ける必要がある」、「窓枠にコライダーは不要」などといったことあるので、適宜、さらに分割作業（Pキー）を行ったり、削除作業（Deleteキー）を行っていきます。
赤字の削除作業に関しては、次の項目で説明し、ここでは、さきほどの「構造的に分離したパーツで」で分離できなかった、屋根部分の分離方法を続いて説明します。
![スクリーンショット (85)-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/f8f44022-87a7-f24e-db5b-afd8c4ec9be1.png)
「オブジェクトモード」で屋根を選択し、「編集モード」に移行したら、屋根の片方部分の屋根の面を選択します。
ここで、再びPキーを押し、今度は「選択」を選択すると、屋根の左右で分離することができます。
![スクリーンショット (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/6ef1d838-be9a-59bc-2e65-70847c76b4e4.png)
そうすると、以下のように左右に分離することができます。
![スクリーンショット (87).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/3dde30be-ef23-9f66-8392-d6da6451e42c.png)
# コライダーを入れない部分のオブジェクトやメッシュを削除（Deleteキー）
コライダーを入れなくていい部分は、まず、オブジェクトモードで、オブジェクトで削除していきます。
例えば、今回のモデルでは、これくらい（削除前：1つ下、削除後：2つ下）削除してしまっても大丈夫です！
ここで、必要ないコライダー用のオブジェクトを削除してしまったほうが、次以降の工程が楽になります。
![スクリーンショット (89).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/b880e6c8-9509-8b21-88d5-de61742ec7ce.png)
![スクリーンショット (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/6e95da10-cacc-c491-ae6c-832516e535cb.png)
# 編集モードの回転情報をオブジェクトモードに反映してく（Rキー）
まずは、こちらの選択された壁を例に説明していきます。
回転操作は、トランスフォーム座標系を「グローバル」、トランスフォームピボットポイントを「3Dカーソル」を選択して行います。
![スクリーンショット (90).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/d16d2bc7-9af7-b023-6a2a-9e5fd91fb005.png)
操作が分かりやすいように視点をZ軸側に移動させ、「編集モード」にして、Rキーを押して回転操作にし、Zキーを押して回転方向を固定します。
カーソルを移動させて、Y軸に対してなるべく平行になる角度を探します。
平行になったかな、と思ったら、左上の回転させた数値を確認し、そのまるめた数値（今回の場合「2.3」）を入力し、Enterキーを押して回転を確定させます。
![スクリーンショット (93)-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/4dd0bcb9-3638-94df-4601-b43d802301d0.png)
続いて、「オブジェクトモード」にして、先ほどと同じように、Rキーを押して回転操作にし、Zキーを押して回転方向を固定します。
今度は、先ほど入力した数値にマイナスをつけた「-2.3」を入力し、Enterキーを押して回転を確定させます。
![スクリーンショット (94).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/04ba283d-e03b-ae08-51cd-dfd1dc082f2c.png)
これで、モデルの傾きをオブジェクトの傾きとすることができました。
![スクリーンショット (95)-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/b73fe2ff-8972-aac4-8575-c2cdcec4a370.png)
もう一つ例として、こちらの地面のコライダー用オブジェクトを回転させてみます。
この状態では、まだメッシュの一部ですので、オブジェクトとして分離させるのに、Pキーを使って分離させます。
![スクリーンショット (96).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/3fa791c2-2222-7cdd-c2f7-f937e17700ce.png)
これで、先ほどのメッシュを1つのオブジェクトとして分離できました。
このメッシュは、先ほどの壁と違い、長方形ではありませんし、歪んでいます。
![スクリーンショット (104).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/e2b381f5-e729-4483-3928-0a573e439c38.png)
まず、「編集モード」にして、Rキーで回転操作にして、Zキーを押して回転方向を固定して、-16°回転させると、次のようになります。
見てわかるように、座標軸に対して平行になるようにどうしてもできません。
メッシュを分割する方法（次の工程で説明）もありますが、ここでは、おおよそ合わせてヨシとします。
![スクリーンショット (100).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/52b1b0d4-82df-36bc-2560-928ec5e09361.png)
次に、Y軸方向に12°回転させると下のようになります。
![スクリーンショット (101).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/9132fa36-bd9c-df5f-7f1d-593bfb670b7e.png)
最後に、X軸方向に-10°回転させ、次のようになります。
このようにして、四角形全体をXYZ軸に対して、なるべく平行になるように調整をします。
![スクリーンショット (102).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/20e9f0d0-dc79-06c9-d431-2e38a02f70e3.png)
これを、「オブジェクトモード」に戻して、「編集モード」で回転させたのと逆に、X：10°、Y：-12°、Z：16°回転させると、元の位置に戻ります。
トランスフォームの回転座標でも、初期状態から、回転されたことが確認できます。
このようにして、すべてのオブジェクトに対して、モデルの傾きをオブジェクトの傾きに変換していきます。
![スクリーンショット (103)-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/6fa30ed7-85db-107d-5a75-5fb9ece72ee9.png)
# 三角などを表現するための、メッシュの分離（Ctrl + Rキー）
作業を進めて、Unity君に取り込むと、どうしてもBoxコライダーで表現できない部分が出てきます。
例えば、この屋根の部分なんかがそうです！
これを上記の作業をした後、Unity君に取り込んで、Boxコライダーを当てると、
![スクリーンショット (105).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/afd2e326-106f-a75f-697d-d0e9ee4a8cf0.png)
このようになります。
Boxコライダーが屋根の隅から飛び出てしまっています！
これでは、屋根に乗りたがるVR民を満足させることができません！
そこで、この屋根のメッシュを分割して、三角形を表現することにします！
![スクリーンショット (107).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/3a5b7174-22a5-2912-cdbf-44ddd3b26ba7.png)
まず、blenderに戻り、屋根の面のオブジェクトを選択して、「編集モード」に入り、「Ctrl + R」（ループカットと呼ばれる操作）を行います。
押した後、続けて「10」と入力し、屋根の斜め部分の辺の近くにマウスを持っていくと、下図のように黄色の線が10本現れます。
「Enterキー」を押して、マウスの右クリックを押すと、均等に三角形がスライスされます。
![スクリーンショット (108).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/4dca952f-c4de-a7b0-e568-3814c3f344a3.png)
これを、再び、「Pキー」で面1つずつを、オブジェクトとして分離させ、
![スクリーンショット (109).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/6b3bb097-a1ba-8f43-1bb4-fb28227642d3.png)
これを4面に対して、行えば、次にようになります。
![スクリーンショット (110).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/e98531e9-6446-05a1-5528-c8327301f868.png)
これを再び、Unityに持ってきて、Boxコライダーを当てると、だいぶ滑らかな角になりました。
このようにすることで、三角形もBoxコライダーで表現することができました！
![スクリーンショット (111).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985893/82b2b724-6411-21a2-00e9-8107952e16ff.png)
# おわりに
上記の操作をblenderで行うことで、Unityでは、Boxコライダーを当てるだけで、コライダー設定が完了できます！
コライダーを当てた後は、「Mesh Renderer」のコンポーネントを削除すれば、メッシュが消えてコライダーのみが残り、コライダーのみのオブジェクトが出来上がります！

他にも「ナイフ機能」（Kキー）や「オブジェクトの結合」（Ctrl + Jキー）を使うと、コライダー用のモデル作成がさらに捗りますが、ここでは、最低限必要な操作として、上記の4つの操作をご紹介しました！
上記の説明ではある程度、端折った部分もありますので、不明な点などがありましたら、自分にお聞きください！
# 追記
今回、説明に使ったアイテムとルームを公開しました。
よければ、どんな感じのコライダーになっているか、見に行ってみてください。
ルーム

https://room.virtualcast.jp/rooms/TiFHaC9K4DlXFJTO

こちらはルームのPV

https://twitter.com/i/status/1607017831799074817