Shader学习的基础知识（四）法线贴图

版权声明：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ww1351646544/article/details/88256905

今天的感受是，写Shader一定要比写一般的代码更仔细！！清楚每一个公式到底是做什么的！这不是说写别的程序就更以马虎，只是Shader更容易错，也更难查错。

纹素

为了区别于相像素的点信息。

UV

美术人员会应用纹理展开技术把纹理映射坐标存在在每个顶点上。坐标定义了该 顶点在的纹理中对应的2D坐标中。U是横坐标，V 是垂直坐标。UV通常会被归一化到0~1范围内。

部分常用内容

_MainTex(“Main_Tex”,2D)=“white”{} 定义一个纹理，默认为白色
sampler2D _MainTex; 建立联系
float4 texcoord:TEXCOORD0; 第一组纹理坐标信息
TRANSFORM_TEX() 同学一个参数是顶点纹理坐标，第二个是纹理名
tex2D(_MainTex,i.uv) 对文理进行采样,参数一：需要彩样的纹理 参数二：纹理坐标 返回纹素值
saturate 取值0~1

凹凸映射

方法一：高度纹理：用一张图记录高度信息然后做表面位移和法线修改。
方法二：法线纹理：用一张图记录法线来模拟高光的效果。

纹理的空间

模型空间的法线纹理：纹理本身有自己自带的法线在模型空间中的，通常是五颜六色的，因为什么方向都有。
优点：是更直观，缝合处连接的更好。
切线空间的法线纹理：而实际上美术一般使用的是切线空间的法线纹理。切线空间即是每个顶点自己的空间。切线空间纹理往往是蓝色。的,因为不需要做凹凸的就都是一个方向的。
优点：由于是切线空间，用在别的模型上也会得到一个相对合理的效果。可进行UV动画，可重用法线纹理，可压缩(只记录XY即可)。

副切线

可以由切线和法线的叉乘求得，因他们间相互垂直。

切线空间下的凹凸纹理例子

基本思路：
片元着色器中能过采样得到切线空间下的法线，再与切线空间下的视角方向、光照进行计算，得到结果。
重点:空间转换的知识
需要得到一个空间的转置矩阵，我们需要按列排列切线（即X轴）、副切线（即Y轴）、法线（即Z轴）即可得到。
如果一个空间中只存在平移和旋转，那么这个变换的逆矩阵就等于它的转置矩阵。
下面是一个纹理映射的例子：

切线空间的法线贴图存储方式(恍然大悟X2)

如果法线没有需要偏移，那么他的色值即是RGB(0.5,0.5,1)，蓝色的。

但由于色值取取值是[0~1]而法线方向取值是[-1 ~1]，所以色值映射Normal=pixel*2-1;
所以RGB(0.5,0.5,1)对应法线(0,0,1),即垂直向上没有移动。

一般我们只记录x和y分量，因为法线是归一化的，因此满足x2 + y2 + z2 = 1
所以z=sqrt(1-(x2+y2));

//(dot(xy,xy))=xx+yy不要把他理解为点乘就可以了。
tangentNormal.z=sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));

Shader "Custom/TestShader10" {
Properties{
_Color("Color Tint",Color)=(1,1,1,1)
_MainTex("Main Tex",2D)="white"{}
_BumpMap("Normal Map",2D)="bump"{}
_BumpScale("Bump Scale",Float)=1
_Specular("Specular",Color)=(1,1,1,1)
_Gloss("Gloss",Range(8,256))=20
}
SubShader{
Pass{
Tags{"LightMode"="ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"

fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;

//Appction To Vertex
struct a2v{
float4 vertex:POSITION;
float3 normal:NORMAL;
float4 tangent:TANGENT;
float4 texcoord:TEXCOORD0;
};
//Vertex To Fragment
struct v2f{
float4 pos:SV_POSITION;
float4 uv:TEXCOORD0;
float3 lightDir:TEXCOORD1;
float3 viewDir:TEXCOORD2;
};

v2f vert(a2v v){
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);

//图一UV值:图片位置第一个坐标频道*图片+图片的偏移
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
//图二法线纹理的UV值
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

//求副切线：法线和切线的点乘得到了副切线方向有两个，用*w分量来选择正面
float3 binormal =cross(normalize(v.normal),normalize(v.tangent.xyz))*v.tangent.w;
//求切线空间矩阵:
//这里的切线、副切线、法线相当于xyz 这三个分量的组合就是这个空间的空间矩阵
float3x3 rotation =float3x3(v.tangent.xyz,binormal,v.normal);

//切线空间中顶点到光原方向
o.lightDir=mul(rotation,ObjSpaceLightDir(v.vertex)).xyz;
//切线空间中顶点到摄像机向量
o.viewDir=mul(rotation,ObjSpaceViewDir(v.vertex)).xyz;

return o;
}

float4 frag(v2f i):SV_TARGET{
//切线空间下灯光的单位向量
fixed3 tangentLightDir=normalize(i.lightDir);
//切线空间下摄像机的单位向量
fixed3 tangentViewDir =normalize(i.viewDir);

//tex2D第一个参数是采样纹理，第二个参数是采样坐标返回这个位置的纹素
fixed4 packedNormal = tex2D(_BumpMap,i.uv.zw);

/*
//切线空间法线
fixed3 tangentNormal;
//把XY取正后缩放
tangentNormal.xy=(packedNormal.xy*2-1)*_BumpScale;
//取得z值 其实(dot(xy,xy))=x*x+y*y=xy和原点的距离
//所以z是x和y的长度
tangentNormal.z=sqrt(1-saturate(dot(tangentNormal.xy,tangentNormal.xy)));
tangentNormal = tex2D(_BumpMap,i.uv.zw);
*/

//UpoackNormal函数，需要把图片格式改为Normal map才能使用有效
fixed3 tangentNormal=UnpackNormal(packedNormal);
//缩放
tangentNormal.xy*=_BumpScale;
//用的是切线空间下的法线纹理，因此法线的z为正数 其实(dot(xy,xy))=x*x+y*y
//由于偏移后的法线是归一化的，因此满足x2 + y2 + z2 = 1
//所以z=sqrt(1-(x2+y2))
tangentNormal.z=sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));

//取主图的颜色*影响色
fixed3 albedo=tex2D(_MainTex,i.uv).rgb*_Color.rgb;
//环境光颜色*albedo
fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;
//灯光一颜色*环境色*亮度(切线空间下的法线与切线下的灯光点乘得出)
fixed3 diffuse=_LightColor0.rgb*albedo*max(0,dot(tangentNormal,tangentLightDir));

//中线：点到灯光方向+点到摄像机方向：取的是中线(即角平分线)
fixed3 halfDir = normalize(tangentLightDir+tangentViewDir);
//中线与法线越相似则越亮
fixed3 specular =_LightColor0.rgb*_Specular.rgb*pow(max(0,dot(tangentNormal,halfDir)),_Gloss);

//得到最终色值
return fixed4(albedo+ambient+specular,1.0);
}
ENDCG
}
}
}

下面是一个世界空间下的凹凸纹理例子

Shader "Custom/TestShader12" {
Properties{
_Color("Color Tint",Color)=(1,1,1,1)
_MainTex("Main Tex",2D)="white"{}
_BumpMap("Normal Map",2D)="bump"{}
_BumpScale("Bump Scale",Float)=1
_Specular("Specular",Color)=(1,1,1,1)
_Gloss("Gloss",Range(8,256))=20
}
SubShader{
Pass{
Tags{"LightMode"="ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"

fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;
float3 wo;

//Appction To Vertex
struct a2v{
float4 vertex:POSITION;
float3 normal:NORMAL;
float4 tangent:TANGENT;
float4 texcoord:TEXCOORD0;
};
//Vertex To Fragment
struct v2f{
float4 pos:SV_POSITION;
float4 uv:TEXCOORD0;
float4 TtoW0:TEXCOORD1;
float4 TtoW1:TEXCOORD2;
float4 TtoW2:TEXCOORD3;
};

v2f vert(a2v v){
v2f o;
o.pos=UnityObjectToClipPos(v.vertex);
o.uv.xy=v.texcoord.xy*_MainTex_ST.xy+_MainTex_ST.zw;
o.uv.zw=v.texcoord.xy*_BumpMap_ST.xy+_BumpMap_ST.zw;

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

//按列排序得到一个切线到世界空间转换矩阵 ，位置信息也顺带存在后面了
o.TtoW0=float4(worldTangent.x,worldBinormal.x,worldNormal.x,worldpos.x);
o.TtoW1=float4(worldTangent.y,worldBinormal.y,worldNormal.y,worldpos.y);
o.TtoW2=float4(worldTangent.z,worldBinormal.z,worldNormal.z,worldpos.z);

return o;
}

float4 frag(v2f i):SV_TARGET{
//世界坐标下的位置、灯光方向、摄像机方向等信息
float3 worldPos= float3(i.TtoW0.w,i.TtoW1.w,i.TtoW2.w);
float3 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
float3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));

//取得纹素
fixed3 bump = UnpackNormal(tex2D(_BumpMap,i.uv.zw));
bump.xy*=_BumpScale;
bump.z=sqrt(1.0-saturate(dot(bump.xy,bump.xy)));
//用点乘与每一组相乘，得到的是每个分量位移到该空间的位置
//这句其实相当于：mul(half3X3(i.TtoW0.xyz,i.TtoW1.xyz,(i.TtoW2.xyz),bump)
bump=normalize(half3(dot(i.TtoW0.xyz,bump),dot(i.TtoW1.xyz,bump),dot(i.TtoW2.xyz,bump)));

//取主图的颜色*影响色
fixed3 albedo=tex2D(_MainTex,i.uv).rgb*_Color.rgb;
//环境光颜色*albedo
fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;
//灯光一颜色*环境色*亮度
fixed3 diffuse=_LightColor0.rgb*albedo*max(0,dot(bump,lightDir));

//中线：点到灯光方向+点到摄像机方向：取的是中线
fixed3 halfDir = normalize(lightDir+viewDir);
//中线与法线越相似则越亮
fixed3 specular =_LightColor0.rgb*_Specular.rgb*pow(max(0,dot(bump,halfDir)),_Gloss);

//得到最终色值
return fixed4(albedo+ambient+specular,1.0);
}
ENDCG
}
}
}