法线贴图
- 在游戏中,如果墙面,草地这些,如果从模型的角度去展现凹凸感,那模型的细节难度会增加不少,同时而来的也是顶点的增加,这样是及其浪费的。我们通常使用法线贴图,使得模型随着环境或者光照的改变增加这种凹凸感,让我们可以用一个简单的面片也能展现出细节丰富的视觉效果
为什么使用切线空间下的法线纹理
- 自由度更高,当一张纹理可以用在不同的模型上时,可以只使用一套法线纹理,但是模型空间下,必须对每一个模型都创建一套对应的法线纹理
- 可压缩,切线空间下法线纹理的z方向总是正方向,因此我们可以通过xy轴进行点积,之后开平方求出z轴的方向。每个像素只需要存储两个分量。
法线贴图的运行原理
- 了解一点shader光照模型的同学应该对模型法线的作用并不陌生,我们在大多光照模型中都使用到模型的法线,与视角方向或者光线防线进行计算,从而得到一个可以随视角或者光线变化而变化的展示细节。法线贴图是为了让更少顶点的模型展现出更多的细节,那法线贴图的作用就像模型的法线一样,我们可以用法线贴图提供的法线,带入到光照模型中进行采样,与原有的颜色进行混合,最终得到一个细节丰富的模型效果。
效果图
-
原图
-
使用法线贴图增强后的效果
shader的实现步骤
- 考虑到贴图的缩放和平移因素,我们使用一个float4变量去接受缩放和平移后的贴图及法线贴图的uv信息
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
- 在世界空间下,求出当前切线空间转换矩阵,由切线向量,副法线向量,法线组成
//求出世界空间下的法线向量
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
//求出世界空间下的切线向量
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
//副法线向量由法线和切线的叉乘得到,切线的w分量决定副法线的方向性
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
// 切线空间转换矩阵
float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);
- 将视线方向与光照方向都转换到切线空间下,当然这一步也是要根据需求来,不同的光照模型使用的数据不同。比如 Lambert 模型只需要光线方向即可,我们这里使用的是 Blinn-Phong 模型,同时需要视线方向和光照方向。
o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));
- 接下来,我们在片元着色器中根据法线贴图,得到法线向量
//法线的范围是-1到1,但是纹理只能存储0到1之间的范围,
//因此我们在生成法线贴图的时候会将法线映射到0-1中,
//UnpackNormal函数就是将0-1范围重新映射到-1到1之间
//如果这个概念不懂的话建议了解一下法线生成的原理
tangentNormal = UnpackNormal(packedNormal);
//法线强度缩放
tangentNormal.xy *= _BumpScale;
//由于法线向量本身就是经过归一化的,所以第三个轴的分量可以由以下公式得到,
//重点可以理解一下向量点积的意义就能够明白
//下面这行代码在UnpackNormal函数中已经实现,但是需要看看,了解一下原理
//tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
- 将切线空间下的法线,视角,光照带入到 Blinn-Phong 模型中,最终结算颜色
//贴图本身颜色
fixed3 albedo = tex2D(_MainTex, i.uv).rgb;
//光照强度对颜色的增强
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(ambient + diffuse + specular, 1.0);
- 完整代码如下
Shader "ZW/Normal Map In Tangent Space" {
Properties {
_MainTex ("Main Tex", 2D) = "white" {}
_BumpMap ("Normal Map", 2D) = "bump" {}
_BumpScale ("Bump Scale", Float) = 1.0
_Specular ("Specular", Color) = (1, 1, 1, 1)
_Gloss ("Gloss", Range(8.0, 256)) = 20
}
SubShader {
Pass {
Tags { "LightMode"="ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
float4 texcoord : TEXCOORD0;
};
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);
o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);
o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 tangentLightDir = normalize(i.lightDir);
fixed3 tangentViewDir = normalize(i.viewDir);
fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
fixed3 tangentNormal;
tangentNormal = UnpackNormal(packedNormal);
tangentNormal.xy *= _BumpScale;
tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
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(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
FallBack "Specular"
}