Unity Shader Graph 节点入门

在本文中，我将了解 Shader Graph 是什么； 使用着色器图； Shader Graph的特点； 如何使用 Shader Graph 创建一个简单的着色器； 一些带有示例的有用节点； 以及在查看使用旧版本的 Shader Graph 创建的着色器时需要注意的一些事项。 有了这些信息，您应该准备好创建一些基本的 Shader Graph 节点效果！

我将为您提供一些额外的资源，您可以查看这些资源 - 这些资源可以帮助您创建和自定义您自己想要的视觉效果，而这些视觉效果在本文的范围内无法涵盖。

以下是您将学到的内容：

• 着色器及其重要性

  • 我们可以使用着色器获得不同的效果

• 什么是着色器图？

  • 使用 Shader Graph 需要什么？

• 使用着色器图

  • 基本着色器图定义和术语

• Shader Graph 窗口的七个组件

• 有用的内置着色器图功能

• 创建你的第一个着色器

• 如何使用流行节点（附示例）

  • 纹理和色彩效果

  • 边缘光效

  • Dissolve effect

  • 用发射效果溶解

  • 将它们组合在一起

• 新旧 Shader Graph 版本之间的差异

• 其他资源

着色器及其重要性

在我进入 Shader Graph 之前，我们需要知道什么是着色器以及它们如何影响我们。

着色器是在 GPU 上运行的小程序，用于纹理映射、照明或着色对象。 屏幕上显示的所有内容（计算机程序或游戏，包括游戏机）在显示之前都会经过某种着色器。

对于大多数程序，这是在幕后自动内置的。 在 3D 建模中，通常在模型最终渲染之前将软件添加到模型中。 电影制片厂用它们来渲染电影的效果，游戏用它们来显示一切。

如果您使用 Unity，您甚至会在不知不觉中使用它们：显示的所有内容都有某种使用着色器的材质。

This image illustrates some of the different types of shaders available by default in Unity.

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

现在你可能会问自己，如果 Unity 已经提供了可以使用的着色器，我们为什么还要关心着色器呢？ 简单的答案是，提供的默认设置是平淡无奇的，并且不添加任何特殊的使用，例如水、全息、鬼影、发光或溶解效果，仅举几例。

我们可以通过更改设置来获得其中一些效果，例如 表面类型 （ 不透明 或 透明 ）、指定 金属 或 镜面反射 、 平滑度 或添加 发射 。 问题在于它们都是静态的。 我们想要的是一些动态效果或自定义设置，我们可以使用它们来为我们的游戏或应用程序的外观添加一些润色。

我们可以使用着色器获得不同的效果

让我们来看看一些不同的着色器效果。 这些只是可能的一小部分。 图片来自互联网图片搜索“Shader Graph Unity effects”：

来自流行的 YouTube 节目频道 ：

From the Unity blog:

什么是着色器图？

现在我们知道了着色器是什么，并看到了我们可以从着色器中产生的一些不同的可能效果，让我们看看如何创建这些着色器。

Shaders used to be created through code; over the years, different software companies have been adding tools that allow the creation of shaders through visual node-based systems. Unity is no different; they have given us Shader Graph.

Refer to Unity’s Shader Graph features for the highlights: “Shader Graph enables you to build shaders visually. Instead of writing code, you create and connect nodes in a graph framework. Shader Graph gives instant feedback that reflects your changes, and it’s simple enough for users who are new to shader creation.”

Shader Graph 是为艺术家设计的，但不是着色器程序员的程序员也可以使用它来轻松创建着色器。 嘿，并不是我们所有人都与拥有专门的着色器程序员/艺术家团队预算的 AAA 工作室合作。 此外，着色器可能需要大量复杂的数学和算法知识才能手动编码。

例如，在 Unity 中创建的新着色器的快照使用颜色纹理对模型进行基本照明。 这是 1685 行代码中的第 1571 到 1580 行：

使用 Shader Graph 需要什么？

Unity 记录 了使用 Shader Graph 的这些要求 ：

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

将 Shader Graph 与 Unity 2018.1 及更高版本中提供的任一脚本渲染管道 (SRP) 一起使用：

• ) 高清渲染管线 (HDRP

• ) 通用渲染管线 (URP

从 Unity 版本 2021.2 开始，您还可以将 Shader Graph 与 内置渲染管道 一起使用。

这意味着只要我们使用其中一个 SRP，我们就可以开箱即用地使用 Shader Graph。

尽管我们可以使用包管理器安装它并将其与内置渲染管道一起使用，但 Unity 继续声明， “建议将 Shader Graph 与可编写脚本的渲染管道一起使用。”

第一步是使用 URP 或 HDRP 模板在 Unity Hub 中创建一个新项目（或将其中一个 SRP 安装到现有项目中）。

使用 URP 或 HDRP 模板创建项目。

Once the scene loads, I add a capsule to my scene that I can use to display my effects with (feel free to use any 3D object that you want, to include your own model). I also create a material that I can apply my custom shader to and add it to my capsule.

Using Shader Graph

现在我们有了一个非常基本的测试场景，让我们创建一个新的 Shader Graph。 右键单击 > 创建 > 着色器图 > 要使用的 SRP > 着色器类型。

就我而言，我将使用 URP > Lit Shader Graph 。

Shader Graph 菜单将始终包含 Blank Shader Graph （一个完全空白的 Shader Graph，没有选择目标，并且没有将任何块添加到 Master Stack）和 Sub Graph （一个空白的 Sub Graph 资产，一个可重复使用的图形，可以在其他图表）选项。

每个已安装的渲染管道都应该有一个包含模板堆栈的子菜单。 就我而言，我有 URP 和内置子菜单。 该模板创建了一个新的着色器图表，其中包含带有默认块和选定目标的主堆栈。 您以后可以随时更改 Shader Graph 窗口中的设置。

现在我们已经创建了一个 Shader Graph，让我们设置我们用于此着色器的材质。

有两种方法可以做到这一点：

1. 在材质的 Inspector Window 中（所有 Shader Graphs 都在 Shader Graph 子菜单中）  

2. 将着色器拖放到材质上  

基本着色器图定义和术语

现在是暂停并回顾一些有用的术语的好时机，其中一些我已经使用过； 即，主堆栈、块、目标。

• 空间——节点期望它们的输入或输出是什么

• 对象空间 — 对象顶点相对于对象中心/枢轴点的位置

• 世界空间——物体顶点的位置相对于世界中的一个点。 此位置相对于相机的位置（相机相对渲染），不包括相机的旋转。 在 HDRP 中，有一个额外的位置叫做绝对世界空间，它是世界上的一个点。 在URP中，世界空间和绝对世界空间是一样的

• 切线空间——相对于顶点及其法线

• 视图/眼睛空间——相对于相机的前向，考虑了相机的旋转

• 剪辑空间 — 相对于屏幕，一旦投影视图空间

让我们深入讨论一些更复杂的术语。

图表目标（目标）

这是 Shader Graph 的渲染管线； 您必须在项目中安装渲染管道才能在列表中使用它。 并非所有块都与所有目标兼容。

您可以有多个目标：这允许轻松创建可在所有渲染管道中使用的着色器图表，而无需重复工作。 这可以在 Graph Settings 中更改。

属性和关键字

特性

这些是我们可以在着色器编译后用来修改着色器值的变量。

有关属性的更多信息，请参阅 Unity 文档 。

所有属性都有以下设置。 其他设置可用，具体取决于数据类型：

• Name — 为属性显示的名称； 即，在 Shader Grap 中

• Reference — 着色器内部使用的名称。 这必须以 _. 它会自动设置为 Display Name ； 空格被转换为 _. 你可以改变它。 此名称用于通过 C# 脚本访问属性 Material.Set和 Material.Get方法

• 精度 — 有关详细信息，请参阅 精度模式 | 着色器图 | 12.1.7

• 暴露——如果 true, 该属性将在 Material Inspector中公开

• 覆盖属性声明 - 如果启用，覆盖属性声明允许着色器声明枚举

• Default — 用作属性默认值的值。 此值取决于属性的数据类型

关键词

关键字用于为您的 Shader Graph 创建不同的变体（着色器的行为取决于关键字的值）。

关键字是一项高级功能，超出了本文的范围。 在撰写本文时，材质质量是唯一无法更改设置的类型。

如果您想在自己的时间寻找更多关于关键字的信息， Unity 文档 是一个不错的起点。

区块节点

块节点是主堆栈的一部分，并且是着色器节点的输出所连接的。 不同的着色器阶段（ 顶点 或 片段 ）具有不同的块节点。

顶点阶段

顶点的位置，法线和切线。

• Position — 顶点被着色器移动后的位置

• Normal — 顶点指向的方向

• 切线——通常垂直于顶点法线； 如果您更改顶点法线，建议更改此设置

碎片阶段

片段阶段对顶点阶段之后的像素进行操作。 这是颜色和灯光。

哪些块可用取决于目标 添加材质 设置。

• Base Color (albedo) — 不受光照影响的对象颜色。 这是一个 Vector3 颜色，意味着它只有红色、蓝色和绿色值

• Normal - 这用于 Unity 的内置光照计算

• 发射——物体发出的光

• Metallic — 仅在使用金属工作流程时，将对象的金属程度设为 0–1 浮点数

• 镜面反射 — 仅在使用镜面反射工作流程时采用颜色来影响镜面反射高光

• 平滑度 — 0–1 对象的平滑程度。 粗面 > 抛光镜面

• Ambient Occlusion — 0–1 有多少像素被其他光线阻挡。 未遮挡 > 完全遮挡 （人为减少照明）

• Alpha - 0–1 像素的透明度。 在精灵中，这通常是精灵纹理中颜色的 alpha

• Alpha Clip Threshold — 低于此阈值的像素会被剔除

• Sprite Mask — 未在文档中定义。 在除 Sprite Light 类型之外的所有材质中变灰

节点类别

Shader Graph 有超过两百个不同的节点可以用来创建一个着色器； 有关所有节点的详细信息，请参阅 Unity 的节点库。

中的类别进行组织： 节点按“创建节点 ”菜单

• 艺术节点：颜色、颜色通道和纹理操作

• 通道：向量的每个分量的顺序和值

• 输入：基本图元类型、采样纹理和获取有关网格的信息

• 数学：数学运算

• 程序：程序操作，如噪音

• 实用程序：实用程序节点，例如 Preview、Custom Shader Function 和 Logic

• UV：变换用于采样纹理的 UV

• Block：Master Stack的节点； 表示用于最终着色器输出的表面的一部分。 有 Unity 文档 更多信息

要访问 Create Node 菜单，您可以右键单击 Shader Graph 视图并选择 Create Node 或按空格键。 可以通过查看子菜单或在搜索栏中键入节点来找到节点。

Nodes have input ports and output ports. The different ports accept different data types depending on the node. Not all nodes have an input port. For instance, the Block nodes have no output port.

Unity 试图让 Shader Graph 对用户非常友好——这也有助于调试效果。 他们试图做到这一点，以便您可以尽可能多地看到效果的结果。 您不必等待连接最终输出即可查看情况如何变化。

Shader Graph 窗口的七个组件

Shader Graph 有七个主要组件。 让我们回顾一下它们，以便您熟悉这些窗口。

主窗口

这是 Shader Graph 窗口本身。 它包含（按视图优先顺序列出）工具栏、黑板、图形检查器、主预览、主堆栈和节点。

您可以使用滚轮放大和缩小，使用鼠标中键平移，使用鼠标左键拖动选择和移动项目。 双击 Shader Graph Asset 。 要打开这个窗口，我们所要做的就是在 Project 视图中

黑板

这是我们可以添加属性和关键字的地方。 Blackboard 可以在主视图中的任何位置移动，并且以我们永远不会丢失的方式进行设置。 它可以打开和关闭。

Main preview

This is a preview of what the final output of the shader will look like. The main preview can be moved anywhere within the Main View and is set in a manner that we can never lose it. It can be turned on and off. You can select one of the inbuilt meshes to use or use a custom mesh (any mesh object that is in the project).

节点

图的节点。 此窗口可以在主视图中的任何位置移动、放大和缩小、添加和删除。

主堆栈

这个节点与其他所有节点的不同之处在于我们不能添加或删除它。 它将始终显示在所有其他节点之上。

图形检查器

包含 图形检查器 图形 设置 和 节点设置 选项卡。 。 节点设置 选项卡会根据我们选择的节点/块/参数/关键字而变化

该窗口可以在主视图中的任何位置移动，并且以我们永远不会丢失的方式设置。 它可以打开和关闭。

Toolbar

永久位于窗口顶部的工具栏包含 的文件 左侧 按钮和颜色模式 选择。

有用的内置着色器图功能

着色器图表充满了有用的功能。 这些是您将经常使用的少数几个； 让我们看看如何利用它们。

Accessing documentation

One helpful item is the ability to access the documentation straight from a node. With the node selected, press F1 on the keyboard.

Laser Cat激光猫插件，上班摸鱼很有意思，非常适合压力大的朋友！

请注意，即使窗口中的其他一些选项具有相同的选项，它也不会一直连接。 如果遇到该问题，请删除 /manual/ 之后地址栏中的内容，然后在 Filter Content 中查找关键字之一。

Smart connections

Connections between nodes are not allowed to be made between incompatible types. When you try, instead of making the connection, it will bring up the Create Node window that displays all of the nodes that has an input of the type that you are using as an output and an output of the type you are trying to use for the input.

例如，我有一个 的纹理资源 要用于 基础色块 。 。 Texture2D 资源 有一个输出 Texture2D，但 Base Color 采用 Vector3 的输入 当我尝试将 Texture2D Asset 的输入时 的输出连接到Base Color Block ，我得到一个Create Node 菜单，其中包含具有 Texture2D 输入和与 Vector3 兼容的输出的所有节点。

当我选择 Input > Texture > Sample Texture2D 时 ，我得到一个新的 Sample Texture2D 节点，该节点与 Texture2D 资产节点有连接。 现在我需要做的就是选择我想要使用的 Sample Texture2D 的哪个输出（我将使用 RPGA，它是一个 Vector4）。

分组

您可以通过单击拖动来选择一个组来将节点组合在一起。

便利贴

可用于添加详细信息、待办事项列表、评论等的注释。

子图

取一组执行特定功能的节点并将它们变成一个子图。 这些子图可以像任何其他节点一样在其他图中重用。 发现自己在多个着色器中一遍又一遍地重复相同的步骤？ 把它变成一个子图。

注意它是如何将属性留在主图中的。 双击子图将在新的子图窗口中打开它。 属性被复制，但默认值更改回 Unity 默认值。

多个着色器图

您可以一次打开多个 Shaper Graph。 每个 Shader Graph 或 Sub Graph 都将在其自己的 Shader Graph 窗口中打开。 这些窗口可以像 Unity 中的任何其他窗口一样移动。 您甚至可以将节点从一个 Shader Graph 复制到另一个。

查看节点的代码

除了节点的节点库文档之外，您还可以为每个节点生成代码并选择 Show Generated Code 。 这将在您的代码编辑器中打开该节点的代码。

You can also view the code for the entire shader by selecting it in the Project view and selecting one of the view/show code buttons.

创建你的第一个着色器

现在我们拥有了创建简单着色器所需的一切。 让我们制作一个可以在内置和 URP 中使用的 Lit 着色器，它的颜色可以在 Inspector 中设置。 如果您愿意，请包含 HDRP，只需确保您在项目中添加了 HDRP。

项目设置

首先，创建一个 Shader Graph 资源并在 Shader Graph 窗口中打开它。 我已经创建了一个 Lit Shader Graph，所以我只需双击它即可打开它。 如果尚未创建，请右键单击 > 创建 > 着色器图 > 要使用的 SRP > 着色器类型。

就我而言，我将使用 URP > Lit Shader Graph 。

在 Graph Settings 中， 确保 Shader Graph 列出了所有目标。 就我而言，我使用 Built-in 和 Universal （随意只使用一个，例如 Universal ）。 然后确保它们中的每一个都设置为 Lit 。

接下来，创建一个新节点。 我希望能够改变颜色，所以我需要一个颜色节点。

连接节点并设置输出

现在颜色节点需要连接到主堆栈。 为此，我单击了 Color 节点的 Output 并将其拖到 Base Color 的 Input 中。 请注意，连接更新了主预览。

接下来，我将 Color 节点的输出颜色更改为蓝色。 请注意，这也在主预览中进行了更新。

请注意，我可以一步完成节点的创建并将其连接到基础色块。 为此，请单击 Base Color Block 的输出并拖动到 Shader Graph 主窗口中的空白区域。

保存图表

为了在我的场景中使用它，我必须确保保存图表。

当然，如果它没有出现在场景中我的对象上，那么第一步是确保 GameObject 的 Render Component 使用的 Material 正在使用着色器。

将颜色转换为属性

最后一个要求是使这种颜色在 Inspector 中可设置。 为此，我需要一个属性。

我可以在 Blackboard 中创建一个属性并添加一个新的颜色属性。

然后拖放它或使用 Create Node 子菜单中选择它 菜单并在Properties 。

我还可以简化这一步，将图中已经存在的 Color 节点转换为属性。

最需要注意的是属性的 节点设置 。 为了在 Inspector 中显示它，我们需要确保设置了 Exposed 设置。 我们需要注意的另一个设置是 参考 设置； 这是在 C# 脚本中使用的名称。

不要忘记保存资产。

着色器完成

Now we can change the color in the Material’s Inspector.

这是一个非常简单的着色器，所以让我们看一下代码的并排比较。

使用 Shader Graph 绝对更容易、更快捷。 从技术上讲，我有两个着色器，因为它适用于两个不同的渲染管道。

如何使用一些流行的节点（附示例）

在本节中，我将尝试展示着色器的一些常见用途以及用于制作它们的节点。 我将在每个示例中展示不同的节点，但我无法浏览所有 200 多个可用节点。

如果您想知道我没有在这里展示的不同节点的作用，我建议您查看文档，将其添加到您的 Shader Graph 中，然后看看它是如何工作的。 请记住：大多数节点都有自己的预览，因此您无需将其连接到任何东西即可查看其效果。

这些节点大部分都是可重复使用的，可以连接在一起，所以我将它们转换为 Sub Graphs，并且可以将效果添加到任何其他 Shader Graph 中。 每个示例都将使用 Property 节点（可能不止一个）。 Property 节点的工作方式与其基本类型节点相同，不同之处在于可以从 C# 脚本和 Material 的 Inspector 轻松访问 Property 节点。

纹理和颜色效果

您想要实现的最基本的事情之一是拥有与您的模型相关联的纹理并将其渲染为颜色。 通常，基础纹理与颜色组合，然后应用于最终输出。 纹理和颜色通常都可以在 Inspector 中设置。

您将学习颜色和纹理效果的新节点

颜色节点

Color 输出一个 Vector4 表示一个 RPGA 值。 _ 模式 是 Default 或 HDR 。

纹理 2D 资源节点

允许您从项目的资产中选择 Texture2D。 与 Sample Texture2D [LOD] 节点类型结合使用。 允许一次加载 Texture2D 并多次采样。

The Texture2D property provides two additional settings not available with the Texture2D Asset mode:

If the Texture is not set, then it outputs a blank texture.

You can choose White, Black, Grey, Normal Map, Linear Grey, or Red.

要使用平铺和偏移，设置为 false 以便分别操作缩放和偏移，从其他纹理属性中使用，例如 拆分纹理变换节点 | 着色器图 | 12.1.7 .

示例 Texture2D 节点

示例 Texture2D 采用 Texture2D 并返回 Vector4 颜色 (RGBA)。 这只能在 Fragment Shader 阶段使用。 对于顶点着色器阶段，请改用 Sample Texture2D LOD 节点。

设置 Node Settings > Use Global Mip Bias 启用由运行时施加的自动全局 mip 偏差（在某些算法期间设置以改善细节重建）。

Node Settings > Preview : Inherit 、 Preview 2D 和 Preview 3D 是 Preview 区域的类型。

纹理类型为 Type : Default 或 Normal ，法线的空间可以是 Tangent 或 Object 。 （类型必须 = 正常）。

这些是示例 Texture2D 的输入：

• 纹理 ：Texture2D 到采样

• UV : (UV) Vector2 表示 UV 坐标。 U[0–3] 或提供您自己的

• 采样器 ：（默认采样器状态）要使用的采样器。 有关更多详细信息，请参阅 采样器状态节点 | 着色器图 | 12.1.7

及其输出：

• RGBA ：Vector4 颜色

• R : RGBA 的浮点红色 (x)

• B : RGBA 的浮动蓝色 (x)

• G : RGBA 的浮动绿色 (x)

• A : RGBA 的浮点 alpha (x)

预览是 (RBGA) 中输出内容的直观表示。

示例 Texture2D LOD 节点

示例 Texture2D LOD 采用 Texture2D 并返回 Vector4 颜色 (RGBA)。 这仅对顶点着色器阶段有用。 某些平台（不支持）可能会返回不透明的黑色。

要记住的一些设置：

• 节点设置 > 使用 全局 Mip 偏差：启用由运行时施加的自动全局 MIP 偏差（在某些算法期间设置以改善细节重建）

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

• Type : Default , Normal — 纹理类型

• Space : Tangent , Object — 法线的空间（类型必须 = 法线）

示例 Texture 2D LOD 的输入：

• 纹理 ：Texture2D 采样

• UV : (UV) Vector2 表示 UV 坐标。 U[0–3] 或提供您自己的

• 采样器 ：（默认采样器状态）要使用的采样器。 有关更多详细信息，请参阅 采样器状态节点 | 着色器图 | 12.1.7

• LOD ：采样的细节级别

示例 Texture2D LOD 输出：

1. RGBA : Vector4 颜色

2. R : RGBA 的浮点红色 (x)

3. B : RGBA 的浮动蓝色 (x)

4. G : RGBA 的浮动绿色 (x)

5. A : RGBA 的浮点 alpha (x)

乘节点

顾名思义，Multiply 节点将输入 A 与输入 B 相乘。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

乘法输入：

• A : 向量或矩阵

• B : 向量或矩阵

乘以输出：

• Vector or Matrix (depends on the types of Input A and B)

Rim light effect

为此，我们将构建一个在 Inspector 中显示颜色和功率的边缘灯。

您将学习边缘光效果的新节点

菲涅耳效应

This node approximates a Fresnel Effect by calculating the angle between the surface normal and the view direction. This is often used to achieve rim lighting, common in many art styles.

• Node Settings > Preview: Inherit, Preview 2D, Preview 3D — the type for the Preview area

Inputs:

• Normal: Vector3 — the space to use for the normal

• View Dir: Vector3 — the view direction to use

• Power: Exponent of the power calculation

Outputs:

• Float, representing a Fresnel Effect

Dissolve effect

这是一个非常酷的效果，一直在使用。 一些示例包括将游戏对象带入/带出场景、摧毁着火的东西或在角色编辑器中更改角色（您将旧角色解散并加入新角色）。

您可以在减少 DissolveAmount 的 同时 增加 DissolveScale ，您可以获得有趣的效果。

确保 中启用Alpha Clipping 在 Graph Settings 并将 Alpha Block 设置为 0.5 。

如果要渲染模型的内部，请将 Render Face 设置为 Both ，否则设置为 Front 。

您将通过溶解效果学习新节点

简单噪声节点

Simple Noise generates a Value Node based on the UV Input scaled by the Scale Input. There are a couple of other noise nodes that can be used depending on the type of noise you want (e.g., the Gradient Noise Node generates Perlin noise, and Voronoi Node generates Worley noise).

Inputs:

• UV: (UV) Vector2 UV value

• Scale: Float amount to scale the Input UV by

Outputs:

• 浮点数 ，代表噪声

步骤节点

如果输入的值大于或等于输入 Edge 的值，则 Step 返回 1（真，白）或 0（假，黑） 。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

步进节点输入：

• Edge ：表示步长值的动态向量

• In ：表示输入值的动态向量

步骤节点输出：

• Dynamic Vector (0 or 1) if Input value (In) is greater than or equal to the step value (Edge)

Position Node

位置节点提供对网格顶点位置的访问； 位置是相对于所选空间的。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

• 空间 ：这是坐标的空间。 它可以是 Object 、 View 、 World 、 Tangent 或 Absolute World

例如，当位置节点连接到溶解着色器中简单噪声节点的 UV 输入时，会发生以下情况。

这是 Space = World 时的结果：

这就是 Space = View 的结果：

旋转节点

的值应用类似于黑洞的扭曲效果 Twirl Node 对输入UV 。

Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• UV : (UV) Vector2，输入UV值

• Center : Vector2，以中心为参考点

• 强度 ：浮动，效果有多强

• Offset : 输入的UV值

输出：

• Vector2，新的UV值

预览：输出内容的视觉表示。

棋盘节点

这会生成一个带有所提供颜色的棋盘； 比例由 频率 定义。 此节点用于将棋盘纹理应用到网格，也可用于 Shader Graph 中的视觉效果，了解通过某个值更改 UV 的效果是什么样的。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• UV : (UV) Vector2，UV值

• 颜色 A ：Vector3，第一个检查器的颜色

• 颜色 B ：Vector3，第二个检查器的颜色

• 频率 ：每个 UV 轴的比例

输出：

• Out : Vector2，UV值

Subtract Node

该节点从输入 A 中减去输入 B

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• A : 动态向量，第一个输入值

• B ：动态向量，第二个输入值

输出：

• Out : 动态向量，结果

预习：

• 黑色结果 <=0 到白色结果 >= 1

否定节点

取反翻转 In 的符号值。 正值现在是负值，负值现在是正值。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• In ：动态向量，要翻转的值

输出：

• Out : 动态向量，翻转符号的结果

预习：

• 黑色结果 <=0 到白色结果 >= 1

用发射效果溶解

再加上一个节点，我们可以让溶解效果发光。

为了帮助保持整洁和易于阅读，我将溶解效果设为子图。 我输出了 Step Node（这是我们附加到 Alpha Threshold 的内容）和 Emission（我们将需要它用于 Emission Block）。

使用发射节点溶解

添加节点

将两个输入加在一起。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• A : 动态向量，第一个输入值

• B ：动态向量，第二个输入值

输出：

• Out : 动态向量，结果

预习：

• 黑色结果 <=0 到白色结果 >= 1

子图

这允许您添加任何自定义创建的子图。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

您可以包括在 Blackboard 上定义的任何下拉属性。 有关详细信息，请参阅 文档中的子图下拉菜单 。

Inputs:

• The properties that you have defined in the Blackboard. 

Outputs:

• 您在子图输出节点中定义的内容。 必须至少有一个输出  

将它们组合在一起

现在是时候将所有这些组合到一个 Shader Graph 中了。

以下是以前的每个效果作为子图：

和 Shader Graph，一起使用它们：

将这些结合在一起的节点

比较节点

此节点将两个值与一个条件进行比较。 它是众多可用的逻辑测试节点之一； 其他是 ALL、And、Any、Is Front Face、Is Infinite、Is NaN Nand、Not 和 Or。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

• 下拉菜单：Equal、NotEqual、Less、LessOrEqual、Grater、GreaterOrEqual — 用于比较的条件

输入：

• A : 浮动比较

• B ：要与之比较的浮点数

输出：

Out : 比较的布尔结果

预览是输出内容的可视化表示。

分支节点

分支节点根据真/假条件返回一个值。 另一个分支节点是 BranchOnInputConnection。

• Node Settings > Preview : Inherit , Preview 2D , Preview 3D — 预览区域的类型

输入：

• Predicate ：布尔值，确定使用哪个输入

• True : 动态向量，如果 Predicate 为真则使用的值

• False ：动态向量，如果 Predicate 为 false 时使用的值

输出：

• Out : True 或 False 输入

预览是输出内容的可视化表示。

新旧 Shader Graph 版本之间的差异

在低于 10.0.x 版本的 Shader Graph 版本中，有一些事情需要注意，无论您是从旧版本升级还是遇到有人如何创建着色器并想要复制它。

最大的区别是使用主堆栈而不是主节点。 主堆栈中可用的块取决于您的图表设置。 使用多个主节点需要特别注意。 如果要升级，请参阅 Unity 的升级指南 。

两者之间的另一个大区别：所有设置现在都可以在 Graph Inspector 中找到。 选项卡 图形设置 包含所有图形范围的设置， 节点设置 选项卡包含所有属性设置和每个节点的设置。

有一些细微的变化 Graph Settings ，例如 Two Side 不是一个复选框，并且您使用 Render Face 枚举（ Front 、 Back 和 Both ）。

最后一个区别是片段堆栈的颜色块的输入。 这个技巧实际上来自 Code Monkey 的视频 。

片段堆栈将包含一个采用 Vector4 值的颜色块，即 RPGA。 一个新创建的 Shader Graph 将有一个颜色块，它采用 Vector3 值，这只是 RPG 颜色，它有一个单独的块用于 alpha。

要获得 alpha，您只需添加一个拆分节点并将 alpha 输出带到 Alpha Block 输入。 他指出，特别是对于精灵，通常在处理着色器时，如果您使用颜色的 alpha，那么您将具体了解 alpha 值代表什么。 而对于精灵，期望是颜色的 alpha 控制透明度。

其他资源

如果您想继续学习，Unity 还有更多资源：

LogRocket ：全面了解您的网络和移动应用程序

LogRocket 是一个前端应用程序监控解决方案，可让您重现问题，就好像它们发生在您自己的浏览器中一样。 无需猜测错误发生的原因，或要求用户提供屏幕截图和日志转储，LogRocket 可让您重播会话以快速了解问题所在。 无论框架如何，它都可以完美地与任何应用程序配合使用，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的附加上下文的插件。

除了记录 Redux 操作和状态之外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据和自定义日志。 它还检测 DOM 以记录页面上的 HTML 和 CSS，即使是最复杂的单页和移动应用程序也能重新创建像素完美的视频。