Unity3d Shader篇（八）— 切线空间法线纹理映射

最新推荐文章于 2024-07-16 17:45:51 发布

墨染青枫

最新推荐文章于 2024-07-16 17:45:51 发布

阅读量1.8k

点赞数 49

分类专栏： # Shader 文章标签： unity 游戏引擎 3d 着色器

本文链接：https://blog.csdn.net/qq_34697930/article/details/136152908

版权

Shader 专栏收录该内容

16 篇文章 9 订阅

订阅专栏

文章目录

前言
一、什么是法线纹理映射？
二、使用步骤
三、效果
四、总结
- 使用场景

前言

法线纹理映射（Normal Mapping）是一种在计算机图形学中常用的技术，它可以在不增加几何体细节的情况下，为物体表面增加凹凸的视觉效果

一、什么是法线纹理映射？

1. 法线纹理映射工作原理

法线纹理映射（Normal Mapping）是一种在计算机图形学中常用的技术，它可以在不增加几何体细节的情况下，为物体表面增加凹凸的视觉效果。法线纹理映射的原理是，通过使用一张法线贴图（Normal Map），来修改物体表面的法线方向，从而影响光照计算，产生高低起伏的光影变化。

2. 什么是切线空间？

切线空间（Tangent Space）是一种相对于物体表面的局部坐标系，它的原点是物体表面上的某个顶点，它的三个坐标轴分别是切线方向（Tangent）、副切线方向（Binormal）和法线方向（Normal）。切线空间的好处是，它可以让法线贴图在不同的物体表面上通用，而不需要考虑物体的旋转、缩放和变形等变换。

在这里插入图片描述

3. 切线空间法线纹理映射的优缺点

优点

自由度高：可以贴到不同的平面上，例如一个立方体的六面都可以贴上同一张切线空间法线贴图。
可以进行UV动画：通过移动法线贴图的UV坐标，可以实现凹凸移动的效果。
可以重用：切线空间法线贴图存储的是相对法线信息，因此换个网格（或者网格变形）应用该贴图，也能得到合理的结果。
可以被压缩：切线空间法线贴图的Z分量可以由XY分量推导出来，因此可以用两个通道来存储法线信息，节省空间。

缺点

纹理坐标的缝合处和尖锐的边角处突变缝隙比较多，不够平滑，但是这个误差一般都在人眼可接受的范围内。
需要计算切线空间的基向量（T, B, N），并在顶点着色器中将光源方向和视角方向从世界空间或者模型空间转换到切线空间，增加了计算量。

4. 切线空间下法线映射例图

在这里插入图片描述
切线空间下法线映射图看起来几乎全部都是蓝色的，这是因为，每个法线方向所在的坐标空间是不一样的，即是表面每点各自的切线空间。切线空间是一种相对于物体表面的局部坐标系，它的原点是物体表面上的某个顶点，它的三个坐标轴分别是切线方向（Tangent）、副切线方向（Binormal）和法线方向（Normal）。

切线空间下法线映射图的RGB通道分别对应了切线空间的XYZ轴，也就是说，红色通道表示切线方向的分量，绿色通道表示副切线方向的分量，蓝色通道表示法线方向的分量。由于法线一般都是指向表面外侧，也就是切线空间的Z轴正方向，因此蓝色通道的值一般都比较大，接近于1.0，而红色和绿色通道的值则根据法线的偏移而变化，一般在0.0到1.0之间。因此，切线空间下法线映射图的颜色会偏向于蓝色，而且越是平坦的表面，越是纯蓝色，越是凹凸的表面，越是有其他颜色的混合。

二、使用步骤

1. Shader 属性定义

// 定义属性
Properties
{
   _MainTex("MainTex",2D)="white"{}
   _BumpMap("Normal Map",2D)="bump"{}
   _BumpScale("BumpScale",float)=1
   _Diffuse("Diffuse",Color)=(1,1,1,1) // 漫反射颜色属性，默认白色
   _Specular("Specular",Color)=(1,1,1,1) // 高光颜色属性，默认白色
   _Gloss("Gloss",Range(1,256))=5 // 高光反射系数
}

这段代码定义了Shader的属性，其中：
_MainTex：这是主纹理，它的默认值是白色。
_BumpMap：这是法线贴图，它用来存储物体表面的法线方向，从而增加凹凸的视觉效果。
_BumpScale：这是法线贴图的缩放系数，它用来控制法线贴图的强度，越大则凹凸效果越明显。
_Diffuse：这是漫反射颜色属性，它用来表示物体表面的本身颜色，它会和光照颜色相乘，产生漫反射效果。
_Specular：这是高光颜色属性，它用来表示物体表面的反射颜色，它会和光照颜色相乘，产生高光反射效果。
_Gloss：这是高光反射系数，它用来表示物体表面的光滑程度，它的范围是1到256，越大则高光反射越集中，越小则高光反射越分散。

2. SubShader 设置

SubShader
{
    Tags
    {
        "RenderType" = "Opaque" // 渲染类型为不透明
    }
    
    LOD 100 // 细节级别
}

SubShader 定义了一组渲染设置，包括标签和细节级别。在这里，我们将渲染类型标签设置为 “Opaque”，表示物体是不透明的。

3. 渲染 Pass

Pass
{
    CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag

    #include "UnityCG.cginc"
    #include "Lighting.cginc"
}

这里开始了渲染 Pass 部分。在这里，我们使用了 CGPROGRAM 指令来声明顶点着色器和片元着色器函数。#pragma vertex vert 和 #pragma fragment frag 分别指定了顶点着色器函数和片元着色器函数的名称。

然后，我们包含了 UnityCG.cginc 和 Lighting.cginc，它们提供了许多有用的函数和宏，用于简化编写 Shader。

4. 定义结构体和顶点着色器函数

// 定义结构体：从顶点到片元的数据传递
struct v2f
{
    float4 vertex : SV_POSITION; // 顶点位置
    fixed3 lightDir : TEXCOORD0; // 光源方向
    fixed3 viewDir : TEXCOORD1; // 视角方向
    float2 uv:TEXCOORD2;
    float2 normalUv:TEXCOORD3;
};

// 顶点着色器函数
v2f vert(appdata_tan v)
{
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex); // 顶点位置变换到裁剪空间

    //让外面的属性可以影响到uv
    //o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
    //uv计算简化函数
    o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);

    o.normalUv = TRANSFORM_TEX(v.texcoord, _BumpMap);


    //求副切线向量
    //float3 binormal = cross(normalize(v.vertex), normalize(v.tangent.xyz)) * v.tangent.w;
    //求切线矩阵
    //float3x3 rotation = float3x3(v.tangent.xyz, binormal, v.normal);
    //上面代码的简化 求副切线向量
    TANGENT_SPACE_ROTATION;

    //求切线空间光源方向及视角方向
    //rotation是TANGENT_SPACE_ROTATION返回的切线空间矩阵
    //ObjSpaceLightDir将光源的时间坐标系转换成模型空间坐标系，然后乘rotation矩阵，转成切线坐标系
    o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
    o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;


    return o;
}

顶点着色器的输入是一个结构体 appdata_tan ，它包含了顶点的位置、法线、切线和贴图坐标等信息。顶点着色器的输出是一个结构体 v2f ，它包含了顶点的裁剪空间位置、贴图坐标、法线贴图坐标、切线空间光源方向和视角方向等信息。

顶点着色器的主要逻辑是：

使用 UnityObjectToClipPos 函数，将顶点的位置从对象空间变换到裁剪空间，这是渲染管线的必要步骤。裁剪空间是一个标准化的立方体，它定义了哪些顶点是可见的，哪些顶点是被裁剪掉的。
使用 TRANSFORM_TEX 函数，将顶点的贴图坐标根据 _MainTex_ST 的值进行缩放和偏移，这是为了让贴图的属性可以影响到贴图的显示。_MainTex_ST 是一个四维向量，它包含了贴图的缩放和偏移参数。
使用 TRANSFORM_TEX 函数，将顶点的贴图坐标根据 _BumpMap_ST 的值进行缩放和偏移，这是为了让法线贴图的属性可以影响到法线贴图的显示。_BumpMap_ST 是一个四维向量，它包含了法线贴图的缩放和偏移参数。
使用 TANGENT_SPACE_ROTATION 宏，求出切线空间的旋转矩阵。切线空间是一个局部坐标系，它与顶点的切线、法线和副切线（切线和法线的叉积）对齐。切线空间的旋转矩阵是一个 3x3 的矩阵，它由顶点的切线、副切线和法线组成。
使用 ObjSpaceLightDir 函数，将光源的方向从世界空间变换到对象空间，然后乘以切线空间的旋转矩阵，得到切线空间光源方向。这是为了计算光照效果所需的光源方向向量。
使用 ObjSpaceViewDir 函数，将视角的方向从世界空间变换到对象空间，然后乘以切线空间的旋转矩阵，得到切线空间视角方向。这是为了计算光照效果所需的视角方向向量

5. 片元着色器函数

// 片段着色器函数
fixed4 frag(v2f i) : SV_Target
{
    //获取切线空间下的光源方向
    fixed3 tangentLightDir = normalize(i.lightDir);
    //获取切线空间下的视角方向
    fixed3 tangentViewDir = normalize(i.viewDir);
    //法线贴图采样
    fixed4 packedNormal = tex2D(_BumpMap, i.normalUv);

    //把0,1还原成-1,1
    //没有把textureType设置成normalMap属性
    //fixed3 tangentNormal;
    //tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale;
    //tangentNormal.z = sqrt(1 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

    //把textureType设置成normalMap属性
    //UnpackNormal解压packedNormal
    fixed3 tangentNormal=UnpackNormal(packedNormal);
    tangentNormal.xy *=  _BumpScale;
                
    // 获取环境光
    fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

    //纹理采样
    fixed3 albedo = tex2D(_MainTex, i.uv).rgb;

     // 漫反射
    fixed3 diffuse = _LightColor0.rgb * albedo * _Diffuse.rgb * max(0, dot(tangentLightDir, tangentNormal) * 0.5 + 0.5);

    // 高光反射
    // 计算半向量
    fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
    // 计算高光颜色   
    fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)), _Gloss);

    // 组合最终颜色
    fixed3 color = diffuse + ambient + specular;
    return fixed4(color, 1); // 输出颜色
}

片元着色器的输入是一个结构体 v2f ，它包含了顶点的裁剪空间位置、贴图坐标、法线贴图坐标、切线空间光源方向和视角方向等信息。片元着色器的输出是一个 fixed4 类型的颜色值，它表示了最终屏幕上的像素颜色。

片元着色器的主要逻辑是：

使用 normalize 函数，将输入的光源方向归一化为单位向量，这是为了计算光照效果所需的角度。
使用 normalize 函数，将输入的视角方向归一化为单位向量，这是为了计算光照效果所需的角度。
使用 tex2D 函数，根据输入的法线贴图坐标，从 _BumpMap 纹理中采样出一个 packedNormal 值，它是一个四维向量，表示了法线的压缩信息。
使用 UnpackNormal 函数，将 packedNormal 值解压为一个 tangentNormal 值，它是一个三维向量，表示了法线的切线空间方向。
根据 _BumpScale 的值，对法线的 x 和 y 分量进行缩放，这是为了增强法线贴图的效果。
使用 UNITY_LIGHTMODEL_AMBIENT 宏，获取环境光的颜色值，它是一个三维向量，表示了场景的环境光照强度。
使用 tex2D 函数，根据输入的贴图坐标，从 _MainTex 纹理中采样出一个 加粗样式albedo 值，它是一个三维向量，表示了表面的反射率。
使用 _LightColor0 变量，获取光源的颜色值，表示了光源的颜色和强度。
使用 _Diffuse 参数，获取漫反射的系数，它是一个四维向量，表示了表面的漫反射属性。
使用 max 函数，计算光源方向和法线方向的点积，表示了两个向量的夹角余弦值。
如果点积为负，说明光源在法线的背面，此时取 0 作为漫反射的因子。
如果点积为正，说明光源在法线的正面，此时乘以 0.5 并加上 0.5 ，这是为了将点积的范围从 [0,1] 转换为 [0.5,1] ，这样可以增加漫反射的亮度。
然后将光源颜色、表面反射率、漫反射系数和漫反射因子相乘，得到漫反射的颜色值。
使用 normalize 函数，计算光源方向和视角方向的和向量，然后归一化为单位向量，得到半向量，它是一个三维向量，表示了光源方向和视角方向的中间方向。
使用 _Specular 变量，获取高光反射的系数，表示了表面的高光反射属性。
使用 _Gloss 变量，获取高光反射的光泽度，表示了表面的光滑程度。
使用 max 函数，计算法线方向和半向量的点积，表示了两个向量的夹角余弦值。此时将点积的值按照光泽度的指数进行幂运算，得到高光反射的因子，它表示了表面的镜面反射强度。然后将光源颜色、高光反射系数和高光反射因子相乘，得到高光反射的颜色值。
将漫反射的颜色值、环境光的颜色值和高光反射的颜色值相加，得到最终的颜色值，它是一个三维向量，表示了表面的光照效果。

三、效果

在这里插入图片描述

四、总结

切线空间法线纹理映射是一种在几何物体表面添加细节的技术，它利用切线空间（tangent space）来存储和计算法线方向的偏移量。切线空间是一个以顶点的法线为z轴，以纹理坐标的方向为x和y轴的相对坐标系。法线纹理（normal map）是一种存储了切线空间中法线偏移量的贴图，它通常呈现为浅蓝色，表示法线与原法线方向一致。在光照计算时，需要把法线纹理采样出来的法线方向从切线空间变换到模型或世界空间，然后进行光照计算。