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

ブログの女の子を作る #58 髪の毛を改善する (2) テクスチャ画像を作る

 
前回の記事では、髪の毛の見た目を改善するためにUV展開をやり直しました。
 
今回は、「髪の毛のテクスチャ画像」を作成します。
クリスタの便利機能を使いますよ。



開発環境

・Blender 2.90.1
・Clip Studio Paint Pro 1.9.11
・Unity 2019.4.15f1
・グラボ:ASUS ROG-STRIX-RTX2060S-O8G-GAMING
・Oculus Quest 2(Oculus Link利用)
 

(1) 参考にさせていただいた情報

今回の作業では、「みゅー」様のツイートを参考にさせていただきました。
 

髪の毛の質感が素晴らしい

髪の毛の見た目を改善しようと思ったのは、この画像を見たのがきっかけでした。
髪の毛の質感が素晴らしいですね。
 

髪の毛のテクスチャを作り方

髪の毛のテクスチャ画像は、このツイートの方法を使わせていただきました。
 
大変参考になりました。
ありがとうございました!
 

(2) 髪の毛のテクスチャ画像を作る

テクスチャ画像はクリスタで作ります。
 

「まばら流線」で線を引く

背景の「ベースとなる色」は、いま使っている髪の毛の色を使います。
 
次に、ツールプロパティで「まばら流線」を選択し、ベースより少し濃い色を「カラーサークル」などで設定しておきます。
 
斜線を引いてみました。
 
まばらに線が引けましたが、左右部分には引けてません。
なぜ?
 

小分けに描くと良さそう

そんな時は、小分けにすると良さそうです。
 
1/4ずつくらいで描いてみます。
 
キレイに描けました!
まばら流線」はとても便利ですね。
 

画像を設定してみる

さっそく、作った画像を設定してみます。
 
髪の毛っぽい線ができましたが、なんか違和感あります。
 

線をぼかす

違和感は、線がはっきり表示され過ぎてるからでした。線をぼかすのを忘れてましたね。
 
まずは、「まばら流線」で増えたレイヤーを「選択中のレイヤーを結合」で1枚にしておきます。
 
次に、「フィルター -> ぼかし -> ガウスぼかし」をクリックします。
ぼかす範囲」の数値は、とりあえず適当で。
 
良い感じにぼけてますね。
違和感が減りましたよ。
 


(3) 髪の毛のオブジェクトを修正する

髪の毛がテクスチャができたことで、気になる個所がありました。
 

後頭部がゴワゴワしてる

後頭部のこの辺りがなんか変。
ゴワゴワしてます。
 
ポリゴンの面を確認してみると、三角形の次が四角形になってたりしてました。
テクスチャ画像がまっすぐ表示できないのは、これが原因ですね。
 

オブジェクトを修正する

ということで、一部作業をやり直すことになりました。。。
 
作業前には、関係ない個所を「ピン止め」するのを忘れないように。
 
三角形が残るのは仕方ありませんが、できるだけ四角形が連続するように修正します。
 

UV展開もやり直す

おかしな頂点が結構あったので、キレイにしているとかなり時間が経ってしまいました。
おかげですっきりです。
 
UV展開もやり直します。
 

キレイになった!

後頭部を確認してみると、ゴワゴワしたのが無くなってキレイになりました。
 
下から見ても大丈夫そう。
ツインテール感が増した気がしますよ。
 

(4) UV展開の幅を調整する

あとは微調整です。
 

ツインテール部分のUV展開を変更する

ツインテール部分を見てみると「髪の毛の線」の表示が弱い気がしました。線がつぶれてる?感じです。
前髪や後頭部は良いのですが。
 
ツインテール部分のUV展開の幅を広くすると改善しそうです。
 
横幅を倍に、縦幅を半分にしてみました。
 
ツインテール部分にも「髪の毛の線」が見えるようになりました。
これで良いですね。
 

黒髪も作ってみた

せっかくですので、金髪だけでなく黒髪でも試してみます。
 
テクスチャ画像を再度作るのは面倒なので、グレースケール変換して色を濃くしてみました。
 
黒髪も良いものです。
 
色が違うだけで、別のキャラクターに見えますよ。
 

(5) Unityで動かして見る

オブジェクトをFBXファイルにエクスポートして、Unityでインポートします。作成したテクスチャ画像もインポートですね。
 

Unity上で見てみる

まずは、修正前の状態です。
 
次に、修正後の状態です。
Unity上でも、ちゃんと髪の毛が表現されてますね。
 
後頭部も良い感じです。
 


まとめ 

クリスタの「まばら流線」と「ガウスぼかし」を使って、髪の毛のテクスチャ画像を作成してみました。
 
オブジェクト修正とUV展開のやり直しも必要でしたが、イメージ通りにできたと思います。
 
次の記事に続きます。
 
スポンサーリンク

コメント

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

  • コメント (0)

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

ブログの女の子を作る #57 髪の毛を改善する (1) UV展開をやり直す

ブログの女の子を作る #59 髪の毛を改善する (3) ノーマルマップを設定する

最近のコメント

だーしゅ
IT関係のお仕事してます。
VRは楽しいですね。

[当ブログについて]