♒️ 👨‍👩‍👧‍👧 Ⓜ️ Unity Shader Graph基础 👨‍🔧 💕 🗺️

着色器是一个小型程序，其中包含针对GPU的指令。它描述了如何计算特定材料的屏幕颜色。

尽管Unity具有标准着色器，但有时您需要实现标准着色器无法提供的效果。

以前，这需要特定着色器语言（例如Cg或HLSL）的知识，并且其中的方法与通常创建游戏脚本的方式略有不同。对于许多人来说，编写着色器是游戏开发中不受欢迎的方面，因为它需要开发其他学习曲线。

Unity引入了Shader Graph ，这使编写几乎不需要代码的着色器变得更加容易。最重要的是，Shader Graph允许您使用可视的交互式界面。

在本教程中，您将创建第一个Unity着色器！

开始工作

本教程使用Unity 2019.1或更高版本。在此处下载新版本的Unity。

注意：尽管本教程是供Shader Graph的初学者使用的，但假定您已了解Unity中开发的基础知识并已掌握引擎的界面。如果您不熟悉Unity，请查看出色的Unity入门教程。

在此处下载教程材料。然后解压缩内容并在Unity中打开“ Shader Graph Starter简介” 。

“项目”窗口中的RW文件夹的组织方式如下：

字体：场景中使用的字体。
材料：用于场景的材料。
模型：游戏形状和背景的3D网格。
PostFX ：场景渲染的后处理效果。
预制件 ：各种预制组件。
场景：游戏场景。
脚本：具有游戏逻辑的脚本。
着色器 ：为本教程创建的着色器图。
精灵：用作说明一部分的精灵。
纹理：游戏形状和背景的纹理贴图。

现在从“ 场景”文件夹中加载“ 七巧板拼图 ” 场景。

这是一个名为七巧板的简单游戏，它于19世纪在中国出现。玩家的任务是移动七个平坦的几何形状，使其成为程式化的象形图或轮廓。

在编辑器中启动“ 播放”模式并测试演示游戏。

您可以单击形状并将其拖动。使用方向键旋转形状。旋转和移动形状，以使它们彼此不重叠。

您能弄清楚如何移动这七个形状来创建这样的图案吗？

因此，从技术角度来看，该游戏可以运行，但不会提供有关所选图形的任何视觉反馈。

如果我们可以在鼠标悬停在其上方时使形状发光怎么办？这将改善用户界面。

这是展示Shader Graph功能的绝好机会！

检查着色器图的管线参数

Shader Graph仅适用于相对较新的可编写脚本的渲染管线 ，即适用于High-Definition Render Pipeline或Lightweight Render Pipeline 。

创建用于使用Shader Graph的新项目时，请选择正确的模板。

该示例项目已配置为可与“ 轻量级渲染管道”一起使用 。首先，在PackageManager中，选择Window►PackageManager ，确认您已安装Lightweight RP和ShaderGraph软件包。

然后选择可用版本之一，如有必要，请单击更新到按钮。通常，最好的选择是最新的验证版本。

更新软件包后，请在“ 编辑”►“项目设置”中仔细检查管道参数的正确性。

在“ 图形”选项卡上，“ 可编写脚本的渲染管道设置”参数应设置为LWRP-HighQuality 。因此，项目将为“轻量级渲染管道”使用最高的默认设置。

确保使用脚本编写的渲染管道资源之一后，关闭此窗口。

创建PBR图

在屏幕上渲染3D网格时，材质和着色器始终协同工作。因此，在开始创建着色器之前，我们需要材料。

首先，在“项目”窗口中单击“ 创建”按钮，以在RW /材料文件夹中生成新材料。选择创建►材质 ，然后将其重命名为Glow_Mat 。

然后，在RW / Shaders文件夹中，通过选择创建 ►Shader►PBR Graph来创建PBR图 。这是一个着色器图形，支持物理上精确的渲染或PBR。

将其命名为HighlightShaderGraph 。

到目前为止，“材质Glow_Mat”使用LightweightRenderPipeline的标准着色器，称为LightweightRenderPipeline /Lit。

将其更改为新创建的新着色器图。选择Glow_Mat后 ，单击检查器顶部的“ Shader”下拉菜单，然后选择“ Shader Graphs” ►HighlightShaderGraph 。

Glow_Mat会呈现较浅的灰色阴影，但其他情况下将保持沉闷。不用担心，我们会尽快修复。

现在，双击HighlightShaderGraph资产或在检查器中单击“ 打开着色器编辑器 ”。这将打开“ Shader Graph”窗口。

查看此界面的主要部分：

主工作区是一个深灰色区域，将在其中存储图形操作。您可以右键单击工作区以打开上下文菜单。
节点是图的单个元素。每个节点都有一个输入，输出或操作，具体取决于其端口。节点使用edge彼此连接。
主节点是图形的最后一个输出节点。在此示例中，我们使用物理上准确的渲染选项，也称为PBR主节点。您可能会注意到其中的某些属性，例如标准明暗器中使用的反照率，法线，发射和金属。
黑板可以提供对检查器中图形某些部分的访问。这样，用户无需直接编辑图形本身即可配置参数。
主预览以交互方式将着色器的当前输出显示为球体。

通过连接各个节点，您可以创建一个着色器图 ，Unity可以将该着色器图编译并传输到GPU。

创建一个颜色节点

首先，让我们为着色器提供一些基本颜色。为此，请将颜色节点与PBR主节点的Albedo组件相连。 右键单击工作区以通过选择创建节点►输入►基本►颜色从上下文菜单创建第一个节点。

请注意，“ 创建节点”菜单中有数百个节点！乍一看似乎令人困惑，但是您很快就会发现最常用的那些。

接下来，将节点拖到工作区上，并保持其标题栏不变。然后将其放在PBR主节点左侧的某个位置。

“ 颜色”节点允许您指定一种颜色。单击颜色字段，然后选择漂亮的红色，例如R：128，G：5，B：5 。

要将颜色输出到PBR主节点，请将“ 输出”端口拖到Albedo端口，该端口指示着色器的基本颜色。

通过并排连接节点，您应该看到“ 主预览 ”中的球体如何变为红色。

太好了！在编写着色器方面，创建单色着色器类似于Hello world！

尽管您可能还不了解这一点，但是您只是创建了第一个着色器！

使用界面

尽管图中只有几个节点，但现在是适应Shader Graph界面的最佳时间。

尝试拖动节点，请注意彩色输出端口和PBR主输入端口之间的边缘保持连接。

节点可以包含各种类型的数据。就像我们创建一个包含单个输入颜色的节点一样，我们可以创建一个代表单个数字的节点。选择创建节点►输入►基本►整数 。我们不会对该节点做任何事情；仅需说明原理。

将Integer Out端口连接到PBR主节点的Alpha端口。

我们的图仍然很小，但是我们已经有足够的节点来检查热键的动作。选择一对节点，然后按以下键：

F ：框住所选节点。
A ：构图整个图。

您也可以使用窗口顶部的按钮在Main Preview和Blackboard之间切换。 “ 在项目中显示”按钮有助于在“项目”窗口中找到当前的着色器图形。

处理完图形的管理后，我们将其清除。我们需要的只是Color和PBR Master节点。

右键单击Integer和Master节点之间的连接，然后选择Delete 。这会将节点与图形分开。

同样，您可以完全删除Integer节点。右键单击该节点，然后选择“ 删除” 。

完成后，单击界面左上角的“ 保存资产”按钮。 Unity将保存所有更改，然后编译并激活着色器。每当您要在编辑器中查看最新更改时，都应执行此步骤。

现在回到窗口并选择Glow_Mat材料。

随着着色器延伸到材质，检查器的预览窗口中的球体应变为红色。

现在，将“ Glow_Mat”材质拖到 “ 场景”窗口中的七巧板形状上。

不出所料，带有着色器的材质将网格物体涂成美丽，均匀的红色。

添加发光效果

如果希望Glow_Mat材质具有更神秘的发光效果，则需要再次编辑着色器图。

现在，颜色输出将传输到Albedo PBR主节点的输入。

您也可以将另一条边从“ 出”拖到“ 发射” 。现在，两次使用相同的颜色：既用作基础颜色，又用作辐射线的颜色。

输出端口可以有多个边，输入端口只能有一个。

现在，将“ 颜色”节点的“ 模式”下拉菜单切换为HDR模式。因此，我们将包括扩展的颜色动态范围。

现在更改颜色字段。在HDR模式下 ，出现了其他强度选项。在底部面板中单击+1两次，或将滑块拖动到2.5左右。现在保存更改并返回编辑器。

在编辑器中，该图将以亮橙色发光。场景中的后处理功能已经启用，它可以增强动态范围的色彩。

现在，在层次结构中选择游戏对象PostProcessing 。发光是由于布隆效应。

打开“ Bloom”选项，然后设置“ 强度” （发光强度）和“ 阈值” （发光起始阈值）。该示例显示值3和2 。

哇，这闪耀！

创建突出显示脚本

我们不希望人物不断发光。我们需要仅根据鼠标的位置打开发光。

当鼠标光标悬停在形状上时，我们必须启用Glow_Mat材料。在其他情况下，该图应与标准材料Wood_Mat一起显示。

首先，在RW /脚本中创建一个新的C＃脚本，并将其命名为Highlighter 。他将帮助我们在程序执行期间在两种材料之间切换。用以下代码替换脚本中的所有行：

using UnityEngine; // 1 [RequireComponent(typeof(MeshRenderer))] [RequireComponent(typeof(Collider))] public class Highlighter : MonoBehaviour { // 2 // reference to MeshRenderer component private MeshRenderer meshRenderer; [SerializeField] private Material originalMaterial; [SerializeField] private Material highlightedMaterial; void Start() { // 3 // cache a reference to the MeshRenderer meshRenderer = GetComponent<MeshRenderer>(); // 4 // use non-highlighted material by default EnableHighlight(false); } // toggle betweeen the original and highlighted materials public void EnableHighlight(bool onOff) { // 5 if (meshRenderer != null && originalMaterial != null && highlightedMaterial != null) { // 6 meshRenderer.material = onOff ? highlightedMaterial : originalMaterial; } } }

让我们分析一下这个脚本：

该脚本只能应用于包含组件MeshRenderer和Collider的对象。这是通过将[RequireComponent]属性添加到脚本顶部来控制的。
这些是指向MeshRenderer ， originalMaterial和MeshRenderer链接。用[SerializeField]属性标记材料，该属性使您可以从检查器分配它们。
在Start方法中，我们使用GetComponent自动填充GetComponent 。
称为EnableHighlight(false) 。这可以确保默认情况下显示非突出显示的内容。下面是公共的EnableHighlight方法，该方法可切换渲染器材质。它接收布尔参数onOff ，该参数确定背光的状态。
防止所有NullReference错误
为了节省空间，我们使用三元运算符。

添加鼠标事件

由于此脚本适用于具有MeshCollider形状，因此我们可以使用内置方法OnMouseOver和OnMouseOver 。在EnableHighlight方法之后添加以下代码：

  private void OnMouseOver() { EnableHighlight(true); } private void OnMouseExit() { EnableHighlight(false); }

当鼠标悬停在形状上时，它将调用EnableHighlight(true) 。同样，当鼠标离开Collider时，它将调用EnableHighlight(false) 。

仅此而已！保存脚本。

图高亮

如果在本教程的前面各节中将Glow_Mat应用于任何图形，那么在编辑器中，您需要将Wood_Mat材质返回给所有游戏图形。现在，要打开发光效果，我们将在程序运行时使用荧光笔 。

首先，我们将在变换七巧板中选择七个对象，它们是单独的形状。然后，我们将所有Highlighter脚本同时添加到它们。

然后将Wood_Mat拖到“ 原始材质”字段中，将Glow_Mat拖到“ 突出显示的材质” 字段中 。现在运行“ 播放”模式并检查我们的工作结果。

还不错！当您将鼠标悬停在七巧板形状上时，它开始以亮红色发光。如果从中删除光标，它将返回其原始状态。

在游戏本身中，什么都没有改变，但是高光效果增加了视觉趣味并允许玩家专注。

使用纹理节点

目前，我们的简单着色器具有纯色亮红色。我们将更改着色器，以使其不会丢失其原始的木材纹理。为此，我们将使背光显示为表面周围的发光边缘。

首先，通过双击或选择来更改HighlightShaderGraph
在Open Shader Editor中 。

右键单击并选择Delete，以删除Color节点。我们将从头开始创建所有内容。

我们使用“ Sample Texture 2D ”（ 采样纹理2D）节点代替单色，而不是单色。

通过右键单击并选择“ 创建节点” ，或使用热键（空格），从上下文菜单创建节点 。选择输入►纹理►采样2D纹理 。

Sample Texture 2D节点从纹理资产读取颜色信息并输出其RGB值。

从“ 纹理”输入端口中选择一个纹理。单击空白字段旁边的点以打开文件浏览器。

选择WoodAlbedo纹理资产。

将Sample Texture 2D节点的RGBA输出端口连接到PBR主Albedo端口。

瞧！现在，树的纹理显示在预览球体的表面上。

如果添加法线贴图，则可以在曲面上创建零件。首先，通过选择创建节点►输入►纹理►样本纹理2D来创建另一个Sample Texture 2D节点。

在“纹理”输入端口中选择一个WoodNormal纹理。

将类型下拉菜单从默认更改为普通。

将RGBA值输出到PBR主节点的“ 普通”端口。

现在，“ 主预览 ”的范围看起来应该更粗糙。法线贴图模仿了表面上的小不规则和凹痕。这使您可以模拟树的外观。

注意：每个端口的数据类型显示在端口旁边的括号中。 （T2）表示该端口与二维纹理兼容， （4）表示该端口使用Vector4 。根据上下文，着色器图可能会忽略额外的浮点值。

添加菲涅耳效果

现在，纯红色已更改为基本纹理和法线贴图，让我们使用另一种方法添加高光效果。

除了将整个对象均匀发光外，我们将发光仅限制在其边缘。这可以使用菲涅耳效应来实现。

通过右键单击或空格键创建一个新节点，然后选择“ 创建节点”►“数学”►“向量”►“菲涅耳效应” 。

这个新节点显示了一个直径为白色辐射环的球体。您可以使用电源输入端口调整此光晕的宽度。单击并将X拖动到该字段的左侧，或输入所需的数字。

值越大，光环变得越薄，值越小，使其变得非常宽。要在边缘周围创建微妙的光晕，可以使用值4 。

为了将此光晕传达给材料，我们将菲涅耳效果输出连接到PBR主节点的“ 发射”输入。

现在， MainPreview通过一个菲涅耳效应获得了一个带有明亮白色光晕的木质球体。

注意：菲涅耳效应是以法国物理学家奥古斯丁·让·菲涅尔的名字命名的。他注意到，当观察者接近滑行角时，光线使表面非常明亮，看起来像镜子。

您可以尝试在厨房的桌子上用餐。我们使用这种现象的Unity版本来给几何图形发光。

颜色相乘

您可以使用简单的颜色计算将颜色添加到发光轮廓。

创建一个新的颜色节点，该节点将指示发光环的颜色。 右键单击或用空格键打开上下文菜单，然后选择“ 创建”节点►“输入”►“基本”►“颜色” 。将色彩模式切换为HDR 。

选择一种将指示背光源颜色的颜色。例如，选择一个美丽的亮绿色： R：5，G：255，B：5 。

将强度增加到3.5 。

我们不能将新颜色与菲涅耳效果结合使用。因为它没有颜色输入。因此，我们需要将效果的输出与颜色节点的输出结合起来。可以使用“ 乘”节点来完成。

右键单击以创建一个乘法节点，然后选择创建节点►数学►基本►乘法 。

删除菲涅耳效果和PBR主控之间的边缘。将菲涅耳效果输出连接到“ 乘”节点的A输入。

将“ 颜色 ”节点的“ 输出”节点连接到“ 乘”节点的输入B。

然后将“ 乘出”节点连接到PBR主节点的“ 发射”端口。瞧！现在，我们了解鲜绿色的HDR颜色如何围绕主预览球体。

请记住，您可以使用菲涅耳效果功率来增加或减少光晕。如果将该值减小到1.5，则会发出宽绿色的光。

对于我们的游戏示例，从4到5的值是好的，但是您可以尝试使用自己的值。

保存着色器图形并返回到编辑器。您将立即看到您的HighlightShaderGraph在起作用。

启动播放模式。

将鼠标悬停在形状上时，它会保留其树纹理。但是，现在在其边缘周围出现了明亮的绿色光芒。正式而言，游戏中什么都没有改变，只有背光变弱了。

添加黑板属性

如果要更改发光效果的外观，则需要返回到“ Shader Graph”编辑器窗口并进行这些更改。例如，使用菲涅耳效果功率，扩大或缩小晕圈。

如果我们要测试各种更改，这不是很方便。幸运的是，Shader Graph具有属性的概念。

您可以在检查器中使图形的一部分公开可见，从而允许您交互式地进行小的更改。这是使用Blackboard界面完成的。

返回到“着色器图”并打开“ 黑板”显示。如果它是隐藏的，则单击右上角的“ 黑板”按钮。

添加基础纹理和法线贴图属性

现在，我们将同时打开基础纹理和法线贴图，以便可以通过检查器对其进行访问。

单击Blackboard右上角的+图标。从下拉列表中选择“ Texture 2D ”。该项目应出现在黑板上 。将其重命名为BaseTexture 。

确保已选中暴露的复选框。如果您打开财产，它将在检查员中公开并可以访问。

要将属性添加到图形，只需将其通过标签拖动到工作区中即可。将其放在“ 采样纹理2D”节点左侧的某个位置。

将BaseTexture端口连接到连接到Albedo的SampleTexture 2D节点的Texture输入端口。这将替代先前的设定值。

对法线贴图重复相同的过程。单击+图标，然后创建一个新的Texture 2D 。将其重命名为法线贴图 。

将属性拖到工作区中，并将其附加到法线贴图的Sample Texture 2D中。

单击保存资产并返回到主编辑器窗口。

选择Glow_Mat材质，并在检查器中注意两个新字段： 基本纹理和法线贴图 。

由于尚未为其设置纹理，因此预览窗口中灰色球上方的绿色高亮显示。

为 BaseTexture和NormalMap选择WoodAlbedo和WoodNormal 。

现在，在发光的边缘下，树的纹理将正确显示。

公共属性允许用户直接将数据输入到着色器中，而无需编辑着色器图。自己尝试各种不同的基本纹理和法线贴图。

添加属性发光尺寸和发光颜色

现在，我们将揭示Blackboard中的其他类型的属性。例如，更改菲涅耳效果功率值将很有用。

单击Blackboard上的+图标，然后创建Vector1属性。它表示float类型的单个参数。

将其重命名为GlowSize 。

您可以通过将其转换为滑块来限制为此属性输入的值的范围。将“ 模式”切换到“ 滑块” ，然后将“ 最小值”设置为0.05 ，将“ 最大值”设置为6以指定范围。将默认值设置为5 。