顶点片元着色器和像素着色器_着色器图更新和示例项目

顶点片元着色器和像素着色器

In 2018.1 we introduced a new tool called Shader Graph which allows you to build shaders visually.  We have added a lot of exciting new features recently. Download Unity 2018.2 and our new demo project to explore them!

在2018.1中，我们引入了一个名为Shader Graph的新工具，该工具可让您直观地构建着色器。 最近，我们添加了许多令人兴奋的新功能。 下载Unity 2018.2和我们的新演示项目以对其进行探索！

Some of the features that are new to Shader Graph in 2018.2 include:

Shader Graph在2018.2中新增的一些功能包括：

使用演示项目 (Using the Demo Project)

Let’s dive into our sample project and take a look at how to use ShaderGraph to create foliage based scenes. First, download the sample project here. If you’re unfamiliar with GitHub, you can download a ZIP archive of the project.

让我们进入示例项目，看看如何使用ShaderGraph创建基于树叶的场景。 首先，在 此处下载 示例项目 。 如果您不熟悉GitHub，则可以下载该项目的ZIP存档。

Much like our new template projects, this project has a Readme for quick reference to documentation about the tools we use.

就像我们的新模板项目一样 ，该项目有一个自述文件，可以快速参考我们使用的工具的文档。

The project comes with sample graphs for great looking foliage and environment shaders and also demos a technique for switching between two render pipelines. On the Readme inspector, you’ll find buttons to switch between Lightweight and High Definition Render Pipelines. This is mainly to allow you to author assets and test compatibility between pipelines — for production, we recommend using only one render pipeline.

该项目提供了用于美观的叶子和环境着色器的示例图，还演示了在两个渲染管线之间切换的技术。 在自述文件检查器上，您会找到在轻量级渲染通道和高清晰度渲染管线之间切换的按钮。 这主要是为了允许您创作资产并测试管道之间的兼容性-对于生产，我们建议仅使用一个渲染管道。

Find the sample scene in the Assets > Scenes folder to get started. The next few sections will review some of the graphs you’ll see in this demo project!

在Assets> Scenes文件夹中找到示例场景以开始使用。 接下来的几节将回顾您将在此演示项目中看到的一些图表！

标准着色器图 (Standard Shader Graph)

Do you find the standard surface shaders in Unity helpful? Well, good news! You can make your own using the Shader Graph! You can find our example graph in the Assets/Shaders/ folder of the demo project.

您发现Unity中的标准表面着色器对您有帮助吗？ 好吧，好消息！ 您可以使用着色器图制作自己的！ 您可以在演示项目的Assets / Shaders /文件夹中找到我们的示例图。

The properties of our graph are almost the same as the options you’d find on the standard surface shaders. Our graph follows the packed texture format for Mask maps from the HDRP. Since this is a graph, you can customize this to suit your project’s needs.

图的属性几乎与标准曲面着色器上的选项相同。 我们的图遵循HDRP中 Mask贴图的压缩纹理格式。 由于这是一个图形，因此您可以自定义它以满足您项目的需要。

There are some unique qualities in this project’s standard shader, including:

该项目的标准着色器具有一些独特的品质，包括：

• Our new Is Front-Face node to flip back-facing normals

  我们新的Is Front-Face节点可翻转背面法线

简单植被图 (Simple Vegetation Graph)

You’ll also find a simple vegetation graph in this project. This graph is a standard shader with simple vertex animation. It produces a very simple sway back and forth with a bit of turbulence added on for variation.

您还将在此项目中找到一个简单的植被图。 此图是具有简单顶点动画的标准着色器。 它产生了非常简单的来回摇摆，并添加了一些湍流以进行变化。

We control the animation with vertex colors. For basic animation, we use a simple gradient from black to red so only the ends of the foliage animate while the base stays rooted in the ground. More complex animations will need more complex colors.

我们用顶点颜色控制动画。 对于基本动画，我们使用从黑色到红色的简单渐变，因此只有树叶的末端会发出动画，而根部仍植根于地面。 更复杂的动画将需要更复杂的颜色。

The basis for any good foliage animation is a wave. This graph uses a sine wave with time input and remapped values for visual appeal. The black line represents a basic sine wave, and the red line represents our remapped sine wave.

任何好的树叶动画的基础都是波浪。 该图使用正弦波，并带有时间输入和重新映射的值，以吸引视觉效果。 黑线代表基本的正弦波，红线代表我们重新映射的正弦波。

The turbulence wave is a modified version of the basic sine wave. It varies the speed of the wave rather than the amplitude. This gives a random flickering value, which we can use to create some small fluttering on top of our base wave. Here we’ve added a blue line to show the difference between our standard sine wave and the turbulence wave.

湍流波是基本正弦波的修改版本。 它改变波速而不是幅度。 这给出了一个随机的闪烁值，我们可以使用它在基波之上创建一些小的抖动。 在这里，我们添加了一条蓝线以显示标准正弦波和湍流波之间的差异。

We add the two waves together and multiply by the desired vertex color, the red painting we saw on our plant above. Then, we add our wave to our object position to create the vertex offset. Here we’re only creating an offset in the X-axis, but this is useful for any direction or all axes at once. Take the final output and plug it into the Position slot on the Master node, and we’ve got a nice simple animation for foliage to wave in the wind.

我们将两个波加在一起，然后乘以所需的顶点颜色，即在上面的工厂中看到的红色画。 然后，将波添加到对象位置以创建顶点偏移。 在这里，我们仅在X轴上创建偏移量，但这对于任何方向或所有轴一次都很有用。 取得最终输出并将其插入到“主”节点上的“位置”插槽中，我们得到了一个很好的简单动画，以使叶子在风中摇曳。

复杂植被图 (Complex Vegetation Graph)

We have also included a complex vegetation graph in this project. The motion is based on a great paper by Tiago Sousa, found in Nvidia’s GPU Gems 3. The paper has a wonderful breakdown of the math behind the system, so we’re going to give a brief overview of the application.

在该项目中，我们还包括了一个复杂的植被图。 该议案基于Tiago Sousa的一篇出色论文，该论文发表于Nvidia的GPU Gems 3中 。 本文对系统背后的数学进行了详尽的介绍，因此我们将对该应用程序进行简要概述。

This kind of system is best for larger foliage, like trees. It accounts for a large wave motion as the whole tree sways in the wind, smaller variation on the branches, and even smaller flutters for the leaves. The vertex colors applied to the mesh control the phases. The red determines what parts of the mesh should have smaller fluttering on the leaves, so it’s best for the edges of the leaf cards. The green adds timing variation, to make sure that the branches aren’t all waving at the same time. The blue determines where the branch attaches to the trunk, and what parts are most affected by the wind. This is a simple black-blue gradient from the base outwards.

这种系统最适合较大的树叶，例如树木。 当整棵树在风中摇曳时，它会引起很大的波动，树枝上的变化较小，甚至叶片的颤动也较小。 应用于网格的顶点颜色控制相位。 红色确定网格的哪些部分在叶子上应具有较小的颤动，因此最好用于叶子卡的边缘。 绿色增加了时序变化，以确保分支不会同时挥舞。 蓝色确定分支连接到主干的位置以及哪些部分受风的影响最大。 这是从底部向外的简单的黑蓝色渐变。

When you combine these phases, you get a very nice feeling of wind blowing through the air.

当您将这些阶段组合在一起时，您会感觉到风在空中吹来的感觉。

When you look at the graph, however, you get a very nice feeling of… well, you get a feeling. Luckily, it’s not as complicated as it looks. Let’s break it down into smaller networks – a trunk phase, a branch phase, and a leaf phase!

但是，当您查看图表时，您会感到……非常不错的感觉。 幸运的是，它并不像看起来那样复杂。 让我们将其分解为较小的网络-主干阶段，分支阶段和叶子阶段！

This is the base trunk phase of our system. It starts with the same nodes as the turbulence that’s used in our simple vegetation graph. We multiply the wave by a direction property for finer control over where the wind is blowing. This also uses a remapped sine wave with variation, like the simple vegetation graph. Then, we add the turbulence and base wave together.

这是我们系统的基本中继阶段。 它以与简单植被图中使用的湍流相同的节点开始。 我们将波与方向属性相乘，以更好地控制风向。 这也使用了具有变化的重新映射的正弦波，例如简单的植被图。 然后，我们将湍流和基波加在一起。

This section is our second phase — the branch sway. First, we isolate the movement of the trunk phase into a single vector value. We multiply the wave and blue vertex color channel to determine what parts of the mesh qualify as “branches”. Then we lower the intensity of the wave and make it faster. This creates a series of much smaller fluttering waves based off of the larger movement. The second half of our branch sway smooths out the values into a softer gradient. Not too bad!

这部分是我们的第二阶段-分支摇摆。 首先，我们将躯干相位的运动隔离为单个矢量值。 我们将波浪和蓝色顶点颜色通道相乘，以确定网格的哪些部分符合“分支”的条件。 然后，我们降低波的强度并使之更快。 基于较大的运动，这会产生一系列较小的颤动波。 分支的后半部分将值平滑成一个较柔和的渐变。 还不错！

This is the leaf phase of our animation, to add fast and fluttering movements. We start by using the red and green channels of the mesh vertex color to determine which edges should flutter rapidly. The green channel determines variation in the movement. Areas with higher green values will have more intense movement than areas with a lower green value. The red channel determines which parts of the mesh get intense fluttering movement. Usually, this works for the edges of the leaf cards on a tree mesh.

这是动画的叶子阶段，以增加快速和颤动的动作。 我们首先使用网格顶点颜色的红色和绿色通道来确定哪些边缘应快速抖动。 绿色通道确定运动的变化。 绿色值较高的区域将比绿色值较低的区域运动更激烈。 红色通道确定网格的哪些部分会剧烈颤动。 通常，这适用于树形网格上的叶卡边缘。

All that’s left now is to add everything together! Add the leaf phase to the branch phase, and that result to the main trunk phase, and we’ve got a nice complex wind effect!

现在剩下的就是将所有内容加在一起！ 将叶子阶段添加到分支阶段，然后将结果添加到主干阶段，我们得到了很好的复杂风效果！

If you want to know more about what we’ve done in this project, click through the example content in the Assets folder! Some of the scripts have an additional ReadMe file to get you started for your own projects.

如果您想进一步了解我们在此项目中所做的工作，请单击Assets文件夹中的示例内容！ 有些脚本还具有其他自述文件，可帮助您开始自己的项目。

If you want to take a look at more example content for Shader Graph, check out Andy Touch’s Shader Graph Example Library!

如果要查看有关Shader Graph的更多示例内容，请查看Andy Touch的Shader Graph示例库 ！

If you want to talk to us about the Shader Graph, check out the forums and stay tuned to the blog for more exciting updates!

如果您想与我们讨论有关Shader Graph的信息，请访问论坛并继续关注博客以获取更多激动人心的更新！

翻译自: https://blogs.unity3d.com/2018/08/07/shader-graph-updates-and-sample-project/

顶点片元着色器和像素着色器