令人感动的艺术使用着色器图形创建动画材质
在 Unity 2018.2 中，我们为着色器图形添加了 "顶点位置 "输入，让您可以调整网格并制作动画。在本篇博文中，我将演示如何创建自己的顶点动画着色器，并提供一些常见的示例，如风和水着色器。
如果你是着色器图的新手，可以阅读Tim Cooper 的博文了解其主要功能，或者观看Andy Touch在 Unity YouTube 频道上发表的 "着色器图介绍 "演讲。
该场景不使用任何纹理或动画资产；您所看到的一切都使用着色器图形进行着色和动画。
着色器是渲染管道中一个非常强大的方面，可以对场景资产的显示方式进行高度控制。通过一系列输入和操作，我们可以创建着色器来改变资产的各种渲染属性，如表面颜色和纹理，甚至网格的顶点位置。您还可以将所有这些功能组合成复杂、丰富的动画。这篇博文将演示如何开始使用顶点动画，介绍使用遮罩和属性的概念，并在最后解释我们如何为 "荒岛场景 "制作着色器。
从 GitHub 克隆版本库或 从 GitHub 下载 .Zip
下载 "荒岛场景 "示例项目，开始自己的着色器实验和互动！该项目包含开始使用着色器图形所需的一切。确保使用 2018.2 或更高版本的 Unity 启动项目。
荒岛场景》中的每个着色器都考虑到了自定义功能，因此你可以在检查器中随意更改着色器的值！每个对象都有一个预设文件，可以将数值恢复为默认值。
本作品采用知识共享 署名 4.0 国际许可协议进行许可。
要使用着色器图形，您的项目必须满足以下要求：
- 在 Unity 2018.2 或更高版本上运行。
- 使用新的轻量级或高清渲染管道（由于编译时间更快，建议使用 LWRP 进行实验）。
- 在软件包管理器中安装着色器图形软件包。
要安装着色器图形，请将项目创建或更新至 2018.2 或更高版本，导航至窗口>软件包管理器>全部，在列表中找到着色器图形并点击安装。
如果您的材质在 "场景 "视图中没有动画效果，请确保您选中了 "动画材质"：
用着色器图形制作花哨的东西？
点击场景视图左上角的小图片下拉菜单，即可预览动画材质。
#UnityTips #Unity3D
在开始使用花哨的数学来移动物体之前，我们需要了解我们要移动的是什么。
场景中的网格有四种类型的空间：
- 对象：顶点相对于网格支点的位置。
- 查看：顶点相对于摄像机的位置。
- 世界：顶点相对于世界原点的位置。
- 切题：解决一些特殊的使用情况，如按像素照明。
您可以在 "位置"节点的下拉菜单中选择要影响的空间。
通过使用拆分节点，我们可以选择要影响的轴。
分割 节点输出到四个通道，前三个通道对应我们的变换轴（R=X、G=Y、B=Z）。在上面的示例中，我将对象的 Y 轴拆分开来并添加了 1，从而将对象在自己的轴上向上移动了 1。
有时，您可能希望在世界空间中移动对象。为此，请从 "位置"节点选择 "世界"，然后使用 "变换"节点将输出转换回对象空间。
既然我们已经确定了移动网格的方法，那么了解如何限制效果通常会很有用。
通过使用Lerp 等节点，我们可以在两个值之间进行混合。T输入是Lerp 的控制值。当我们的T输入为 0（可视化为黑色）时，将使用A通道。当我们的输入为 1（可视化为白色）时，就会使用B通道。在下面的示例中，滑块用于在两个输入之间进行混合。以下任何示例都可以代替滑块。
有了黑白纹理，我们就可以用细致的形状来推动我们的网格。在上面的示例中，您可以看到白色代表范围的最大高度，而黑色代表对网格位置没有影响。这是因为黑棋的数值为 0，因此在网格位置上添加 0 并不会移动它。
要使用具有顶点位置的纹理，必须使用 " 纹理 2D 样本 LOD "节点，而不是典型的"纹理 2D 样本"节点。如果需要具有独特形状或一定程度落差的遮罩，纹理尤其有用。
UV 蒙版与纹理蒙版相似，但您可以根据 UV 展开效果选择要影响的网格部分。在上面的截图中，我使用 UV 的 U 轴创建了一个从左到右的渐变效果。要偏移梯度，请使用添加节点；要增加强度，请使用乘法节点；要增加落差，请使用功率节点。
每个顶点存储一个 Vector3 信息单元，我们将其称为 "顶点颜色"。使用Poly Brush软件包，我们可以在编辑器内直接绘制顶点颜色。此外，您还可以使用 3D 建模软件（如 3ds Max、Maya、Blender、3D Coat 或 Modo）来指定顶点颜色。值得注意的是，默认情况下，大多数 3D 建模软件在导出模型时都会为每个顶点分配最大的 RGB 值。
在上面的截图中，顶点颜色节点被分割成红色（R）通道，然后连接到Lerp节点的T通道，作为遮罩。当输入为 0 时，使用Lerp节点的A通道，当输入为 1 时，使用B通道。在实际操作中，只有当顶点被指定为红色顶点颜色时，上述设置才会在 Y 轴上添加 1。
通过使用法线矢量节点，我们可以根据网格面的方向屏蔽输入。同样，"拆分"节点允许我们选择要影响的坐标轴（R=X，G=Y，B=Z）。在上面的截图中，我使用 Y 轴进行遮罩，这样只有朝上的面才是正的。使用 "钳位"节点丢弃任何不在 0 和 1 之间的值非常重要。
如果对象的位置高于 Y 轴上的世界位置 0，这一系列节点就会屏蔽输入。
在构建着色器时，很难获得所需的正确输入值。因此，为了以后使用预制件和预设进行定制，使用属性非常重要。
属性允许我们在着色器编译后修改着色器的值。要创建属性，请单击黑板中的+符号（如右图所示）。共有六种属性：
- 病媒（1 至 4）：一串数值，可为 Vector1 选择滑块。
- 颜色带有颜色选择器的 RGB 值，以及可选的 HDR 版本。
- Texture2D（和 Texture2D 阵列）：二维纹理样本
- 纹理 3D三维纹理样本
- Cubemap：生成的 Cubemap 样本
- 布尔值：可选择关闭或打开。相当于 0 或 1。
旗帜着色器使用 UV 遮罩在旗帜上平移一个对象空间正弦波，以保持左侧不动。
将 UV 蒙版倒置，然后与自身相乘，在 Y 轴上形成平滑的渐变效果。用来将旗帜的中心弯离船桨。
生成一个对象空间正弦波，其属性可控制波的振幅、频率和速度。波浪由 x 轴上的 UV 遮罩遮挡，以保持旗帜左侧不动。
通过将梯度噪声输出到阶跃函数，然后输出到Alpha 剪辑阈值，我们可以舍弃一些像素来撕裂标志。
风着色器使用世界空间梯度噪声沿单个轴平移，轻轻推拉树叶和草地。
利用世界位置，我们在 Y 轴和 X 轴上放置了一个 "梯度噪声"。使用 Vector2，我们可以控制偏移的速度和方向。
属性用于控制胶印的密度和强度。从 "梯度噪声"中减去 0.5，可确保网格的推拉效果相同。
使用紫外线掩膜使树叶和草的底部保持静止。最后，一个变换节点用于将世界位置转换为对象位置。
使用此着色器，我们可以计算出摄像机与蛤蜊之间的距离，然后以此为掩码旋转上半部分。
通过在距离节点中输入游戏对象的位置和摄像机的位置，我们可以创建一个遮罩。减一"节点将距离倒置，这样当我们靠近蛤蜊时就会得到一个正值。钳位节点会丢弃任何高于 1 和低于 0 的值。
这个 UV 蒙版只旋转蛤蜊的顶部，但在大多数情况下，顶点颜色蒙版会更简单、更灵活。
Lerp节点用于在蚌关闭和打开之间进行混合。旋转将应用于游戏对象的 Y 轴和 Z 轴。绕 x 轴旋转。
在这个着色器中，我们使用一个正弦波穿过物体的轴线使鱼摆动。然后，我们蒙上鱼头，使鱼头保持不动。
在物体空间沿 Y 轴和 Z 轴产生正弦波，波的频率和速度由属性控制。
因为我们同时使用了 x 轴和 y 轴，所以鱼会在宽度和高度上摇摆。
对正弦波的输出进行乘法运算，以控制摆动的幅度/距离/强度，并将其添加到对象的 x 轴上。
使用Lerp节点，以 UV 通道的 x 轴为基准，遮挡鱼的前部。通过使用带有属性的Power节点，我们可以将晃动效果推到鱼的后面。
最后是海洋着色器！该着色器使用三个不同比例和角度的正弦波对网格顶部进行偏移。这些正弦波也用于生成波谷和波尖的颜色。
在世界空间中产生三个独立的正弦波，每个正弦波都使用属性来控制波的振幅、频率、速度、会聚和旋转。
然后，将三个正弦波与两个添加节点相结合，再乘以世界尺度梯度，以分解波尖的高度。然后，将组合波添加到物体位置上。
首先使用两个顶点蒙版将波浪限制在穹顶顶部，然后在绘制泡沫时将波浪推回穹顶。
通过分割出 x 轴和 z 轴，我们产生了两个方向的波。这两个乘数用于设置每个波浪的影响力。例如，将Z通道乘以 0，就会在 x 轴上输出一个正弦波。
将 "世界位置"节点拆分为 x 轴和 z 轴，然后将它们组合到一个 Vector2 中，就得到了世界空间中的 UV 空间。这将使梯度噪声在全球范围内保持平坦。通过将这一输出添加到时间中，我们抵消了正弦波，有助于打破原本的直线。
正弦波节点使用世界空间和时间生成一个简单的正弦波，为了使波浪提示，我们使用一个绝对节点来翻转负值。然后，"一个减号"节点将这些数值反转，使波峰位于顶部。
如果您想了解如何开始使用着色器图形，Andy Touch 的 GDC 演讲 是一个很好的开始。如果您正在寻找其他着色器图示例，Andy 还在 GitHub 上提供了一个示例库。
有关着色器图的详细文档，包括每个节点的说明，请访问GitHub 上的着色器图开发者维基。请登录我们的图形实验预览论坛，参与讨论！最后，如果你正在用着色器图形制作很酷的东西，我很想看看！欢迎通过 Twitter @John_O_Really 与我联系。