认识着色器：顶点，多边形和网格电视电影小迷妹 TVco.cn

与着色器亲密接触。他们将撼动您（游戏）的世界！

您最喜欢的游戏

请暂时记住您最喜欢的视频游戏。现在想象您正在玩它。您最喜欢它什么？有趣的游戏玩法，诱人的配乐，令人上瘾的故事或迷人的画面？

做出所有出色的游戏都需要这些。但是，任何游戏的一个方面都是最引人注目的，并且这是任何游戏的初始印象。是的，图形。

图形在视频游戏中扮演着重要角色，并且随着新的强大GPU的出现，图形在游戏中比以往任何时候都更加重要。图形可能比故事或游戏玩法重要，也可能不重要，但这就是问题：图形很重要。很多。

从色彩缤纷，光彩夺目的神奇宝贝到逼真的GTA-V，我们都记得这些游戏的外观以及它们给我们的感觉。而且，由于人类更多是“视觉”生物，因此与文字或音频相比，我们更自然地处理图像。因此，与其他游戏元素相比，游戏的图形获得更多的关注是很自然的。

那么，这些图形是如何精确制作并呈现到游戏中的呢？

此外，不同的游戏比其他游戏拥有自己独特而富于品味的图形。怎么了阅读并找出！

在视频游戏开发中，图形是需要注意的重要组成部分。图形是由艺术家在3D建模软件（如Blender，Maya）或视频处理工具（如Photoshop，Gimp）中用于视频游戏的艺术资产，用于2D图像。

您必须注意的是，每个游戏都有不同的外观。例如，GTA游戏中的汽车看上去与NFS系列中的汽车不同。游戏的图形赋予游戏独特的品牌，使玩家享受和迷失自己的独特体验。

那么，是什么让每个游戏的外观和感觉有所不同？

显而易见的答案是，它们是由不同的人，具有不同的艺术风格和环境制作的，但是也很少有被称为“着色器”的程序来产生最大的差异。

输入着色器：

在最简单的定义中，着色器是一种计算机程序，通常在GPU上运行，以告知每个像素在游戏中的外观。着色器是通过指示和控制美术资产在游戏中的外观，使游戏与其他游戏区分开的秘密调味料。

着色器告诉GPU如何将所有这些美术资产渲染到屏幕中，并说明光在3D对象表面上的行为如何，它们应处于什么颜色以及其他所有细节。

下图可以粗略显示您在游戏中看到的3D模型的制作和绘制方式：

我们将在短期内详细介绍图中提到的术语。现在，仅需了解，在美术师制作了游戏的模型（汽车，人物，树木等）后，这些模型就会导入游戏引擎中。之后，通过其材质将着色器应用于这些材质，最终控制它们在游戏中的外观。

回到基础：什么是3D模型？

（如果您了解网格，顶点，多边形和材质，则可以跳过本节。）

GTA中的那辆闪亮的汽车，FIFA中的现实玩家以及那张闪亮的爆炸性箱子，这些都是3D模型。 3D模型是填充游戏世界并使其变得有趣和有趣的对象。

现在，要真正理解着色器并欣赏它们的魔力，我们必须意识到3D模型的构造。

首先，看一下：

如果我问你她是做什么的，你会怎么回答？如果这是Biology 101，那么您所回答的将是骨头，神经，器官以及所有东西。但是，这是Shader 101，我们的答案将是数学上的一点。

3D模型本质上是一个数学对象，由与边缘连接在一起的顶点组成，形成多边形网格，并通过材质和纹理在视觉上进行了修改。 ew！让我为您分解一下：

3D模型包含两个元素：结构和外观。

内部是什么：构造

3D模型由以下内容构成：

顶点：

顶点是点的数学术语。在讨论3D模型时，我们需要定义3个属性：长度，高度和深度，这是通过使用3个坐标系实现的：X代表长度（水平），Y代表高度（垂直），以及Z是深度，如下所示：

因此，顶点表示屏幕上的X，Y，Z坐标。它们在3D空间中定义一个点。它们是所有3D模型中最小的部分。

2. 边缘：

边是连接顶点的东西。它们有助于定义3D模型的形状。而且，通过修改边缘，还可以对3D模型执行不同的变换。

3. 面孔：

多个连接的顶点内的区域称为面。面会填满边缘内的区域并使其可见。

以下是这3个概念：

并且，在3D模型中，可以将其视为：

4. 多边形：

当您有多个顶点时，连接边缘以获得形状并获得使之可见的面，您将获得一个多边形。

因此，基本上： 多边形=顶点+边+面

现在，多边形在3D游戏中非常重要，因为它们是每个3D模型中最基本的构造单位。类似的类比是构成我们身体的细胞。因此，多边形是视频游戏中大多数3D模型的单元（构造块）。

因此，检查视频游戏的3D模型会让您知道它是真实的，它是由许多“粘合在一起”的多边形组成的。

在这里，像这样：

而且，您需要了解的另一件事是多边形通常是3面或4面。

3面称为Trigs（在Triangles之后），具有3个顶点和3个边，通常更容易着色。

而且，这四个面称为四边形（在四边形之后），您猜对了，它们有4个顶点和边。它们稍微复杂一点，但是效果很好。

最后，我们有poly-count。如您所料，它是3D模型具有的多边形数量。该数字越高，画在屏幕上所需的质量越高，系统资源也就越高。

5.网格：

网格是描述3D对象的几何形状（注意：仅形状，而不是颜色）的顶点，边缘和面的集合。

即

网格=多边形的集合=（顶点+边+面）的集合

因此，网格几乎可以描述3D对象本身的结构。

因此，回顾一下：

外观不错：外观

既然我们已经介绍了3D模型的构成，让我们看看它们是如何可视化描绘的。

我之前说过，外观由材质控制，该材质将纹理和着色器应用到模型中。让我们检查其中的每个：

材料：

材料本质上是定义如何在屏幕上绘制3D模型的表面（或多边形的表面）的材料。它是通过应用着色器中存在的信息以及可以附加到材质的纹理来实现的。

根据官方的Unity文档，材料定义为：

a）用于渲染（即在屏幕上绘制）材质的着色器。

b）着色器参数的特定值-例如要使用的纹理贴图，颜色和数字值。

因此，我们可以宽松地说：

材料=（着色器）的属性+ 2D纹理

材料在定义对象的显示方式中起着至关重要的作用。

如果仔细查看Unity中的“材质”，您会发现它具有多种选择（从“着色器”中获取），可以影响游戏中3D模型的显示。

2 。 质地：

想象一下您要为某人购买的礼物。现在，您要包装它。是否更容易分别绘制和制作每侧的包装纸，还是只希望立即获得包装纸并包装整个礼物？

而且，除非您要执行艰巨而毫无意义的任务，否则您可能会说第二个吧？

而且，我们的3D模型也是如此。我们有一个3D模型（其网格）。并且，纹理是应用于网格表面以提供更多细节的平面图像。纹理中包含适当的信息，关于应将其自身应用到3D对象上的位置，以使其适合在正确的位置，整个过程称为“ UV贴图”。（稍后对此有更多说明！）

因此，只需将纹理视为适合您的3D模型的包装纸即可。

这应该使它更清楚：

3.着色器：

啊，着色器。我们的主要男人。我们的关键。唐。好吧，我现在停止。

正如我之前说过的，Shader由对GPU的一些指令组成，该指令告诉GPU如何使每个像素看起来更好。这些指令是用CG / HLSL（计算机图形/高级着色器语言）编写并在GPU上运行的程序。

在这种情况下，让我们参考Unity文档，看看它关于Shaders的内容：

着色器定义：

a）渲染对象的方法。这包括代码和数学计算，其中可能包括光源角度，视角以及任何其他相关计算。着色器还可以根据最终用户的图形硬件指定不同的方法。

b）可以在材料检查器中自定义的参数，例如纹理贴图，颜色和数值。

简而言之，它意味着着色器就是那个，它告诉GPU如何在屏幕上精确绘制对象，并且还定义了与之相关的所有计算。而且，可以通过检查器通过其所附着的材质自定义Shader定义的内容。

着色器定义的内容是纹理，颜色和其他属性，我们将在稍后讨论。

因此，在开始着色器编程之前，您仅需要了解3D模型。

现在，再看一下之前显示的图像，希望这次，现在对您来说更有意义：

因此，一个3D模型由顶点和其他数学数据（如法线，UV数据，将在以后的课程中介绍）组成。 3D模型具有一种材质，该材质实现纹理和着色器以定义模型的外观。并且，着色器由代码组成。着色器的编码以CG（计算机图形）语言或HLSL（高级着色器语言）完成。而且，还有用于不支持默认Shader代码的劣质GPU的替代版本。

（顺便说一下，由于CG和HLSL都是针对GPU的，因此它们的大多数语法是相似的，并且在一个中获得的知识很容易转移到另一个中。）

像素之旅：渲染管线

（ 本教程的这一部分和图像均基于 这篇出色的文章 ，在此 我将其总结为自己的措辞。 ）

在开始定义和编写着色器之前，我们需要了解的最后一件事是：图形渲染管道。

渲染管道是在屏幕上显示3D模型数据之前必须完成并执行的一组任务。渲染管道显示了在屏幕上显示像素的过程，从而定义了GPU如何渲染图像。

（顺便说一句，像素是计算机屏幕的最小单位。成千上万的像素组合在一起构成屏幕的分辨率。因此，要在屏幕上显示某些内容，我们需要修改屏幕上所需的像素。）

另外，这是Wikipedia的内容丰富的文章：

创建3D模型后，在视频游戏中， 图形管道是将3D模型转换为计算机显示内容的过程 。

因为此操作所需的步骤高度取决于所使用的软件和硬件以及所需的显示特性，所以没有适用于所有情况的通用图形管线。

但是，创建了诸如Direct3D和OpenGL之类的图形API来统一相似的步骤并控制给定硬件加速器的图形管线。

这些API主要对底层硬件进行抽象，并使程序员无需编写代码即可操纵图形硬件加速器（AMD / Intel / NVIDIA）。

因此，这是渲染管道的一般概述：

现在，在GPU是CPU之前。在过去，没有任何硬件进步来创建单独的硬件单元来渲染图形，过去，渲染都是由CPU完成的。旧计算机使用软件计算来渲染图形。

现在，此过程曾经是CPU真正的密集工作，因此在渲染图像时会导致性能下降和灵活性不足。

然后，随着图形卡的引入，引入了新的图形管道，称为固定功能管道。它是严格固定和顺序的。不可能修改渲染过程，但是它比旧的基于软件的渲染管道要好得多。

让我们更详细地研究它，因为它将使我们了解一些渲染的基本概念：

现在，在此管道中，图形数据必须先经过以下几个阶段，然后才能绘制到屏幕上：

输入数据 ：

这仅仅是关于要在屏幕上绘制的图像的数据。它包含有关每个单独顶点的数据以及它们的各种属性，例如它们的位置，颜色，其法线等。

2 。改造 和照明：

这涉及到有关变换（移动，缩放，旋转）以计算图像对象的位置的各种几何运算，以及为每个顶点计算的照明运算。它通常包括将模拟物体表面上的光的操作。

3.基本 设置：这是一个三角剖分的过程，其中，顶点被组合成三角形或四边形以构成多边形。

4.栅格化：此阶段通过参考到目前为止我们拥有的有关模型的所有信息来处理查找像素的颜色。

5.像素 处理：它从光栅化中获取数据（关于像素颜色），然后对像素进行实际着色。

6.帧 缓冲区 混合：

帧缓冲区是一种计算机存储结构，其中包含有关每个像素，其位置，颜色，照明以及我们到目前为止计算出的每个数据的信息。帧缓冲区的内容就是屏幕上显示的内容。因此，帧缓冲区混合阶段将帧缓冲区的数据混合（传输）到屏幕中，并最终显示我们的图像对象。（它可以是3D模型，也可以只是2D纹理。）

（帧缓冲区是一个很大的问题。我们将在以后进一步详细讨论它，以及其他缓冲区。）

因此，关于此渲染管道模型，您应该了解一些事情。它是固定的，即它不是可编程的，并且所有照明（3D场景中的光的模拟，例如我们现实世界中的太阳），纹理，工作都是硬编码的。

后来引入了着色器以消除此限制，并使整个过程可编程，更加灵活和动态。

随着图形卡的发展，顶点和像素的处理变得可编程（通过着色器！）。这是最新的图形渲染管道，其后是现代GPU：

现在，您可能已经注意到三个新组件：

a） 顶点着色器：顶点着色器可以操纵诸如位置，颜色和纹理坐标的属性。顶点着色器可以在涉及3D模型的任何场景中对位置，运动，照明和颜色的细节进行强大的控制。

b） 几何着色：这是由几何着色器执行的。使用顶点着色器的输出作为输入，此着色器可以动态创建新的几何形状（形状）。因此，它可以根据需要绘制新的线，顶点或其他几何形状。

c） 像素着色：由像素着色器（或片段着色器）完成，它们计算每个“片段”的颜色和其他属性-一个技术术语，表示单个像素。

因此，这就是渲染管道，如何将有关图像/ 3D模型的数据表示在屏幕上。所有这些似乎对于您现在来说太复杂了，但是随着时间的流逝，您将开始编写自己的着色器并与这些阶段进行交互就可以开始使用它了。现在，请注意，这是在图形显示在显示器上之前发生的事情，您一切顺利。

现在，您已经对3D模型及其工作以及渲染过程提出了扎实的概念，让我们加快步伐，进入本系列的下一部分。我们将在那里写我们的第一个着色器！

继续阅读！

在第2部分“从内而外：着色器的解剖结构”中获取阴影。

认识着色器：顶点，多边形和网格

与着色器亲密接触。 他们将撼动您（游戏）的世界！