大家好，我是阿赵。
之前介绍了光照模型相关的一些知识，包括了MatCap、动态阴影，都是为了模拟模型的光照效果的。这次打算讲一下法线贴图的计算原理。
说到法线贴图，估计大家都听说过，都知道法线贴图其实就是用来模拟模型上的凹凸细节的。
至于怎样使用法线贴图，估计也都知道，找个支持法线贴图的shader，把贴图放上材质球就行了。既然都知道的东西，我为什么还单独拿出来说呢？那是因为，我们要写自己的效果，包括光照模型都是要自己去实现的，法线作为一个计算角度的重要组成部分，他的作用并不止是做个简单的凹凸那么简单。我们如果要做复合的效果，也要自己去实现法线贴图的计算。

法线贴图

一、完整的代码：

Shader "azhao/NormalShader"
{Properties{_MainTex ("Texture", 2D) = "white" {}_NormalTex("Normal Tex", 2D) = "black"{}_normalScale("normalScale", Range(-1 , 1)) = 0_specColor("SpecColor",Color) = (1,1,1,1)_shininess("shininess", Range(1 , 100)) = 1_specIntensity("specIntensity",Range(0,1)) = 1_ambientIntensity("ambientIntensity",Range(0,1)) = 1}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{cull offCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal:NORMAL;float3 tangent:TANGENT;};struct v2f{                float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float3 worldPos : TEXCOORD1;//为了构建TBN矩阵，所以要获取下面这三个值float3 worldNormal : TEXCOORD2;float3 worldTangent :TEXCOORD3;float3 worldBitangent : TEXCOORD4;};sampler2D _MainTex;float4 _MainTex_ST;sampler2D _NormalTex;float4 _NormalTex_ST;float _normalScale;float4 _specColor;float _shininess;float _specIntensity;float _ambientIntensity;//简化版的转换法线并缩放的方法half3 UnpackScaleNormal(half4 packednormal, half bumpScale){half3 normal;//由于法线贴图代表的颜色是0到1，而法线向量的范围是-1到1//所以通过*2-1,把色值范围转换到-1到1normal = packednormal * 2 - 1;//对法线进行缩放normal.xy *= bumpScale;//向量标准化normal = normalize(normal);return normal;}//获取HalfLambert漫反射值float GetHalfLambertDiffuse(float3 worldPos, float3 worldNormal){float3 lightDir = UnityWorldSpaceLightDir(worldPos);float NDotL = saturate(dot(worldNormal, lightDir));float halfVal = NDotL * 0.5 + 0.5;return halfVal;}//获取BlinnPhong高光float GetBlinnPhongSpec(float3 worldPos, float3 worldNormal){float3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));float3 halfDir = normalize((viewDir + _WorldSpaceLightPos0.xyz));float specDir = max(dot(normalize(worldNormal), halfDir), 0);float specVal = pow(specDir, _shininess);return specVal;}v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldTangent = UnityObjectToWorldDir(v.tangent);o.worldBitangent = cross(o.worldNormal, o.worldTangent);return o;}half4 frag (v2f i) : SV_Target{//采样漫反射贴图的颜色half4 col = tex2D(_MainTex, i.uv);//计算法线贴图的UVhalf2 normalUV = i.uv * _NormalTex_ST.xy + _NormalTex_ST.zw;//采样法线贴图的颜色half4 normalCol = tex2D(_NormalTex, normalUV);//得到切线空间的法线方向half3 normalVal = UnpackScaleNormal(normalCol, _normalScale).rgb;//构建TBN矩阵float3 tanToWorld0 = float3(i.worldTangent.x, i.worldBitangent.x, i.worldNormal.x);float3 tanToWorld1 = float3(i.worldTangent.y, i.worldBitangent.y, i.worldNormal.y);float3 tanToWorld2 = float3(i.worldTangent.z, i.worldBitangent.z, i.worldNormal.z);//通过切线空间的法线方向和TBN矩阵，得出法线贴图代表的物体世界空间的法线方向float3 worldNormal = float3(dot(tanToWorld0, normalVal), dot(tanToWorld1, normalVal), dot(tanToWorld2, normalVal));//用法线贴图的世界空间法线，算漫反射half diffuseVal = GetHalfLambertDiffuse(i.worldPos, worldNormal);//用法线贴图的世界空间法线，算高光角度half3 specCol = _specColor * GetBlinnPhongSpec(i.worldPos, worldNormal)*_specIntensity;//最终颜色 = 环境色+漫反射颜色+高光颜色half3 finalCol = UNITY_LIGHTMODEL_AMBIENT* _ambientIntensity +col.rgb*diffuseVal + specCol;return half4(finalCol,1);}ENDCG}}
}

通过调节参数，可以做出不同凹凸方向和高光的效果。

二、说明

1、法线贴图是什么

一般来说，法线贴图就是这么一张偏蓝色的贴图。为什么法线贴图偏蓝色，简单来说，这是因为如果一个法线是垂直于物体表面的，那么他的法线向量是(0,0,1)，转换到rgb颜色之后，b通道的颜色会比较大。
然后还有一个需要注意的地方，法线方向的取值范围是-1到1的，但如果转换成贴图，颜色的取值是0-255的，可以理解成是0-1。所以我们在保存法线贴图的时候，需要把法线向量加1，再除以2，从而把-1到1的范围变成0-1。所以在使用法线贴图的时候，有一个UnpackNormal的过程，其实就是把贴图颜色乘以2再减1，让法线贴图的颜色值从0到1转换回-1到1。

2、切线空间的法线贴图

看完上面的介绍后，可能大家会有个疑问了，既然向量是有方向的，那么如果模型本身发生了旋转，那么它的法线方向是不是就变了？答案是，真的会变的。
那么为什么从来没有出现过，当模型被旋转之后，需要重新生成法线贴图的情况呢？
这是因为，我们导出法线贴图时，使用的坐标系并不是世界坐标系，而是模型的切线坐标系。切线是平行于物体表面的，如果用切线作为坐标系来记录法线向量方向，比如某个法线是一直垂直于物体表面的，那么就算物体怎样旋转，它的世界坐标系的法线方向怎样改变，但相对于切线本身的方向是不会变的。其实模型的顶点法线向量，也都是切线坐标系下的法线向量。
所以，当我们使用法线方向的时候，需要先把模型局部的法线方向转换成世界坐标系的法线方向，才能用来参与计算。

3、TBN矩阵

TBN矩阵，之前也有介绍过，里面主要用到了一个binormal 的感念。binormal 是通过法线和切线叉乘得到的，通过叉乘的几何含义，我们可以知道，实际上binormal 是一条垂直法线和切线的向量，它和切线可以定义一个和顶点相切的面。binormal 和bitangent，其实都是同一个东西。
TBN(Tangent,Binormal,Normal)矩阵一般是用于把切线空间坐标转换到世界空间坐标。这里用TBN矩阵把法线贴图里面读取到的切线空间的法线向量，转换到了世界空间。

4、UnpackScaleNormal方法

之前介绍过，需要使用法线贴图，要把颜色值乘以2再减一。这就是UnpackNormal的过程。
UnpackScaleNormal是UnityStandardUtils.cginc自带有的方法，它的源码是这样的：

half3 UnpackScaleNormalRGorAG(half4 packednormal, half bumpScale)
{#if defined(UNITY_NO_DXT5nm)half3 normal = packednormal.xyz * 2 - 1;#if (SHADER_TARGET >= 30)// SM2.0: instruction count limitation// SM2.0: normal scaler is not supportednormal.xy *= bumpScale;#endifreturn normal;#else// This do the trickpackednormal.x *= packednormal.w;half3 normal;normal.xy = (packednormal.xy * 2 - 1);#if (SHADER_TARGET >= 30)// SM2.0: instruction count limitation// SM2.0: normal scaler is not supportednormal.xy *= bumpScale;#endifnormal.z = sqrt(1.0 - saturate(dot(normal.xy, normal.xy)));return normal;#endif
}half3 UnpackScaleNormal(half4 packednormal, half bumpScale)
{return UnpackScaleNormalRGorAG(packednormal, bumpScale);
}

只要#include "UnityStandardUtils.cginc"就能使用这个方法。
但我个人的习惯是，为了减少shader变体的产生，一般是避免使用宏的，而且只是为了计算一个法线的缩放值，我觉得没有必要包含整个UnityStandardUtils.cginc，只需要自己实现一个把法线的xy轴乘以缩放，再归一化就行了。

5、套用各种光照模型

从代码可以看到，我直接复制了之前介绍光照模型时的HalfLambert漫反射模型和BlinnPhong高光模型，完全不需要改，直接套用就行了，最终还是通过环境色、漫反射颜色、高光颜色来组成了模型最终显示的颜色。
同理，我们也可以套用其他的漫反射模型、高光模型、甚至NdotV边缘光、MatCap模拟光照，等等。
到了这里，是不是稍微感觉到，自己实现光照模型的好处了？通过各种的组合，我们就能很自由的实现各种不同的效果，甚至我们还可以不按照标准的计算方式，自己提取一部分的值来做扭曲，做出很多奇怪的效果。