Shader入门——2贴图材质

本节我们进行材质上最基本的贴图。也就是最常用的贴图材质编写。首先是unity shader的代码编写。

Shader"Custom/BaseTextureMatShader"
{
    Properties{
        _Color("Color Tint",Color)=(1.0,1.0,1.0,1.0)
        _MainTex("Main Texture",2D)="white"
    }
    Subshader{
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragmengt frag
            fixed4 _Color;
            sampler2D _MainTex;
            
            float4 vert(float4 pos:POSITION):SV_POSITION{
                return UnityObjectToClipPos(pos);
            }

            fixed4 frag(float2 uv:TEXCOORD0):SV_Target{
                return tex2D(_MainTex,uv);
             }
            
            ENDCG
        }
    }
    Fallback "Diffuse"
}

我们继续来逐行翻译,但也不必像之前那样逐行,我们只翻译类比上一篇代码中的不同部分。首先我们在Properties下增加了_MainTex这个属性,他的面板名称为“Main Tex”,属性是2D贴图,默认是白色。由于我们在这次shader中要调用_MainTex这个自定义属性,所以我们要在Pass中定义它为sampler2D。sampler2D是一个CG中的一中数据类型,主要是用来储存纹理信息的,常见的一般有sampler,sampler2D,samplerCUBE等。我们这里要定义_MainTex所以进行定义

sampler2D _MainTex;
fixed4 _Color;

然后我们正常定义顶点着色器于片元着色器的入口,一般我会直接定义

#pragma vertex vert
#pragma fragmengt frag

我们暂时先不管结构体struct的书写,根据上篇的内容我们应该直接进行顶点着色器的编写,我们顺着这个思路走

float4 vert(float4 vertex:POSITION):SV_POSITION{
    return UnityObjectToClipPos(vertex);
}

这部分跟上篇一样,我们略过翻译,接着我们开始写本篇的新内容,纹理贴图。_MainTex,

fixed4 frag( float2 uv:TEXCOORD0):SV_Target{
    return tex2D(_MainTex,uv);
}

这部分,已经有了区别,首先我们的片元着色器需要输入渲染pipline中三角形遍历后所产生的UV,又因为UV只是一个二维坐标,所以以float2来定义,而TEXCOORD0则是将第一套纹理指定给UV这个参数,让其获得上一步片元坐标参数。之后我们在函数中返回的是一个tex2D的值,tex2D是一个对纹理采样的值,他的第一个参数是需要被采样的值,第二个参数是一个float2的纹理坐标。所以这个过程等于在像素点上进行点对点的涂色。所以按照上一篇的思路,我们的texture shader应该是如下

Shader"Custom/textureShader"{
    Properties{
        _MainTex("Main Tex",2D)="white"{}
        _Color("COlor Tint",Color)=(1,1,1,1)
    }
    Subshader{
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            fixed4 _Color;
            sampler2D _MainTex;

            float4 vert (float4 vertex:POSITION):SV_POSITION{
                return UnityObjectToClipPos(vertex);
            }

            fixed4 frag(float2 uv:TEXCOORD0):SV_Target{
                return tex2D(_MainTex,uv);
            }

            ENDCG
        }

    }
    Fallback "Diffuse"
}

这个shader在unity中没有报错,但呈现的效果不是我们想要的。

我们并不是想要这种纯色的贴图,而是更加丰富的

但这个错误只在5.6之后的版本有,5.6之前的没有,只能说是更新错误的锅,有一种解释是,5.6更新之后一个特性是不能直接在vertex的函数中获取POSITION再返回,必须要从结构体中获取再返回,但我试了试这种说法,依然不行,应该是在vertex与fragment中同时又相同的UV的坐标返回才能有正常的结果,也就是说vertex与fragment中的uv应当匹配才能有正确的结果,所以我们进行结构体的编写,这部分编写与C语言很相似首先是顶点着色器的输入结构体,首先我们要从顶点数据中获得两个数据,一个是我们一定要的顶点坐标,也就是POSITION,另外一个是顶点的UV坐标也就是说基于模型本身参考系的UV坐标进行转换成我们需要的基于摄像机的UV坐标,所以我们第一个结构体可以这么写

struct a2v{
        float4 vertex:POSITION;
        float2 uv:TEXCOORD0;
};

写完了结构体,我们可以在vertex中直接调用这个结构体作为输入

v2f vert(a2v v):SV_POSITION{
    v2f o;
    o.vertex=UnityObjectToClipPos(v.vertex);
    o.uv=v.uv;
    return o;
}

当我们进行带有结构体的顶点着色器的编辑的时候,由于输出的并不一定是同一类型的数据,所以我们不会在函数上进行输出定义,我们输出的更多是一个带有多种属性的参数,一般我们就用o来作为顶点着色器的输出参数。所以这个顶点着色器的输入是参数v,v的数据从渲染pipline的顶点数据取得。v2f o;中的v2f 也是CG中的语句,意思是vertex to fragment 将顶点着色器中的数据传输到片元着色器中,相当于一个参数定义,将输出的参数暂时先储存在o下面。而o.uv=v.uv就是字面意义的坐标传输。

接着我们来定义fragment的结构体,我们从顶点着色器拿到了什么?变换后的顶点坐标与uv坐标,那我们要输出什么,顶点坐标不用变换,但我们需要输出的是一张我们准备好的自定义贴图而不是单纯的uv坐标,所以我们要用我们准备好的_MainTex匹配所得到的uv坐标,通俗的讲就是用贴图,点对点的进行每一个像素的颜色填充。所以我们首先定义结构体

struct v2f{
    float4 pos:SV_POSITION;
    float2 uv:TEXCOORD1;
};

我们将裁剪后的顶点数据给到pos,第二套纹理坐标给到uv作为fragment的输入。之后我们片元着色器的输出依旧是fixed4颜色,但这里我们将用tex2D函数进行对坐标的填充。

fixed4 frag(v2f i):SV_Target{
    return tex2D(_MainTex,i.uv)
}

结合上文,我们的完整代码应该是如下

Shader"Custom/textureShader"{
	Properties{
		_MainTex("Main Tex",2D) = "white"{}
		_Color("COlor Tint",Color) = (1,1,1,1)
	}
		Subshader{
			Pass{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag

				fixed4 _Color;
				sampler2D _MainTex;

				struct a2v {
					float4 vertex:POSITION;
					float4 uv:TEXCOORD0;
				};

				struct v2f {
					float4 pos:SV_POSITION;
					float2 uv:TEXCOORD1;
				};

				v2f vert(a2v v):SV_POSITION {
					v2f o;
					o.pos = UnityObjectToClipPos(v.vertex);
					o.uv = v.uv;
					return o;
				}

				fixed4 frag(v2f i) :SV_Target{
					return tex2D(_MainTex,i.uv);
				}

				ENDCG
			}

		}
			Fallback "Diffuse"
}

但别急得激动,因为这个代码会报错,他给的报错信息应该是

invalid output semantic 'SV_POSITION': Legal indices are in [0,0]

错误是在SV_POSITION这个语义上,我们再次理解下这个语义,SV_POSITION是裁剪之后的空间顶点坐标,这个信息我们应该存储在了struct v2f这个结构体的pos之中,而这个结构体已经在frag作为输入中输出了这个顶点间坐标,而v2f vert(a2v v)所输出的也并不是仅仅的空间坐标,在这其实把SV_POSITION删除是一个正确的选项。所以修改之后的代码是

Shader"Custom/textureShader"{
	Properties{
		_MainTex("Main Tex",2D) = "white"{}
		_Color("COlor Tint",Color) = (1,1,1,1)
	}
		Subshader{
			Pass{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag

				fixed4 _Color;
				sampler2D _MainTex;

				struct a2v {
					float4 vertex:POSITION;
					float4 uv:TEXCOORD0;
				};

				struct v2f {
					float4 pos:SV_POSITION;
					float2 uv:TEXCOORD1;
				};

				v2f vert(a2v v){
					v2f o;
					o.pos = UnityObjectToClipPos(v.vertex);
					o.uv = v.uv;
					return o;
				}

				fixed4 frag(v2f i) :SV_Target{
					return tex2D(_MainTex,i.uv);
				}

				ENDCG
			}

		}
			Fallback "Diffuse"
}
正确输出的贴图纹理

至此,我们在unity shader的编写结束。

我们接着在shader graph中实现我们的贴图效果

shader graph中的2D纹理贴图

需要注意的是如果我们直接创建texture节点是不能直接拖入Albedo的输入的,在shader graph中需要像上面的shader代码一样,进行一个纹理值的采样才能正常输入albedo。所以我们要将texture节点作为输入连接sampler2D这个节点,然后再将sampler2D这个节点的输出作为albedo的输入。

然后是我们再UE4中的材质shader编写,在UE4的shader编辑中,他的texture sample节点会总动将纹理进行采样,所以我们只需要进行将texture sample的rgb节点连接到basecolor就能将纹理输出

UE4中的纹理贴图

SD中进行纹理贴图与UE4中相似,但贴图节点的名称为bitmap。

SD中的bitmap节点

bitmap主要存储的是一个rgba的像素组,但SD作为一个造轮子的软件,他的材质不需要对geometry负责,所以一般不会在SD中进行使用贴图,也有其他的情况需要进行赋予贴图,这里不再赘述。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注