「UnityShader笔记」07. 在世界空间下基于法线贴图实现凹凸纹理效果
Part1.代码逐段解析
struct a2v{
float4 vertex : POSITION; //顶点模型空间位置
float3 normal : NORMAL;
float4 tangent : TANGENT;
float4 texcoord : TEXCOORD0; //纹理uv
};在顶点着色器的输入结构中，我们需要获取模型空间下顶点的位置、法向量、切向量、纹理uv
struct v2f{
float4 pos : SV_POSITION; //顶点在裁剪空间的位置
float4 uv : TEXCOORD0; //纹理uv
float4 TtoW0 : TEXCOORD1;
float4 TtoW1 : TEXCOORD2;
float4 TtoW2 : TEXCOORD3;
};在从顶点着色器到片元着色器的通信结构体中，需要获取顶点在裁剪空间的位置，经过尺度、偏移变换后的纹理uv坐标，以及三组float4类型的值，用来存储从切线空间到世界空间的变换矩阵，以及顶点在世界空间的位置
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;
//计算世界空间下的法向量
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
//计算世界空间下的切向量
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
//法向量与切向量叉乘，再乘以方向因子，得到副切向量
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
//将代表x轴的切向量，代表y轴的副切向量，代表z轴的法线方向按列排列，即可得到从切线空间到世界空间的变换矩阵
//这里需要将变换矩阵存储在插值寄存器中，为了节省空间，使用闲置的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;
}在顶点着色器中，我们的主要任务是：
- 获取顶点在裁剪空间下的坐标，用于片元着色
- 获取顶点在世界空间下的坐标，用于光照计算
- 计算纹理uv的尺度变换与偏移
- 计算从切线空间到世界空间的变换矩阵，用于在片元着色器中将切线空间的法向量变换到世界空间，从而在世界空间下进行光照计算
由于是从切线空间到世界空间的变换矩阵，我们不用做取逆操作，直接将三个坐标轴向量按列拼接即可
为了最大化利用插值寄存器的空间，我们将顶点的世界坐标的三个分量分别存储在三个float4类型的w分量中
fixed4 frag(v2f i) : SV_Target{
//从w分量中提取出世界坐标
float3 worldPos = float3(i.TtoW0.w,i.TtoW1.w,i.TtoW2.w);
//使用内置函数获取世界空间下的光照方向
fixed3 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
//使用内置函数获取世界空间下的观察方向
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
//通过对法线纹理进行采样，获取切线空间下的法线
fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
//对法线的x、y分量乘上凹凸程度变换因子
bump.xy *= _BumpScale;
//利用法向量是单位向量的特性直接求解出z分量
bump.z = sqrt(1.0 - saturate(dot(bump.xy, bump.xy)));
//使用顶点着色器中构造的变换矩阵，将法线从切线空间变换到世界空间
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;
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(ambient + diffuse + specular, 1.0);
}在片元着色器中，我们的主要任务是：
- 通过世界空间的顶点坐标，获取世界空间下的光照方向和观察方向
- 对法线纹理进行采样，得到切线空间下的法向量
- 通过顶点着色器中构建的变换矩阵，将法向量变换到世界空间
- 通过法向量进行光照计算
Part2.一些问题
Q1.为什么要在片元着色器进行法线变换？
因为法线纹理的采样是必须在片元着色器才能完成的，因此只有在片元着色器才能获得法线，而必须先获取法线才能进行法线变换
Q2.为什么在切线空间实现凹凸贴图时，没有通过插值寄存器传输变换矩阵？
因为在切线空间中，需要的变换是将光照方向、观察方向从模型空间变换到切线空间，法线本身就在切线空间，是不需要变换的。而光照方向、观察方向在顶点着色器就能获取，因此在顶点着色器构造出变换矩阵后，直接就地对两向量进行变换
Part3.完整代码
Shader "Chapter7/bumpText_World"
{
Properties
{
_Color ("Color Tint", Color) = (1,1,1,1)
_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"
fixed4 _Color;
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;
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;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 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;
}
fixed4 frag(v2f i) : SV_Target{
float3 worldPos = float3(i.TtoW0.w,i.TtoW1.w,i.TtoW2.w);
fixed3 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
fixed3 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)));
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;
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(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
FallBack "Diffuse"
}Part4.效果图
在切线空间和世界空间下实现的凹凸贴图，视觉效果是完全一样的
