第九天 开始Unity Shader的学习之单张纹理

Unity Shader的学习笔记

第九天 开始Unity Shader的学习之单张纹理

---

---

前言

前几天我们已经学习了Unity的基础光照,可以翻看前面的几篇博客进行复习,今天我们要开始基础纹理的内容了.

---

一、基础纹理

纹理最初的目的就是使用一张图片来控制模型的外观,使用纹理映射技术,我们可以把一张图黏在模型表面,逐"纹素"(纹素的名字是为了和像素进行区分)的控制模型的颜色,在美术人员建模的时候,通常会在建模软件中利用纹理展开技术把纹理映射坐标存储在每个顶点上.纹理映射坐标定义了该顶点在纹理中对应的2D坐标.通常,这些坐标使用一个二位变量(u,v)来表示,其中u是横向坐标,v是纵向坐标,因此,纹理映射坐标也被称为UV坐标.

二、单张纹理

我们通常会使用一张纹理来代替物体的漫反射颜色,在本节中,我们学习如何在Unity Shader中使用单张纹理来作为模拟的颜色.

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

// Upgrade NOTE: replaced '_World2Object' with 'unity_WorldToObject'
// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Unity Shaders Book/Chapter 7/Single Texture"
{
	Properties														①
	{
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
		_MainTex ("Main Tex", 2D) = "white" {}
		_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;
			fixed4 _Specular;
			float _Gloss;

			struct a2v												③
			{
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 pos : SV_POSITION;
				float3 worldNormal : TEXCOORD0;
				float3 worldPos : TEXCOORD1;
				float2 uv : TEXCOORD2;
			};

			v2f vert(a2v v)
			{
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				o.worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);
				o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
				o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;		④
				//o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);作用与上面的类似
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				fixed3 worldNormal = normalize(i.worldNormal);
				fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));

				fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;			⑤
				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT;
				fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
				fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
				fixed3 halfDir = normalize(worldLightDir + viewDir);
				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(worldNormal, halfDir)), _Gloss);
				return fixed4(ambient + diffuse + specular, 1.0);
			}

			ENDCG
		}
	}
	FallBack "Specular"
}

① Properties

为了使用纹理,必须在Properties语义块中添加一个纹理属性:

Properties
{
	_Color ("Color Tint", Color) = (1, 1, 1, 1)
	_MainTex ("Main Tex", 2D) = "white" {}
	_Specular ("Specular", Color) = (1, 1, 1, 1)
	_Gloss ("Gloss", Range(8.0, 256)) = 20
}

上面的代码中声明了一个名为_MainTex的纹理(2D是纹理属性的声明方式.我们使用一个字符串后跟一个花括号作为他的初始值,"white"是内置纹理的名字,就是一个纯白的纹理),为了控制物体的整体色调,还声明了一个_Color属性.

② Cg代码块的变量

我们需要在Cg代码块中声明和上述属性类型相匹配的变量,以便和材质面板的属性建立联系:

fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed4 _Specular;
float _Gloss;

Properties与Cg代码块属性之间的对应关系,之前的博客里面已经说过了,可以去翻一下.
注意:_MainTex属性还需要为其声明一个float4类型的变量_MainTex_ST.其中,_MainTex_ST名字不是随意起的.在Unity中,我们需要使用纹理名_ST的方式来声明某个纹理的属性.其中,ST是缩放(Scale)和平移(Translation)的缩写._MainTex_ST可以让我们得到该纹理的缩放和平移(偏移)值,_MainTex_ST.xy存储的是缩放值,_MainTex_ST.zw存储的是偏移值,这些值都可以在属性面板的纹理属性中调节.

③ 顶点着色器和片元着色器的结构体(a2v 和 v2f)

我们在a2v中使用了TEXCOORD0语义声明了一个新的变量texcoord,这样Unity就会将模型的第一组纹理坐标存储到该变量中.
然后,我们在v2f结构体中添加了用于存储纹理坐标的变量uv,以便于在片元着色器中使用该坐标进行纹理采样.

struct a2v
{
	float4 vertex : POSITION;
	float3 normal : NORMAL;
	float4 texcoord : TEXCOORD0;
};

struct v2f
{
	float4 pos : SV_POSITION;
	float3 worldNormal : TEXCOORD0;
	float3 worldPos : TEXCOORD1;
	float2 uv : TEXCOORD2;
};

④ 顶点着色器vert

在顶点着色器中,我们使用_MainTex_ST来对顶点纹理坐标进行变换,得到最终的纹理坐标.
计算过程是:首先使用缩放属性_MainTex_ST.xy对定点纹理坐标进行缩放,然后再使用偏移属性_MainTex_ST.zw对结果进行偏移.
Unity提供了一个内置宏TRANSFORM_TEX来帮助我们完成上述过程,他接受的参数为顶点纹理坐标和纹理名,他的实现将利用纹理名_ST的方式来计算交换后的纹理坐标.

o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
//o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);作用与上面的类似

⑤ 片元着色器 frag

fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));

我们使用Cg的tex2D函数对纹理进行采样,他的第一个参数是要采样的纹理,第二个参数是float2类型的纹理坐标,他将返回计算得到的纹素值,然后我们将采样结果和_Color的乘积作为材质的反射率albedo,并把它与环境光照相乘得到环境光部分(漫反射).

效果展示

---

总结

这一小节我们主要对单张纹理的Unity Shader进行编写,只是在之前的基础光照的基础上改了一点内容,希望可以理解其中的内容.