Normal Map

法线贴图是通过扰动法线来产生视觉上的凹凸感
法线贴图的每个像素保存了切线空间的坐标值

如图所示，T ,B , N构成了切线空间，法线贴图中记录的就是该空间中的坐标
然而我们的光照计算是在世界空间进行的，所以我们需要知道该点在世界空间中的法线坐标。

如图所示：假设三角形的三个点为$V_0$ , $V_1$ , $V_2$.对应的纹理坐标为($u_0 , v_0$) , ($u_1 , v_1$) , $(u_2 , v_2)$
$\therefore \overrightarrow{e_0} = V_1 - V_0$
$\overrightarrow{e_1} = V_2 - V_0$

$(\Delta{u_0} , \Delta{v_0}) = (u_1 - u_0 , v_1 - v_0)$
$(\Delta{u_1} , \Delta{v_1}) = (u_2 - u_0 , v_2 - v_0)$

$\because \overrightarrow{e_0} = \Delta{u_0} * \overrightarrow{T} + \Delta{v_0} * \overrightarrow{B}$
$\overrightarrow{e_1} = \Delta{u_1} * \overrightarrow{T} + \Delta{v_1} * \overrightarrow{B}$

$\therefore$

$$\begin {bmatrix} \overrightarrow{e_0}.x & \overrightarrow{e_0}.y & \overrightarrow{e_0}.z \\ \overrightarrow{e_1}.x & \overrightarrow{e_1}.y & \overrightarrow{e_1}.z \end {bmatrix}= \begin {bmatrix} \Delta{u_0} & \Delta{v_0} \\ \Delta{u_1} & \Delta{v_1} \end{bmatrix} \begin{bmatrix} \overrightarrow{T}.x & \overrightarrow{T}.y & \overrightarrow{T}.z \\ \overrightarrow{B}.x & \overrightarrow{B}.y & \overrightarrow{B}.z \end{bmatrix}$$

$$\begin{bmatrix} \overrightarrow{T}.x & \overrightarrow{T}.y & \overrightarrow{T}.z \\ \overrightarrow{B}.x & \overrightarrow{B}.y & \overrightarrow{B}.z \end{bmatrix} = \begin {bmatrix} \Delta{u_0} & \Delta{v_0} \\ \Delta{u_1} & \Delta{v_1} \end{bmatrix}^{-1} \begin {bmatrix} \overrightarrow{e_0}.x & \overrightarrow{e_0}.y & \overrightarrow{e_0}.z \\ \overrightarrow{e_1}.x & \overrightarrow{e_1}.y & \overrightarrow{e_1}.z \end {bmatrix}$$

$\because$

$$\begin {bmatrix} \Delta{u_0} & \Delta{v_0} \\ \Delta{u_1} & \Delta{v_1} \end{bmatrix}^{-1} = \frac{1}{\Delta{u_0}\Delta{v_1} - \Delta{v_0}\Delta{u_1}} \begin {bmatrix} \Delta{v_1} & -\Delta{v_0} \\ -\Delta{u_1} & \Delta{u_0} \end{bmatrix}$$

$\therefore$

$$\begin{bmatrix} \overrightarrow{T}.x & \overrightarrow{T}.y & \overrightarrow{T}.z \\ \overrightarrow{B}.x & \overrightarrow{B}.y & \overrightarrow{B}.z \end{bmatrix} = \frac{1}{\Delta{u_0}\Delta{v_1} - \Delta{v_0}\Delta{u_1}} \begin {bmatrix} \Delta{v_1} & -\Delta{v_0} \\ -\Delta{u_1} & \Delta{u_0} \end{bmatrix} \begin {bmatrix} \overrightarrow{e_0}.x & \overrightarrow{e_0}.y & \overrightarrow{e_0}.z \\ \overrightarrow{e_1}.x & \overrightarrow{e_1}.y & \overrightarrow{e_1}.z \end {bmatrix}$$

通常我们会直接传入每个顶点的法线和切线，可以方便的得到每个顶点在世界空间中的法线坐标和切线坐标，以此计算出TBN为基的坐标系在世界空间的坐标

$N$为该顶点法线在世界空间中的坐标，其切线$T^\prime=T-(N\cdot T)N$，这样可以保证$N$与$T^\prime$是正交的
因此$B = N \times T^\prime$

因此我们得到以切线坐标系的三个轴在世界空间中的坐标，因此可以构造一个矩阵，用于将Normal Map中定义于切线空间中的法线坐标变换到世界空间，以得到我们想要的法线坐标

$$\begin{bmatrix} \overrightarrow{T}.x & \overrightarrow{T}.y & \overrightarrow{T}.z \\ \overrightarrow{B}.x & \overrightarrow{B}.y & \overrightarrow{B}.z \\ \overrightarrow{N}.x & \overrightarrow{N}.y & \overrightarrow{N}.z \end{bmatrix}$$

float3 NormalSampleToWorldSpace(float3 NormalMapSample , float3 unitNormalW , float3 tangentW)
{
    // 将范围从[0 , 1]变换到[-1 , 1]
    float3 normalT = 2 * NormalMapSample - 1;

    // 计算正交基,原因在上面说了
    float3 N = unitNormalN;
    float3 T = normalize(tangentW - dot(N , tangentW)*tangentW);
    float3 B = cross(N , T);

    float3x3 TBN = float3x3(T , B , N);

    // 被normal map扰动后的法线
    float3 bumpNormal = mul(normalT , TBN);
}

我们可以在Vertex Shader中计算出该点法线和切线在世界空间中的坐标

cbuffer Transform
{
    float4x4 World;
    float4x4 WorldInvTranspose;
    float4x4 WorldViewProj;
    float4x4 TexTranspose;
};
struct VertexIn
{
float3 PosL     :   POSITION;
float3 NormalL  :   NORMAL;
float3 TangentL :   TANGENT;
float2 Tex      :   TEXCOORD;
...
};

struct VertexOut
{
float4 PosH     :   SV_POSITION;
float3 PosW     :   POSITION;
float3 NormalW  :   NORMAL;
float3 TangentW :   TANGENG;
float2 Tex      :   TEXCOORD;
...
}

VertexOut main(VertexIn input)
{
    PosH = mul(float4(input.PosL , 1.0f) , WorldViewProj);
    PosW = mul(float4(input.PosL , 1.0f) , World).xyz;
    NormalW = mul(input.NormalL , (float3x3)WorldInvTranspose);
    TangentW = mul(input.TangentL , (float3x3)World);
    ...
}

Pixel Shader

Texture2D NormalMap;

float4 main(VertexOut in) : SV_TANGENT
{
    float3 normal = normalize(in.NormalW);

    float3 normalMapSample = NormalMap.Sample(SampleLinear , in.Tex).xyz;
    float3 BumpNormal = NormalSampleToWorldSpace(normalSample , normal , in.TangentW);
}