オリジナルアバターを簡単に作りたい人向けチュートリアル リギング編 PLYバージョン

皆さんオリジナルのキャラクターは作成できたでしょうか。

それでは今回はBlenderを使ってモデルに骨を埋め込みましょう。
MagicaVoxelでPLY形式で出力した場合のBlenderでの作業工程です。

まずはBlenderの公式からBlenderをダウンロードしてください。

インストールが済んだら早速起動しましょう。

起動したらこんな画面になると思います。
いや、ちょっと違いますね。この画面はもう既に日本語化しているので、おそらく初めてBlenderをインストールした状態だと全部英語でしょう。

日本語化の方法から始めます。

左上のFileメニューからUser Preferencesを選びます。
するとユーザー設定ウィンドウが出るのでSystemタブ選択。

Systemタブの左下の方にInternational Fontsという項目があるのでボックスにチェックを入れます。

チェックを入れるとLanguageの項目が出るのでJapaneseを選択してください。
これだけでは何も変わりません。
すぐ下のTranslateの三つの項目をクリックしてアクティブにすることによって、それぞれの項目が日本語化されます。
それぞれインターフェース、ツールチップ、新規データのデフォルト名です。
どの項目を日本語化するかはご自由に。


日本語化が完了した画面です。



よく見るポイントです。
①は現在のポリゴン数や頂点数を見ることが出来ます。
今六面体が存在し、四角面が六枚あるので四角面を三角ポリゴンに分割した場合には１２枚の三角ポリゴンが存在する、という具合です。
VRChatは2万ポリゴン制限があるので気を付けましょう。

②は現在のモードの表記と切り替えが出来るところです。
おもにオブジェクトモードでオブジェクトを選択し、編集モードに切り替えてポリゴンとかを弄ったりします。

③はよくわからないボタンです。
押すとよくわからないのですがモデルにボーンを入れたりしたときになぜか動かせなくなったりするよくわからない現象が起こるので絶対に触らないようにしましょう。触るな。
（この白っぽい状態にしておきましょう）

これで準備が整いました、と言いたいですがまたもやデフォルトで配置されている立方体が邪魔ですね。削除しましょう。

ここで気を付けてもらいたいのはBlenderでオブジェクトを選択するのは右クリックだという点です。

立方体を右クリックし、オレンジ色になったらXキーを押してください。
すると消していいか聞いてくるので削除を選択で消せます。

ちなみに左クリックをするとどうなるのでしょうか。
何もない場所でみだりに左クリックをすると、なにやらFPSの照準マークめいたものがクリックした場所に移動します。

これは3Dカーソルと呼ばれるモノで何かと重要なカーソルです。
目印にしたり、裁縫のマチバリみたいな使い方をしたりと何かといろいろな使われ方をします。
新しくオブジェクトを生成したり読み込むときもこの3Dカーソルの位置を基準に生成されるので、基本的に何の目的も無ければ初期位置であるXYZの座標がそれぞれゼロの場所にいてもらいたい感じです。

Shiftを押しながらSキーを押してください。
するとスナップメニュが出るのでカーソル→原点を選択すれば3Dカーソルは元の初期位置に戻ってくれます。
間違えてどこかを左クリックしてしまって、3Dカーソルが変なところに行ってしまったらShiftを押しながらSキーです。

ちなみにBlenderでカメラをぐるぐる回すにはマウスホイールボタンのドラッグです。
Shiftキーを押しながらマウスホイールボタンドラッグをするとカメラ位置の平行移動ができます。


それでは改めて制作を再開しましょう。

ファイルからインポートを選び、Stanford(.ply)を選択します。
エクスプローラーが出るのでMagicaVoxelで作成したply形式のファイルを選択してください。

読み込めました…が、デカァァァイイ！
デカイので小さくする必要があるのですがここでポリゴン数チェックをしましょう
画面上の方にある小さい文字列を見てください。
三角面というのが三角ポリゴンの数です。VRChatでは三角ポリゴンが20000未満でないとアップロードできない制限があるので複雑なモデルを作った際はここをチェックしましょう。

色々削減方法はありますが面倒くさいとか、ちょっとやそっとの小手先削減ではどうにもならなさそうという場合は（1万以上オーバーしてるとか）一旦Obj形式で出力してみるのも手です。（OBJ編へ）

それではモデルを小さくしましょう。

インポートしたデカいモデルを右クリックで選択した状態で、Tabキーを押してください。

するとワイヤーフレームの様なものが表示される状態になりました。
これが編集モードです。さっきまでの状態がオブジェクトモードです。

Blenderでの制作の流れはオブジェクトモードで選択し、Tabキーで編集モードに切り替えてポリゴンとかを編集するというのが大まかな使い方です。
左下の方に現在のモードが表示されています。

さて、編集モードに入った段階で画像のようにすべてのポリゴン頂点がオレンジの状態、つまり選択されていればそのままでいいのですが、そうでないワイヤーフレームが黒い線で表示されている非選択状態だった場合は手動で選択してください。
Aキーを押すことで現在編集中のオブジェクトのすべてのポリゴン頂点を選択状態に出来ます。

ここで全体が選択された状態であとは縮小すればサイズ問題は解決するのですが、そのまま縮小してしまうと、地から足が離れてキャラクターが空中に浮いた感じになってしまいます。
なんとか地に足を付けた形で縮小したいのですが、ここで先ほどの3Dカーソルを使います。

左下の方にあるなんか玉っぽいのが並んでるアイコンをクリックしてください。
ピボットポイントの選択ができます。これを3Dカーソルにしてください。
ピボットポイントは基準点的な感じです。例えばオブジェクトを回転させる時、ピボットポイントを中心軸として回転させることになります。

では縮小しましょう。
編集モードで全ポリゴン頂点が選択されてオレンジになっている状態で、
Sキーを押してください、すると拡大縮小モードになりますので余計なものに手を触れずテンキー等から「0.05」と入力してください。
すると二十分の一サイズまで縮小されます。これくらいがちょうどいい感じです。

ちなみにこの画像ではカメラアングルが真正面の状態です、MagicaVoxelは右下のちっさい立方体をつつけば真正面アングルとかに出来ましたが、Blenderではテンキーの１を押すことで正面アングルになります。３で左側面、７で上面、９で下面です。
パースが付いた状態とついてない状態を切り替えるのはテンキーの５です。

さて、縮小は出来たでしょうか。
3Dカーソルが初期位置にあれば、ちょうどキャラクターの足元あたりにあると思いますので、3Dカーソルを基準に縮小することでキャラの足元基準に縮小できました。
このままだとやりにくいのでまた左下のピボットポイントを切り替えるアイコンで、「中点」とかに戻しておきましょう。

そういえばせっかく付けた色がついてませんね。ですがご安心を。
表示されてないだけです。

また左下のさっきのピポットポイント切り替えの左となりにあるアイコンで現在のビューのシェーディングを切り替えることができます。
テクスチャを選んでください。

これで色が付きま…

…したけれども闇を背負ってますね。
このままだと見辛いのでライトの位置を変えましょう。

右上になんか破線で囲まれた円がありますが、これはデフォルトで設置されているポイントライトです。
これをキャラの前方が照らされる位置に移動させましょう。

編集モードの状態のままであったらTabキーでオブジェクトモードに戻してください。
そしてライトを右クリックで選択してください。
（本当に何で右クリックが選択なんだ…？）

すると三色の矢印が出ます。トランスフォームマニピュレータ：移動って名前らしいっすよ。
緑色の矢印のあたりを今度は左クリックで掴んでグイッと移動させてください。
そのままキャラの前方にやってくると思います。

照らされました。
ちなみに実は暗いままでも一切問題はないです。だってライトはUnityに持っていきませんから。

ここで画面上の情報バーを見てください。
色々書いてありますが頂点数がこのキャラは12000ほどあるようですね。
VRChatで活用できるアバターは２万ポリゴンの制限がありますので２万以内に収めないといけません。三つの頂点で作られた三角形が1ポリゴンになります。
別に頂点数＝ポリゴン数ではないのでこれからする頂点削減作業自体はポリゴン数に影響は無いのですが、たぶん処理的に多少は軽くなるでしょうから削減しましょう。

モデルを選択して、Tabキーで編集モードへ。
Aキーを押して全頂点を選択します。　

その状態でWキーを押してください。すると何やら沢山選択肢が出ます。
重複頂点を削除を選択します。不要な頂点をなくしてくれる機能です。
私の場合はこれで頂点が4分の1程度になりました。


では次はテクスチャを作成しましょう。
現状見た感じ色はついているのですが、実は頂点カラーという機能でポリゴンに色を塗っている状態です。Blender内では反映されているのですが、Unityへ持っていくと頂点カラー機能はそのままいつでも使えるという訳ではないので、表面のこの色合いを保存した画像を貼り付けようという訳です。

まず作業スペースを少し変更しましょう。

3Dビューの下にタイムラインウィンドウというものがあるので、境界線をドラッグしてグイーっと広げてあげてください。

左下のアイコンをクリックしてタイムラインウィンドウを別の機能に変えます。
色々候補が出るのでUV/画像エディターを選んでください。

四角が表示されてるだけの地味な画面になったかと思います。

次はモデルを選択した状態の編集モードで、再度画像のように全頂点が選択された状態にしてください（Aキーで全選択）。

そこでUキーを3Dビュー上にマウスがある状態で押してください。
メニューが出るのでスマートUV展開を選択します。

島の余白に0.03を入力します。あとはOKを押します。

UV展開の完了です。これが展開図となります。
ですが展開図はまだ白紙の状態です。
まずは展開図用に画像を生成しましょう。

新規と書いてあるボタンを押して画像を作成します。

分かりやすい名前を付けましょう。
画像サイズはまぁデフォのままでもいいですが。小さければ小さいほど多分負荷も軽減されるでしょう。
画像を作成した際にモデルの模様が消えてしまうことがありますが、頂点カラーの情報は生きているので安心してください。
これからその頂点カラーを画像の方へ移植するのです。

お次はベイク作業です。
右側のプロパティウィンドウの一番左のカメラのアイコンのタブを選んでください。

下の方にベイクという項目があるのでクリックしてたたまれているのを開きましょう。

デフォルトでは「フルレンダー」に設定されているベイクモードを「頂点色」に切り替えます。
切り替えたらベイクボタンを押してください。

ベイクが終了しました。
UV画像エディターのツールバーに「画像」という項目があるのでそこのメニューから画像をPNGで保存しましょう。
画像を別名保存を選ぶとエクスプローラが出て場所と名前を指定できるので確実です。


この状態は仮でテクスチャが張られているだけです。
このままでも環境によってはUnity上へ持っていけますが正常に持っていけない場合があるようなので、新規にマテリアルを作成してこのモデルへ適用し、そのマテリアルに今ベイクで作成したテクスチャを設定します。

オブジェクトモードでモデルを選択した状態で、プロパティウィンドウのマテリアルタブを開きます。丸い球みたいなアイコンです。
そこで新規ボタンを押してください。新しいマテリアルが作成されて同時に現在のモデルはマテリアルデータを持っていない状態だったのでそのままモデルに適用されます。

次はこのマテリアルデータにテクスチャを設定します。

マテリアルタブの右側にある市松模様アイコンがテクスチャタブです。
選択するとまた新規ボタンがあるので押してください。

テクスチャデータが作成され、なおかつこのテクスチャデータはさっき選択してたマテリアルデータに適用された状態です。
このテクスチャデータにさっきベイクで作った画像を設定します。

タイプが画像または動画になっていることを確認し、ちょっと下の方にある新規・開くボタンの左にある写真みたいなアイコンをクリックしてください。

画像データ一覧が表示されるのでベイク時に作った画像データを設定してあげてください。SSでは無題って名前になってますがお気になさらず。

これでマテリアルの設定が出来ました。


それでは下準備は完了、これから骨を入れましょう。
その前にちゃんと保存をしておきましょうね。
Blenderの編集ファイルは.blendという拡張子のファイルで保存されます。
ちゃんとわかりやすいように整理して保存しておいてください。

さてその前に、ply形式で持ってきた場合は凝ったモデルを作ると実はポリゴンの三角面数は凄いことになります(3Dビューの左上の三角面参照)。
VRChatでは19999ポリゴン以下に抑える必要があるので削減が必要ならこのタイミングがベストです。頂点カラーによるベイクが済んだこのタイミングですね。

https://twitter.com/i/moments/968446416841404417

コレは私が作ったtwitterのモーメントですが、ply出力されたボクセルのポリゴン削減例です。
初めにblenderのアドオンを追加して機能を増やす必要があるので注意です。

アドオンをダウンロードしたら、

https://qiita.com/nutti/items/5e9ebe9c28751066b688

こちらのブログの方の記事を参考にアドオンを入れると良いと思います。


ポリゴン削減が済んだ、もしくは必要ない場合は次のボーンを入れる工程です。

イチからアーマーチュアを伸ばしてボーンを作ってもいいのですが、説明がメチャクチャ長くなるので今回は私が用意したボーンを使ってください。

ダウンロード

グーグルドライブのリンクです。プレビューできませんとか表示されてますのでダウンロードボタンを押してください。（一応ウイルスチェック等はしてますが、ご利用は自己責任でお願いします。）

このボーンデータの利用に関しては一切の制約は設けません。
VRC外での利用、収益化動画への映り込み、ボーンデータを利用したモデルの配布等を許可します。

ダウンロードしたファイルは適当に邪魔にならない場所に保存してください。さっき保存したモデルデータと一緒にしておいてもらえれば探しやすいと思います。

ファイルメニューからアペンドを選択します。
アペンドは別の.blendファイルからオブジェクトなどをコピーする機能です。

アペンドを選択するとエクスプローラが開きます。
先ほどダウンロードしたvoxelhumanbone.blendを選んでください。
するとさらに.blendデータ内の階層に進みます。

Objectフォルダを選択し、中にあるhumanrigを開いてください。
これでアペンドが完了します。

こんな感じでボーンが読み込まれました。
位置がずれている場合は選択してトランスフォームマニピュレータを使って位置を合わせましょう。
位置を合わせてもプロポーションがなんか違うという場合は、Sキーを押して拡大縮小モードにしてマウスをグリグリ動かすとサイズを調整できます。サイズが決まったら左クリックで確定です。

それでもボーンの位置が合わない？
その場合はボーンの配置を手作業で調整する必要があります。
ボーンをオブジェクトモードで選択し、Tabキーで編集モードにしてください。

ボーンは左右対称の状態ですがフリーハンドで弄ると左右対称ではなくなってしまいます。
それを防ぐために左側のメニューから（Tキーで出し入れできるメニュー）オプションタブ
にあるX軸ミラーにチェックを入れます。
これで右腕ボーンを動かすと左腕ボーンも対称に動くミラーリング状態になります。

例えばこのように肩周りから腕をもうちょい上に調整したい場合。

複数選択する際はShift押しながら右クリックでも可能ですが、Bキーを押してからドラッグすることによって範囲選択が可能です。
画像のように右腕の指先から肩、首、頭ボーンをすべて選択し。

トランスマニピュレータで上に動かしてください。
左腕もミラーリングで一緒についてきます。

体の中にボーンがいい感じに収まって居たら出来上がりです。
指はこの絵柄のモデルですから、細かいことは良いです。

次はモデルにボーンを関連付けます。
オブジェクトモードに戻して、Shiftキーを押しながら右クリックでキャラクターモデル→ボーンの順番に複数選択します。

その状態でCtrl + Pを押します。（2017/12/22 追記。指摘ありがとうございます)

ペアレント対象という設定が出るので、自動のウェイトで を選択します。
これでボーンを動かすとモデルも動くようになりました。

試しに動かしてみましょう。

ボーンを選択し、Ctrl+Tabを押します。するとオブジェクトモード、編集モードに続く第三のモードであるポーズモードに移行します。

ポーズを動かしやすいようにトランスマニピュレータを回転モードにしましょう。

この並んでるアイコンの弧を描いてるマークが回転モードです。
ちなみに左の矢印っぽいのが移動モード、右側が拡大縮小モードです。

ポーズモードでは右クリックでボーンを選び、トランスマニピュレータ：回転 の色の付いた弧を描くラインをドラッグすることで角度を変更できます。
ボーンが関連付けられているのでボーンの動きに合わせてモデルもポーズを取ってくれますね。

一通り遊んだら元に戻しておきましょう。
ポーズモードでAキーを押してすべてのボーンを選択状態にし、Alt+Rキーですべてのボーンの回転編集が最初の状態に戻り、ポーズがリセットされます。
ポーズモードのままだと不便なのでもう一度Ctrl+Tabキーでオブジェクトモードに戻してください。

これでBlenderでの作業は終了です。最後にUnityへ持っていける形で出力しましょう。.blend形式での保存も忘れずに。

オブジェクトモードでShiftキーを押しながら右クリックでモデル本体とボーンの両方を選択します。
そしてファイルからエクスポート、FBX(.fbx)を選択。

保存画面が出ますが、そのまま保存せずに左下にある設定を弄りつつ保存しましょう。
そうすることによってUnity側へ無駄なデータをもっていかずに済みます。

メイン、ジオメトリ、アーマーチュア、アニメーションの項目がありますのでそれぞれこんな感じで設定してください。

設定が終わったら名前を付けて保存してください。
MagicaVoxelのファイルやら.plyやら.blendやらいろんな出力をしましたが、ややこしいので専用のフォルダを作って入れておいた方がいいです。

出力されたものがこちらになります。好きな名前を付けましょう。
ベイク作業で保存したテクスチャ画像を今出力したfbxファイルと同じ場所に置いておいておください。Unityへ持っていく際に必要になります。

それではリギング編は終了です。
一番面倒な作業だったかと思います。お疲れ様でした。

次回はそんなに手間はかかりません。Unityへさっきのfbxをもっていってちょちょっと設定した後、そのままUnity内でVRChatのSDKを利用してアップロードも済ませられます。

仕上げ編