DirectX11 With Windows SDK--34 位移貼圖
阿新 • • 發佈：2020-07-15
# 前言
在前面的章節中，我們學到了法線貼圖和曲面細分。現在我們可以將這兩者進行結合以改善效果，因為法線貼圖僅僅只是改善了光照的細節，但它並沒有從根本上改善幾何體的細節。從某種意義上來說，法線貼圖只是一個光照的小把戲。接下來我們將會學習如何使用位移貼圖來改善網格細節。
在此之前你需要了解如下章節：
| 章節 |
| ------------------------------------------------------------ |
| [25 法線貼圖](https://www.cnblogs.com/X-Jun/p/10217421.html) |
| [33 曲面細分階段(Tessellation)](https://www.cnblogs.com/X-Jun/p/13286441.html) |
**學習目標：**
1. 瞭解位移貼圖
2. 熟悉如何用曲面細分來改善網格細節
**[DirectX11 With Windows SDK完整目錄](http://www.cnblogs.com/X-Jun/p/9028764.html)**
**[Github專案原始碼](https://github.com/MKXJun/DirectX11-With-Windows-SDK)**
**歡迎加入QQ群: 727623616 可以一起探討DX11，以及有什麼問題也可以在這裡彙報。**
# 位移貼圖（Displacement Mapping）
位移貼圖的想法是利用一個額外的貼圖，稱作高度圖，它描述了一個表面的凸起和縫隙。換句話說，法線貼圖有三個顏色通道來為每個畫素產生法線向量`(x, y, z)`，而高度圖僅僅由一個顏色通道來為每個畫素產生高度值h。從視覺上來看，高度圖僅僅是一張灰度圖（因為灰度圖只有一個顏色通道），每個畫素可以解釋成一個高度值，它基本上是一個2D標量場的離散表示`h = f(x, z)`。當我們對網格進行曲面細分時，我們在域著色器對高度圖進行取樣，然後利用法線的方向來對頂點進行偏移，以此來增加網格的幾何體細節。
儘管我們通過鑲嵌來對幾何體增加三角形，但是它並沒有增加其本身的細節。那是因為如果你對三角形進行多次細分，你只是獲得了更多的和原來的三角形同屬於一個平面的三角形。為了增加細節（如凸起和縫隙），你需要以某種方式來偏移這些經過鑲嵌後得到的頂點。高度圖是其中一個座位輸入的紋理資源，它可以用來對鑲嵌後的頂點進行偏移。通常情況下，我們會用到下面的公式，為此我們還需要用到法線貼圖取樣出來的法向量來確定偏移的方向：
$$
\mathbf{p'}=\mathbf{p}+s(h-1)\mathbf{n}
$$
其中標量h∈[0, 1]是從高度圖得到的高度值。我們對高度值減1來讓區間[0, 1]→[-1, 0]。因為表面的法向量通常是面向網格的外部，這意味著我們以**向內偏移**的方式來替代**向外偏移**。一般將幾何體彈入會比將幾何體拉出更為方便一些。標量s則是用來控制在世界空間的塌陷程度。這樣高度值的將從[0, 1]→[-s, 0]，即高度值最大的時候將不會有向內的偏移，而高度值最小的時候將會產生最大的向內偏移。**通常我們會將高度圖存放在法線貼圖中的alpha通道。**
生成高度圖是一項藝術性的工作，紋理藝術家可以繪製它們，或者使用工具來產生（例如：[crazybump](https://www.crazybump.com)）
# 位移貼圖的著色器程式碼
位移貼圖的程式碼主要在頂點著色器、外殼著色器和域著色器有所變化。畫素著色器則和我們之前使用了法線貼圖的版本一樣無需改動。
## 圖元型別
為了將位移貼圖整合到我們的渲染當中，我們需要曲面細分的支援，這樣我們就可以細化我們的幾何解析度，使得他能夠與位移貼圖更好地匹配。接下來我們將使用圖元型別`D3D11_PRIMITIVE_TOPOLOGY_3_CONTROL_POINT_PATCHLIST`而不是`D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST`來繪製我們的網格三角形。通過這種方式，三角形的三個頂點將解釋成三角形面片的3個控制點，以允許我們來對每個三角形進行鑲嵌。
## 頂點著色器
當我們處理曲面細分的時候，我們必須決定每個三角形的細分程度。這裡我們將引入一個簡單的距離量來確定細分數目。若三角形離攝像機越近，它的細分程度越大。頂點著色器通過計算每個頂點和攝像機之間的距離來幫助我們計算出曲面細分因子，然後將其傳遞給外給著色器。
在常量緩衝區中，我們引入了下面這些資料來控制距離的計算。這些值的設定非常依賴於場景（你的場景有多大，以及你想要怎樣的細分程度）：
```cpp
cbuffer CBChangesEveryFrame
{
// ...
float g_HeightScale;
float g_MaxTessDistance;
float g_MinTessDistance;
float g_MinTessFactor;
float g_MaxTessFactor;
}
```
1. `g_MaxTessDistance`：從攝像機到該頂點的距離拉近到某個閾值時，將會達到最大的曲面細分因子
2. `g_MinTessDistance`：從攝像機到該頂點的距離拉遠到某個閾值時，將會達到最小的曲面細分因子
3. `g_MinTessFactor`：曲面細分因子的最小值。比如說你想讓每個三角形無論距離攝像機多遠，都要讓它最少被鑲嵌成3份
4. `g_MaxTessFactor`：曲面細分因子的最大值。比如說你想讓這些三角形無論距離攝像機多近，它最多的鑲嵌份數不超過6.此外，回想起上一章所提到的建議，鑲嵌後的三角形如果少於8個畫素將會變得低效。
此外我們應該留意到`g_MaxTessDistance < g_MinTessDistance`，因為隨著頂點距離我們的攝像機越近，鑲嵌的份數將會越多。
使用這些變數，我們就可以建立一個關於距離的線性函式來決定如何根據距離來確定鑲嵌的份數。
```cpp
// DisplacementMapObject_VS.hlsl
#include "Basic.hlsli"
// 頂點著色器
TessVertexOut VS(VertexPosNormalTangentTex vIn)
{
TessVertexOut vOut;
vOut.PosW = mul(float4(vIn.PosL, 1.0f), g_World).xyz;
vOut.NormalW = mul(vIn.NormalL, (float3x3) g_WorldInvTranspose);
vOut.TangentW = mul(vIn.TangentL, g_World);
vOut.Tex = vIn.Tex;
float d = distance(vOut.PosW, g_EyePosW);
// 標準化曲面細分因子
// TessFactor =
// 0, d >= g_MinTessDistance
// (g_MinTessDistance - d) / (g_MinTessDistance - g_MaxTessDistance), g_MinTessDistance <= d <= g_MaxTessDistance
// 1, d <= g_MaxTessDistance
float tess = saturate((g_MinTessDistance - d) / (g_MinTessDistance - g_MaxTessDistance));
// [0, 1] --> [g_MinTessFactor, g_MaxTessFactor]
vOut.TessFactor = g_MinTessFactor + tess * (g_MaxTessFactor - g_MinTessFactor);
return vOut;
}
```
```cpp
// DisplacementMapInstance_VS.hlsl
#include "Basic.hlsli"
// 頂點著色器
TessVertexOut VS(InstancePosNormalTangentTex vIn)
{
TessVertexOut vOut;
vOut.PosW = mul(float4(vIn.PosL, 1.0f), vIn.World).xyz;
vOut.NormalW = mul(vIn.NormalL, (float3x3) vIn.WorldInvTranspose);
vOut.TangentW = mul(vIn.TangentL, vIn.World);
vOut.Tex = vIn.Tex;
float d = distance(vOut.PosW, g_EyePosW);
// 標準化曲面細分因子
// TessFactor =
// 0, d > patch,
uint patchID : SV_PrimitiveID)
{
PatchTess pt;
// 對每條邊的曲面細分因子求平均值，並選擇其中一條邊的作為其內部的
// 曲面細分因子。基於邊的屬性來進行曲面細分因子的計算非常重要，這
// 樣那些與多個三角形共享的邊將會擁有相同的曲面細分因子，否則會導
// 致間隙的產生
pt.EdgeTess[0] = 0.5f * (patch[1].TessFactor + patch[2].TessFactor);
pt.EdgeTess[1] = 0.5f * (patch[2].TessFactor + patch[0].TessFactor);
pt.EdgeTess[2] = 0.5f * (patch[0].TessFactor + patch[1].TessFactor);
pt.InsideTess = pt.EdgeTess[0];
return pt;
}
```
那些與多個三角形所共享的邊應當擁有相同的曲面細分因子，否則可能會出現網格三角形間的縫隙（見下圖）。舉個例子說下不計算曲面細分因子的情況，加入我們通過攝像機到三角形中心點的距離來計算內部曲面細分因子。然後我們將內部的曲面細分因子也設定到邊緣曲面細分因子上。如果兩個鄰接三角形擁有不同的內部曲面細分因子，它們的邊也將會擁有不同的曲面細分因子，從而導致在進行位移對映後會產生T型連線的縫隙效果。
可以看到，圖a展示了兩個三角形共享一條邊。圖b上面的三角形進行了一次邊緣細分，下面的三角形則沒有細分。圖c上面的三角形進行了一次內部細分，經過位移對映後，新產生的頂點被移走了（一般是向內移動），從而在兩個三角形之間產生了一條縫隙。
控制點外殼著色器以面片的控制點作為輸入，每次呼叫處理一個控制點並輸出。在本章示例專案中，控制點外殼著色器僅僅是將資料進行直傳：
```cpp
// 外殼著色器
[domain("tri")]
[partitioning("fractional_odd")]
[outputtopology("triangle_cw")]
[outputcontrolpoints(3)]
[patchconstantfunc("PatchHS")]
HullOut HS(InputPatch patch,
uint i : SV_OutputControlPointID,
uint patchId : SV_PrimitiveID)
{
HullOut hOut;
// 直傳
hOut.PosW = patch[i].PosW;
hOut.NormalW = patch[i].NormalW;
hOut.TangentW = patch[i].TangentW;
hOut.Tex = patch[i].Tex;
return hOut;
}
```
## 域著色器
經過鑲嵌器創建出來的每個頂點都會有呼叫一次域著色器。在這裡我們將會對高度圖（即法線貼圖的Alpha通道部分）進行取樣，然後利用法向量對頂點偏移，從而完成整個位移對映的過程。
```cpp
// DisplacementMap_DS.hlsl
#include "Basic.hlsli"
[domain("tri")]
VertexOutNormalMap DS(PatchTess patchTess,
float3 bary : SV_DomainLocation,
const OutputPatch tri)
{
VertexOutNormalMap dOut;
// 對面片屬性進行插值以生成頂點
dOut.PosW = bary.x * tri[0].PosW + bary.y * tri[1].PosW + bary.z * tri[2].PosW;
dOut.NormalW = bary.x * tri[0].NormalW + bary.y * tri[1].NormalW + bary.z * tri[2].NormalW;
dOut.TangentW = bary.x * tri[0].TangentW + bary.y * tri[1].TangentW + bary.z * tri[2].TangentW;
dOut.Tex = bary.x * tri[0].Tex + bary.y * tri[1].Tex + bary.z * tri[2].Tex;
// 對插值後的法向量進行標準化
dOut.NormalW = normalize(dOut.NormalW);
//
// 位移對映
//
// 基於攝像機到頂點的距離選取mipmap等級；特別地，對每個MipInterval單位選擇下一個mipLevel
// 然後將mipLevel限制在[0, 6]
const float MipInterval = 20.0f;
float mipLevel = clamp((distance(dOut.PosW, g_EyePosW) - MipInterval) / MipInterval, 0.0f, 6.0f);
// 對高度圖取樣（存在法線貼圖的alpha通道）
float h = g_NormalMap.SampleLevel(g_Sam, dOut.Tex, mipLevel).a;
// 沿著法向量進行偏移
dOut.PosW += (g_HeightScale * (h - 1.0f)) * dOut.NormalW;
// 生成投影紋理座標
dOut.ShadowPosH = mul(float4(dOut.PosW, 1.0f), g_ShadowTransform);
// 投影到齊次裁減空間
dOut.PosH = mul(float4(dOut.PosW, 1.0f), g_ViewProj);
// 從NDC座標[-1, 1]^2變換到紋理空間座標[0, 1]^2
// u = 0.5x + 0.5
// v = -0.5y + 0.5
// ((xw, yw, zw, w) + (w, w, 0, 0)) * (0.5, -0.5, 1, 1) = ((0.5x + 0.5)w, (-0.5y + 0.5)w, zw, w)
// = (uw, vw, zw, w)
// => (u, v, z, 1)
dOut.SSAOPosH = (dOut.PosH + float4(dOut.PosH.ww, 0.0f, 0.0f)) * float4(0.5f, -0.5f, 1.0f, 1.0f);
return dOut;
}
```
這裡值得注意的是，我們需要在域著色器中自行選擇mipmap等級。畫素著色器中的方法`Texture2D::Sample`在域著色器中是不能使用的，所以我們必須使用`Texture2D::SampleLevel`方法並手工指定mipmap等級。
如果我們只是學了法線貼圖的話，到這裡基本上就瞭解的差不多了。但如果學了陰影對映和SSAO的話，那麼這裡就又多了兩個坑要填了。如果我們用了位移對映來繪製，那麼在繪製陰影的時候，也一樣要走一遍位移對映；對於SSAO來說也更是如此，如果不對SSAO寫入深度值的過程加入位移對映，那麼在正式繪製場景的時候就會因為畫素深度值不一致而被剔除，從而導致了在執行龍書的SSAO Demo時，在開啟了位移對映之後，那些擁有法線貼圖的物體都沒有被畫出來的現象：
所以接下來做的事情就是體力活了，把DisplacementMap從頂點著色器到域著色器的實現原理也要搬運到繪製陰影圖的過程，以及在SSAO繪製法向量/深度緩衝區順便寫入深度/模板緩衝區的過程中。因為程式碼上高度相似，這裡我就只是列出本章新增的著色器檔案列表：
| BasicEffect | SSAOEffect | ShadowEffect |
| ---------------------------- | ---------------------------------- | ----------------------- |
| `DisplacementMapObject_VS` | `SSAO_NormalDepth_ObjectTess_VS` | `ShadowObjectTess_VS` |
| `DisplacementMapInstance_VS` | `SSAO_NormalDepth_InstanceTess_VS` | `ShadowInstanceTess_VS` |
| `DisplacementMap_HS` | `SSAO_NormalDepth_HS` | `Shadow_DS` |
| `DisplacementMap_DS` | `SSAO_NormalDepth_DS` | `Shadow_HS` |
# C++端程式碼實現
在本章中，與位移對映直接相關的類有`BasicEffect`、`SSAOEffect`、`ShadowEffect`類，都是在前面的基礎上作的修改。然後`GameObject`的`Draw`也為此有所修改。`GameApp`類承擔了實現過程，和SSAO的相比繪製框架的變動比較小。這裡就不放出修改的部分了，讀者可以自行瀏覽。
## 網格細節問題
首先要注意的是，我們是對頂點進行位移對映。如果網格的三角形比較大，比如說只有4個頂點的地板，經過曲面細分後能生成的新頂點也比較有限，位移對映的效果就不明顯。為此，我們需要增大網格模型的頂點密集程度，意味著我們增大了高度圖的取樣點數目，以讓我們能夠逼近真實的地形。如果我們不走曲面細分，那我們就需要提前準備三角形密集的網格資料，這樣需要佔用比較多的視訊記憶體或記憶體。但即便是用了曲面細分，我們要權衡初始網格的頂點密集程度，以及經過曲面細分後的頂點密集程度如何。
在本章的示例中，我們的地面不再使用`Geometry::CreatePlain`，而是用`Geometry::CreateTerrain`來創建出更加精細的地面網格。由於一開始寫的`Geometry::CreateCylinder`它的側面三角形比較大，曲面細分後的頂點數目也不夠密集，為此我已經修改了它的實現，讓側面能夠支援分層的三角形。
# 演示
下面的動圖展示了基礎繪製、法線貼圖繪製、位移貼圖繪製下的區別，以及曲面細分前後網格的區別。
而下面的動圖則展示了不同的HeightScale下位移對映的效果。
**[DirectX11 With Windows SDK完整目錄](http://www.cnblogs.com/X-Jun/p/9028764.html)**
**[Github專案原始碼](https://github.com/MKXJun/DirectX11-With-Windows-SDK)**
**歡迎加入QQ群: 727623616 可以一起探討DX11，以及有什麼問題也可以在這裡匯