ブログの女の子を作る #51 パンツのシワをハイポリのスカルプトとノーマルマップで作る【Blender,Unity】
前回の記事では、シェーダーの設定を変更してキャラクターに影をつけました。
立体感も出て良くなったんですが、作業してる時に「パンツの表面がツルツルしてる」ことに気づきました。
最近、ノーマルマップという特殊なテクスチャを設定すると、ローポリでもハイポリのようなシワを付けれることを知りましたので、今回はこれを使ってパンツにシワを付けていきます。
★この記事はモデリング作業の都合上、下着の画像を多数含みます。というかパンツ画像しかありませんので、ご注意くださいね。
目次
開発環境と作業の流れ
今回の記事から、動作確認には「Meta Quest 2」を使ってます。
個人的には、VR内でキャラクターを眺めるのに最適なデバイスだと思ってます。
いろんな角度から確認できるのが良いですね。
確認作業
・Blender 2.90.1
・Unity 2019.4.12f1
・CPU：AMD Ryzen 7 3700X
・グラボ：ASUS ROG-STRIX-RTX2060S-O8G-GAMING
・Meta Quest 2
・Oculus Link
作業の流れ
全体的な作業の流れです。
1. パンツのオブジェクトを複製する
2. ハイポリゴンに変換する
3. スカルプトでシワを作る
3. ノーマルマップを作成する
4. Unityでノーマルマップをインポートして、いろいろ設定する
スカルプトでシワを作るのがポイントです。
事前に何回か練習しましたが、なかなか難しい。。。
(1) パンツをハイポリゴンにする
パンツを複製して、ハイポリに変換していきます。
作業前のすがた
作業前の姿です。
今回はパンツの修正がメインですので、スカートは非表示にしておきましょう。
パンツのフチやクロッチ部分はポリゴンで作っていますが、その他の部分は何もしてないので平面です。
ローポリの場合、細かなシワを作るのは難しいんですよね。
オブジェクトを複製する
パンツのオブジェクトを複製して、リネームします。
今回は「パンツHigh」という名前にしました。
これで、元々の「パンツ」に加え、新たに「パンツHigh」というオブジェクトができたことになります。
「マルチレゾリューション」モディファイアーを追加する
ローポリゴンをハイポリにするため、「マルチレゾリューション」モディファイアーを追加します。
「細分化」のボタンを1回だけ押します。
ここで、ボタンを押した回数だけ、「ビューポートのレベル数」や「スカルプト」の数が上がっていき、頂点数も増えて細かくなります。シワを付けていく場合、頂点数が多い方が良いんですが、今回はスカルプトの「Dyntopo」機能を併用するので、1回だけにしました。
今後の作業がしやすいように、モディファイアーを「適用」しておきます。
Blenderのバージョン2.9から、適用ボタンの位置が変わってました。最初、どこにあるか探しましたよ。。。
(2) スカルプトでパンツのフチを作る
これでハイポリのパンツができました。
画面上部のボタンで、「Sculpting」に切り替えます。
以降の作業は、この「ハイポリパンツ」で行います。ローポリパンツは基本的に修正しません。
パンツのフチを作る
パンツのシワを作る前に、パンツのフチを作っていきます。フチがあると、シワが引き立ちますので。
画面右上の「Dyntopo」をクリックします。
警告が出ますので、OKボタンを押します。
警告メッセージによると、「Dyntopo（ダイナミックトポロジー）スカルプトは頂点カラーやUV、その他カスタムデータを維持しません。」とのこと。この機能を使うと、オブジェクトを触るたびに頂点が増えていきますので、確かにそうなりますね。今回はオブジェクトを複製してますので、特に問題はありませんよ。
「ディテールサイズ」を「2.00 px」に変更し、「スムーズシェーディング」にチェックを入れておきます。
「1.00 px」にすると頂点が細かすぎたので、この設定にしてます。パソコンのスペックによっては頂点数が多いと動作が遅くなりますので、マシン性能によって変えるのが良いですね。
ブラシを「クリース」に変更し、ブラシ設定を細めに設定して、ギザギザ模様になるように線を引いていきます。
この線がフチになりますよ。
今回は、以下で設定しました。
・半径：8 px
・強さ：0.8くらい
・ピンチ：1.000
ちなみにですが、ブラシの細さは「いま作業している画面の拡大縮小表示」にも影響するようでした。
拡大縮小を変えてしまうと、「オブジェクトに反映されるブラシの細さ」が変わってしまうので、できるだけ拡大縮小を変更しないで作業した方が良さそうです。常に同じ細さになる、ような設定があると思うんですけどね。
お腹部分のフチができました。
ペンタブがあればそちらを使うのも良いですね。
良い感じの横線は元々の線でした
パンツのフチを作ってるとき、自分で引いたギザギザ線以外に「良い感じの横線」ができてることに気づきました。
これは、ローポリパンツで作っていた「横線のポリゴン線」がたまたま良い感じに出てきたようでした。
ギザギザ線だけで足りない場合、自分で引こうと思ってたのでちょうど良かったですよ。
他にもフチも付ける
同じ要領で、足部分のフチも付けていきます。
地道な作業が続きます。
できました！
フチができるだけで、結構良い感じになった気がしますよ。
修正するとこだけがハイポリになる
いまの状態で「編集モード」に切り替えてみます。
細かすぎて真っ黒になってますが、修正したところの頂点が増えてます。
拡大すると分かりやすいですね。
Dyntopo機能は便利ですね。
(3) スカルプトでパンツのシワを作る
次はパンツのシワを作っていきます。
作業前に、いろいろネットで調べてみたんですが、ポイントは「シワの位置で盛り上げたり、下げたりした後で、スムーズ機能で滑らかにする」のようですね。
前面のシワを作る
パンツ前面のシワを作っていきます。
ブラシ設定は「ドロー」、設定はこんな感じにしてみました。
・半径：20 px
・強さ：0.4くらい
パンツ上部分や足の根本部分を盛り上げていきます。
ネットにあるイラストなどを参考にすると良いですね。
ブラシを「スムーズ」に切り替えて、「盛り上げた線の両端」を滑らかにします。場所によっては、「盛り上げた線の途中部分」を滑らかにするのも良いですね。
ところどころは、盛り上げるだけでなく「クリース」ブラシを使ってへこましておきます。
メリハリがあると良さげ。
こんな感じになりました。
私の場合、参考になりそうなイラストを複数準備して、それを見ながらシワをつけてます。付け過ぎるとくどくなるので、ほどほどで。
後ろのクロッチを修正しておく
次は背面なんですが、その前にパンツが少しおかしいような気がしました。
クロッチの後ろ側の位置が低い気がします。もう少し高くしておきましょう。
ローポリパンツを修正していきます。
だいたいこの位置ですかね。
修正できました！
忘れないうちに、ハイポリパンツ側にも同じ位置を修正しておきます。こちらの修正はスカルプトで線を引くだけですので簡単ですね。
シワを作る作業に戻ります。
後ろのシワを作る
次は後ろのシワです。
いろんなイラストを参考にした結果、
・パンツ上部：横方向のシワ
・真ん中の下辺り：斜め方向のシワ
が良いらしい。
線をひいたあとは、「スムーズ」機能で滑らかにしましょう。
フチ部分にもシワを追加してみました。
消えたフチを修正しておく
これでシワは完成なんですが、シワを付ける作業でパンツのフチの一部が消えてしまいました。
消えた部分を修正しておきます。
シワを作ってから、フチを作れば良かったですね。
修正前後のパンツを比較する
これでシワ付け作業が完了です。
修正前後でどう変わったか確認しておきます。
[修正前（前面）]
[修正後]
[修正前（背面）]
[修正前]
ツルツルした感じが無くなって、パンツらしさが出てきました。
(4) ノーマルマップを作る
次は、ハイポリパンツを使って「ノーマルマップのテクスチャファイル」を作ります。
今回の作業では、こちらのサイトを参考にさせて頂きました。
一番分かりやすかったです。ありがとうございました！
ローポリ側でUV展開し直しておく
参考サイトにも書いてありますが、ローポリのオブジェクトは必ずUV展開されている必要があります。
既にUV展開していれば良いですが、私の場合、先ほどローポリパンツを修正してますので、再度UV展開しておきます。
これで良いですね。UV展開したファイルは今後使うかも知れませんので、保存しておきましょう。
ハイポリとローポリでマテリアル作成する
まず、ハイポリパンツのオブジェクトを選択して、新しいマテリアルを作成します。
名前は「パンツHigh」にしました。設定はそのままです。
次に、ローポリパンツのオブジェクトを選択して、同じく新しいマテリアルを作成します。
名前は「パンツLow」ですね。
「パンツLow」マテリアルに画像テクスチャを追加する
この「パンツLow」マテリアルに、「追加 -> テクスチャ -> 画像テクスチャ」で画像テクスチャを追加します。
新規画像を「パンツNormal」という名前に変更し、以下を設定しました。
・アルファ：チェックを外す
・32ビットFloat：チェックを入れる
幅と高さを 2048 px にしてますが、ちょっと大きめかも知れませんね。今回はこれで。
次に、「色空間」設定を「リニア → Non-Color」に変更します。
更に「画像テクスチャ」を追加しておく
これで基本的に設定完了ですが、参考サイトにも書かれてたように「追加で画像テクスチャ」を追加しておきます。
この画像テクスチャは影を付けたりする時に使います。見た目を変えないのであれば、追加しないでも良いと思いますよ。
「パンツNormal」ノードを選択しておく
これからベイクしていくわけですが、その前に「ローポリパンツのオブジェクト」の「パンツNormalのノード」をクリックして選択した状態にしておきます。
選択すると、ノードの周りが白くなりましたね。これでOKです。
次に、「ローポリパンツを選択する」→「Shiftキーを押す」→「ハイポリパンツを選択する」という順番で、2つのオブジェクトが選択された状態にします。
参考サイトでは「High → Low」とのことでしたが、どうしてもうまく行かなかったので逆でやってます。
その他の設定は、こんな感じです。
・ベイクタイプ：ノーマル
・影響 -> スペース：タンジェント
・選択物 → アクティブ：チェックを入れる
・レイの最大距離：1 cm
最後に「ベイク」ボタンをクリックすると、ベイクが始まり、しばらく待つと「ノーマルマップ」ができて左側に表示される、
はずなんですが、できたのは紫一色の画像ファイル。これはおかしいですね。
ローポリパンツのマテリアルを(一時的に)一つにする
いろいろ試したところ、ローポリパンツで複数のマテリアルがあるのが原因のようでした。
いまは「パンツ」「パンツBR」「パンツLow」と3つありますね。
「パンツLow」だけを残し、一時的に他のマテリアルは削除します。
ベイクが終わったら、「Ctrl+Z」でマテリアルを戻しておくのを忘れないように。
ベイク成功しました！
オブジェクトの形によっては、「レイの最大距離」を変更すると良い場合もあるらしい。
試しに「3cm」にしてみました。
なんかおかしな画像になってしまいましたね。このパンツの場合は「1 cm」くらいで良いようです。
あと、私も良く分かってないのですが、どうしてもベイク成功しない場合「Extrusionの値を1cm」などに変更したら成功した時もありました。いまは0cmでも成功するんですけどね。
最後に、作成したノーマルマップ画像を保存しておきます。
ちゃんとスカルプトで作ったシワが出てますね。
(5) Unityでノーマルマップを設定する
ここからの作業はUnityで行います。
ノーマルマップをインポートする
先ほど作成した「ノーマルマップのテクスチャ画像」を「Project」のテクスチャフォルダ以下にD&D（インポート）します。
そして、「hierarchy -> Texture Type」を「Default → Normal map」に変更します。
これで、この画像がUnity側で「ノーマルマップ」として認識されるようになりました。
次に、パンツのマテリアルを選択して、シェーダー設定で「Inspector -> Lighting -> Normal Map」の「小さい二重丸◎」をクリックします。
シェーダーは「VRM/MToon」を使ってますよ。
ここで、先ほどインポートした「ノーマルマップ」のテクスチャ画像を選択します。
ついでに、「Nomal Map」の値を「1.0 → 1.2」に変更しておきましょう。この値を大きくすると、ノーマルマップの影響が強くなります。
パンツにシワができた！
これで「Scene」ビューを確認してみると、パンツにシワができました！
Blenderで見たときと同じようになってますね。
ローポリパンツなのに、シワがあるように見えるのはすごい！！
「影側」でシワが見えないのが困る
シワができて喜んでたんですが、光が当たらない反対側、影側でシワがまったく見えないことに気づきました。
パンツの反対側でも同じでした。
どうやらノーマルマップによる陰影は、オブジェクトに当たる影を使って表現しているようですね。
影面でシワが見えないのは困ります。。。
(6) 影面でもシワを出すように調整する
いろいろ試してみました。
Rimは微妙でした
シェーダー設定の「Rim -> HDR」設定で、少し明るくしてみました。
ほんの少しシワが見えるようになりましたが、ほとんどわからないレベル。
更に明るくするとシワがはっきり見えますが、パンツが明るすぎます。
元々この設定は「リムライト（リムライティング）」と言って、オブジェクトの背後から光が当たったような効果を出すものですので、明るくなるのは当たり前ですね。シワを出すには使えなさそうです。
AOベイクで影テクスチャを貼ってみる
次の方法として、これまでにもスカートなどでもやってきた「AOベイクによる影テクスチャ」を試してみます。
影が無いなら強制的に影を付けてみよう、です。
影テクスチャを貼る前。
貼った後です。
確かに影は付きましたが、既にある影と色が違いすぎて違和感があります。
見た目もあまり良くありませんし。
これもダメですね。
「GI Intensity」で効果があった！
最後に試したのが「GI Intensity」です。「グローバルイルミネーションの明るさ」を設定するものらしい。
まずはデフォルト状態、「Lighting -> Advanced Settings -> GI Intensity」の値が「0」の状態です。
パンツのシワは見えませんね。
設定値を「0.5」にあげてみると、シワがうっすらと見えるようになりました！
背面でも試してみます。まずは「0」の状態。
「0.5」にするとこんな感じに。
もう少しはっきり見えると良いんですが、見えない状態よりは全然良い。
「Shading Shift」を少し上げる
ですが、この状態では少し明るすぎます。
「Lighting -> Advanced Settings -> Shading Shift」の値を「0 → 0.2」に変更します。
この設定値は「影のかかる領域を調整」します。値を大きくすることで、「影がかかりやすくする＝暗く見える」という感じです。
良いバランスになった気がしますよ。
これで、スカートをはいた状態でもパンツのシワが見えるようになりました！
(7) シワの有無で見え方を確認する
これでUnity側の調整も完了しました。
「何もなし、影あり（前回の記事で作成）、影＋シワあり（今回の記事で作成）」で、見え方がどのように変わるかを確認しておきます。
パンツ前面
[何もなし]
真っ白です。
[影あり]
立体感は出ましたが、表面がツルツルに見えます。
[影＋シワあり]
シワがあると素材感が出てきました！
パンツ背面
[何もなし]
[影あり]
[影＋シワあり]
パンツ背面も良い感じですね。
(8) パンツに色を付ける
白色以外でも確認したい！
何かないかと探してみると、過去記事でパンツの色を白以外にも作ってることを思い出しました。
今回は影ベイクは必要ありませんので、それぞれの色を持ったテクスチャ画像だけを準備して、パンツのマテリアルを変更してみます。
青色
青色も良い感じでした。
ピンク色
影の色が #828282 の場合です。ちょっとくすんだ感じですね。
他のオブジェクトでも使ってる色なんですが、ピンク系の場合は別の影色を使った方が良さそうです。
#A68C87 にしてみました。
鮮やかになりました。
これならOKです。
黒色
最後は黒色です。
ベースが黒でも、ちゃんとシワが出てますね。
試しに、影の色を #000000 にしてみました。
よりシワが強調されるようになりました。
こんな感じで、質感が変わって見えるのは面白いですね。
(9) 動画で確認する
これですべての作業が完了しました！
どんな感じで見えるか動画で確認します。
・20秒でパンツの色が変わります。
・念のため、2つ目の動画には年齢制限をつけてます。ご了承くださいね。
パンツのシワの確認（スカートなし、ゆっくり回転）
光の当たり具合によって、パンツのシワが見えるのが良い感じです。
まとめ
パンツのシワを作りました。
作業的には、パンツをハイポリゴン化した状態で、スカルプトでパンツのシワを作り、ベイクした「ノーマルマップのテクスチャ画像」をUnity側でローポリパンツに適用する、ですね。
この方法を使えば、スカートや他の服にもシワをつけれますよ。
また試してみたい！
コメント
トラックバックは利用できません。
コメント (0)
この記事へのコメントはありません。