【Unity Shader】（６）凹凸映射 实现材质的 法线贴图 和 高度图（Normal Map And Height Map）
在Unity Shader中用法线贴图和高度图来实现凹凸映射
1、凹凸映射概念
凹凸映射，在不改变顶点位置的前提下，修改模型表面的法线方向，为模型提供更多的细节。
2、凹凸映射的 2 种方法
-
高度纹理（Height Map）
使用一张高度纹理来模拟表面位移（Displacement），然后得到一个修改后的法线值。此方法也叫做高度映射（Height Mapping）。
颜色越浅，越向外凸；颜色越深，越向内凹。能明确表面的凹凸信息，缺点是计算复杂。
-
法线纹理（Normal Map）
使用一张法线纹理来直接存储表面法线。此方法也叫做法线映射（Normal Mapping）。用于存储表面的法线向量，法线向量的取值范围为 [ -1 , 1] 。但是像素分量的取值范围是 [ 0 , 1]，因此需要进行以下两个映射：
-
贴图属性
-
UnpackNormal是unity内置的函数（在后面⑥定义片元着色器中会出现）。当我们把贴图纹理设置为Normal map类型时，该函数可以得到正确的法线方向。
不仅如此，Unity还可以根据不同平台来调整Normal的细节，使用UnpackNormal函数针对不同压缩格式对法线纹理进行正确采样。（目前存在DXT1、DXT5、DXT5nm的格式，DXT3以及被弃用——Tech-Artists）
可以在UnityCG.cginc之中找到UnpackNormal的具体定义：
inline fixed3 UnpackNormal(fixed4 packednormal)
{
#if defined(UNITY_NO_DXT5nm)
return packednormal.xyz * 2 - 1;
#else
return UnpackNormalmapRGorAG(packednormal);
#endif
}
代码中可以看到我们可爱的Unity并不能识别除了DXT5nm以外的贴图格式，因此翻阅官方文档然后直接Ctrl-F搜索DXT得到如下结果：
说明在unity之中可以有2个选择，包括XYZ和DXT5nm，且更改法线编码时，最好直接在Unity的项目设置中，而不是在CG Shader代码中，否则解码成本会增加。
- 根据下图可以看到，如果我们把类型设置为Normal map，将会出现
Create from Grayscale的选项。这个选项的主要作用是可以将我们的先前讲到的 高度图 转换为 法线贴图，方便我们进行法线处理。
不仅如此，Unity给予了我们两种滤波器：
①Sharp——使用Sobel滤波来生成法线
②Smooth
3、法线纹理的坐标空间
-
模型空间的法线纹理（Object-Space Normal Map）
对于先前的纹理映射和纹理贴图之中，我们可以直到，要在CG语言中实现相应效果，不可或缺的是纹理的坐标空间（是ObjectSpace还是WorldSpace？）。而对于法线纹理的坐标空间来说，有个直接点的想法是——将修改后的模型空间中的表面法线存储在一张纹理中。（这样一来就可以结合前面“纹理贴图”一样实现凹凸效果。代码部分会加以证明。）这种纹理被称为——模型空间的法线纹理（Object-Space Normal Map）。
-
模型顶点的切线空间（Tangent Space）
然而，实际上我们真正使用的是——模型顶点的切线空间（Tangent Space）。具体解释如下：
对于模型的每一个顶点，都有属于自己的切线空间，这个切线空间的原点就是顶点本身。
Z轴是顶点的法线方向 n
X轴是顶点的切线方向 t
Y轴是由顶点的切线和法线叉积而得
代码开始
在切线空间下计算
① 在Properties属性下添加Bump法线纹理的属性，以及用于控制凹凸程度的属性
Properties{
_Color("Base Color",Color) = (1,1,1,1)
_MainTex("Main Tex",2D) = "white" {}
_BumpMap("Normal Map", 2D) = "bump"{}
_BumpScale ("Bump Scale",Float) = 1.0
_Specular("Specular",Color) = (1,1,1,1)
_Gloss("Gloss",Range(8.0,256)) = 20
}
_BumpMap，默认值可以使用“Bump”——Unity内置法线纹理。
_BumpScale为0时，意味着该法线纹理不会起作用。
② 定义Tags
SubShader{
Pass{
Tags{"LightMode"="ForwardBase"}
- 声明顶点着色器和片元着色器 和 光照包含
#pragma vertex vert
#pragma pragment prag
#include "Lighting.cginc"
③ 为Properties中的属性定义类型
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;
根据上面的代码，可以看到，_BumpMap和普通纹理类似，同样也声明了一个_ST变量，这也正说明我们前面的理解是正确的——这样一来就可以结合前面“纹理贴图”一样实现凹凸效果。
④ 定义我们的a2v和v2f结构体
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float4 uv : TEXCOORD0;
float3 lightDir : TEXCOORD1;
float3 viewDir : TEXCOORD2;
};
这里的TANGENT就是我们所说的切线。Unity会像传送POSITION一样，把TANGENT所包含的每个顶点的切线方向填充到tangent之中，但是需要注意的是，和法线方向的normal不同，tangent的类型是float4，而非float3.是因为其额外多了一个tangent.w分量来决定切线空间的第三个坐标轴——副切线的方向性。
⑤ 定义顶点着色器
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);
o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));
return o;
}
⑥ 定义片元着色器
fixed4 frag(v2f i) : SV_Target {
fixed3 tangentLightDir = normalize(i.lightDir);
fixed3 tangentViewDir = normalize(i.viewDir);
fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
fixed3 tangentNormal;
tangentNormal = UnpackNormal(packedNormal);
tangentNormal.xy *= _BumpScale;
tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));
fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)), _Gloss);
return fixed4(ambient + diffuse + specular, 1.0);
}
⑦ 整体代码：
Shader "LeonShader/Shader_7_2_HeightMap"{
Properties{
_Color("Base Color",Color) = (1,1,1,1)
_MainTex("Main Tex",2D) = "white" {}
_BumpMap("Normal Map", 2D) = "bump"{}
_BumpScale("Bump Scale",Float) = 1.0
_Specular("Specular",Color) = (1,1,1,1)
_Gloss("Gloss",Range(8.0,256)) = 20
}
SubShader{
Pass {
Tags { "LightMode" = "ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float4 uv : TEXCOORD0;
float3 lightDir: TEXCOORD1;
float3 viewDir : TEXCOORD2;
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);
o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 tangentLightDir = normalize(i.lightDir);
fixed3 tangentViewDir = normalize(i.viewDir);
fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
fixed3 tangentNormal;
tangentNormal = UnpackNormal(packedNormal);
tangentNormal.xy *= _BumpScale;
tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));
fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)), _Gloss);
return fixed4(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
FallBack "Specular"
}
⑧效果图
