BlenderとUnityで作ったものをVR(Meta Quest/Oculus Link)で動かします

ブログの女の子を作る #108 フリル服と目・顔のテクスチャ画像を描く【Blender,Unity】

 
前回は髪のテクスチャ画像を描いてみました。
 
クリスタや板タブにも少し慣れてきたので、この勢いで他のテクスチャも描いてみました!
試行錯誤しながらなので一か月ほどかかりましたが、、、
 
まずはフリル服と目・顔のテクスチャを描いていきます。



開発環境

・Blender 3.0.0
・Unity 2021.3.0f1(HDRP 12.1.6)
・CPU:AMD Ryzen 7 3700X
・グラボ:ASUS ROG-STRIX-RTX2060S-O8G-GAMING
 

(1) フリル服のテクスチャ画像を描く

まずはフリル服です。
 

修正前の姿

修正前の姿です。
マテリアルプレビューモードで表示してるので、テクスチャ画像が無くても良い感じの影が出てくれてますね。Unity側もHDRP表示なので同じ感じになります。この「自然に出ている影」との違和感が出ないように描いていきたいですね。
 

メッシュのボタンを削除する

まずはボタンです。
この服を作った時はテクスチャ画像が描けなかったので、仕方なくオブジェクトでボタンを作ったのでした。
 
このボタン、何気に頂点数が3,000くらいありますね。消しておきましょう。。
テクスチャ画像があれば、こんな感じで頂点数削減ができるのもうれしい。
 
テクスチャを描く前にUV展開はしっかりと。。
今回の作業ではなかなか良いUV展開が見つからず、何回も作り変えてます。慣れてくると、テクスチャ画像を描きやすいUV展開がすぐに作れるようになるんでしょうかね。
 
襟元を白く塗ります。
以前は「襟元専用のマテリアル」を使ってたので、マテリアル削減にもなりますね。
 

ボタンを描いてみる

とりあえずボタンを描いてみます。丸を書いて小さい点を付ければボタンになるはず。
こんな感じでしょうか。。
 
一つ描いた後は、コピー機能で複製します。
 
ボタンの厚みが欲しかったので、陰影をつけてみました。
 
ボタンっぽくなった?
 

フリル服のシワを描いてみる

Blenderの見た目をソリッドモードに変更してみました。
今回の記事のように、テクスチャ画像を描く場合はこの方が確認しやすいですね。
 
フリル服にシワっぽいものを描いてみます。
 
とりあえず、袖や胸の下、側面あたりで影が落ちそうな個所にシワを入れてみました。
ネットや動画でイラスト講座的なものをいろいろ見てみたんですが、やはり服のシワは難しいですね。
とりあえずはこれで進めましょう。
 

リボンを塗ってみる

胸のリボンを塗ります。
 
これはフチをメインで塗ればそれっぽくなりました。
凹凸がしっかりしてるモノは塗りやすいですね。と言っても「フチや奥まった部分に影を塗っておけば良い」レベルですが。
 


(2) 目のテクスチャ画像を描く

次は目のテクスチャを描いていきます。
 

目をしっかり描いてみる

いまの目は、このキャラクターを作った初期の頃に描いたものです。
どう描けば良いか分からなかったので、イラストレーターの方に作っていただいた三面図やイラストを見つつ、なんとか描いたのでした。
今回はしっかりと良い目を描きたいですね。
 
何か良いサイトはないかと探していると、ふかんじゃりら(@lilalalilaff14)様が作られていた目がとても良い感じでした。
キラキラしてとても良い。
 
今回は、このツイートで紹介されていた こごめ有 様の動画を参考にさせていただきました。
イメージにとても近く、丁寧に説明されていたので何とか描くことができました。
ありがとうございました!
 

目を描いていく

まずは、目の中心と虹彩を描いていきます。
 
これだけでも目に見えるものですね。
 
ここに、眉毛や映り込み、目の上半分にかかった影を描いていきます。
説明動画では「虹彩や映り込みの影」など、パーツの説明をしてくれるのがうれしいですね。なんとなくではなく、理由があると納得しながら描けます。
 

ハイライトはオブジェクトで作る

目のテクスチャ画像は片方だけ描いているので、ハイライト部分はオブジェクトで作る必要があります。
 
こうしておくと、Unity側でハイライトは「目の本体」とは違うマテリアルを設定できます。「ハイライト部分だけを明るく表示」などができるので、この方法で行きましょう。
単に両目をバランス良く描けない、というのも理由の一つですが。
 
更に、色合いや虹彩部分を滑らかになるよう調整してみました。
 
これで良いですね。
 
まつ毛や眉部分にも、目と同じ色で塗っておくと良いらしい。
これで完成です。
 

(3) 顔のテクスチャ画像を描く

次は顔のテクスチャです。
 

UV展開大事

UV展開をし直します。
 
今回は顔を中心にUV展開してみました。
テクスチャ画像に変な区切りができるのを避けるため、シームを付ける位置を極力減らしたこともあり、顔の中心部分がかなり狭くなってしまいました。もう少し「中心部分をもう広く、周り部分をもう狭く」した方が良さそうです。
 
ですが、全面的に頂点を移動するのは面倒なので、とりあえず口回りだけを修正しておきます。
 
テクスチャを塗っていきます。
ここでも、以前よりマテリアル数を減らすことができました。
 

鼻の影を描く

ソリッドモードの場合、鼻がまったく見えなくなるので影を描いておきます。
 
こんな感じでしょうか。
 
マテリアルビューモードでは若干違和感ありますが、
 
ソリッドモードではセルルックになるので、これくらいがちょうど良さそうです。
VRChatのシェーダーもこんな感じに表示されてる気がします。
 

耳を描く

耳のテクスチャを描いていきます。
 
これも「奥まった部分に影を塗る」でOKでした。
うなじ部分に少し影を入れたので、耳部分となじんだ感が出てきましたよ。
 

目のハイライトに紫を追加する

これで一通り完成なのですが、最後に目のハイライトに紫色を追加します。
参考にしたのはウマ娘のミホノブルボンです。推しウマの一人なんですが、目の紫色が以前から良いなと思っていたのでした。
 
追加したオブジェクトに紫色を塗っていきます。
 
こんな感じになりました。
 
追加した紫オブジェクトは、アルファ値を設定して半透明にしてます。
Unity側の HDRP/Lit シェーダーでは、「Surface Type:Transparent、Material Type:Translucent」に設定することで半透明にしてます。
 


まとめ 

フリル服と目・顔のテクスチャ画像を描いてみました。
 
結構時間がかかりましたが、特に目が良くなったと思います。
テクスチャ画像は大事ですね。
 
スポンサーリンク

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

ブログの女の子を作る #107 髪のテクスチャ画像を頑張って描いてみる【Blender,Unity】

ブログの女の子を作る #109 体とパンツ・オーバーニーソックスのテクスチャ画像を描く【Blender,Unity】


最近のコメント

だーしゅ
IT関係のお仕事してます。
3Dモデルの女の子は「ブログノ・スージー」。VRは楽しいですね。

[当ブログについて]