「テクスチャ作成」の編集履歴（バックアップ）一覧に戻る

---

「テクスチャ作成」を以下のとおり復元します。

---

テクスチャを作成するための基本的な知識の習得と実践を行います。

テクスチャがそのモデリングの大部分のクオリティと直結するといっても過言ではありません。
スカイリムやゲームでのテクスチャ作成は制約が多く、「リアル」に作ることよりも&bold(){納得感}(believability)のある、&bold(){うそくさくない}ものを作るを目標にします。

#contents

*知識編
まずテクスチャの性質や種類を学びましょう。

**テクスチャの解像度
解像度とはつまりテクスチャサイズのことです。
テクスチャサイズには決まりがあって、縦横の大きさが&bold(){2のべき乗}です。
&font(#444444,80%){※理由は&bold(){割りやすい}からです。これ以外のサイズだと小数点誤差が出てしまって実際の見た目と変わってしまいます。}

&bold(){使用可能なテクスチャサイズ：}
&font(b,#0b5394){2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192}

基本的に正方形ですが、縦1024*横512みたいな長方形もできます。
&font(#444444,80%){※プログラム的に正方形が扱いやすいのでできれば正方形を推奨}

テクスチャには最適な解像度が存在します。
まず&color(#992211){&bold(){テクスチャのサイズはできるだけ小さいほうが良い}}です。ビデオメモリの大半はテクスチャが占めることになるからです。
しかし、メッシュ(UV面積)の大きさに対してテクスチャサイズが小さすぎるとディテールがボケてしまいます。

&bold(){良いテクスチャはサイズが小さくてディテールが濃い}
&bold(){悪いテクスチャはサイズが大きくてディテールが薄い}

制作上の手順は
+512、1024(1k)、2048(2k)、4096(4k)などのサイズで作成します。慣れないうちは1kか512で作るのをおすすめします。
+小さいサイズ(テクスチャによりますが例えば256*256)から出力してゲームまたはnifskopeで確認する。
+目視で気になるぐらいにディテールがボケていれば、サイズを上げる(例:512*512)
+一つ上のサイズとあまり差がなくなったらやめる。例：1kと2kで&bold(){大きく}差がないなら1kで配布。

目視もあまりあてにならないので、定量的にやりたい場合、画像にどれだけディテール量(密度)があるかは[[フーリエ変換を用いたテクスチャ解像度推定とその応用>>http://www.slideshare.net/nikuque/ss-52190439]]を読んでください。
実際の検証と応用例としてこちらもどうぞ。→[[DDSの最適なミップマップフィルターの検証>>http://skyrimshot.blog.fc2.com/blog-entry-80.html#more]]

実例で見てみましょう。
画像はドラゴンのディフューズマップの一部です。
#image(Dragon.PNG,width=230,height=237,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=Dragon.PNG,blank)

鱗部分の細かいディテール密度があり、メッシュ自体が大きいのでこの場合は大きいテクスチャサイズが必要です。
ですのでドラゴンのテクスチャはバニラでも最大の2kサイズです。
&font(#444444,80%){※これ以上の解像度で効果を発揮するにはZerofrost氏の[[Thanatos as Durnehviir>>http://www.nexusmods.com/skyrim/mods/35576/]]ぐらいのディテールと技量が必要です。}

#image(GreyNoise.png)

一方でノイズだけのような単純なマップは大きいサイズの必要がありません。
なので64*64サイズです。逆にこれ以上小さいとノイズのパターンが見えてしまって不自然になります。
単色のマップなどは2*2でも構いません。


**テクスチャマップの種類
テクスチャマップには用途に応じて複数の種類があります。
まずはその違いを把握しましょう。

***ディフューズマップ
#image(ironmace.png,width=256,height=256,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=ironmace.png,blank)
&font(#444444,80%){例：鉄のメイスのディフューズマップ}

何もつかない&font(b,#134f5c){～.dds}がディフューズマップです。
ベースとなる拡散光の&bold(){「色」}とAO(環境遮蔽)などのゲームで表現できていない部分のシャドウなどを足したものになります。
ディフューズマップはカメラ位置によって色が変わったりしませんが、周辺の光源の影響を受けます。


***ノーマルマップ
&font(b,#134f5c){～_n.dds}や&font(b,#134f5c){～_msn.dds}と付くものが&bold(){ノーマルマップ}です。
1ピクセルごとの面の向き(ベクトル)を決めるマップで、平たく言ってこの向きで&bold(){凹凸を表現するもの}です。日本語名は法線マップ。（法線＝接平面に垂直な直線）
細かい凹凸をポリゴンのみで表現すると非常に負荷がかかるので、ポリゴンにノーマルマップを貼ることにより詳細かつ低負荷の表現が可能になります。

#image(NormalMapWiki.png)


&font(b,#ff0000){R} &font(b,#00aa00){G}&font(b,#0000ff){B}各チャンネルにそれぞれベクトルの&font(b,#ff0000){X}, &font(b,#00aa00){Y}, &font(b,#0000ff){Z}と割り当ててこれで&bold(){面の向きを決めています}。

:チャンネル|RGB画像は赤=R、緑=G、青=Bをそれぞれ色別に色情報を持っていてそれを合成してディスプレイに表示します。
その色別の色情報がチャンネルです。つまりRGB各3つのチャンネルがあります。これに加えてアルファ＝A、透明度のチャンネルもあります。

板ポリゴンに右のノーマルマップを貼ったもの。ポリゴンは平坦ですが、立体の丸い凸がノーマルマップによって表示されます。
#ref(NormalMapView.png)

これをチャンネル別に分解するとXが左右の影(に影響を与える)、Yが上下の影、Zが高さと見ると分かりやすいでしょうか。
#ref(NormalChannel.png)

RとGは128の中間グレーがニュートラルです。Rが白い(赤い)ほどポリゴン面に対して左向きで、黒いほど右向き。Gは白いほどポリゴン面に対して上向き、黒いほど下向き
|数値|0|128|255|
|色R|左|中間|右|
|色G|上|中間|下|

さて、残りのB＝Zなんですが、
RとGのように中間(128)をニュートラルにしてしまうと、黒側(0～127)のときにポリゴンが裏返っちゃいます。
だから反対側がなくて、基準が255の白になってます。
&font(#444444,80%){実のところRとGが決まればあとは計算で高さのベクトルは出せるので、RとGしかないノーマルマップもある。Fallout4はその仕様。}

#image(NormalZ.png)

----


ノーマルマップにも2つ種類があって、&bold(){モデルスペース}(オブジェクトスペース)と&bold(){タンジェントスペース}があります。

&bold(){モデルスペースノーマル}
#image(malehead_msn.png,width=256,height=256,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=malehead_msn.png,blank)
&font(#444444,80%){例：ダンマーの顔のモデルスペースノーマルマップ}

&bold(){モデルスペース}はファイル名が&font(b,#134f5c){～_msn.dds}で顔や身体はこの形式です。
元のモデルの法線情報まですべてテクスチャに描き込みます。

|>|モデルスペースノーマル|h
|長所|短所|
|モデルの持ってる法線を無視するのでローポリゴンでも曲面が滑らか|編集しにくい、使い回しが効かない|
|タンジェントスペースに比べて少し処理が軽量|変形するオブジェクトが苦手|
|モデルの法線に左右されないのでポリゴンのつなぎ目が目立ちにくい|圧縮するとブロックノイズが出る。圧縮しないと容量大。|

&bold(){タンジェントスペースノーマル}
#image(ironmace_n.png,width=256,height=256,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=ironmace_n.png,blank)
&font(#444444,80%){例：鉄のメイスのタンジェントスペースノーマルマップ}

タンジェントスペースはファイル名が&font(b,#134f5c){_n.dds}で、基本的にこちらを使います。
ポリゴンの向いてる方向(法線)に依存します。

|>|タンジェントスペースノーマル|h
|長所|短所|
|編集しやすい|モデルの形状に依存するので低ポリゴンだとポリゴンのカクカクが目立つ|
|使い回しが効く|モデルスペースよりわずかに処理が重い|

----

ノーマルマップの座標軸は
BlenderやXnormal(デフォルト)では&bold(){+X+Y+Z}ですが、スカイリム(nif)の場合は&bold(){-X+Y+Z}になります。
設定を変えるか、赤のチャンネルを反転してください。


***スペキュラーマップ
#image(ironmace_s.png,width=256,height=256,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=ironmace_s.png,blank)
&font(#444444,80%){例：鉄のメイスのスペキュラーマップ(ノーマルマップのアルファチャンネル)}

&font(b,#134f5c){～_s.dds}のファイル名のものか、もしくは&font(b,#134f5c){_n.dds}の&bold(){アルファチャンネル}に含まれます。
光沢のマップです。
スペキュラーは本来の意味で鏡面反射光で光源の映り込みです。
しかし、スカイリム(DX9世代以下のゲーム)はフェイク的な実装のために単純にハイライト(光沢)だと思ってください。
背景が映り込んだりはしません。それは環境マップの方です。

マップが白いほど光沢があって、黒いほど光沢がでません。
スペキュラー光は視点と物体の角度によってその反射の仕方が変わります。
よってスペキュラーマップがそっくりそのまま光沢になるわけではないです。

光沢が適用される広さに関してはnifのBSShaderLightingPropertyの&bold(){Glossness}(=Specular Power)の値で変更できます。
値が小さいほど広範囲に光沢が出て、値が大きいほど狭い範囲で光沢が出ます。
光沢そのものの強さ(光源から影響の受けやすさ＝弱い光源でも光沢が出る)はSpecular Strengh(＝Specular Amount)です。

&font(b,#cc0000){ノーマルマップが～_n.ddsの場合は、スペキュラーマップは_n.ddsのアルファチャンネルに格納されてます。}
&font(80%){これは余ったチャンネルを有効活用してリソースを圧縮するためのもので本来はまったく別のマップです。}

:アルファチャンネル(A)| アルファチャンネルは透明の情報を持つチャンネルです。
そのままの意味でこのチャンネルで指定された黒い部分を透明にするために使う場合もありますが、スカイリムの場合は、スペキュラーマップに使う場合があります。
&font(80%){※ノーマルマップのRGBにそれぞれ8bit(0-255)ずつ割り当てると8*3=24bit、RGBAで8*4=32bitになります。&br()スペキュラーマップは単色の8bitでいいんですがそれに24bit分のデータを使うのにはメモリがもったいないので、ノーマルマップで使わないアルファチャンネルの8bitに入れます。}


***環境マップとキューブマップ
#image(ironmace_em.png,width=256,height=256)
&font(#444444,80%){鉄のメイスの環境マップ}

環境マップは&font(b,#134f5c){_em.dds}, &font(b,#134f5c){_m.dds}の名前が付きます。キューブマップは&font(b,#134f5c){textures\cubemap\}フォルダに入ってます。
物体は光を反射する性質があって、例えばガラスや金属は周囲の物体を反射して映り込みますよね。
キューブマップは、その名のとおり立方体状のものです。これに背景が描かれていてそれが映り込みとしてゲームに反映されます。
本来ならばゲーム画面内の映り込むのが自然ですが、それだと負荷がかかりすぎるので、あらかじめ決まったテクスチャ(＝キューブマップ)を写り込ませるというフェイクの技術です。
このキューブマップの映り込みの強さを決めるのが&bold(){環境マップ(Environment Map)}です。
環境マスクマップとも言って、マップの白い箇所が移り込む部分、黒い箇所は写り込まない部分です。

金属やガラスなどの映り込みがするオブジェクトに使います。
nifskopeで&bold(){BSLightiningShaderProperty}を&bold(){EnviormentMap}の設定にしないと使えません。

本来だと金属はスペキュラーマップが要らないんですが、この環境マップはフェイクであるので併用しないと違和感があります。
屋内なのに屋外の映り込みっぽく見えてしまったり。


***マップの種類まとめ
ディフューズマップ、ノーマルマップ(とノーマルマップのアルファに含まれるスペキュラマップ)があれば基本は事足ります。

|名称|ファイル名|効果|用途|h
|ディフューズマップ|.dds|拡散反射光|全般|
|タンジェントスペースノーマルマップ|_n.dds|法線|全般|
|モデルスペースノーマルマップ|_msn.dds|法線|顔と体|
|スペキュラーマップ|_s.dds|光沢|顔と体|
|グローマップ|_g.dds|発光|発光するもの|
|パララックスマップ|_p.dds|視差(凹凸)|石畳など、要ENB|
|環境キューブマップ|_e.dds|映り込み|目や金属など映り込むもの|
|環境マップ|_em.dds, _m.dds|映り込みのマスク|目や金属など映り込むもの|
|半透明マップ|_sk.dds|半透明・表面下散乱|肌・氷・ろうそく等半透明なもの|



**圧縮形式
基本的に以下の4つしか使いません。
&bold(){アルファチャンネル付き}かどうか、&bold(){圧縮されてるか}どうかだけしか違いはありません。

| |&bold(){アルファなし}|&bold(){アルファ付き}|
|&bold(){圧縮}|DXT1 RGB|DXT5 ARGB|
|&bold(){無圧縮}|8.8.8 RGB|8.8.8.8 ARGB|

R=赤 G=緑 B＝青 光の三原色ですね。
Aはアルファチャンネルです。RGBとは別の補助的なチャンネルで基本的には透過情報ですが、スペキュラ(光沢)の場合もあります。
8は8bit(0-255)で一つの色につき256段階の階調を含んでる意味です。

DXT3 ARGBもあるんですがDXT5のがアルファチャンネルのグラデーションが綺麗に出ることから、基本的にDXT5利用します。

|DXT1|ディフューズマップ|
|DXT5|_n.ddsのノーマルマップ、髪など透過付きのディフューズマップ|
|8.8.8|_msn.ddsなどの顔や体で使うモデルスペースノーマルマップ。圧縮するとブロックノイズが目立つので。|
|8.8.8.8|アルファ付きのテクスチャで圧縮するとノイズの目立つものに|

tintmasksフォルダ下の化粧に関するファイルはすべてRGB8.8.8 256x256 ミップマップなしで出力します。
バニラと同じ状態で保存しないとCK上で化粧がうまく適用できないバグが出ます。



*実践編
いよいよ実践します。手を動かして覚えましょう。

**ディフューズテクスチャの性質 ー テクスチャの彩度と明度を下げよう

***中間グレーで性質の検証
まず中間グレー(RGB値は119,119,119※)のテクスチャと、 板のポリゴンを用意して、ゲーム内とテクスチャの色との差や性質を検証します。
&font(#444444,80%){※0＝黒・255＝白、127≠中間グレーなのです。127はただのRGB上の中間値なので実際の見え方でいうと119。}

画像ソフト上のテクスチャは以下のとおり。
#image(MedGray.png)

さあ、ゲーム内で見てみましょう。
#image(ExteriorGray.png)
まず&bold(){光源の影響を受けます}。
光の性質として、光があたって初めてその物質が見えるんです。これはゲームも現実も変わらない物理現象です。
直射日光(直接光)に当たっているのは少し黄みがかった白に見えますね。日陰と雨似ていて、環境光の影響で少し緑青がかってます。

日陰の画像のグレーの板のRGB値を取ると、90,99,94です。数値上では画像ソフトの中間グレーRGB119より暗いはずなのに明るく見えませんか。
[[チェッカーシャドー錯視>>https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%89%E3%83%BC%E9%8C%AF%E8%A6%96]]のように
&bold(){明るさの見え方&font(#990000){自体}がまわりの色や形に左右されます}。視覚システムが違和感ないように自動的に補正しています。
&font(#444444,80%){※明るさを絶対値ではなく、相対値で認識しているから}

#image(InteriorGray.png)
さて、次は室内です。ろうそくの点光源(ポイントライト)で赤みがかってます。
ろうそくの光の当たらない場所ではかなり暗く見えます。
おなじテクスチャなのに全然違って見えますよね。

&bold(){まとめ}
-光源や場所の影響を受ける。→物理現象
-光源は主に直接光、環境光、点光源の3つがあります。
-明るさの見え方自体が周りの色や形に左右される。→人間の視覚システムによる


***色付きでの検証
色付きだとどうでしょうか。R255,G0,B0の真っ赤なテクスチャで検証します。

#image(Red.png)
直射日光でも、室内でも発光してますね。&font(#444444,80%){※輝度の強いものの周りが滲むブルームと言う現象で発光して見える。}

日中の直接光に当てて、原色に近い赤を出す場合は
R255G0B0から彩度を-30、明度を-50した数値で大体発光しない範囲で近い色になりました。(フォトショップの色相・彩度を使用。)
#image(RedToneFix.png)

2つ上の室内の画像にスカイリムの典型的な赤いオブジェクトである回復ポーションを並べてみました。
ポーションの色をテクスチャにすると、以下のような色(R91 G15 B18)になります。
&font(#444444,80%){※厳密には頂点カラーというメッシュ上の色と、ベージュのテクスチャに乗せた色なのでもう少し暗い。これは頂点カラーの色。}
#image(PotionColor.png)
このぐらいの色が&bold(){スカイリムに馴染む&font(#991010){赤}}です。

実物では真っ赤に近いもの(コーラ缶とか真っ赤なリンゴ)でも、スカイリムのオブジェクトは彩度も明度も非常に低いので、
周りになじませるのには原色みえる色(R109 G19 B19)よりさらに彩度と明度を下げる必要があります。

まとめ
-テクスチャの彩度-30、明るさ-50ぐらいは最低でも下げる必要あり
-スカイリムのオブジェクトに馴染ませるにはもっと彩度と明度下げる必要あり


*ノイズや写真を使おう - ノーモアベタ塗り
3DCGがいかにも作り物っぽくなってしまう要因の一つが&bold(){テクスチャの情報量の少なさ}です。
身の回りを見てみると、かなり複雑な色や凹凸、光源の影響の出方等ほんとうに多種多様な表面をしています。
ゲームはそれをテクスチャとメッシュ、シェーダー設定で表現しなければいけません。

リアルを完璧に再現するのは難しいですが、簡単でそれっぽく見せるフェイク(嘘)の一つが&bold(){ノイズ}です。
特にパーリンノイズはCGのリアリティを持たせるために開発され、煙、雲、炎、地形、テクスチャのデティールまで使えます。
雲模様というフィルターもノイズの一種です。これらをそのまま使ったり、加工したりするだけで随分と色々な表現ができます。
ぜひ活用しましょう。


**ベースのディフューズテクスチャを作る
特に用途は決めないで汎用のベーステクスチャを作ってみます。

+フォトショップかGimpで512*512の画像を作ります。
+ベースの色をまず塗ります。例ではR91 G15 B19の赤で作ります。&br()前述のとおり低彩度で低明度のものを作ります。


***ノイズを作る
+新規で透明なレイヤーを作ります。
+R119G119B119の中間グレーで塗りつぶします。
+&bold(){フォトショップ}は&font(b,#134f5c){フィルター→ノイズ→ノイズを加える}を開きます。&br()&bold(){Gimp}は&font(b,#38761d){フィルター→ノイズ→HSVノイズ}
+フォトショップはグレースケールノイズにチェックを入れて、分布方法はどちらでも量は50%で適用します。&br()Gimpは保存度1色相0彩度0明度100で適用します。
#image(MakeNoise.png,width=200,height=200,blank)



これをレイヤーのモードを&font(b,#134f5c){オーバーレイ}(暗めに出したいなら乗算)にして、&font(b,#134f5c){不透明度10%}ぐらいにします。
#image(Overray.png)


雲模様を足してムラ感を足します。
+また新規に透明なレイヤーを作ります。
+描画色を白(R255G255B255)にします。
+フォトショップは&font(b,#134f5c){フィルター→描画→雲模様 1}で作成します。&br()Gimpは&font(b,#38761d){フィルター→下塗り→雲→ソリッドノイズ}で作成します。オプションは詳細5、サイズXY4、タイル可能。
+これも&font(b,#134f5c){オーバーレイ、不透明度10%}ぐらいで重ねます。
|&ref(Cloud.png)|&ref(NoiseCloud.png)|

まだ嘘くさいですが、ベタ塗りより随分マシになりました。


***写真素材を足す
手っ取り早くリアリティを出すなら、写真素材を使います。
自分で写真とってたり、薄いものならスキャナーで読み込んだりするのも推奨します。
実物をよく観察することになるので「目」が鍛えられます。

以下のサイトのようなロイヤリティフリーの写真素材サイトからダウンロードするのもよいでしょう。

[[Textures.com>>http://www.textures.com/]]
旧名CG Texturesの超有名サイト。数も多く使い勝手がいいです。

[[Free Stock Textures>>https://freestocktextures.com/]]
やや目的のものが探しにくいですけど、高画質のものが揃ってます。

[[フリーテクスチャ素材館>http://free-texture.net/]]
革や紙、布などクセがなくベースに使いやすい物が揃ってます。


今回はプロのCGアーティストの[[DAVID GRUWIERさんのサイト>>http://dgruwier.dk/]]で気前のいいことに、指紋や汚れなどに使いやすいテクスチャ配布してあるのでありがたく使わせてもらいます。
予めダウンロードして展開しておきます。

+白い背景のテクスチャをどれか(作例では&font(b,#134f5c){DGruwier_dirt_04_scratches_smudge_specs_white.tif})を画像編集ソフトに直接ドラッグアンドドロップします。
+フォトショップはドラッグアンドドロップしたら、自由変形モードになるので、&font(b,#4c1130){Shift押しながら角をドラッグ}して適宜サイズ調整します。
+Gimpは&font(b,#4c1130){Shift+T}で拡縮にし、&font(b,#4c1130){Ctrl押しながら角をドラッグ}します。&font(b,#4c1130){Mキー}で移動モード。
+レイヤーのモードは&bold(){乗算}で不透明度&bold(){50%}です。

同じように指紋も足します。
+黒い背景のどれか(作例では&font(b,#134f5c){DGruwier_dirt_01_fingerprints_black.tif})を画像編集ソフトに直接ドラッグアンドドロップします。
+サイズ調整して、レイヤーモードは&bold(){スクリーン}で不透明度は&bold(){5%}です。

: レイヤーモードについて |乗算で重ねるとその乗算を指定したレイヤー分、暗くなります。陰の合成だったり暗い色の汚れ等で使います。白は暗くなりません。
スクリーンは乗算の全く逆で重ねたレイヤー分だけ明るくなります。指紋などの明るい色の汚れに。黒は明るくなりません。
オーバーレイは暗い部分は乗算のように暗く、明るい部分はスクリーンのように明るくします。

#image(BaseFinish.png)

だいぶそれっぽくなりました。これで汎用のベーステクスチャはおしまいです。
大事なのはここから&bold(){さらに描き足すこと}です。
例えば経年劣化ではよく使用する部分や角が削れて色が薄くなったり、溝が黒ずんたりします。
その制作物の背景やストーリーを考え表現していくのがここからがアートの領域と言えるでしょう。

**ベースのテクスチャから革の質感を足す
ベーステクスチャの使い方の一例として、革の質感を作ってみます。

+[[フリーテクスチャ素材館の革テクスチャ>>http://free-texture.net/etc-textures/brown.html]]をダウンロードして展開します。
+&font(b,#134f5c){Brown.jpg}を画像編集ソフトにドラッグアンドドロップして、サイズを調整します。
+色味じゃなくてディテールだけ足したいので色を抜きます。&font(b,#134f5c){イメージ→色調補正→白黒}で無彩色のテクスチャに。Gimpは&font(b,#38761d){色→脱色}。
+ディテールを強調します。&font(b,#134f5c){シャープ→アンシャープマスク}で設定は100%、半径1.0、しきい値1で。Gimpは&font(b,#38761d){フィルター→強調→アンシャープマスク}半径1.0、量１.00しきい値1で。
+レイヤーモードは&font(b,#134f5c){オーバーレイ}で&font(b,#134f5c){不透明度60%}重ねます。
+素材に合わせて各レイヤーを微調整します。指紋は&font(b,#134f5c){不透明度4%}、汚れは&font(b,#134f5c){25%}にしました。
#image(Leather.png)

どうでしょうか、かなり革っぽく見えませんか？
革のディテールのみのテクスチャ比べると説得力のあるものになってると思います。
#image(LeatherFinish.png)


**ノーマルマップ編
ポリゴンで再現しきれない細かい造形のすべてをノーマルマップが担うのですから、とても重要です。
先ほど作った革のベーステクスチャから今度はノーマルマップを作ります。

ディフューズマップからノーマルマップに変換する場合は、[[AwesomeBump>http://awesomebump.besaba.com/]]を使います。
有料で似た機能を持つソフトはBitmap2Material、NDO、Knald等があります。

***AwesomeBumpを使う理由
他の&bold(){画像からノーマルマップ生成}できる無料のツールでは、XNormalやNvidiaのフォトショッププラグイン、GimpやPaint.NET等あります。
これらは平たく言って明るい部分が凸で暗い部分が凹という単純な変換になるので、のっぺりしたノーマルマップができやすいです。

Awesome BumpはSmall(小),Medium(中),Big(大),Huge(特大)と4つのサイズのディテールに分けて、個別に調整ができます。
百聞は一見にしかずです。下の例を見てみましょう

オリジナルのディフューズマップとノーマルマップ。岩のエッジのシャープさが効いていて素晴らしい出来です。
#image(RockOriginalDiffuse.jpg,width=175,height=175,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=RockOriginalDiffuse.jpg,blank,inline) #image(NormalMapOriginal.jpg,width=338,height=175,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=NormalMapOriginal.jpg,blank,inline)
&font(#444444,80%){岩テクスチャは(C) Christoph Schindelar - Schindelar 3D-Design e.U. さんのものをお借りしてます。}


（左）XNormalで作成。細かいディテールは再現できてますが、起伏に乏しくのっぺりしている。
（右）Awesome Bumpで作成。ややシャープさにかけるが、大きいディテールも拾えるのでのっぺりしない。
#image(NormalMapXNormal.jpg,width=338,height=175,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=NormalMapXNormal.jpg,blank,inline) #image(NormalMapAB.jpg,width=338,height=175,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=NormalMapAB.jpg,blank,inline)


***AwesomeBumpの導入
[[AwesomeBump 4.0>https://github.com/kmkolasinski/AwesomeBump/releases/download/Winx32v4.0/AwesomeBumpV4.0Bin32x64Win7.zip]]をダウンロードして展開します。
AwesomeBump.exeを起動します。

#image(AwesomeBump.png)
もし画面中央部にプレビューが出ない場合は、&bold(){3.14版}を使います。

&bold(){3.14の導入の仕方}
[[Awesome Bump 3.04>https://github.com/kmkolasinski/AwesomeBump/releases/download/Winx32v3.0.4/AwesomeBumpV3.0.2Bin32x64Win7.zip]]をダウンロードして展開します。
[[3.14のファイル>https://github.com/kmkolasinski/AwesomeBump/releases/download/Winx32v3.1.4/AwesomeBump3.14.exe]]をダウンロードして、&bold(){AwesomeBump3.14.exe}を3.04のフォルダに入れます。次からは&bold(){AwesomeBump3.14.exe}を起動します。

***ベーステクスチャからノーマルマップ変換用テクスチャの作成
革のベーステクスチャから大きいディテールのテクスチャ(雲模様)と細かいディテール（革とノイズ）のテクスチャで分けます。
それぞれでノーマルマップを作成して合成します。両方いっぺんに作ってしまうと変換精度が落ちるのと調整が難しいです。

+画像編集ソフトでベーステクスチャのファイルを開きます。
+ベースカラーの上に新しくレイヤーを作ります。
+それをRGBの中間グレー(RGB全128)で塗りつぶします。&font(80%){※色によって明度が変わってしまうのでノーマルマップのフラットな基準であるRGBの中間グレーで}
+中間グレー、ノイズ、革の３つのレイヤーを複製してから、複製した３つのレイヤーを結合。&br()&font(80%){フォトショップはCtrl+選択で複数選択して、Alt+ドラッグアンドドロップで複製。右クリック→レイヤーの結合}
+同じように中間グレー、雲模様の２つのレイヤーを複製し、そのあと結合します。
+作成した２つのレイヤーをpng形式で保存して画像編集ソフトでの作業は終了です。

#image(CopyCloud.png,inline) #image(CopyLeather.png,inline) 


***ゆがみのノーマルマップを作成
+AwesomeBumpを起動します。
+&font(b,#134f5c){Diffuseタブ}に移動します。
+左側のボタンで先ほど作った&bold(){雲模様のノーマルマップ変換用テクスチャ}を読み込みます。
+Basemap to Othersの&font(b,#134f5c){Enable Preview}にチェックを入れます。
+&font(b,#134f5c){Convert to NH}を押してとりあえず各マップを出力します。
+確認しやすいよう3Dプレビューの表示をノーマルマップのみにします。3Dプレビューに結果を反映するにはその度&font(b,#134f5c){Convert to NH}を押してください。

#image(LoadDiffuse.png)

ディテールの大きさ別に&font(b,#134f5c){Small(小),Medium(中),Big(大),Huge(特大)}タブで分かれていて、それぞれ調整していきます。

どういう調整にするかというと、物体の歪みを作ります。
まっ平らの物はほとんど無く、軽くたわんでいたりするものです。手作業による歪み、経年や使用に伴うへこみや歪みがあります。
これらを雲模様のノーマルマップで作ると、反射や光沢に変化が生まれ、いかにも「作りものっぽさ」が減ります。

+まず、すべてのタブのWeightを0にします。各タブがどれくらいのディテール範囲に影響するかわかりやすくするため。
+Hugeからパラメーターを調整していきます。

|項目名|説明|h
|Weight|4つのディテール範囲それぞれの適用量|
|Pre Smooth|加工処理前に画像をぼかします。その強さ|
|Radius|どこまでのディテールを拾うかの範囲。数値が高いほど広い範囲のディテールを拾うが、その分ぼやける|
|Iters|これらの処理を繰り返します。その回数。イテレーション。|
|Amplitude|振幅幅。つまりノーマルの深さと高さの幅の量。数値が低いほど深くなる。0は深さ無し。0-300は凹凸が反転する|
|Flatting|凹凸の丘をフラットにする。Amplitudeと比べると、高い丘を削ってならしていくようなイメージ。|
|Edges|エッジ部のブレンド量？|
|Blending|加工処理してないイメージ(読み込んだままのベースイメージのことかと)ブレンド量？|

こんな感じになりました。調整の目安にしてください。
#image(CloudDetailSmall.PNG,inline) #image(CloudDetailMedium.PNG,inline)&br()
#image(CloudDetailBig.PNG,inline) #image(CloudDetailHuge.PNG,inline)

&font(b,#134f5c){Convert to NH}を押して、3Dプレビューに反映させます。
3Dプレビューで見ると表面がちゃんとゆがんでます。
#image(PreviewCloud.png)

3Dプレビューの操作は
|左ドラッグ|カメラの回転|
|右ドラッグ|オブジェクトの移動|
|中ドラッグ|光源の移動|

***出力
+&font(b,#134f5c){Convert to NH}を押して、ノーマルマップに適用します。
+&font(b,#134f5c){Normalタブ}に移動し、右端の保存ボタンを押して、pngで保存します。
+次の工程でも使いますからAwesome Bumpは閉じないでください。

#image(SaveCloud.png)


***細かいディテール（革+ノイズ）のノーマルマップの作成
次に革の表面のディテールを作り、ゆがみのテクスチャと合成します。

+&font(b,#134f5c){Diffuseタブ}に移動します。
+左側のボタンで革+ノイズのノーマルマップ変換用テクスチャを読み込みます。
+&font(b,#134f5c){Convert to NH}を押してとりあえず各マップを出力します。
+全部Weight0にして、Smallから調整します。

以下のように調整しました。HugeはWeight0にして調整なし。
#image(LeatherDetailSmall.png,inline)#image(LeatherDetailMedium.png,inline)#image(LeatherDetailBig.png,inline)


#image(PreviewLeather.png)


***ノーマルマップ合成
まず念のため、革のノーマルマップだけの状態で保存します。

+&font(b,#134f5c){Convert to NH}でノーマルマップに適用します。
+&font(b,#134f5c){Normalタブ}に移動します。
+右端の保存ボタンを押して、革のノーマルマップを保存します。

革のノーマルマップと歪みのノーマルマップを合成します。
+&font(b,#134f5c){Normal mixer}にチェックを入れます。
+&font(b,#134f5c){Load...}ボタンを押して、雲模様のノーマルマップテクスチャを読み込みます。
+&font(b,#134f5c){Depth}を&bold(){50}ぐらいにします。
+&font(#990000,b){Invert Componentのrにチェック}を入れてください。スカイリムのノーマルマップはXを反転させる必要があります。
+右端の保存ボタンを押して、作ったノーマルマップを保存します。
#image(CombineNormal.png)


***ハイポリゴンモデルから作ったノーマルマップと合成
ハイポリゴンモデルから作ったノーマルマップがなければスキップしても構いません。
ハイポリゴンモデルからノーマルマップの作成とベイクは[[サイコロを作る]]で解説してます。
作例もサイコロのノーマルマップを使ってます。

+Normalタブで左端の読み込みボタンを押して、ハイポリゴンモデルから作ったノーマルマップテクスチャを読み込みます。
+&font(b,#134f5c){Normal mixer}にチェックを入れ、&font(b,#134f5c){Load...}ボタンを押して、革と歪みが合成されたノーマルマップテクスチャを読み込みます。
+Depthを調整します。
+右端の保存ボタンを押して、作ったノーマルマップを保存します。

#image(CombineHiNormal.png)

これでノーマルマップ作成はひとまず終わりです。


***応用編 汚れと指紋
指紋と汚れはあまり凹凸してるものでもなく、作例だと効果が埋没しちゃうので、必要に応じてやってください。
指紋は本来ラフネスマップ(表面の粗さ)に合成するべきなんですが、スカイリムにラフネスマップはないのでノーマルマップ(+スペキュラマップ)で表面のざらつきを表現します。

例のごとく中間グレーにちょっと調整指紋は凸面で、汚れはへこみキズっぽいのでそのまま。
&font(80%){汚れが例えば塗装汚れみたいな凸の場合、中間グレーに反転した白い汚れ、もしくはAwesome BumpのAmplitudeの項目をプラス側に振って反転させる必要があります。}
#image(HandDirt.png,width=256,height=256,inline) #image(Dirt.png,width=256,height=256,inline)

指紋はあまり高さをださずに表面がざらつくぐらいに。汚れもベースの部分なので控えめに。
#image(NormalAddDirt.png,width=400,height=200,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=NormalAddDirt.png,blank)

これらはあくまでベースの補助的なものでしかないので、モデルに合わせた汚れやディテールの方がもっと重要です。

*スペキュラーマップ編
ベーステクスチャからスペキュラーマップを作ります。
下地の色は黒か濃い目のグレー(RGB全50ぐらい)で作ります、黒い部分はスペキュラー光が適用されません。
革にも光沢の強いのから弱いのがありますが、今回はザラッとした表面なので控えめに作ります。

**マップの作成
+新規レイヤーを作成し、黒(RGB0)で塗りつぶします。
+ノイズ、革x2回、雲模様、汚れ、指紋等のすべてのディテールレイヤーを複製し、ベースの黒より上にレイヤーを重ねます。
+背景が黒だとオーバーレイが効かないので、オーバーレイで合成していたものは合成方法を&font(b,#134f5c){ハードライト}に替えます。

|レイヤー名|合成方法|不透明度|h
|指紋|スクリーン|1|
|汚れ|乗算|25|
|革|ハードライト|25|
|革|通常|50|
|雲模様|ハードライト|10|
|ノイズ|ハードライト|10|

並び順で結構変わるので注意。

#image(Specular.png)

**ノーマルマップのアルファチャンネルに合成
***フォトショップの場合
+すべてのスペキュラーマップに使ったレイヤーを選択して&font(b,#4c1130){Alt+ドラッグアンドドロップ}で複製します。
+複製したものを右クリック→レイヤーの結合して一つのスペキュラーマップレイヤーを作ります。
+&font(b,#4c1130){Ctrl+A(全選択)}, &font(b,#4c1130){Ctrl+C(コピー)}でスペキュラーマップをコピー。
+チャンネルパネルに移って、下のアイコン右からふたつ目の&font(b,#134f5c){新規チャンネルを作成ボタン}を押します。
+新しく作ったアルファチャンネル1に&font(b,#4c1130){Ctrl+V}で貼り付け。

#image(MakeAlphaChannel.png)


***その他のソフトの場合
[[DXTBmp>>http://www.mwgfx.co.uk/programs/dxtbmp.htm]]を使用します。

+まず画像編集ソフトで作ったスペキュラーマップをpng形式で保存します。
+&font(b,#134f5c){DXTbmp.exe}を開きます。
+ノーマルマップのpngファイルをDXTbmpにドラッグ＆ドロップします。
+&font(b,#134f5c){Alpha→Import Alpha Channel}で選択します。
+警告が出ますがOKを押します。
+先ほど保存したスペキュラマップのpngファイルを選びます。
+&font(b,#134f5c){File→Save As→DDS Texture}を選んで、ファイルの種類をDXT5にして保存します。 

#image(DXTBmp.png)

*テストと修正
さて、実際にゲームにもっていきます。
#image(InGameBefore.jpg,width=291,height=250,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=InGameBefore.jpg,blank)

悪くなさそうですが、あくまでベースのテクスチャなのであとから描き足すことを考えるとちょっとディテール過剰でくどいの修正します。

**ディフューズマップの修正
ディフューズマップの不透明度を下げます。
レイヤー名|不透明度|h
|汚れ|50→15|
|指紋|5→1|
|雲模様|10→5|

**ノーマルマップの修正
ちょっと強すぎたので調整用のレイヤーを追加します。

+ノーマルマップのファイルを開きます。
+新規レイヤーを追加します。
+新規レイヤーをR128G128B255で塗りつぶします。
+合成方法は通常で不透明度50%、ノーマルマップのレイヤーの上に置きます。

#image(AdjustNormal.png)


**ゲームで再確認
もう一度出してみました。
#image(InGameAfter.jpg,width=300,height=250,http://www50.atwiki.jp/skyrim_mod?cmd=upload&act=open&pageid=27&file=InGameAfter.jpg,blank)
けっこういい感じじゃないでしょうか。
512x512の解像度で、ノイズや画像だけでもけっこうディテールが作れます。
このあと、モデルに合わせた汚しや光沢などさらに描き足していきます。


*ベーステクスチャの配布
実際に作ったテクスチャと実際に作業で使用したpsdファイル、確認用メッシュを配布します。

さらに改変・再配布できますので自分で作ったものに組み込んだり、加工したり遊んでみてください。
詳しくはreadmeをお読みください。

[[テクスチャダウンロード>http://www.mediafire.com/download/vq3p1v2o75c45r3/TestTextures.7z]]

#image(Distribute.png)
ちゃんと全レイヤーつきpsd

*リンク
テクスチャ制作のメイキングです。

[[Elza's Creative note 基本のテクスチャメイキング 食べ物編>http://elzalivion.blog52.fc2.com/blog-entry-44.html]]
[[金属編 >http://elzalivion.blog52.fc2.com/blog-entry-45.html]]
各種テクスチャマップの制作フローがわかりやすく解説されてあります。

*写真素材リンク

[[CC0Textures>>https://www.cc0textures.com/home]]
数はまだ少ないですが一番オススメ。登録不要。ライセンスがCC0でいかなる権利も放棄してるので、クレジット不必要。
解像度が高く、ノーマルマップやAO、ラフネス(加工すればスペキュラマップとして使える)など各種マップが揃っています。


[[Textures.com>>http://www.textures.com/]]
旧名CG Textures。超有名サイト。
アカウント登録が必要になりました。
無料ダウンロードできるものは解像度が高くないですが、最近追加されるものはシームレスでノーマルマップなどの各種マップが揃ってるので、高品質でオススメです。(自分で写真からノーマルマップ生成するよりはるかにクオリティ高い)左メニューからLatest Texturesで最新のテクスチャ一覧が見れます。

[[Free Stock Textures>>https://freestocktextures.com/]]
カテゴリはサイト下。やや目的のものが探しにくいですが、高画質のものが揃ってます。クレジット必要なし

[[フリーテクスチャ素材館>http://free-texture.net/]]
革や紙、布などクセがなくベースに使いやすい物が揃ってます。シームレステクスチャも少量あり。クレジット必要なし

[[BEIZ Graphics>>https://www.beiz.jp/]]
革や石、紙など。クレジット必要なし

[[https://texture.ninja/]]
未加工の再配布は禁止。クレジット必要なし

---

復元してよろしいですか？