3D衣装のつくり方とヒミツ

こんにちは！おひさしぶりです！
今回は3Dモデルの衣装の作り方とヒミツ（個人的なコツとかこだわりとか！いろいろ！）を伝える記事を書きます。

考えた衣装を3Dモデルにしてみんなに着てもらいたくて、1年間ほど3D衣装制作を続けたので、その経験から得たものを書き留めることで誰かの役に立てたらいいなぁと思ったのが、この記事を書こうと思ったきっかけです。

どうやって3Dで衣装を作るのか知りたい！という方や、Blenderなどの使用経験があって制作のワークフローを知りたい方向けに書き進めて行きます！

3Dの衣装に興味がある人に少しでも届いたらとてもうれしいです！

全ての工程のスクショや手順を記録しているわけではないので、
すべてを説明しきることは難しいのですが、
その分要点を絞って、できるだけ読みやすくお伝えしていきます！

便利だったBlenderアドオンの話もしたい！

デザインやモデルの盗用はNGですが、ワークフローならマネしてOKなので、よろしければ作り方の参考にしていってください！

ながーい記事なので、気になる項目だけでも見ていってください～

1 . デザイン決め

この衣装を作るために、まず最初に衣装デザインを考え、イラストに起こすところから始めました。描いたデザインはこちらです🌹

以前デザイン画なしで3Dを作り始めた時に、作りこみにかなり迷走したので、今回は絶対に絵を描いてから作ろうと決めていました。

正面のデザインが決まったら、私の場合ある程度脳内で3Dができているので、三面図は描かず、横・斜め・上面のシルエットは3Dモデルとして最も映える形になるように3D上で調整する作り方にしました。

正面デザインだけでモデリングを進めるこのやり方は自主制作だからできる暴挙なので、3Dモデラーさんにモデル制作をご依頼するときは、三面図のご用意をよろしくお願いしますね！

今回は自分で衣装デザインを考えているので、
デザインをどのように考えていったのか軽く書き留めていきます。

まず薔薇と骨の要素がある衣装が作りたいのが前提としてあったので、 この要素を使いつつ、つぎの3点を意識してデザインを詰めていきました。

①ライティングした時に影やシルエットが綺麗なデザイン

衣装を配布するVRChatでは、アバターの撮影にこだわりがあって、肌や衣装にリアルな影を表現できるツールを入れたり、リアル調のシェーダーを入れる方もいます。

デフォルトではイラスト調が得意なliltoonというシェーダーを使いますが、撮影好きの方がリアル調になるように設定を差し替えた場合も、衣装が綺麗に見えるようにデザインを考えました。

②バストアップでも特徴のあるデザイン

衣装を着せてキャラの写真を撮る時、キャラの顔がよく見える構図でうつす機会が多いと思います。
キャラをかわいく見せる撮り方をするなら、頭からつま先まで全身を構図におさめる機会はわりと少ない気がします。

そうなると、どんなにスカートや足元をかわいくしても、顔や胸周り以外は見切れてしまいます。
そこで、キャラの顔がよく見えるバストアップの構図で写真を撮っても、
綺麗に見える＋なんの衣装かわかる特徴を入れるように、胸周りのデザインを進めていきました。

バストアップでも美しく見えるデザインなら、衣装を着て撮影する方にとっては構図の幅が広がり写真を楽しみやすく、さらにその写真を見た人たちが衣装の特徴を見て興味を持ってくれる機会にもなるかもしれません。

③目立たないけど気づくと嬉しい気づきの要素

VRではモニターで見るのとは違って、自分が実際に衣装を着ている視点で見えるので、衣装との距離が近かったり、好きな角度から眺めやすいです。

なので、普段は目立たないパーツも動いたときにふと見えたりして、細かい要素に気づきやすく、パーツの作りこみも目に入りやすいです。

この特徴を活かして、普段は目立たないけど、気づいたらちょっとうれしい作りこみの部分をデザイン調整の段階で追加しました。

このような気づきの要素は、衣装を着てくださった方がもっと衣装に愛着を持ってくれるきっかけ作りになるといいな、という思いで追加しています。

作る物に合わせてデザインの考え方は変えますが、
自分にとってときめく要素（デザインやモチーフ）をベースにして、それをみんなが受け入れやすく、かつ使いやすい形になるように、
デザインは必ずチューニングするようにしています。

2 . 制作ツール

デザインについて紹介したところで、制作に使ったソフトを紹介します。
3Dをしたことない人は分からないかもなので、読み飛ばしてもOKです！

使ったソフトが多すぎるよ！
3DCG重課金勢なので、たくさんソフトを使っていますが、
正直、無料のBlenderと2万円くらいのSubstancePainterの2つがあれば、衣装が作れます。
3D無課金勢で課金を迷っている人はサブスタだけ買うのがおすすめ！

3 . モデリング

作るソフトが決まったら早速Blenderでモデリングをしていきます！
といっても、何かツールを使った画期的な方法でモデリングしているわけではなく、Blenderの基本操作を覚えていれば誰でもできる、基本的なモデリング方法で作っています。

たとえば、このスカートのベースの部分をモデリングするなら…

フリルや装飾など細かいパーツは、ここからさらに辺を「細分化」して、頂点を少しずつ増やして、頂点を移動して形を作っていきます。

基本的にはどのパーツもこの作り方で…

Blenderのデフォルトの円柱や立方体、平面を出す
↓
必要な分だけ頂点を増やす
↓
頂点を移動して、形を絵に近づける

これを繰り返すことで、全身のモデリングが完成します。

モデリングはシンプルで地味な作業が続きますが、エッジやシルエットを整えて、綺麗なワイヤーフレームにできた時はとても楽しいです！

モデリングの工程ではエッジ選択や形状を整えるために便利なBlender用アドオンを少し使っているので、そのアドオンを紹介しておきます！

また、今回モデリング方法をいろいろ試したかったので、
Marvelous Designer というシミュレーションでお洋服を作れるすごいソフトに課金（サブスク）し、試してみたりもしました。

型紙を右側に描いて、左側でシミュレーションをして布を縫い付けて、
重力に沿った自然なシワの入ったお洋服を作ることができます。

すごい！！のですが、今回の衣装とソフトの相性があまり良くなく、結局作ったデータは使用しませんでした。
今回の衣装は、重力に逆らったフリルがたくさん付いていたり、デザイン画できっちりシワの形状を指定してあります。

例えば、上の画像のフリルの部分をシミュレーションで作ってみると
ざっくりこんな感じ… ↓

画像単体で見ると悪くはないのですが、デザイン画と比べると、シワの強弱やシルエットなどが意図と大きく違うものになってしまっています。

フリルを重力に逆らわせようと生地の重さを変えたり、アイロン機能を使うと、シワの入り方が綺麗に出ず、今回はMDの使用は断念しました。
材質や型紙の細かな調整を繰り返せば、もっと形状を寄せることはできそうなのですが、材質の値調整がかなりガチャで時間がかかるので、今回はBlenderやZbrushで普通に造形した方が早そう！という判断です。

今回は衣装デザインとの相性の問題で使いませんでしたが、

・デザインと100%同じ形状やシワにしなくてもOK
・リアル寄りの衣装デザイン

という条件で作る場合は、すごく役に立ちそうなので、 条件が合いそうな時にまた使ってみます！

4 . UV展開

モデリングができたら、「UV展開」という工程を進めていきます。

UV展開って何？…を簡単に説明すると、
3Dに切れ目を入れて、2D上に型紙のように切り分けることで、
2Dの画像で色をつけられるようにする…みたいな工程？でしょうか。

とにかく、3Dモデルに色や模様を付けるために必要な工程です！

まずはその切れ目をつける工程からUV展開が始まります。
切れ目はBlenderではシームと呼ばれていて、ちょうど画像では赤い線で表示されているところがシーム（切れ目）です。

シームは実際のお洋服の縫い目の位置に近い部分に入れることが多く、胴体だったら脇にいれたり、生地が切り替わる部分に入れてあげます。

ベルトや金属などの固い物にはちょうど角になる部分にシームを入れます。
シャープの入ったエッジはUVを切っておくと、後のベイクの工程で綺麗にテクスチャを作れると思います。

綺麗にシームを入れることができたら…

こんな感じでUVを展開することができます！

UVが展開できたら、このままでもテクスチャは描けるのですが、綺麗にテクスチャを描くためにもうひと手間かけていきます。

まっすぐにできそうな端は綺麗にまっすぐ揃えることで、UVのスペースを節約しつつ、テクスチャのジャギーを減らすことができます。

UV端をまっすぐ揃えて、端以外は柄が歪まないように綺麗に展開しなおす、この工程はBlenderの標準機能だけだと難しいのでアドオン2つを使って進めていきます。　使っているアドオンはこちら～

もう紹介しなくてもいいかも、というくらい多くの人が使っている便利なアドオンですが、これからBlenderをさわる人はぜひ！とっても便利です。

こうして、UVの形を綺麗に整えたら、UV同士少しずつ距離を離しつつ、でも無駄な隙間が少なくなるように、正方形の中に詰めていきます。

正方形1枚だと足りないので、今回は薔薇をのぞいて5枚分、ていねいに一個ずつUVを詰めていきました。

そして…

これでUVの完成です！

これでテクスチャで色や模様をのせられるようになりました！
UV展開はパズルゲームみたいでだいすきです！UVおわり！

5 . ハイモデル作成

やったーUV終わった！テクスチャを作れるぞ〜！
…という状態になりましたが、その前にハイモデルを作成します。

ハイモデルって何？ハイモデル作成ってどんな工程なの？
というと、モデリング工程で作ったモデルをもっともっと細かいポリゴンにして、細かい造形を作りこんでいく工程です。

たい焼きの3Dモデルならこんな感じになります！

右がハイモデルですが、ポリゴン数があまりにも多すぎてワイヤーフレームが見えないくらいです！

このとんでもないポリゴン数を使ってディテールを作りこむのがハイモデル作成の工程です。

今回はBlenderでモデリングしたモデルを書き出して、
ZBrushでハイモデルを作っていきます。

Blenderでハイモデル化した方が早いパーツもあるので、Zbrushで作りこみたいパーツだけ持ってきたら、ハイモデル作成開始です。

ZBrushでは、Blenderで作ったモデルのポリゴンを細分化する
↓
ブラシでお絵描きみたいに凹凸を描く
…というスカルプトの工程を進めて、ハイモデルを作っていきます。

こうして、ZbrushとBlenderからそれぞれfbxでハイモデルを書き出したら、
ハイモデル作成は完了です！やった～！

この作業は、本来Blenderだけでも完結できるのですが、今回のようなパーツが多いモデルをBlenderでスカルプトするとPCが重くなるので、動作が軽いZbrushを併用してハイモデルをつくってます。

Blenderのアップデートでもっと動作が軽くなったら、全工程をBlenderで作業してラクをしたいですね～

6 . ベイク

ハイモデルが完成したら、ベイクをしていきます！

ハイモデルのたい焼きを見た時、ポリゴン数がヤバすぎて、動かしたらPCが重くなるんじゃない？！という感想を持った方もいると思います。

「ベイク」はこの問題を解決してくれて、さらに、この後作るテクスチャのクオリティを爆上げしてくれるすごい工程です。

ベイクでどんなことができるか、簡単に図で説明するとこんな感じ。

SubstancePainterというソフトに、ポリゴンが少ないローモデルとハイモデルを入れてベイク、すると凹凸（面の方向）情報を焼きこんだテクスチャができる！
このテクスチャをポリゴンが少ないモデルに適用すると、
少ないポリゴン数のままハイモデルと同じリッチな立体表現ができる！

…という感じです。

まずはこの凹凸（面の方向）を焼きこんだテクスチャ、
ノーマルマップのテクスチャをつくります。

ノーマルができたら、さらにAO(アンビエント・オクルージョン)もベイクしたいのですが、AOはメインのテクスチャを作りながらベイクし直すことになるので、ベイクテストだけ先にします。

ベイク設定をノーマルとは変えてベイクしたいので、ノーマルとAOは別のプロジェクトで新しく作ります。（綺麗なAOを作るために、ノーマルのプロジェクトとロー・ハイモデルのメッシュ分けも少し変えてます。）

AOもノーマルのようにベイクミスで汚い影ができることがあるので、
その場合はハイモデルを再調整して再ベイク・Substance上でレタッチで綺麗にしてから書き出します。

これでベイク工程は完了です！
ここで書き出したテクスチャを次のテクスチャ作成でさらに編集して、
綺麗なテクスチャを作っていきます。

7. テクスチャ

ベイクが終わったので、メインのテクスチャ作りに取り組みます！
時間はかかるけど、色がついたり、立体感が増して楽しい工程です。

Substanceで新しいプロジェクトをまた作って、モデルと先ほどベイクしたノーマルとAOテクスチャを入れて、作業開始です。

これでテクスチャを作り始める設定ができたので、
ベースの色分け
↓
柄や模様の追加
↓
ラインや縫い目などの細部の作りこみ
↓
ライティングやAOの適用
↓
質感調整などクオリティアップ
という流れで大体は進めていきます。UVのミスに気づきやすいのが、柄や模様入れの段階なので、早めに着手することで修正をラクにする作戦です！

色分けが終わったら、柄・模様を作って、テクスチャに貼っていきます。
模様づくりにはClipStudioPaintかSubstanceDesignerを使います。
今回はノードを使って柄を作るSubstance Designerメインで作りました。

柄が無事に貼りこめたので、細部の作りこみを進めていきます。

これで凹凸に関係する柄やディテールを追加し終わったので、
AOやジェネレーターを使って、ライティングをするように立体感を足していきます。

凹凸はもう大きな変更がないので、今のノーマルマップを書き出して、
AOベイク用のプロジェクトに戻り、AOを焼き直します。

このAOとジェネレーターの機能を使って、ライティングを進めます！

こうしてAOとLight関連のジェネレーターを乗算や加算して、立体感をテクスチャに足していきました。

これで一通りテクスチャに要素を追加できたので、あとはひたすらクオリティアップを目指して細かい調整を進めていきます！

ベースのテクスチャ以外にノーマルやAO、発光(Emission)、光沢用のテクスチャも作ったので、Unityに入れて全部適用したらSubstance上よりもっといい見た目になります！

8. ボーンとウェイト

テクスチャが完成したので、最後にドレスを動かせるようにしていきます。

動かすためには骨（ボーン）が必要なので、ボーンを入れていきます。
今回はVRC対応用にベースのキャラモデルがあるので、その素体の骨にスカートやリボン用のボーンを足していく進め方になります。

これでボーンを設定できました！
次はこのボーンに対して、それぞれどのくらいの割合で頂点が追従するかの値を設定するウェイトの作業を進めます！

スカートのような骨の構造が複雑なものは、
グラデーションやブラシでウェイトをつけたら、時間がかかりすぎて、
一生が終わってしまうので、少しウェイトの付け方を工夫します。

超ポリゴンの少ないスカートをモデリング
↓
超ポリゴンの少ないスカートにウェイトをつける
↓
つけたウェイトを本物のスカートのモデルに転送する

…という手順でかなりスカートのウェイト付けを時短できます！

こうして、全身にウェイトをつけていきます！
グラデーションとローポリを使った転送だけだと、どうしても大きく動かした時に破綻したり、形が崩れたりするので、最後は1頂点ずつ気合の微調整をします…💪

Blenderデフォルトのブラシで塗って調整する方法は、あまり正確ではなく時間もかかるので、ウェイトの数値を直接入力する方法で調整します。
ウェイトの数値入力はこのアドオンを使って、編集しやすくしています。

こうしてウェイトを整えることができたら、ウェイトがUnityでも綺麗に動く状態になっているかも都度チェックします。

ウェイトは正規化すること、クリーンを使って要らないウェイトは取り除くこと、Unityの仕様に合わせて合計を制限して制限を4にすること。
ここの調整をちゃんとすると、Unityに入れて動かした時も、ウェイトがBlenderと同じ挙動になるので、ウェイトの破綻を少なくできます！

これで衣装づくりの工程が一通りできました！
この衣装モデルをfbx形式で書き出して、Unityで見た目を確認して完成させたいと思います。

9 . Unityでの見た目チェック

Unityに持ってきたら、衣装モデルのfbxを入れて、シェーダー・マテリアルを設定して、見た目を確認します！

揺れ物も設定して、スカートやフリルがふわふわ動くようにします！

Unityでの設定方法は、VRC向けに配布するのか、Unity上のみで撮影にこだわるのか、VRMにするのかでまた手順が変わってくるので、今回は説明はナシにします。ｺﾞﾒﾝﾈ…！

もう1つ記事が書けちゃうし、VRC向けの設定方法は既に記事がいっぱいあるので！
もし機会があれば、テクスチャやウェイトなど工程別でもっと細かいところを、新しい記事として書いてみたいなと思います。

- やっておいて良かったこと

完成した衣装をお見せできたので、残りは今回やって良かったことをワークフローの話を中心に書き残しておきたいと思います。
3Dや何かを制作したことがある人向けのとっつきにくい話になるかも…！

この記事ではワークフローの紹介がひとつのテーマとしてあるので、目次からすぐ飛べるように、止まることなく順々に工程を読み進められるように書いています。

ただ、実際には…

というような戻って…進めて……の行ったり来たりの進め方をしています。

工程が戻るのはもどかしいですが、クオリティを上げるためには一度戻って調整し直す勇気も必要です。

でも、なるべく戻る回数を少なく、できれば最初の方から一定のクオリティを出せたら良いですよね。

そこで、今回やって良かったことは、

例えば、UnityではBlenderと画角やシェーダーの設定が異なるなどで、Blenderで綺麗に見えていたモデルのシルエットがUnityだとﾋﾞﾐｮｰに見えることがありました。

そこで、モデリング中のテクスチャもない、無地のモデルの状態で、
先にUnityに入れてシルエットをチェックする、ということをしました。

このチェック作業のおかげで、テクスチャ作成やUnityに入れた時にモデルを修正しに戻る回数を大幅に減らすことができました。

モデルのシルエットの他には、ウェイトが難しそうな箇所だけモデリング途中でウェイトをつけてみる、という工夫もしています。

苦手な工程は先に仮でチェックしておくと、戻りが少なくできるものの、
戻る時は戻ります。気楽に気軽に戻って修正していきたいですね。

作り途中は下手でも、最終的にクオリティの高いものができればOKなので、
たくさん苦労して、いい物をつくるのみです。

- 最後に！

ここまで衣装制作の様子をざっと見ただけでも、かなりの工程があって、3Dの衣装制作は簡単じゃないかも、と思ったかもしれません。
実際のところ、大変です！

それでも、最終的に形にできた時はすごく楽しいし、作った衣装を着てもらえたら何事にも代えがたいくらいの嬉しい気持ちでいっぱいになります！

また、今回はBoothで期間限定のシークレット公開という形でVRC向けに衣装の配布を行いました。

納得が行くまでデザインは10回以上書き直し、モデルは5回ほど作りなおすなど制作に苦労した衣装でしたが、たくさんの人に受け取ってもらえて、Xに投稿された写真を通してみんなが衣装を着ている様子も見られて、
がんばって作って良かったなぁと思います。

また、この記事で3D衣装づくりに興味を持ってもらえたら嬉しいですし、衣装作りを始めた人には1つでもヒントとして得るものがあれば嬉しいです。

10000文字以上のなが～い文章にお付き合いいただき、
ありがとうございました！

もっともっと良い3D作れるようにがんばるよ！

またね！