はじめに
今回は3DCGのテクスチャに模様を入れる方法を紹介します。
第29回の続きになります。
ペイントソフトはClip Studio Paintを使います。
色々試したペイントソフトの中で、総合的に使いやすかったのでおすすめ。
![](https://www18.a8.net/0.gif?a8mat=3HQXIN+4YM29E+3AP2+63OY9)
既存モデルから作り方を学ぶ
まず、既存モデルのハイライトの作り方を観察して学びます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-01-5.jpg)
幽狐さんのハイライトはこのようにアングルが変わると描画が動くことが分かります。
![](https://signyamo.blog/wp-content/uploads/2023/10/gif-1-3.gif)
こちらの髪の毛マテリアルを確認。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-02-5.jpg)
すると、lilToonでマットキャップにハイライト情報が入ってる事が分かります。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-03-5.jpg)
マットキャップにこのような画像を入れてハイライトが作られてるようです。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-04-5.jpg)
オン/オフを切り替え。
これでハイライト=マットキャップで作られてる事が確定。
![](https://signyamo.blog/wp-content/uploads/2023/10/gif-2-1.gif)
つまり、このような画像を自作すればハイライトを作れます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-05-5.jpg)
以上が既存モデルの観察です。
MatCapを作る
MatCapを作るためにガイド線を用意します。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-30-5.jpg)
↓こちらよりDL。(CC 0)
![](https://signyamo.blog/wp-content/uploads/2023/10/MatCap_Guid.png)
作り方はこちらで解説。
分割数を変えたい方などはこちらで作り直してください。
ラフを作り、Unityに読み込む
このガイドを元に、下図のような描画を入れました。
ハイライトの大まかな位置だけ描いたモノです。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-31-4.jpg)
そしたら、ガイド線を非表示化。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-32-4.jpg)
ファイル → 複製を保存 → .psdを選択。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-33-4.jpg)
任意の名前を付けて保存。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-34-4.jpg)
設定はそのままで大丈夫です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-35-4.jpg)
そしたら、この画像を「×」ボタンで閉じます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-36-4.jpg)
そしてUnityに「.psd」を読み込み。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-37-5.jpg)
髪の毛のマテリアルを選択。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-38-4.jpg)
マットキャップに差し込みます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-39-4.jpg)
これで、ハイライトのラフが完成です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-40-4.jpg)
動かすと、ハイライトの形が変わる様子が確認できます。
![](https://signyamo.blog/wp-content/uploads/2023/10/gif-3-1.gif)
MatCapを調整する
MatCapが何処の位置か分かりやすいように色を塗りました。
レイヤー制作 → クリッピングマスク → 任意の明るめの色で描画。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-41-4.jpg)
すると、ハイライトの対応が分かりやすく編集できます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-42-4.jpg)
試しに、円の中の描画を消しました。
すると影響が0になったことが分かります。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-43-4.jpg)
なので、調整する際は円の中で調整してください。
球の形が基本ですが… このような直線もアリと言えばありです。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-44-4.jpg)
直線にすると、下図のような表現になります。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-45-4.jpg)
頂点法線の調整
直線にしたハイライトですが… 場所によって見え方に違いが出てる事が確認できます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-46-4.jpg)
これは頂点法線の影響です。(第28回で調整した影響)
頂点法線の詳細はこちらで解説。
なので修正します。
Blenderで立ち上げて、編集モード。
Lキーで直したいメッシュをリンク選択。
Ctrrl+Alt+Qキーで4分割表示。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-47-4.jpg)
Alt+N → ターゲットの方へ…を選択。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-48-4.jpg)
Iキー → Mキー → 髪の毛のやや後ろの方をクリック。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-49-4.jpg)
すると、頂点法線が変化します。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-50-4.jpg)
これで、頂点法線の調整が完了です。
ハイライトの形調整
幽狐さんのハイライトは球状の形ではありません。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-05-5.jpg)
なので球を気にせず描画して様子を見ます。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-51-4.jpg)
また、下図のようなぼかしを入れました。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-52-4.jpg)
エアブラシ系のブラシで部分的に削除。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-53-4.jpg)
すると、ややハイライトっぽくなります。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-54-4.jpg)
あとは、上下の境界線も同様に削除。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-55-4.jpg)
これでハイライトの形調整が完了です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-56-4.jpg)
色の調整
大体の形ができましたら、色を塗ります。
やる事は、上からクリッピングマスクで白色を塗るのが基本。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-57-4.jpg)
これで一般的な白いハイライトが完成です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-58-4.jpg)
また、透過マスクを使って透明度を変えるとリアルになります。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-59-4.jpg)
虹ハイライトを作る方法
おまけで、イラストなどでよく見る虹色のハイライトを作り方を紹介します。
グラデーション → 「虹」を選択。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-60-4.jpg)
画面の左端をクリック → 右端をクリック。
これで虹色のグラデーションを描画します。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-61-4.jpg)
あとはクリッピングマスク+透過マスクで必要な個所だけ設定。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-62-4.jpg)
これで虹ハイライトが完成です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-63-4.jpg)
必要であれば他にも色味変更などを行ってください。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-65-4.jpg)
以上でlilToonに髪の毛の光沢を入れる処理が完了です。
![](https://signyamo.blog/wp-content/uploads/2023/10/image-64-4.jpg)
まとめ
今回はlilToonで髪の毛の光沢を作る方法を紹介しました。
・髪の毛の光沢はMatCapを使って作られる
・MatCapは通常球を土台に作成
・ただし、髪の毛の場合は球状でない例外があり
・必要であれば頂点法線を使って見え方を変える
・虹ハイライトは左から右にグラデーションを入れると作れる
↓次回↓
また、ほかにも3DCGについて解説してます。
ぜひ、こちらもご覧ください。
コメント