UnityShader-使用切线空间下的法线贴图_unlit shader使用法线贴图

法线贴图

• 在游戏中，如果墙面，草地这些，如果从模型的角度去展现凹凸感，那模型的细节难度会增加不少，同时而来的也是顶点的增加，这样是及其浪费的。我们通常使用法线贴图，使得模型随着环境或者光照的改变增加这种凹凸感，让我们可以用一个简单的面片也能展现出细节丰富的视觉效果

为什么使用切线空间下的法线纹理

• 自由度更高，当一张纹理可以用在不同的模型上时，可以只使用一套法线纹理，但是模型空间下，必须对每一个模型都创建一套对应的法线纹理
• 可压缩，切线空间下法线纹理的z方向总是正方向，因此我们可以通过xy轴进行点积，之后开平方求出z轴的方向。每个像素只需要存储两个分量。

法线贴图的运行原理

• 了解一点shader光照模型的同学应该对模型法线的作用并不陌生，我们在大多光照模型中都使用到模型的法线，与视角方向或者光线防线进行计算，从而得到一个可以随视角或者光线变化而变化的展示细节。法线贴图是为了让更少顶点的模型展现出更多的细节，那法线贴图的作用就像模型的法线一样，我们可以用法线贴图提供的法线，带入到光照模型中进行采样，与原有的颜色进行混合，最终得到一个细节丰富的模型效果。

效果图

• 原图
  

• 使用法线贴图增强后的效果
  

shader的实现步骤

• 考虑到贴图的缩放和平移因素，我们使用一个float4变量去接受缩放和平移后的贴图及法线贴图的uv信息

o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
1
2

• 在世界空间下，求出当前切线空间转换矩阵，由切线向量，副法线向量，法线组成

//求出世界空间下的法线向量
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
//求出世界空间下的切线向量  
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
//副法线向量由法线和切线的叉乘得到，切线的w分量决定副法线的方向性
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
// 切线空间转换矩阵
float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);
1
2
3
4
5
6
7
8

• 将视线方向与光照方向都转换到切线空间下，当然这一步也是要根据需求来，不同的光照模型使用的数据不同。比如 Lambert 模型只需要光线方向即可，我们这里使用的是 Blinn-Phong 模型，同时需要视线方向和光照方向。

o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));
1
2

• 接下来，我们在片元着色器中根据法线贴图，得到法线向量

//法线的范围是-1到1，但是纹理只能存储0到1之间的范围，
//因此我们在生成法线贴图的时候会将法线映射到0-1中，
//UnpackNormal函数就是将0-1范围重新映射到-1到1之间
//如果这个概念不懂的话建议了解一下法线生成的原理
tangentNormal = UnpackNormal(packedNormal);
//法线强度缩放
tangentNormal.xy *= _BumpScale;
//由于法线向量本身就是经过归一化的，所以第三个轴的分量可以由以下公式得到，
//重点可以理解一下向量点积的意义就能够明白
//下面这行代码在UnpackNormal函数中已经实现，但是需要看看，了解一下原理
//tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
1
2
3
4
5
6
7
8
9
10
11

• 将切线空间下的法线，视角，光照带入到 Blinn-Phong 模型中，最终结算颜色

//贴图本身颜色
fixed3 albedo = tex2D(_MainTex, i.uv).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);
1
2
3
4
5
6
7
8
9
10
11

• 完整代码如下

Shader "ZW/Normal Map In Tangent Space" {
	Properties {
		_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"
			
			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"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77