前言
本篇将展示如何使用DX12 实现normal map
源代码chenglixue/D3D12 at normalmap
要点
-
定义：法线贴图基于凹凸贴图衍生出来的。纹理贴图中的纹素是RGB颜色值，而法线贴图中的纹素是法向量的坐标
-
用途：计算光照，在纹理图中存储法向量，再将其带入光照计算。在避免高模建模的情况下也可以达到理想的效果
压缩和存储法线图
由于纹理图的图像格式范围一般是[0,255]，而归一化法向量的范围是[-1,1]，因此将法向量存于纹理图中需要进行变换
- 法向量转换为图像格式：：\(\large f(x) = (0.5x + 0.5) * 255\)
- 图像格式转换为法向量：\(\large f^{-1}(x) = \frac{2x}{255} - 1\)
切线空间
- 切线空间是一个3d纹理坐标系，xy轴分别对应uv轴，z轴为法向量,且这三条轴两两相切。称T轴为切线(tangent)、B轴为副切线( binormal)、N轴为法线
TBN矩阵
一般来说计算光照是在世界空间中进行计算，但法线图中的法向量定义在切线空间，TBN矩阵定义了将纹理从切线空间转换至世界空间的过程
TBN矩阵仅仅关注向量的变化，因此这是个\(3\times3\)的矩阵
从uv空间到局部空间
-
设纹理坐标分别为\(\large (u_0, v_0),(u_1, v_1),(u_2, v_2)\)的顶点\(\large v_0, v_1, v_2\)在切线空间中定义了一个三角形，\(\large e_0 = (\Delta_{u0} , \Delta v_0) = (u_1 - u_0, v_1 - v_0)\),\(\large e_1 = (\Delta_{u1} , \Delta v_1) = (u_2 - u_0, v_2 - v_0)\)
-
到局部空间的坐标变化
\(\large \left[\begin {array} {cc} e_{0,x} & e_{0,y} & e_{0,z} \\ \large e_{1,x} & e_{1,y} & e_{1,z} \end {array} \right] = \left[\begin {array} {cc} \Delta_{u_0} & \Delta_{v_0} \\ \large \Delta_{u_1} & \Delta_{v_1} \end {array} \right] \left[\begin {array} {cc} T_{x} & T_{y} & T_{z} \\ \large B_{x} & B_{y} & B_{z} \end {array} \right]\)
-
对uv矩阵求逆
\(\large \left[\begin {array} {cc} T_{x} & T_{y} & T_{z} \\ \large B_{x} & B_{y} & B_{z} \end {array} \right] = \large \left[\begin {array} {cc} \Delta_{u_0} & \Delta_{v_0} \\ \large \Delta_{u_1} & \Delta_{v_1} \end {array} \right]^{-1} \large \left[\begin {array} {cc} e_{0,x} & e_{0,y} & e_{0,z} \\ \large e_{1,x} & e_{1,y} & e_{1,z} \end {array} \right] \large = \frac{1}{\Delta_{u_0} \Delta{v_1} - \Delta{v_0}\Delta{u_1}} \left[\begin {array} {cc} \Delta_{v_1} & -\Delta_{v_0} \\ \large -\Delta{u_1} & \Delta_{u_0} \end {array} \right] \left[\begin {array} {cc} e_{0,x} & e_{0,y} & e_{0,z} \\ \large e_{1,x} & e_{1,y} & e_{1,z} \end {array} \right]\)
这里用到了逆矩阵性质：矩阵\(A = \left[\begin {array} {cc} a & b \\ \large c & d \end {array} \right]\)，有\(\large A^{-1} = \frac{1}{ad - bc} \left[\begin {array} {cc} d & -b \\ \large -c & a \end {array} \right]\)
平均化法线
- 大多数情况三角形和三角形之间都会共享顶点。对于不在一个平面的三角形，需要对他们的法线进行平均化达到更加柔和的效果。但对于平行的三角形则无需平均化
流程
- 美术创造预定的法线图并将其存为图像文件
- D3D初始化时提取该图像文件
- 计算每一个三角形的切向量T(平均化)
- 在VS中，将顶点的法线和切向量变换至世界空间，并将结果输出至PS
- 通过插值切向量和法向量来构建三角形面每个像素点处的TBN基，再将该TBN基从切线空间变换至世界空间
实现
将normal map纹理贴图绑定至管线的步骤这里就省略咯，和前面纹理贴图中导入纹理一摸一样的
inputlayout
计算TBN需要normal 和 tangent，因此需要在初始化阶段导入模型的normal 和 tangent
m_inputLayout =
{
{ "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D12_INPUT_CLASSIFICATION_PER_VERTEX_DATA, 0 },
{ "NORMAL", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D12_INPUT_CLASSIFICATION_PER_VERTEX_DATA, 0 },
{ "TEXCOORD", 0, DXGI_FORMAT_R32G32_FLOAT, 0, 24, D3D12_INPUT_CLASSIFICATION_PER_VERTEX_DATA, 0 },
{ "TANGENT", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 32, D3D12_INPUT_CLASSIFICATION_PER_VERTEX_DATA, 0 }
};
shader
struct VSInput
{
float3 position : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD;
float3 tangent : TANGENT;
};
struct PSInput
{
float4 positionH : SV_POSITION;
float3 positionW : POSITION;
float3 normalW : NORMAL;
float3 tangentW : TANGENT;
float2 uv : TEXCOORD;
};
Texture2D g_normalmapTexture : register(t2, space0
PSInput main(VSInput input)
{
PSInput result;
float4 positionW = mul(float4(input.position, 1.f), world);
result.positionW = positionW.xyz;
result.positionH = mul(positionW, viewProjection);
// normal tangent变换至世界空间
result.normalW = mul(input.normal, (float3x3)world);
result.tangentW = mul(input.tangent, (float3x3) world);
result.uv = input.uv;
return result;
}
float4 main(PSInput input) : SV_TARGET
{
float4 textureDiffuseAlbedo = g_diffuseTexture.Sample(g_SamperAnisotropyWrap, input.uv);
float4 textureSpecularAlbedo = g_specularTexture.Sample(g_SamperAnisotropyWrap, input.uv);
// 采样 normalmap texture
float4 normalMapSample = g_normalmapTexture.Sample(g_SamperAnisotropyWrap, input.uv);
// 从uv空间变换至世界空间
float3 averageNormalW = normalmapToWolrd(normalMapSample.rgb, input.normalW, input.tangentW);
input.normalW = normalize(input.normalW);
// 后面光照的计算法线都用averageNormalW
float3 toEyeDirW = eyeWorldPosition - averageNormalW;
float toEyeLength = length(toEyeDirW);
toEyeDirW = normalize(toEyeDirW);
Material material = { textureDiffuseAlbedo, textureSpecularAlbedo, ambientAlbedo, specualrShiness };
float4 resultLightColor = CalcLightColor(lights, material, averageNormalW, toEyeDirW, input.positionW);
resultLightColor.a = textureDiffuseAlbedo.a;
return resultLightColor;
}
// 将法线贴图从uv空间变换至世界空间
float3 normalmapToWolrd(float3 normalmap, float3 normalizeNormalW, float3 tangentW)
{
// [0,1] -> [-1,1]
float3 normalConvert = 2.f * normalmap - 1.f;
// build TBN
float3 N = normalizeNormalW;
// because after lerp T and N may not be orthogonal vectors
float3 T = normalize(tangentW - dot(N, tangentW) * N);
float3 B = cross(N, T);
float3x3 TBN = float3x3(T, B, N);
float3 result = mul(normalConvert, TBN);
return result;
}
“float3 T = normalize(tangentW - dot(N, tangentW) * N);”这里的原因是从uv空间变换至世界空间，normal 和 tangent可能不再互切
输出
