Unity Shader入门教程(五) :凹凸映射

凹凸映射就是使模型的纹理贴图看起来有凹凸不平的效果。一般主要有两种方式实现凹凸映射:高度纹理和法线纹理,但实际运用中一般结合这两种方式一起使用。

高度纹理:用一张高度图实现凹凸映射。高度图中存储的是强度值,用于表现模型表面局部的海拔高度。因此,颜色越浅表明该位置的表面越向外凸起,而颜色越深表面该位置的表面越向里凹。这种方法的好处就是非常直观,但缺点是计算更加复杂,是通过计算像素的灰度值而得到的,需要消耗更多的性能。

法线纹理:法线纹理存储的就是表面的法线方向。由于方向是相对于坐标系的,所以又分模型空间中的法线纹理和切线方向的法线纹理。模型空间中的法线纹理:它们是定义在模型空间的,是将修改后的模型空间中的表面法线存储在一张纹理中。切线方向的法线纹理:对于模型的每个顶点,它都有属于自己的切线空间,这个切线空间的原点就是该顶点本身,而Z轴是顶点的法线方向,X轴是顶点的切线方向,而Y轴是由法线和切线的叉积而得,也成为副切线。如下图所示:

各空间下的法线纹理的优缺点如下:

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

  • 实现简单,更加直观。计算更少,不需要模型原始的法线和切线信息。生成也简单,而如果要生成切线空间下的法线纹理,要求纹理映射也要连续。因为模型的切线方向一般和UV方向相同。
  • 在纹理坐标的缝合处的尖锐的边角部分,可见的突变(缝隙)较小,即可提供平滑的边界。这是因为模型空间下的法线纹理存储的是同一个坐标系下的法线信息,因此在边界处通过插值得到的法线可以平滑变换。而切线空间下的法线纹理中的法线信息是依靠纹理坐标的方向得到的结果,可能会在边缘或尖锐的部分造成更多可见的缝隙。

切线空间存储法线的优点:

  • 自由度很高。模型空间下的法线纹理记录的是绝对法线信息。仅可以用于创建它时的那个模型,而应用到其他模型上效果就完全错误了。而切线空间下的法线纹理记录的是相对法线信息,即把其应用到其他模型上也可以得到一个合理结果。
  • 可进行UV动画。例如我们可以移动一个纹理的UV坐标来实现一个凹凸移动的效果,但使用模型空间下的法线纹理会得到一个完全错误的结果。原因同上。这种UV动画常用于水面和火山熔岩类似的物体上。
  • 可以重用法线纹理。例如砖块,我们可以仅用一张法线纹理就可以应用到所有的6个面上。
  • 可压缩。由于切线空间下的法线纹理中法线的Z方向总是正方向,所以我们可以只存储XY方向,而推出Z的方向。而模型空间下的法线纹理由于每个方向都是可能的,所以必须存储3个方向的,不可压缩。

接下来,我们看实现的shader代码。其注释都写在了代码中。

在切线空间下计算的shader代码如下:

Shader "Custom/NormalMapTangentSpace"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
		_BumpMap("Normal Map", 2D) = "bump" {}       //对应了模型自带的法线信息
		_BumpScale("Bump Scale", Float) = 1.0        //用于控制凹凸度,为0时不会对光照产生任何影响
		_Specular("Specular", Color) = (1,1,1,1)
		_Gloss("Gloss", Range(8.0, 256)) = 50
	}
	SubShader
	{
		Pass
		{
			//LightMode是pass标签的一种,用于定义该Pass在Unity的光照流水线中的角色
			Tags{"LightMode" = "ForwardBase"}

			CGPROGRAM

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

			//_MainTex_ST和_BumpMap_ST分别存储了_MainTex和_BumpMap纹理的平铺和偏移量。关于变量名+_ST表示的意思上篇文章有讲
			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;
				//TANGENT语义告诉Unity把顶点的切线方向填充到tangent变量中。和NORMAL不同,是float类型,是因为
				//需要使用tangent.w分量来决定切线空间下福切线的方向
				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存储_MainTex的纹理坐标,o.uv.zw存储_BumpMap的纹理坐标
				o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
				o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

				//UnityCG.cginc中的内置宏定义,计算得到rotation变换矩阵,利用此矩阵可以将模型空间下的坐标转换成切线空间下的坐标
				TANGENT_SPACE_ROTATION;

				//ObjSpaceLightDir,ObjSpaceViewDir都为unity内置函数,获取模型空间下的光照和视角方向
				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);

				//利用tex2D函数对_BumpMap纹理进行纹理采样
				fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
				fixed3 tangentNormal;
				//如果_BumpMap是normal map类型,则需要调用此函数把法线反映射回来。normal map中存储的是
				//把法线经过映射后的像素值,法线方向的分量范围在[-1,1],而像素的分量范围在[0,1],通常的映射是
				//pixel = (normal + 1)/2,所以这里反映射则为normal = pixel * 2 - 1,即可得到原先的法线方向
				tangentNormal = UnpackNormal(packedNormal);
				tangentNormal.xy *= _BumpScale;
				//利用tangentNormal.x和tangentNormal.y来计算副切线方向
				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"
}

在世界空间下计算的shader如下:(其关键行都已注释)

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

Shader "Custom/NormalMapWorldSpace"
{
    Properties
    {
		_Color("Color Tint", Color) = (1,1,1,1)
		_MainTex("Albedo (RGB)", 2D) = "white" {}
		_BumpMap("Normal Map", 2D) = "bump" {}       //对应了模型自带的法线信息
		_BumpScale("Bump Scale", Float) = 1.0        //用于控制凹凸度,为0时不会对光照产生任何影响
		_Specular("Specular", Color) = (1,1,1,1)
		_Gloss("Gloss", Range(8.0, 256)) = 50
    }
    SubShader
    {
		Pass
		{
			Tags{"LightMode" = "ForwardBase"}

			CGPROGRAM

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

			//_MainTex_ST和_BumpMap_ST分别存储了_MainTex和_BumpMap纹理的平铺和偏移量。关于变量名+_ST表示的意思上篇文章有讲
			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;
				//TANGENT语义告诉Unity把顶点的切线方向填充到tangent变量中。和NORMAL不同,是float类型,是因为
				//需要使用tangent.w分量来决定切线空间下福切线的方向
				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存储_MainTex的纹理坐标,o.uv.zw存储_BumpMap的纹理坐标
				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;

				//将得到的变换矩阵按行分别存储在TtoW0,TtoW1,TtoW2中,并把世界空间下的顶点位置的XYZ分量
				//分别存储在了这些变量的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));

				//使用unity内置的UnpackNormal函数对标识成normal map的法线纹理进行采样和解码
				fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
				bump.xy *= _BumpScale;
				bump.z = sqrt(1.0 - saturate(dot(bump.xy, bump.xy)));//副切线方向

				//再使用TtoW0,TtoW1,TtoW2存储的变换矩阵把法线变换到世界空间下。通过点乘操作来实现矩阵的每一行和法线相乘得到
				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 "Specular"
}

两种空间下的计算的不同以及优缺点简单介绍如下:

选择在切线空间下进行的光照计算,我们需要把光照方向和视角方向变换到切线空间下;而在世界空间下的时,需要把采样得到的法线方向变换到世界空间下,再和世界空间下的光照方向和视角方向进行计算。从效率上讲,第一种方法往往优于第二种方法,因为我们可以在顶点着色器中就可以完成对光照方向和视角方向的变换,而第二种方法由于要先对法线纹理进行采样,所以变换过程必须在片元着色器中实现,这意味着我们需要在片元着色器中进行一次矩阵操作。从通用性来说,第二种方法要优于第一种方法。例如在使用Cubemap进行环境映射时,我们需要使用世界空间下的反射方向对Cubemap进行采样。如果同时需要进行法线映射,我们就需要把法线方向变换到世界空间下。当然,你们也可以选择在除这2种之外的其他空间坐标系下进行操作。

注意事项:

该shader需要2张纹理,对于Normal Map的纹理需要将纹理类型设置为normal map类型,并且勾选Create from GrayScale。此勾选项代表是否结合其高度图(图片越白的部分代表越凸,越黑的部分代表越凹),如下图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值