(エンジニア向け)めちゃくちゃちょろいモック用３Dモデルの雑な作り方。

#簡単な３Dモデルの知識

1からちゃんとモデリングできるようになるのは敷居がめちゃくちゃ高い。
モデリングって工程数めちゃくちゃ多いですし。

いちいちモデラーとデザイナーに相談しなくてもテストできる素材の作成目的で
[Blender](https://blender.jp)を使うようになったので
いつもやってる雑なモックアップ用モデリングの流れをメモします。
「モデリング途中まで勉強したけど敷居高すぎて辞めた。」
みたいなエンジニアの救済になればいいなと。

モデラーからは怒られそうな雑さですが副産物として
setPassCall(いわゆるドローコール)だけはめちゃくちゃ少なく作れます。
大量にオブジェクトを表示させるゲームとかにはもってこいです。
（作り方にもよりますがモバイルでも200体とかは余裕でした）
しかし近くでは見るに堪えないモデリングです。（俯瞰とか小さく使うならギリ許される感じ）

本来の制作の流れとは違ったりするので３dモデルに興味が出てきたら
ちゃんと参考書読んでくださいね。

知識ゼロでもだいたい１時間くらいで終わると思います。

#1.雑なテクスチャ
photoShopなどで適当に配色した小さい画像を用意します。
![texture.png](https://qiita-image-store.s3.amazonaws.com/0/30562/668eae19-7283-9fb1-bf2a-b097295b69cb.png)
これはpixel合わせもやっていないものです。
配色考えるのもダルいと言う方は「配色　デザイン」とかで検索してみてください。
配色デザインのサンプルサイトがいっぱい出てくるので
そこから選ぶと脳みそ使わなくていいので楽です。

#2.雑にやる準備
##日本語化
blenderを開くと最初この白箱が一個置かれてる画面になります。
![qiita0A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/96a3843c-59f5-836c-8748-1ab946b28e47.gif)
iconを選択して**UserPreference**に変更してください。

この画面になったら
![qiita0B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/3ccc0eb7-2ca7-9b0b-01ac-96214b385315.gif)
1.**System**タブを選択して
2.**InternationalFonts**を日本語にして
3.**Interface**ボタンを押します。
4.**ユーザー設定の保存**を押して完了です。

画面が日本語になったら成功です。

##ラップトップ用準備
![qiita1.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/c6a15755-35aa-71c1-57db-92241cc5ba75.gif)

1.**入力**タブを選択して
2.**テンキーを模倣**にチェック
3.**ユーザー設定の保存**を押して完了です。

何したのかっていうとこれ入れとかないと
数字キーがショートカットの時に使えないんです。
Blenderには謎仕様がちょいちょいあるのです。
終わったら保存してさっきのテクスチャと同じフォルダに置いてください

#3.雑なモデリング
![qiita10.jpg](https://qiita-image-store.s3.amazonaws.com/0/30562/d8aedb55-abbb-0450-e1c3-f5aa5fb6f33a.jpeg)

一番雑なやり方で人型モデルを作ります。
##準備
新規のunityプロジェクトを作ってAssetフォルダに先ほどのテクスチャとBlenderファイルを入れます。
![qiita2.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/58677fd7-f9bf-2689-4953-0bf5f15b29d9.gif)

blenderファイルを開いて
1.**3Dビュー**に変更
2.**数字キーの５**を押して平行投影に変更
上の表示が平行投影になっていればOKです。
もう一度５を押すと元に戻ります。
1.3.7を順番に押してみてください。
「１」で正面
「３」で真横
「７」で真上
だけ覚えておけばOKです。

##ミラーモディファイアー
Blenderで一番違和感があったのが右クリックめちゃくちゃ使うってトコなんですが
これはもう慣れでしかないので慣れてください。
右クリックで白箱を選択して**tab**を押してください。
編集モードに入ります。
編集モードでしかモデルの形状をいじることはできません。
![qiita3A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/2690ee78-de57-6869-089a-69bd5109d31d.gif)
**tab**で切り替えできます
編集モードに入ったら
![qiita3B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/47cfb553-5c76-f278-0782-482a288c82fe.gif)
1.**Ctrl+R**で縦に輪切りにします。紫の表示が出たら２回クリックでOK
2.**1**を押して正面になったら**Z**を押してワイヤー表示にします。(Zは表示切り替え。option+Zでシェーダー表示)
3.**A**を押して選択を外して（Aは全選択と選択外し）
4.**B**のグループ選択で左側の頂点を選択して
5.**X**で消します。(Xは消去)
半分になったらOKです。
![qiita4.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/c9507521-9404-2735-ff7c-68caad86a3b5.gif)
1.**tab**で編集モードからオブジェクトモードに戻します。
2.右の方にある**モディファイアーアイコン**をクリックします
3.**追加ボタン**を押して一覧にある**ミラー**を選択します。
4.**クリッピング**にチェックを入れてください
半分になった白箱が補完されたら成功です。
これで右だけ作れば自動的に左も補完されます
##ゴミを消しておく
![qiita5.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/a6c1c2df-af3a-856a-f498-a5491de9c0d3.gif)
1.作業しにくいのでカメラとライトのオブジェクトを選択して**X**で消去します。
2.**Shit+C**で軸をセンターに合わせられるようになります。（パニックになったら一旦Shit+Cで落ち着きましょう。）
##面を追加
![qiita6.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/16880611-8616-4272-0478-8ebc924db055.gif)
1.![qiita6.jpg](https://qiita-image-store.s3.amazonaws.com/0/30562/77667ca0-31e6-36b4-ef33-1918a0423ff3.jpeg)左から頂点、辺、面選択ツールの**面**を選択して
2.**E**で面を増やして**S**で縮小します。
3.さらに**E**で面を増やして伸ばします。
これで胴体を作ります。
同じ要領で手足も作ります。
足を追加するときはミラーモディファイアのクリッピングのチェックを外してからやってください。
チェック外さないと足が左右くっついてしまうので。
##座標合わせ
![qiita8.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/ba5a355c-d026-4bb3-15d2-905c1b22278b.gif)
1.人型ができたら編集モードにして**A**で全選択します
2.そのまま矢印をドラッグして足元に**黄色い点を**合わせます

#4.雑なUV展開
![qiita9A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/3cb56a91-d2c6-71c2-7423-baef300ca812.gif)
1.右上にあるシマシマの部分をドラッグしてウインドウを増やします。
2.**UV/画像エディター**に変更します。
![qiita9B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/e0bed394-0065-8aa9-c23c-488df3943bcb.gif)
3.ツールバーの開くをクリックして一番最初に作ったテクスチャを選択します
![qiita9C.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/f47a371c-19a4-438e-01f7-df8d5799cea2.gif)
4.カーソルを左に移して編集モードにして全選択した状態で**U**を押します。
（カーソルがウィンドウに乗ってないと反応しないのはBlenderの謎仕様です）
5.UVマッピングメニューが出るので**展開**を選択します。
6.UVマップがテクスチャに書き出されます。
![qiita9D.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/3bb2e1a4-e23b-5e08-0ad5-50f88a74dc4f.gif)
7.カーソルを右に移して全選択の状態にしてから**S > Z > 0**の順番に押します。
8.UVが一点に集約されますので今度は**G**を押してお好きな色においてください
(option + Zのシェーダー表示で色を確認できます。)
![qiita9E.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/c26a977b-16d4-ad99-8c27-7626c3724aab.gif)
9.もうUV/画像エディターに用はないのでシマシマの部分をドラッグしてウインドウを潰します。

#5.雑なリギング
![qiita10A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/639c9f9d-c818-cf27-4bd5-c8e656dab9bc.gif)
1.**Shift+A**で追加メニューを出して**アーマチュア > 単一ボーン**を選択します
2.アーマチュアが選択された状態で人の形をしたiconを選択します
3.表示カテゴリの**レントゲン**にチェックを入れます。
4.表示タブのスティックを押しといた方がやりやすいけど押さなくてもいいです。ボーンの形が変わるだけなので。
![qiita10B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/079c99c8-9e49-7bfe-25f4-9bbdf80427ba.gif)
5.アーマチュアを選択して**tab**を押すとボーンの選択モードになります。
6.端っこの球を選択して**E**でボーンを追加できます。胴体頭はこれと同じ要領で追加してください
![qiita10C.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/d3013c16-0ca6-43e1-db05-0ea5dee654bd.gif)
7.左メニューのオプションにあるX軸ミラーにチェックを入れます
8.**Shift+E**で左右両方に同じようにボーンを追加できます。

#6.雑なウェイト付け
![qiita11.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/768f4068-3644-8b1a-1f1c-25bba0cf30a4.gif)
1.ボーン配置が終わったらオブジェクトモードに戻して**Shift**を押しながらモデル > アーマチュアの順番に選択します。
2.**Ctrl + P**でペアレント対象メニューを出して**自動のウェイトで**を選択します。
![qiita12.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/3e5b3a85-2435-9e76-fe87-f75591b96516.gif)
3.アーマチュアを選択した状態で**Ctrl + tab**でポーズモードに移行します。
4.モデルを選択して同じく**Ctrl + tab**でウェイトペイントモードになります。
5.試しに曲げてみて(ボーン選択して**R**で回転できます)くっついてきていればOKです。
（R回転、S拡大縮小、Gで移動）
（option+Rで回転消去、option+Sで拡大縮小消去、option+Gで移動消去）

#7.雑なアニメーション
走るアニメーションを付けます。
![qiita13A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/ddb53c3e-4670-5c22-1a74-901462a4ae9a.gif)
1.下にあるタイムラインウインドウの右のシマシマをドラッグしてiconをクリックしドープシートを選択します。
![qiita13B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/7bb9ca12-ffc9-3b8c-b5b7-e9e7e76b93b9.gif)
2.ツールバーのドープシートになっている部分をアクションに変更
3.すかさず**Fボタン**を押します。(押さないとやばいです。アニメーション付けても消えます。Blenderの謎仕様です)
4.任意の名前にしてください。
（Fボタン横の+ボタンでアニメーションを増やせます）
![qiita14.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/5ba1d40d-d9c2-f603-fa88-3f0a7bc55cbf.gif)
5.タイムラインウインドウの**recボタン**を押します。(ポーズモードのボーンを動かしたら自動的にキーフレームを打ってくれます)
![qiita15A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/5bb1f36c-279e-730c-be14-b1030bf4c73d.gif)
6.タイムラインの終了が250は長すぎるので30に変更します
![qiita15B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/b1b1268e-7975-7a96-222e-281daf45892e.gif)
7.ボーンを選択して**Ctrl + tab**でポーズモード（ボーンのアウトラインが青くなってればOK）にします。
8.ボーンを個別に選択して**R**を押すと回転がいじれるようになるのでいい感じのポーズになるように調整します。
9.逆サイドのボーンに同じポーズをさせたい場合は**Command + C > Command + Shift + V**で逆側のボーンにコピペできます。
![qiita15C.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/c06af05c-e665-74ac-10ae-3e6dde791157.gif)
10.キーフレームを打つためのタイムラインが狭すぎるので**Ctrl + 横スクロール**で間隔を広げます。
![qiita15D.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/23780e51-d5cf-38a5-f0e4-95460a56c1e9.gif)
11.ポーズを**A**で全選択して**Command + C**でコピーします。
12.キーフレームを15まで進めて(緑のラインが15にきてればOK)**Command + Shift + V**で反転コピーします。
13.キーフレームを30まで進めて**Command + V**で普通にコピーします。
![qiita16A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/8324dac0-2f50-2642-049f-5b9f935232ad.gif)
14.ハンドルをドラッグして高さを調整します。
15.同じ高さになるように最初に設定したボーンをコピペします。
![qiita16B.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/022faeba-50ec-b7df-00df-b165a2327ba6.gif)
16.中間部分の高さを補正します。

#8.雑なunityへのインポート
ここまできたらあとは動かすだけです。
![qiita17.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/3434b0d9-36bc-de00-3240-45eaf18ad817.gif)
1.ProjectパネルのBlenderFileを選択しインスペクタでActionのアニメーションをLoopにします。
![qiita18A.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/0891be9b-f1f9-89ab-2318-86a986bbe86e.gif)
2.AnimatorControllerを作ります
![qiita18A0.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/419883f8-66f1-b38b-9587-936bfc2b07fc.gif)
3.BlenderファイルをHierarchyにドラッグしAnimatorControllerを設定します。
 ![qiita18B1.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/34abfc48-3b47-ac9c-a438-6b53b6d42d39.gif)
4.AnimatorControllerを開きStateを作ります。
![qiita18B2.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/154f2c9c-5bae-947e-34bc-649a3ba16e42.gif)
5.StateにAnimationを設定します。
![qiita18C.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/18337fb5-be1b-6cf6-ebcf-19553d192980.gif)
6.実行

こんな感じです。

#まとめ

本来必要なめちゃくちゃめんどくさい作業とか説明が難しいところ全部カットしてみました。
(3面図からのモデリング、シーム付け、UV展開、ウェイト塗り、IK、テクスチャ描きなど)
上に書いたのは慣れたらには10分くらいで終わる作業になります。
でも文章化したらでもそこそこ物量ある風に見えますね。

３dの本買ったけど積ん読になってる人や
試したけど途中で挫折した人はこれ一回試してみてください。

細かい部分は動かして、興味が湧いてから補完すればいいと思います。
覚えたらサクサク素材作れて思いつきを形にするのが楽になります。
エンジニアが考えた面白いを人に伝達することでロストしちゃう
そんな部分も形にするまで一人でやれるようになると
残したままでイケるのもいいところです。

![qiitaFixed.gif](https://qiita-image-store.s3.amazonaws.com/0/30562/461093a4-ca9c-ca14-33df-4c3c104cb1c6.gif)
こんだけ入れて最適化全くしなくてもSetPass callsは35−37くらい
でコマ落ちもないです。マップも同一Materialならあんま変わらないです。
余計なこと考えないでゲームの実装に集中できます。

後半になるにつれて文章も雑になっていますが許してください。
眠かったんです。

お疲れ様でした。