凹凸映射

​ 在平面上法线是一直垂直于平面的,则在凹凸不平的平面上,根据射入光的角度不同,所对应的法线角度也不同,所以我们可以通过改变法线的酵素来达到模拟凹凸不平的平面的场景。

三种映射方式

image-20241112100109050

高度映射

​ 类似于地理中等高线,利用不同的高度代表不同的颜色(范围0~1),以此来绘制图片,根据值的趋向来分别颜色。因为计算方式比较复杂,所以一般不去使用。

法线映射

​ 法线纹理,直接使用纹理代表法线(分量范围-1到1),要使用贴图(范围0到1)代表法线需要进行一定的计算。公式如下

image-20241112103142968

prel:像素值,n:法线

​ 后两种映射方式可以用来实现法线纹理,但后者的使用会比前者更多,因为前者的法线纹理是一个绝对法线信息(其uv和原模型上的uv完全匹配),所以倒是移植性很差,只适用于当前模型。

模型空间下法线映射

​ 法线到纹理的映射

因为可以表的纹理很多,所以其色彩会比较多样。

切线空间下的法线映射

​ 什么是切线空间,切线空间中原点便为模型顶点,

向量b为副切线,n为法线,t为切线

1
b = t * n

​ 原本模型空间中法线n不变的情况下:

​ 新的法线在切线空间中 = (0,0,1) => RGB(0.5,0.5,1),其中大量切线是不变的。

模型空间存储法线的优点:

实现简单,更加直观。计算量少。(绝对的法线信息)

在纹理的边角部分,缝隙较少,可提供平滑的边界。是因为所有法线都是在同一坐标空间中,可以在边角处通过插值进行平滑变换。

切线空间下的优点:

自由度高。切线空间下的法线纹理是相对法线纹理,即便在一个不同的网格上也可以得到一个合理的结果。

可进行UV动画。可以通过移动一个纹理的UV坐标来实现一个凹凸移动的效果。

可重用法线纹理。

可压缩。切线空间下,Z轴方向总是正方向,可以只存储XY轴,推导得到Z轴。

法线计算

1.将视角,光照方向转换到切线空间下与法线进行计算。

优点:可以现在顶点着色器上做转换,再去片元着色器上进行采样,光照模型计算。

2.直接将法相计算出来既采样法线贴图,转换到世界坐标里及逆行光照模型计算。

这样顶点着色器不用去做什么事情,其全部在片元着色器上机型,但这样会导致消耗更多,性能差。

旋转矩阵的计算

​ 物体坐标系到切线空间的计算只是改变方向的计算,不涉及位移,不是齐次矩阵,只需要计算3×3的矩阵。

image-20241113100713863

image-20241113101503107

代码实现

切线空间下的法线纹理映射

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
Shader "Unlit/010"
{
Properties
{
_MainTex("MainTex", 2D) = "white"{}
_BumpMap("BumpMap", 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
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#include "Lighting.cginc"

sampler _MainTex;
float4 _MainTex_ST; //不需要在Properties里定义,用于存放Tiling(缩放)和Offset(位移)的数值
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Diffuse;
fixed4 _Specular;
float _Gloss;

struct v2f
{
float4 vertex : SV_POSITION;
fixed3 lightDir : TEXCOORD0;
float3 viewDir : TEXCOORD1;
float2 uv : TEXCOORD2;
float2 normalUv : TEXCOORD3;
};

v2f vert (appdata_tan v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
o.normalUv = TRANSFORM_TEX(v.texcoord, _BumpMap);

// 求副切线向量,cross(normalize(v.normal), normalize(v.tangent.xyz))计算出来的结果仅为一个值,所以要乘上一个方向。
// float3 binormal = cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;
// float3x3 roatiton = float3x3(v.tangent.xyz, binormal, v.normal);
TANGENT_SPACE_ROTATION;// 官方提供的计算方式,内容和上面求副切线向量的写法一样。

// 求切线空间光源方向及视角方向
o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;

return o;
}

fixed4 frag (v2f i) : SV_Target
{
fixed3 tangentLightDir = normalize(i.lightDir);
fixed3 tangentviewDir = normalize(i.viewDir);

fixed4 packedNormal = tex2D(_BumpMap, i.normalUv); // 采样
fixed3 tangentNormal;
tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale;
tangentNormal.z = sqrt(1 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

//环境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

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

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

//高光反射
fixed3 halfDir = normalize(tangentLightDir + tangentLightDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(tangentNormal, halfDir)), _Gloss);

fixed3 color = ambient + diffuse + specular;
return float4(color, 1);
}
ENDCG
}
}
}

效果图

image-20241113105549057

以上写法为当法线贴图设置为Default

若法线贴图设置为Normal map类型则需要对对计算做出一点改变,改变如下

1
2
3
4
5
6
7
8
9
//法线贴图未设置成normal map
// fixed3 tangentNormal;
// tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale;
// tangentNormal.z = sqrt(1 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

//法线贴图设置成normal map
fixed3 tangentNormal = UnpackNormal(packedNormal);
tangentNormal.xy *= _BumpScale;
tangentNormal.z = sqrt(1 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

世界空间下法线纹理映射

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
Shader "Unlit/011"
{
Properties
{
_MainTex("MainTex", 2D) = "white"{}
_BumpMap("BumpMap", 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
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#include "Lighting.cginc"

sampler _MainTex;
float4 _MainTex_ST; //不需要在Properties里定义,用于存放Tiling(缩放)和Offset(位移)的数值
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Diffuse;
fixed4 _Specular;
float _Gloss;

struct v2f
{
float4 vertex : SV_POSITION;
float4 uv : TEXCOORD0;
float4 Ttiw1 : TEXCOORD1;
float4 Ttiw2 : TEXCOORD2;
float4 Ttiw3 : TEXCOORD3;
};

v2f vert (appdata_tan v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);

//计算世界坐标下的顶点位置,法线,切线,副法线
float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;

//按列摆放得到从切线空间到世界空间的变换矩阵
o.Ttiw1 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);
o.Ttiw2 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);
o.Ttiw3 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);

return o;
}

fixed4 frag (v2f i) : SV_Target
{
//求世界坐标
float3 worldPos = float3(i.Ttiw1.w, i.Ttiw2.w, i.Ttiw3.w);

//计算世界空间下的光照和视角
fixed3 tangentLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
fixed3 tangentViewDir = normalize(UnityWorldSpaceViewDir(worldPos));

//获取法线纹理
fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
fixed3 tangentNormal = UnpackNormal(packedNormal);
tangentNormal.xy *= _BumpScale;

//切线空间法线转换到世界坐标
fixed3 worldNormal = normalize(float3(dot(i.Ttiw1.xyz, tangentNormal), dot(i.Ttiw2.xyz, tangentNormal), dot(i.Ttiw3.xyz, tangentNormal)));

//环境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

//图片采样
fixed3 albedo = tex2D(_MainTex, i.uv.xy).rgb;

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

//高光反射
fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(worldNormal, halfDir)), _Gloss);

fixed3 color = ambient + diffuse + specular;
return float4(color, 1);
}
ENDCG
}
}
}

效果图

法线贴图设置

高度映射图

image-20241114163806795

Filtering为平滑度分为:Smooth和Sharp两种

高度映射法线图

法线映射法线图

模型空间存储法线的优点:

实现简单,更加直观。计算量少。(绝对的法线信息)

在纹理的边角部分,缝隙较少,可提供平滑的边界。是因为所有法线都是在同一坐标空间中,可以在边角处通过插值进行平滑变换。

切线空间下的优点:

自由度高。切线空间下的法线纹理是相对法线纹理,即便在一个不同的网格上也可以得到一个合理的结果。

可进行UV动画。可以通过移动一个纹理的UV坐标来实现一个凹凸移动的效果。

可重用法线纹理。

可压缩。切线空间下,Z轴方向总是正方向,可以只存储XY轴,推导得到Z轴。