Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

单张(颜色)纹理

一、知识回顾

fixed4 tex2D(sampler2D tex,float2 s) 传入纹理图片和 UV 坐标 返回纹理图片中对应位置的颜色值

二、书写单张纹理颜色采样的 Shader

  1. 完成 Shader 文件的基本结构
  2. 纹理属性和 CD 成员变量的声明
    1. 关键知识点: CG 映射的 ShaderLab 中的纹理属性,需要有两个成员变量
      • 一个映射纹理颜色数据
      • 一个映射纹理缩放平移数据
    2. 如何声明
      1. ShaderLab 中的属性 图片属性(2D)---主要利用 UV 坐标提取其中的颜色
      2. CG 映射的成员变量
        1. sampler2D 用于映射纹理图片
        2. float4 用于映射纹理图片的缩放和平移 固定命名方式 纹理名_ST(S 代表 scale 缩放 T 代表 translation 平移)
  3. 用缩放平移参数参与 UV 值的计算
    1. 如何获取模型中携带的 UV 信息
      • 在顶点着色器中,我们可以利用 TEXCOORD 语义获取到模型中的纹理坐标信息,它是一个 float4 类型
      • xy 获取纹理坐标的水平和垂直坐标
      • zw 获取到的是纹理携带的一些额外信息,例如深度值等
    2. 如何计算
      1. 固定算法 先缩放,后平移 缩放用乘法,平移用加法 纹理坐标.xy * 纹理名_ST + 纹理名_ST.zw
      2. 内置宏 TRANSFORM_TEX(纹理坐标变量,纹理变量)
  4. 在片元着色器中进行纹理颜色采样

三、实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Shader "Unlit/Lesson48"
{
Properties
{
//主纹理
_MainTex("MainTex",2D) = ""{}
}
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
//映射对应的纹理属性图片相关属性
sampler2D _MainTex;
//映射对应纹理属性的 缩放 平(偏)移数据
float4 _MainTex_ST;//xy代表缩放 zw代表平移


v2f_img vert (appdata_base v)
{
v2f_img data;
data.pos = UnityObjectToClipPos(v.vertex);

/*
v.texcood.xy //代表UV坐标
v.texcood.zw //代表一些额外信息
*/
//方法一 固定计算
data.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
//方法二 内置宏
TRANSFORM_TEX(v.texcoord.xy,_MainTex);
return data;
}

fixed4 frag (v2f_img i) : SV_Target
{
fixed4 color = tex2D(_MainTex,i.uv);
return color;
}
ENDCG
}
}
}

四、实现效果

2024-09-03 110021.png 2024-09-03 110010.png

五、结合光照模型(以 BlinnPhong 模型为例子)

1.注意事项

  1. 纹理颜色和漫反射颜色进行乘法叠加,他们俩个共同影响最终的颜色
  2. 兰伯特光照模型计算时,漫反射材质颜色使用 1 中的颜色进行乘法叠加运算
  3. 最终效果使用环境光叠加时,环境光变量 UNITY_LIGHTING_AMBIENT 需要和 1 中的颜色进行乘法叠加 主要是为了避免最终的渲染效果偏灰色

2.实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
Shader "Unlit/BlinnPhong_Sampler2D"
{
Properties
{
//主要就是将单张纹理Shader和BlinnPhong模型逐片元模型的结合
//纹理贴图
_MainTex("MainTex",2D)=""{}
//漫反射颜色
_MainColor("MainColor",Color)=(1,1,1,1)
//高光反射颜色
_SpecularColor("SpecularColor",Color)=(1,1,1,1)
//光泽度
_SpecularNum("SpecularNum",Range(0,20))=15
}
SubShader
{
Pass
{
//设置光照模式
Tags{"LightMode"="ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
//引用内置文件
#include "UnityCG.cginc"
#include "Lighting.cginc"

//纹理贴图的映射成员
sampler2D _MainTex;
float4 _MainTex_ST;
//漫反射颜色、高光反射颜色、光泽度
fixed4 _MainColor;
fixed4 _SpecularColor;
float _SpecularNum;

struct v2f
{
//裁剪空间下的顶点坐标
float4 pos:POSITION;
//UV坐标
float2 uv:TEXCOORD0;
//世界空间下的法线
float3 wNormal:NORMAL;
//世界空间下的顶点坐标
float3 wPos:TEXCOORD1;

};
v2f vert (appdata_base v)
{
v2f data;
//将模型的顶点坐标转换到裁剪空间下
data.pos = UnityObjectToClipPos(v.vertex);
//uv坐标计算
data.uv = v.texcoord.xy *_MainTex_ST.xy + _MainTex_ST.zw;
//世界空间下的法线
data.wNormal = UnityObjectToWorldNormal(v.normal);
//世界空间下的顶点坐标
data.wPos = mul(UNITY_MATRIX_M,v.vertex);
return data;
}

fixed4 frag (v2f i) : SV_Target
{
//纹理颜色需要和漫反射材质颜色叠加(乘法)
fixed3 albedo = tex2D(_MainTex,i.uv).rgb * _MainColor.rgb;
//光的方向(指向光源方向)
float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
//兰伯特漫反射颜色 = 光的颜色 * 漫反射颜色 * max(0,dot(光的方向,世界坐标下的法线))
fixed3 lambertColor = _LightColor0.rgb * albedo.rgb *max(0,dot(i.wNormal,lightDir));
//高光反射颜色
// 视角方向
/*
//方法一:
float3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.wPos);
*/
//方法二:
float3 viewDir = normalize(UnityWorldSpaceViewDir(i.wPos));
//半角向量 = 标准化后的视角方向 + 光的方向
float3 halfA = normalize(viewDir + lightDir);
//高光反射颜色 = 光的颜色 * 高光反射颜色 * pow(max(0,dot(世界坐标系下的法线,半角方向),光泽度))
fixed3 specularColor = _LightColor0.rgb * _SpecularColor * pow(max(0,dot(i.wNormal,halfA)),_SpecularNum);
//bliinPongColor = 环境光颜色 + 兰伯特漫反射颜色 + 高光反射颜色
fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo.rgb + lambertColor + specularColor;
return fixed4(color.rgb,1);
}
ENDCG
}
}
}

4.实现效果

2024-09-03 173608.png

评论