Shader从入门到跑路：颜色自定义输出、纹理采样

作者：俊铭2020-03-27

前言

我们来加深一下目前理解到的内容，并且着手解决一些在学习过程中遇到的疑惑（如果有疑惑但我没提到欢迎在评论留下我会随后加上）。

首先，以往我们写程序是在CPU上跑，但写shader则是在GPU上跑，我们会用两对好兄弟，分别是vertex shader和fragment shader。

vertex shader是每个顶点都会调用一次的程序，它可以访问顶点的位置、法线、纹理等信息，这些值在经过一些处理之后，会先跑一个叫做“光栅化（Rasterization）”的过程。我们都知道，显示器是由红绿蓝 LED 组成的显示单元，因此单元之间是离散的，而“连续”的三维图像要渲染到屏幕上，就要经过一系列的修改，称之为光栅化。

此时得到就是片元（fragment），我之前说过片元与最终的图像单位是非常接近的（我甚至鼓励大家以图形的方式来理解它们实在是抱歉），但它们之间仍存在着微妙的差别。这是因为片元需要先通过一些测试，比如深度测试、透明度测试等，以决定它们是需要被使用还是被抛弃。其实在这里并不需要太纠结片元到底是不是像素，因为这不是这个系列的重点。

而由每个片元分别调用一次的就是fragment shader，它可以获取片元的二维、深度、颜色等信息。注意，fragment shader获取的片元颜色是根据片元的三个顶点颜色插值计算后得到的，也就是说如果三个顶点颜色并不相同，那么最终颜色便是渐变的。

shader的计算是在CGPROGRAM内完成的，并且应该符合以下结构

struct appdata{}; // 获取模型数据
struct v2f{}; // 存放计算结果
v2f vert(appdata v){} // 拿取模型数据计算后传给fragment shader
float4 frag(v2f i) : SV_Target{} // 拿取计算结果作用于目标

复制代码

注意，在结构体内定义的输入输出是由语义限定的，举个栗子：

struct appdata{
float4 vertex : POSITION; // 把模型顶点坐标填充到vertex中
float2 uv : TEXCOORD1; // 第一组纹理坐标
float3 normal : NORMAL; // 把法线方向填充到normal中
};
struct v2f{
float4 vertex : SV_POSITION; // 输出到裁剪空间中的顶点坐标
float3 color : COLOR; // 输出颜色
};
float4 frag(v2f i) : SV_Target{ // frag输出值直接用于渲染
return float4(i.color, 1.0);
}

复制代码

语义是很聪明的一种设计，它能够让Shader知道从哪里获取数据，并且还知道把输出的数据放到哪里（或者怎么放）

问题1：顶点位置是一种坐标系，uv也是一种坐标系，既然都是坐标为什么不能只算一个多方便啊？

好问题！（拍大腿）这两种坐标系的应用是不一样的，顶点是一个和网格（mesh）相关的局部点，以xyz为坐标轴；而uv则是贴图映射到模型表面的依据，以uvw为坐标轴，或者可以将uv看作一张纹理查找表格。因为xyz轴已经被网格占用了，所以贴图用的坐标轴就只能用uvw了，简称uv。很多同学看了一些shader教程经常见到它们两一齐出现，自己写的时候不知所以索性就一齐计算了。

5.4 鲁迅名言

问题2：有些shader程序的frag函数输出的COLOR，而另一些则是SV_TARGET，有什么区别啊？

没啥不同，SV开头的是Direct3D定义的一种System Value语义，SV_TARGET对应的就是COlOR，但有些平台支持SV语义，而有些则不支持。但这并不重要，因为编译器会自动帮我们做转换，它们两的功能是一样的。类似还有SV_POSITION与POSITION，SV_DEPTH与DEPTH等等。反正无脑写SV_Target就没错了（狗头）

自我小测：

在写过一些shader之后，我们已经是个shader程序员了，当然要学会自己写shader咯，下面是一些可以努力的方向，并获取图中的渲染效果（因为是读者自我测验，因此笔者不会提供答案，但如果实在想不明白可以私信笔者问思路）

练习1 ：新增一个_Color属性，并将其与主纹理的颜色相乘