法线贴图的计算方式

光照效果相关文章目录
大家好，我是阿赵。
之前介绍了光照模型相关的一些知识，包括了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 100

        Pass
        {
			cull off
            CGPROGRAM
            #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到1
				normal = 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);
				//计算法线贴图的UV
				half2 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 supported
            normal.xy *= bumpScale;
        #endif
        return normal;
    #else
        // This do the trick
        packednormal.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 supported
            normal.xy *= bumpScale;
        #endif
        normal.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模拟光照，等等。
到了这里，是不是稍微感觉到，自己实现光照模型的好处了？通过各种的组合，我们就能很自由的实现各种不同的效果，甚至我们还可以不按照标准的计算方式，自己提取一部分的值来做扭曲，做出很多奇怪的效果。