SIMPLESTUDIO404

わたくし流ノーマルマップの作成法

Category: CC制作覚え書き   Tagged: TheSims3  CC  Sims4  
D_hin.gif

steamのウインターセールでゲームをどか買いしました。
ついでにずっと迷ってた3Dペイントソフトもセールで買ってしまいました。
しばらく放置してたけど、少し前から練習してます。


「若かりし頃の俺のグルメ」鍋ラーメンのつもりです(・・;)シムズ4です、ちなみに。

C1ne8cGUkAAVVXn.jpg

自分で言うのもナンですが、かなり気に入ってます。なにこのフォトリアル感←www



ペイント用に使ったソフト「Substancepainter2」Indie版

21-1.jpg

インディ版の使用条件はサブスタンスペインターを使って制作したモデルやゲームなどの
売上が年間500ドル以下だったかな??(自分に関係ない事なのでその辺りはうろ覚えす
機能制限は特にないようです。

セールで9000円位で購入しましたが、現在は15,000円位。ちなみに一番安い、通常のプロ版で80,000円位。
インディ版は超お得です!

フォトショップに近い感覚で制作できるというのが有り難いです。


アンビエントオクルージョンマップやノーマルマップなど、
一通りのテクスチャのベイクも自動で行ってくれます。

22-1.jpg

マテリアルの持つ質感もリアルタイムでノーマルマップに焼きこんでくれるので、
ローポリながらハイポリのような見せ方が簡単にできます。

自分に必要なテクスチャを自由にエクスポートできて、フォトショップやモデリングソフトへの受け渡しも簡単。
物理ベースレンダリング(PBR)に対応しているので、メタルやラフネスなどのデータも
モデリングソフトに受け渡しOK。
私は各テクスチャをモデリングソフトに渡してからレンダリングした物をCCのテクスチャに使いました。

鍋ラーメンのテクスチャ制作に約1時間(操作に慣れてないのも含めて)
今までのように手書きでテクスチャを制作していたら多分半日はかかってると思う。


ここ数ヶ月、CCの修正ネタくらいしかブログ更新してなかったので、
CC制作に役立ちそうなツールやTIPS記事をアップできたらいいなと思いつつ。。。


以下、ノーマルマップネタです。

シムズで取り扱うノーマルマップで長年疑問に思っていた事がありまして。
シムズのノーマルマップはグレーにチャンネル変換するのですが、
他のゲームだと青色マップのまま使う事が多い。
ゲーム毎にノーマルマップのチャンネル用途は違いますが、概ね青色のまま。
なんでじゃろ?となった次第です。

テレビが見れれば別にテレビ自体の仕組みは知らなくてもいいわけで。でも私はを知りたい派。
(あ、別にテレビの作り方は知りたいと思いませんが(汗)
難儀な性格です(T_T)

某神製作者様のアドバイスでストンと胸に落ちました。
某様が考察してくださったネタなので、ここは私の胸にしまっておきます。
(自分の言葉で言えるほど理解していないともいうw)



以前いつぞやのタイミングでノーマルマップの話をしたと思うのですが。。。

23_20170205133833e11.jpg

通常、ノーマルマップはこういう感じで作成します。
リアルタイムでレンダリングされる為、ゲームで使うメッシュはローポリが望ましいです。
で、左側の模様があるメッシュはハイディティールメッシュです。

ハイメッシュの形状を右側のローメッシュに画像データとしてUVに転写したものがノーマルマップです。



23-1.jpg

ローメッシュのUVにハイメッシュのディティールを転写した画像


24_20170205133836ed9.jpg

ちょっと失敗したので、法線がオカシイですが、右側のローメッシュに上のノーマルマップを貼り付けた状態。
あたかも高精細な造形をしてるように、擬似的にローメッシュで再現する為のテクスチャ=ノーマルマップ。

ちなみに、sims4のCC作成ツールである「sims4studio」で必須なblenderにも
同じ手順でノーマルマップを作成するベイク機能があります。


この作成法の場合、
ゲームで使用するローポリメッシュと別に、高精細なハイメッシュを作成しなくてはいけません。
布モノなどはシワのような柔らかな形状をメッシュで再現しようとするなら、てっとり速くスカルプトという
手法を使ってハイメッシュを作る事は可能です。

シムズのCC作成では本来不要な技術ですので、簡単に高精細な表現をお求めならば
手書きでディティールを描いたテクスチャを元に2Dエディタのフィルタを使って
擬似的にノーマルマップを作成できます。

以下、フォトショップを使った作成例



前準備
シムズなど取り扱う画像データは、「DDS」というフォーマットになります。
DDS形式の画像データが取り扱えるツールとテクスチャから
ノーマルマップを作成するプラグインの二つの機能が必要になります。

DDSフォーマットについて
https://sites.google.com/site/moggproject/tips(Moggproject様)

ちなみにシムズ3ではTSRW、シムズ4ではsims4studioというCC作成支援ツールでは
ツール側でDDS形式に変換してくれるので、PNG形式でも可能です。


ノーマルマップ作成に私が使っているツール

フォトショップ(当方はCS6)
NVIDIA Texture Tools for Adobe Photoshop
ノーマルマップ作成フィルタとDDS形式のファイルが扱えます。

プラグインの導入法はこちらの記事を御覧ください↓
覚え書きメモ様 アドビ フォトショップ用DDSプラグインの導入方法

フォトショップCC64bitで上のプラグインを導入する場合は、以下のサイト様の記事で対応できるそうです。
(kenichio 奥さんちょっとあがってもいいですか様)
http://kenichio.blogspot.jp/2013/09/adobe-photoshop-cc-64bit-nvidia-dds.html




※フォトショップをお持ちでない場合は
フリーの2Dお絵かきソフトGIMPやPaint.NET で代用可能

GIMP
導入方法の記事はこちら
GIMP用ノーマルマッププラグイン(狭き桃様)
GIMP用DDSプラグイン(狭き桃様)

Paint.Net
ノーマルマッププラグイン
ちなみにPaint.NetはデフォでDDS形式のファイルを扱えるようです。



わたくし流ノーマルマップ作成手順

わたくし流とありますが、現在はハイメッシュ作成→ローメッシュにノーマルマップベイク、の手順で
作成しておりますので、主にシムズ3のCC作成時代にやってたやり方です。

シム友様方のアドバイスやsakurasims様のチュート(現在閉鎖)、
海外フォーラムでの記事を参考に試行錯誤して作成しておりました。



元となるテクスチャ用意

Diffuseテクスチャを元に作成します(シムズ3で言うとマルチプライラーですかね)
詳細は省きますが、テクスチャにフィルターで凸凹をつける際、
フラットな箇所をRGB128を基準に明るくなる(数値が高くなる)ほど凸、
暗くなるほど凹に処理されます。

できるだけグレー画像をご用意ください。(モードはRGBですよ

0_20170205133714555.jpg
画像クリックで拡大表示


ノーマルマップフィルターでの凹凸表現は角度が一律で付加されます。

01_20170205133716006.jpg

あまり気にしなくてもいいかもしれませんが
UVマップ作成時からUVの向きを統一した方がいいです。凹凸に矛盾が出る事があります。
UVの空き面積によっては、難しい場合もあるので、個別にフォトショで絵を回転させるなどして
ノーマルマップフィルターをかけるといいかと思います。


ノーマルマップフィルター処理前の下ごしらえ

私は陰影やしわ、ボタンやポケットなどの凹凸はレイヤースタイルで個別に作成しております。
もちろん、
一枚絵に統合した物やEA公式のテクスチャを流用してノーマルマップを作成できます。

1_20170205133716af9.jpg

2_201702051337183fa.jpg

浮き上がらせたい部分のみを描画できるよう、適宜レイヤー効果のオンオフを行います。
モデルによっては、逆にエンボスのような凹み効果が必要になるので
RGB128よりも暗めにしたり、そこら辺は用途に合わせて。

3_201702051337190e3.jpg

赤枠のボタンぽい物は立体的にしたいので、真っ白にします


4_201702051337339ae.jpg

別途、ノーマルマップ用に隆起したい部分を書き足したり、修正してもいいかと思います。

下準備後、黒べた塗り画像もしくは、50%グレーべた塗り画像を
バックグランドに作成して一枚絵に統合します

一枚絵にレイヤー統合後、ノーマルマップフィルターをかける

5_20170205133735f44.jpg

図のようにフィルターから赤枠のノーマルマップフィルタを選びます。


6_20170205133736a52.jpg

こんなのが出てくると思います。
緑の枠は凹凸の強度です、プレビュー画面を見ながら好みで調整します。


7_201702051337381f6.jpg

ちなみにボックス左はしの3Dpreviwを押すと、グリグリ具合が3Dで確認できます。


8_20170205133739e17.jpg

ボックスのOKボタンを押すとこんな青色マップが出来上がります。
フィルターで作成すると、正規の方法で作るノーマルマップより少し薄めなので、
レイヤー複製、オーバーレイで重ねてみたりしてお好みで調整してもいいかもしれません。


ちょっと脱線 ノーマルマップの合成

9_201702051337501cf.jpg

余談ですが、フォトショ用ノーマルマップ合成スクリプト「Combine Normal」を使うと
複数のノーマルマップをディディールを損なわず、より細かく合成できます。

Combine Normal Photoshop Script(無料)

あくまでも個人の好みなので、使わなくてもOKです


脱線しました(;´・ω・)

シムズ用にノーマルマップをチャンネル変換

13_2017020513375652a.jpg

青色マップから、シムズ用ノーマルマップに編集します。
フォトショのチャンネルタブから、図のようにコピペします。
GIMPでの操作も同じ理屈です。


29_201702060040479ed.jpg



メッシュ以外の空き領域でのアルファチャンネル、
何もないからフラットなハズなのでk=50になります

私の場合は、おま環なのか分からないけど、
シムズ4ではk=49もしくは48にしないと首にラインが出てしまいます。
似たような現象になったらお試しください。


12_20170205133755de1.jpg

昔、シム友様に教えてもらったんですが、一連のチャンネル操作をアクション登録しておくと楽です。



13-1.jpg


14_201702051338131b8.jpg

ノーマルマップを作るだけなら全く不要なネタですが。。。
簡単に言うとRGBチャンネルで法線の向き(XYZ)で表しています。

画像はありませんが、Bチャンネルは垂直方向からメッシュを投影した状態になっております。
手前から奥に向けて(Z軸)なので、画像は基本真っ白です。


またまた脱線しましたが、

Mipmapを作成し、DDS形式で保存

16_201702051338163f4.jpg

チャンネル操作が終了したら、DDS形式で保存します。
generation mipmap は必ずチェックを入れておきます。
(チェックを入れると保存時に自動で作成されます)

mipmapとは、カメラ(視点)とメッシュまでの距離に応じて小さく再現されていくテクスチャを
自動的に最適なサイズの解像度テクスチャを切り替えてくれる機能です。
その機能をテクスチャに持たせるのがgeneration mipmap という感じ?ですかね


mipmapのイメージ
28_2017020521531832b.jpg



mipmapに関しては私はあまりこだわりがないので、デフォの設定でやってますが、

26_20170205181451040.jpg

劣化具合とか色々違いが出るらしいです。BOXが一番いいらしいですが(謎



DDSの保存形式

18_20170205133817950.jpg

ノーマルマップではアルファチャンネル情報必須なので、
DXT5 ARGB 8 bpp | interpolated alphaを選びます。


シムズで使う圧縮形式をざっくり説明すると。。。

※DXT1 RGB 4 bpp | no alpha
一番軽い圧縮形式。アルファチャンネル情報を持てないので、透過や切り抜き表現はできない。

※DXT5 ARGB 8 bpp | interpolated alpha
アルファチャンネル情報を持てる圧縮形式。透過や切り抜き表現も可能。ファイルサイズはその分大きくなる。

DXT3 RGBA 8bpp | explicit alphaという圧縮形式でもアルファチャンネル保持できますが、
アルファの作りが違うのでグラデーションのような緩やかに色調が変化する画像の圧縮は劣化する模様。
私は使った事がないのでスルーします。

透過表現がないメッシュのテクスチャ保存ではDXT1を、服や髪型などシムの肌などと共有してる
メッシュや、草木、ガラスなどの透過のあるオブジェクトに使うにはDXT5を使います。

透過の不要な(アルファ抜きしてない)物にDXT1を使うとvramの節約になると思います。
シムズ4の場合、CASアイテムのdiffuseテクスチャが1024x2048で、ノーマルマップは1024x1024。


こうすればDiffuseマップを流用してノーマルマップ作れると思います。

27_20170205191741409.jpg



とまあ感じでノーマルマップは作ってます。
DDS保存で生じるテクスチャの劣化などもあり、ツールによって同じ形式でも結果が違う事は多々あります。
紹介していないフリーのノーマルマップ用ツールは他にもあります。
ググってると、もっと効率の良い作り方や綺麗に作成できる方法は沢山あると思います。

久しぶりに長い記事を書いたので、何かが抜けている気がしますが(汗)
長々とお読みくださりありがとうございます。




余談

25_201702051338505d3.jpg

チュートによっては、ノーマルマップの圧縮形式を
DXT5ではなく、DXT_nmという形式で保存する場合もあると某様から教えていただきました。

ノーマルマップフィルターをかける前に、元になるDiffuseテクスチャを右90度に回転、
フィルター適用後に回転を元に戻して、図のようにチャンネル操作を行い、
DXT_nmで保存するということです。

ざっくり説明ですが、DXT_nmという圧縮形式は、nvidia独自の形式らしく、
GIMPではDXT_n?でしたっけ、が一番近いチャンネル変換になるそうです。

RGBチャンネル=XYZ成分を表していると、この記事で書きましたが、
ノーマルマップにはBチャンネル=Z成分は不要なんです。XY成分だけあればいいわけです。
青色マップをDXT_5nmで保存すると、RGBチャンネルにY成分が、AチャンネルにX成分が
自動で変換されます。チャンネル変換が違うだけでDXT5と全く同じですが、
予め不要なZ成分を変換するので、DXT5よりも少し圧縮効率は良いらしいです。


で、混乱したのが、上の図のようにチャンネル操作したノーマルマップをDXT_nmでまた変換する意味。
結果的にX成分が失われ、Y成分が若干強調されます。

「細かい事が気になってしまうのは、僕の悪い癖・・・」と右京さんではないけどw
X成分が要らない理由を自分なりに解釈すると。。。


前提が一枚絵に統合されたマルチプライヤー&diffuseテクスチャを使って
ノーマルマップを作成するなら、もしくはEA産のテクスチャーを流用するなら意味があると思いました。

実際試してみたら、DXT5と比べて気持ち薄めな見え方になりました。
某様も検証協力有難うございました。


しわでできた布の隆起=高さだけを強調したい、影の部分などはあまり凹ませたくない。
不自然に見えますよね?
Y成分(上から下に)だけを使えば、陰影などの不要な部分は描画されにくいのでは?と。
前提は陰影付きの一枚絵テクスチャ&UVが上から下に整列してる物)


この辺りは個人の好みもあると思う。
例えば、生地自体になにか模様(革とか網目っぽい質感)がある物だと、Y軸成分だけでは
ちょっと物足りない感があったり、ボタンやポケット、彫刻のような細工ものには
ディティールが足りない場合もあるので、用途によって使い分けるのが吉かな~と思いました。



参考サイト様

Skyrim箱庭DIY様  
狭き桃様    
Skyrim mod作成wiki様 
web technology様  
ろれむいぷさむ様


テーマ : The Sims4    ジャンル : ゲーム

Comments


« »

03 2017
SUN MON TUE WED THU FRI SAT
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
About Me

kimu412

Author:kimu412
CC制作ド素人。
マイブームは「版権テロ」
好きな版権ブツを手当たり次第に
作ってます。
成分は「愛100%」
夢は版権シム牧場の創造

Link&Bookmark
※増えます減ります
reference websites
Terms of use
    





当サイトのCCはご自由に改造、改変
してくださってかまいません。改変したCCを自身のサイトで 配布する際は、当サイトや元オブにリンク&クレジットをお願いします。
報告も必要ありません。

You are free to use all of my original meshes, textures, alterations, modifications, settings for your own use on your free site. When using an original mesh from my CC, please credit simplestudio404. Is not necessary to report. Would appreciate a link to the original object.



・CCの2次配布
・改変したCCをペイサイトや
adf.lyリンクで配布する行為
・CCの自作主張

Please do not re-upload my CC to any websites. Please do not upload modified CC to the Paysite or adf.ly link. Claim my work as your own.
Counter
Flag Counter
free counters
ブログ素材リンク