UnityShader12：Unity中应用法线贴图

一、关于法线贴图和切线空间

如果之前在 OpenGL 或者 directX 中成功应用过法线贴图，那么在 U3D 中实现就容易多了

切线空间：https://blog.csdn.net/Jaihk662/article/details/107917594
法线贴图：https://blog.csdn.net/Jaihk662/article/details/108102673

里面已经做过好理解且详细的介绍了，可以只关心理论部分

二、Unity中应用法线贴图

因为法线存储于切线空间中，因此有两种方法计算最终的光照效果：

顶点着色器中计算向量：将光照方向和观察方向变换到切线空间中，这样做效率高
片段着色器中计算向量：将法线信息变换到世界空间中，这样做通用性好，可以更好的做一些其它的计算

对于①代码如下，里面有注释：

Shader "Jaihk662/NewSurfaceShader"
{
    Properties
    {
        _DiffuseColor ("DiffuseColor", Color) = (1.0, 1.0, 1.0, 1.0)
        _SpecularColor ("SpecularColor", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("MainTex", 2D) = "white" {}
        _NormalMap ("NormalMap", 2D) = "bump" {}        //bump为模型自带法线信息
        _NormalScale ("NormalScale", float) = 1.0       //控制法线贴图展现的凹凸效果，0~1
        _Gloss ("Gloss", Range(8.0, 256)) = 20
    }
    SubShader
    {
        LOD 200
        PASS 
        {
            Tags { "LightMode" = "ForwardBase" }

            CGPROGRAM
            #pragma vertex vert             //声明顶点着色器的函数
            #pragma fragment frag           //声明片段着色器的函数
            #include "UnityCG.cginc"
            #include "Lighting.cginc"
 
            fixed4 _DiffuseColor;
            fixed4 _SpecularColor;
            sampler2D _MainTex;
            float _Gloss;
            sampler2D _NormalMap;
            float _NormalScale;

            float4 _NormalMap_ST;
            float4 _MainTex_ST;

            struct _2vert 
            {
                float4 vertex: POSITION;
                float3 normal: NORMAL;
                float4 tangent: TANGENT;                //targent.w表示副切线的方向
                float4 texcoord: TEXCOORD0;
            };
            struct vert2frag 
            {
                float4 pos: SV_POSITION;
                float4 uv: TEXCOORD0;                   //用一个float4同时存储两张纹理的uv坐标
                float3 lightTDir: TEXCOORD1;
                float3 viewTDir: TEXCOORD2;
            };
 
            vert2frag vert(_2vert v) 
            {
                vert2frag o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _NormalMap);
                
                TANGENT_SPACE_ROTATION;                 //内置宏TANGENT_SPACE_ROTATION可以直接帮我们计算得到切线空间变换矩阵rotation
                        //其中TANGENT_SPACE_ROTATION在UnityCG.cginc中被定义，也可以自己进行计算：
                        //float3 binormal = cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;
                        //float3x3 rotation = float3x3(v.tangent.xyz, binormal, normal)
                o.lightTDir = normalize(mul(rotation, ObjSpaceLightDir(v.vertex)));
                o.viewTDir = normalize(mul(rotation, ObjSpaceViewDir(v.vertex)));
                return o;
            }
            fixed4 frag(vert2frag i): SV_Target 
            {
                fixed3 normal = UnpackNormal(tex2D(_NormalMap, i.uv.zw));       //内置函数UnpackNormal自动帮我们将法线向量由[0,1]映射到[-1,1]
                normal.xy *= _NormalScale;
                normal.z = sqrt(1.0 - saturate(dot(normal.xy, normal.xy)));     //反正是标准化过的单位向量，可以自己由xy算出z的值

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * tex2D(_MainTex, i.uv.xy).rgb * _DiffuseColor.rgb;
                fixed3 wLightDir = normalize(_WorldSpaceLightPos0.xyz);
                fixed3 diffuse = _LightColor0.rgb * tex2D(_MainTex, i.uv.xy).rgb * _DiffuseColor.rgb * saturate(dot(normal, i.lightTDir));
                
                fixed3 reflectDir = normalize(reflect(-i.lightTDir, normal));
                fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(reflectDir, i.viewTDir)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0); 
            } 
            ENDCG
        }
    }
    FallBack "Specular"
}

一样可以很容易得看出来差距：

对于②的代码：

Shader "Jaihk662/NewSurfaceShader"
{
    Properties
    {
        _DiffuseColor ("DiffuseColor", Color) = (1.0, 1.0, 1.0, 1.0)
        _SpecularColor ("SpecularColor", Color) = (1.0, 1.0, 1.0, 1.0)
        _MainTex ("MainTex", 2D) = "white" {}
        _NormalMap ("NormalMap", 2D) = "bump" {}        //bump为模型自带法线信息
        _NormalScale ("NormalScale", float) = 1.0       //控制法线贴图展现的凹凸效果，0~1
        _Gloss ("Gloss", Range(8.0, 256)) = 20
    }
    SubShader
    {
        LOD 200
        PASS 
        {
            Tags { "LightMode" = "ForwardBase" }

            CGPROGRAM
            #pragma vertex vert             //声明顶点着色器的函数
            #pragma fragment frag           //声明片段着色器的函数
            #include "UnityCG.cginc"
            #include "Lighting.cginc"
 
            fixed4 _DiffuseColor;
            fixed4 _SpecularColor;
            sampler2D _MainTex;
            float _Gloss;
            sampler2D _NormalMap;
            float _NormalScale;

            float4 _NormalMap_ST;
            float4 _MainTex_ST;

            struct _2vert 
            {
                float4 vertex: POSITION;
                float3 normal: NORMAL;
                float4 tangent: TANGENT;                //targent.w表示副切线的方向
                float4 texcoord: TEXCOORD0;
            };
            struct vert2frag 
            {
                float4 pos: SV_POSITION;
                float4 uv: TEXCOORD0;                   //用一个float4同时存储两张纹理的uv坐标
                float4 TtoW1: TEXCOORD1;
                float4 TtoW2: TEXCOORD2;
                float4 TtoW3: TEXCOORD3;
                //float3 wPos: TEXCOORD4;               //不需要了，把wPos的三个向量xyz分别放入TtoW1、TtoW2、TtoW3的第四个参数w中
            };
 
            vert2frag vert(_2vert v) 
            {
                vert2frag o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _NormalMap);
                
                float3 wPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                float3 wNormal = UnityObjectToWorldNormal(v.normal);
                float3 wTangent = UnityObjectToWorldDir(v.tangent);
                float3 wBinormal = cross(wNormal, wTangent) * v.tangent.w;
                o.TtoW1 = float4(wTangent.x, wBinormal.x, wNormal.x, wPos.x);
                o.TtoW2 = float4(wTangent.y, wBinormal.y, wNormal.y, wPos.y);
                o.TtoW3 = float4(wTangent.z, wBinormal.z, wNormal.z, wPos.z);
                return o;
            }
            fixed4 frag(vert2frag i): SV_Target 
            {
                float3 wPos = float3(i.TtoW1.w, i.TtoW2.w, i.TtoW3.w);
                fixed3 normal = UnpackNormal(tex2D(_NormalMap, i.uv.zw));       //内置函数UnpackNormal自动帮我们将法线向量由[0,1]映射到[-1,1]
                normal.xy *= _NormalScale;
                normal.z = sqrt(1.0 - saturate(dot(normal.xy, normal.xy)));     //反正是标准化过的单位向量，可以自己由xy算出z的值
                normal = normalize(half3(dot(i.TtoW1.xyz, normal), dot(i.TtoW2.xyz, normal), dot(i.TtoW3.xyz, normal)));

                fixed3 wLightDir = normalize(UnityWorldSpaceLightDir(wPos));        //同等与normalize(_WorldSpaceLightPos0.xyz);
                fixed3 wViewDir = normalize(UnityWorldSpaceViewDir(wPos));          //同等于normalize(UnityWorldSpaceViewDir(i.wPos));
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * tex2D(_MainTex, i.uv.xy).rgb * _DiffuseColor.rgb;
                fixed3 diffuse = _LightColor0.rgb * tex2D(_MainTex, i.uv.xy).rgb * _DiffuseColor.rgb * saturate(dot(normal, wLightDir));
                
                fixed3 reflectDir = normalize(reflect(-wLightDir, normal));
                fixed3 specular = _LightColor0.rgb * _SpecularColor.rgb * pow(saturate(dot(reflectDir, wViewDir)), _Gloss);

                return fixed4(ambient + diffuse + specular, 1.0); 
            } 
            ENDCG
        }
    }
    FallBack "Specular"
}

三、法线纹理类型

在应用法线贴图前，需要正确设置法线的纹理类型：

其中对于 NormalMap，多了一个 CreateFromGrayscale 的复选框，它可以根据高度图生成对应的法线贴图，如果你导入的是高度图，那么就可以通过勾选这个选项来将其当成法线贴图对待，勾选后还会多出一些设置：

Bumpiness：控制凹凸程度
Filtering：使用哪种方式计算凹凸程度，关于高度图转法线图的算法，可以参考 Sobel 滤波

设置为 NormalMap，后，就可使用 Unity 的内置函数 UnpackNormal 来获得正确的法线方向，对于不同的纹理压缩算法它都能给出正确的纹理采样方法：

下面是它的内部实现

inline fixed3 UnpackNormalDXT5nm (fixed4 packednormal)
{
    fixed3 normal;
    normal.xy = packednormal.wy * 2 - 1;
    normal.z = sqrt(1 - saturate(dot(normal.xy, normal.xy)));
    return normal;
}

// Unpack normal as DXT5nm (1, y, 1, x) or BC5 (x, y, 0, 1)
// Note neutral texture like "bump" is (0, 0, 1, 1) to work with both plain RGB normal and DXT5nm/BC5
fixed3 UnpackNormalmapRGorAG(fixed4 packednormal)
{
    // This do the trick
   packednormal.x *= packednormal.w;

    fixed3 normal;
    normal.xy = packednormal.xy * 2 - 1;
    normal.z = sqrt(1 - saturate(dot(normal.xy, normal.xy)));
    return normal;
}
inline fixed3 UnpackNormal(fixed4 packednormal)
{
#if defined(UNITY_NO_DXT5nm)
    return packednormal.xyz * 2 - 1;
#else
    return UnpackNormalmapRGorAG(packednormal);
#endif
}

UnityShader12：Unity中应用法线贴图

一、关于法线贴图和切线空间

二、Unity中应用法线贴图

三、法线纹理类型

猜你喜欢