Bitmap 貼圖加工成 PBR 貼圖

(如何使用物質設計器將一塊Bitmap紋理源作爲PBR紋理。)

Overview

學習不使用Procedural(程序化) Texture ，而是用 Photo texture 等快速並簡單生成 PBR Texture 的方法。
大約從 2001年 ~ 2003年開始，很多開發商開始在遊戲裏應用 Normal texture(也叫 Normal Map ) 。
國內正式開始引進的遊戲裏具有代表性的是 Huxley（國內最初引進虛幻3 ) 。
之後天堂2 卡麥爾和 其他更多的遊戲公司也開始引入 Normal texture 技法，正式開始製作角色和場景。
嚴格來說 T&L(Texture and Lighting) 技法從 DirectX8.0 換成 9.0 後硬件光效不是工作站，而是 Home PC 普遍化後 Normal texture 成了必要因素。

這本書的後面會詳細說明 Normal texture 怎麼計算 Shading ，怎麼計算 Mesh 信息。

當時的角色整體大塊兒是用 3Dmax 或 Maya 等工具製作，細節用 Crazy Bump 等工具再合成 Detail normal texture 來使用。

但當時大部分美術和程序員都不知道該怎麼用 Normal texture ，都是缺乏經驗的狀態。
場景開發的時間跟以前手繪的方法比多了2倍的製作時間，這就成了增加開發費用的很大一個原因。

這種 Normal texture 工程增加了整個開發費用，爲了解決這種問題，圖形軟件公司開始轉向改善生產管線並提高效率的工作。

具有代表性的是 Knald technology 和 Allegorithmic 改善的算法和功能對此有很大的貢獻。
2011年以後，以北美主機遊戲開發商爲頭，PBR 正式成爲了遊戲產業的主要 Shading 技法。

下一個要學習的例題是，儘量刪除照片貼圖裏的影子和部分高光後，利用Sd的node 使它可以成爲 Tiling texture 。
而且還要確認 pbr texture 裏用於 albedo 貼圖的 safety color 。

PBR safety color 會更詳細說明這本書前半部分的 PBR rendering。

用NODE編輯PHOTO TEXTURE

學習目標
1. 改善照片影子區域。
2. 改善照片裏的部分 highlight 。
3. 處理反覆 Tiling 。
4. 理解 PBR albedo safety。

可以在 https://pxhere.com 下載免費的照片貼圖。
如果想要更高品質的照片貼圖，可以在 https://www.textures.com 下載貼圖資源或者親自用照相機準備照片貼圖。

會根據照片貼圖資源製作 PBR Texture set 。
需要在 Textures.com 裏購買使用權或者使用免費貼圖。

這裏就不細說 PBR 了。
這本書的前半部分會充分說明 PBR。

製作新的 Substance Graph (Ctrl + N) ，選擇 Physically Based (Metallic/Roughness) 後把 Graph 名稱變更爲 'PhototexturePBR '點擊OK鍵。
但有點特別，Physically Based (Metallic/Roughness) 裏沒有 Ambient Occlusion Output。
新建 Graph 後會直接添加 Ambient Occlusion Output。

製作用戶 Template 並儲存的部分在這本書的’ Essential’ 裏的 ‘Preferences’ 部分，請參考。

在正式學習前，對 node tree 進行 reviewing 會對不熟悉 SD 的讀者有幫助的。

跟着做之前先看下整個結構，是使用一個照片貼圖 input。
最核心的部分是，，，
1. 在照片貼圖裏儘量刪除影子的暗部，做出 Albedo 貼圖。
2. 生成合適的高度圖
3. 生成不會太過的 Ambient Occlusion map
4. 生成合適的 normal map
可以簡單整理成以上四點。

需要的 Node列表

經常用到的通用 Node 就不另做說明了。

改成適合 PBR 工程的 Albedo colour。

PBR BaseColor / Metallic Validate
把改成適合 PBR 工程的 Albedo colour 結果做 Debugging。
超出修改誤差時會顯示爲紅色。

Make It Tile Photo.
沒有處理成 Tiling 的原版照片貼圖處理成合適的 Tiling 。

Lighting Cancel Low Frequency.
用於從照片貼圖裏刪除部分影子和高光。

Height Map Frequencies mapper.
跟高度圖一起生成類似於 High pass 的 Relief map

Relief map 是什麼？ 總體來看屬於視差貼圖(Parallax mapping )的範圍。 但是從幾何(Geometry)
結構不會變爲出發點的話 Parallax mapping 和 Relife mapping 是在相同的範圍裏。 Relife
mapping 對 Parallax mapping 有一種缺點，就是鏡頭在特定斜角拍攝時越往斜面的尾部 (離鏡頭遠的方向)
越沒有立體感， 而且自身的阻斷現象也會崩潰。而且 Parallax mapping 不會進行幾何變形不能表現自身的影子。 Relife
mapping 有個優點， 就是 Self-occlusion 和 Self -Shadow 可以從 Raytrace
實現，但是演算量過多，遊戲開發中幾乎不能使用。 2016年以後開始積極研究 Displacement 的盲點 Subdivision
算法後 (Desney 主導在做) 最新硬件是使用 Distance based displacement mapping 的趨勢，實際上
Relife mapping 也不會經常使用。

Normal Sobel.
在高度圖用 sobel 算法讓邊緣明暗部的像素更明顯，生成法線。

Sobel algorithm 是什麼？

Height Normal Blender
從導進的高度圖生成 normal map 後混合導入的 normal map 。

現在用有代表性的上圖濾鏡構成整個節點吧。

您已經完成了新的 Graph 。
已經說過，沒有 Ambient Occlusion output 。
自己做下。
把鼠標放到 Graph canvas 上點擊 Space 鍵，搜索 Output 後添加。

或者跟上圖一樣在菜單圖標上點擊 Out 添加新的 Output 。

新做的 Output 要根據 Shader 結構修改。
把 Identifier 修改成 ‘ambientOcclusion’ ，把 Label 修改成 ‘AmbientOcclusion’。
Group 修改成 ‘Material’ 。
用 Add Item 旁邊的 + 按鈕添加 Usage 。
只選擇 R 通道，把數值修改成 ‘ambientOcclusion’。
這是重點，請熟知。

確認整體 Output list 。
由 ase Color , Normal , Metallic , Roughness , Height , AmbientOcclusion 構成。

第一個節點。

把照片貼圖添加到 Canvas ，再添加 Frame 命名爲 Input 後，第一步爲了處理反覆 Tiling 貼圖添加 Make It Tile Photo 節點。

Make It Tile Photo

參數。
Mask Warping H : -41.91
Mask Warping V : -18
Mask Size H : 0.01
Mask Size V : 0.01
Mask Precision H : 0.06
Mask Precision V : 0.09
以上參數只適合修改例題裏的照片貼圖。

各個參數說明。
Mask Warping H :
Mask Warping V :
Mask Size H :
Mask Size V :
Mask Precision H :
Mask Precision V :

適用節點前後比較

Make It Tile Photo 適用前

Make It Tile Photo 適用後。
如果數值太高圖片邊界會變得模糊，或者事物會變得模糊，所以要微調。

請不要只在2D環境確認，一定要在3D環境確認找一個合適的參數。

第二個節點。

Lighting Cancel Low Frequency.
是吧原來的照片貼圖做 HighPass 處理的濾鏡。

可以用這個參數，利用下一個要添加的 Blending 把照片陰影區域的一部分和高光部分去除掉。

參數。
Cancellation Radius : 1.8

High-pass 狀態。

雖然不是完整的 Grayscale 但不妨礙製作。
如果要換成 Grayscale ，使用 Grayscale conversion filter 就可以了。

添加 Blend 節點。
把照片貼圖連接到 Blend 的 background。
Lighting Cancel Low Frequency 出來的部分再連到 Blend 的 Foreground。

Blending Mode : Max(Lighten)
Blend 的參數。
Opacity : 0.85 ~ 1.0 以內的值。
Blending Mode : Max(Lighten)

適用前。

適用後。

去除了部分 Highlight 和陰影。

PBR 的 Albedo 跟以往的 Diffuse 方式不一樣，是稍微有 Flat 感覺的 Colour 的貼圖。
細節要從 normal map 和 height map 還有 roughness 上表現。

去除陰影時 Albedo 裏暗的 Colour 也可能被一起刪除，要加節點儘量保持它，例題的後面會講。
現在根據修改的照片貼圖製作 Normal map ， Height map 和 AO map 。

Colour Repair workflow（色彩恢復工程）

爲了從照片獲取 Albedo ，刪除 Shadow 或 Highlight 信息時貼圖內的部分顏色也會不受控制被修改.
可以做一個修復Albedo Colour 的區間。
重點
1. Colour 的修復。
2. 確認 PBR Albedo 的 Safety colour 。

Colour 的修復。

添加一個 Blend Node 。添加一個 Comment 後把 Text 換成 Repair of Color 。
把 Make It Tile Photo filter output 連到 Blend Node 的 Backgroung Input ，然後把 High-light and Shadow Cancel Frame 裏的 Blend Node
的 Output 連接到剛添加的 Blend Node 的 Foreground Input 。

1. 添加 Gradient Map filter 。
2. 添加 Histogram Range filter 。
3. 添加 Level filter 。

跟着添加順序都連接後，把 High-light and Shadow Cancel Frame 的 Blend Output 連接到 Gradient Map 。(會自動 Grayscale conversion 。)
Level filter 的 Output 連接到 Blend Node(Repair of Color) 。

各個 Filter 的細節參數。
Gradient Map

Gradient Map 是強大的 Color Remap 工具。
以 Gray gradient table 爲準，用戶以 Replace 的方式把 Color 執行 Color Remapping 。
在 Gradient 添加 Point 讓陰影更明顯區分。

Histogram Range

Histogram Range 會修改導入圖片的 Histogram 信息。

參數。
Range : 1
Position : 0.75

Histogram 信息對比。

原圖導入信息的 Histogram 。

修改的 Histogram。

Image Histogram 是什麼? 在從 0 到 255 的
256個像素範圍內橫軸表現像素的值，豎軸表現像素的數量，用曲線圖表現分佈在圖片的像素裏亮部和暗部是怎麼分佈的。

Level

越靠近黑色的部分會成爲修復成原色的 Blending 區域。
Level histogram 做了 Invert。 基本值是下方白色調節條右邊黑色調節條是左邊。
翻轉圖片的顏色時左右換一下就可以了。

添加 Frame 命名變更爲 Color Blending 。

確認PBR Albedo Safety colour 。

現在檢查修改的 Albedo 跟 PBR 合不合適，連到最終 Base Color Output 。
首先來了解下兩種濾鏡。

1. PBR BaseColor / Metallic Validate
   
   PBR BaseColor / Metallic Validate 的 Debugging 案例。
   Albedo 從數據上來看，包含全黑色和全白色是不好的。所以一定要跟上圖一樣做顏色的 Debugging 。

用 Gradient Map 矯正的案例。

2. PBR Albedo Safe Color

把 Gradient Map 矯正成 PBR Albedo Safe Color 的案例。

參數。
PBR Workflow : Base Color - Metallic ( Base Color - Specular 選項做 Menu Dropdown 就可以變更。)
Tolerance : 誤差率，保持 0.5 的基本值。

分別添加以上兩個 PBR Workflow 的 filter，把 Color Repair Workflow Frame 的 Blend Node 的 Output 連接到 PBR Albedo Safe Color Input ，
PBR BaseColor / Metallic Validate 的 Input 連接 PBR Albedo Safe Color 的 Output 。
做一個 Frame ，命名變更爲 PBR Workflow Validate 。

最後 Albedo Safe Color 的 Output 再連一次 Base Color Output 的 Input 就可以了。

色彩恢復前。

色彩恢復後。

製作 Height map 。

Height map 通常是記錄高度的 texture 。
這個高度差距（等高）在 Shader 技術裏會使用 Real-time Displacement 技法，這時會實時使用把 Mesh 的三角形做 Sub-division 的技術 Real-time Tessellation 。

爲了表現 Displace mapping ，把做了 Tessellation 的 Mesh 做 Wire frame.

爲了適用 Height map 先變更 Shader 後再變更 Material 環境。
變更 Shader 。

在 3DView 上端的菜單裏換成 ‘Default/Definition/physically_metallic_roughness[Default]/Tesselation’。

選擇 Materials/Edit 表現細節參數 Inspector 。

參數
Tessellation Factor : 40 ~ 70
Scale : 2
DirectX Normal : False
Tiling : 1
UV Scale Enabled : False
以上參數調好後，就可以看到在 Mesh 上有正常的等高變形。

添加 Height Map Frequencies mapper ，把 Blending 的 Output 連到 Height Map Frequencies mapper 的 Input 。

Relief 值變更爲 1.56 左右。
Height Map Frequencies mapper 提供兩個 Output ，是 Displacement map 和 Relief 。

生成的 Displacement pass

生成的 Relief pass。

作者加了一點 Detail 。

Displacement map 表現的是大的體塊兒感(高度的表現)，如果添加更細節的 Bump 效果， 用 Blending node 稍微加點一起生成的 Relief map 也可以的。
添加一個 Blend node ， Displacement output 連接到 Background input ， Relief output 連到 Foreground input 。

Blend node 參數。
Opacity : 0.27
Blending Mode : Multiply

合成的結果。

Height Output 前面再加一個 Blend node 和 Uniform Color 。
把剛剛設的 Blend node 的 Output 連到之後做的 Blend node 的 Foreground input 。
Uniform color output (Color 值是 White 。) 也連到之後做的 Blend node 的 Background input 。

Blend node 的參數不用特意去調，就用基本值。
選擇 Blend node 添加 Comment 後連到了叫 Height Scale 的 Node commenting 。
這會完成 Shader 的 Displacement scale 功能。

Blend node 的 Opacity 值是 0.45 的時候。

Blend node 的 Opacity 值是1的時候。

太精緻的高度反而會讓 Height map 的結果很突兀。實際遊戲引擎裏使用的 Distance based real-time displacement 裏的 Tessellation 密度不足以表現 detail displacement ，所以 Tessellated 的 Segments 的單位面積上不足以表現 Pixel Density (像素密度)的時候 Height 不能完整得表現出來。我們會通過算法理解 Pixel density 在遊戲引擎裏每個單位面積(爲了表現出一個面分布的三個點形成的三角形平均面積比例)可以有多少 Pixel 的Density 。我們不能把軟件渲染上的密集的 Displace mesh 應用到實時渲染遊戲引擎裏。
比如軟件渲染表現皮膚的毛孔時都要用 Displacement mapping 。

製作 Normal Map。

爲了把一些光用 Height map 表現不出來的精細的體積質感表現出來，我們會用 Normal map 。
1. 添加 Normal Sobel 濾鏡。
2. 添加 Height Normal Blender 濾鏡。

Normalize 是什麼？ 就是 Vector 的方向不變，把 Vector 的長度（尺寸）用1正規化。 用 1正規化的 Vector
就叫單位 Vector 。要做正規化的理由是在3D遊戲裏求內積或者展開一些公式的時候不是單位 Vector
的話計算結果是錯誤的，爲了防止這些錯誤會用單位 Vector 做正規化後再計算。這本書後面講 SD / SP 專用 GLSL SHADER
製作的時候會通過更詳細的代碼再仔細理解下。。

連到添加了 Height map frequencies mapper 的 Relief output 的 Normal Sobel input 。

Normal Sobel 參數。
Intensity : 0.87
Normal Format : OpenGL ( 以後我們在 Unity3D 裏會做 Preview 。)

添加 Height Normal Blender 後把 Normal Sobel output 連接到 Height Normal Blender 的 Normal Input ，把 Height map frequencies mapper 的 Displacement output 連接到 Height Normal Blender 的 Height input 。

Height Normal Blender 的參數。
Normal Intensity : 9.97
Normal Format : OpenGL

製作 Frame 後名稱變更爲 Normal Adjust 。
Height Normal Blender 的 Output 連到最終 Normal Output 。

Normal map 適用前。

Normal map 適用後。

製作 Metallic 和 Roughness map 。

適用 Normal Map 後可以看到受到光源後的質感維持着部分 Specular 等效果。
現在開始做下 PBR 的重點之一 - 質感。
我們簡單看下質感是從哪開始形成的。
後面會再詳細說明，簡單來說就是根據表面的粗糙度和分子的結構來表現最終質感。
在更深入瞭解 PBR 的話，根據某些分子的結構 BRDF 都是不一樣的， IOR 的差別也很大。
但是實時渲染上很難完全掌握和表現。
以 BRDF 光爲準，表示入射量和放射量的比例，是 PBR 的基礎。
1970年前已經定義過相關理論，最近幾年內沒有出實時渲染相關內容。
PBR 裏事物的表面屬性大致定爲以上兩種。
最重要的兩點是，是否是金屬和表面的粗糙度。 金屬性體現在傳導性上，傳導性是構成事物的分子結構形態和成分的混合形態來決定的。

嚴格來講，現有所有用實時處理解決的 PBR 都是錯誤的，只是模仿它的樣子使它看起來像而已，這樣理解PBR會更容易。

新生成一個 Blur filter 後把 Removing Shadow Frame 的 Lighting Cancel Low Frequencies 的 Output 連接到它的 Blur filter Input 上。

Blur filter 參數。
Intensity : 0.45

添加新的 Level filter 。
讓石頭表面和石頭縫隙的土的 Roughness 值更明顯一點。
把 Blur filter Output 連接到 Level filter Input 上。

參數。

添加 Blend filter 和 Uniform Color filter 。
把 Level Output 連接到 Blend filter 的 Foreground Input 上， Uniform Color 連接到 Blend filter Background Input 上。

Uniform Color 參數。
Gray color value : 190
這個參數在例題的 Roughness 上就是表面最平滑的值。

Blend filter 參數。
用默認值。
可以用 Opacity 值用 Uniform Color 和 Linear 做 Blending 。

Metallic 會用 Roughness 值。
再加一個 Blend filter。
再加一個 Uniform Color。

Uniform Color 參數。
在 Uniform Color : Gray 狀態下設成接近黑色的 15 ~ 20 。

Blend filter 參數。
Blending Mode : Divide
剩下的都是默認值。

把製作的兩個 Blend filter 最終連到 Roughness 和 metallic 。

製作 AO map 。

Ambient Occlusion map 簡稱 AO map 。
是一種表現寫實影子的手法，會在全局光照的過程中計算一個點的遮罩量。
這本書上就簡單用 AO 來表現。

新增 Ambient Occlusion(HBAO) 節點。
製作 Height map 時使用的 Height map frequencies mapper 的 Displacement output

參數。
Use World Units : False
Height Depth : 0.03
Radius : 0.55 (數值越接近1，表面的遮擋區域是最大距離，這樣上面就會很暗。)
Quality : 16 samples
Non Square : True
GPU Optimization : False ( 只在 CPU 演算。 )

選擇 Ambient Occlusion(HBAO) Node 添加 Label 後變更爲 ‘Generating HBAO’ 。

添加 Blur HQ Grayscale Filter ，把 Ambient Occlusion(HBAO) Node 的 Output 連接到 Blur HQ Grayscale Filter 的 Input 。
添加一個 Sharpen filter ，把 Blur HQ Grayscale Filter output 連接到 Sharpen filter input 。
添加一個 Frame ，名字變更爲 AO 。
Sharpen filter output 最後連接到 AO Output 。
因爲用 Ambient Occlusion(HBAO) 生成的 AO 鋸齒現象較嚴重，這樣就能使它變柔和。
適用一次 Blur 後再用 Sharpen 讓他更明顯就可以了。

I Notice very important stuff of artifact Which is Should be use to 16 bit data not to 8 bit Otherwise after generation result seems very artifact.

看下它們的參數。
Blur HQ Grayscale Filter

參數。
Intensity : 1.0 ~ 1.12
Quality : 1

參數。
Intensity : 20 ( 直接輸入數值可以設到20。 )

來看下用 Blur 和 Sharpen 改善後的前後效果。

改善前。

改善後。

AO 適用後

整個 Node Preview.

所有的 Map 都沒問題。
就這樣，用一張照片貼圖製作了 PBR Tiled Texture Set 。

演示最終效果。
Substance designer 2017.2 Preview (OpenGL)

結果演示 1. (Tiling = 1)

結果演示2. (Tiling =2)

Substance designer 2017.2 Preview (Iray Renderer)

About JP

鏈接: Website.
在這裏插入圖片描述

出生在韓國的TA。
1997年開始從事電腦圖形視覺化工作後，在這個行業已經有21年經驗了。
在多個網絡遊戲公司引領過美術團隊，之前在allegorithmic擔任TA負責人，在中國網易盤古工作室擔任TA總監，現在是巨人網絡TA部門的總負責人。
懶惰的人才有創意”是他堅信並執行的哲學道理。