请选择 进入手机版 | 继续访问电脑版

查看: 1630|回复: 2

[技术] Shader Graph着色器视图示例项目介绍

[复制链接]

1216

主题

1921

帖子

2万

贡献

管理员

Rank: 9Rank: 9Rank: 9

积分
25235
QQ
发表于 2018-8-13 04:04:22 | 显示全部楼层 |阅读模式
在Unity 2018中新增了Shader Graph着色器视图的工具,它可以让开发者可视化构建着色器。今天我们将介绍最新Unity2018.2中,Shader Graph着色器视图新功能以及示例项目。

Shader Graph着色器视图新功能
Unity 2018.2中Shader Graph着色器视图新增功能包括:
  • 高清晰渲染管线(HDRP)支持
  • 顶点位置
  • 属性引用名称
  • 视图的可编辑通道
  • 新节点:Gradient、Texture 2D Array和Texture 3D等。

获取示例项目
让我们深入研究示例项目,了解如何使用ShaderGraph着色器视图创建由枝叶组成的场景。

hds-01.gif


请访问GitHub下载示例项目。如果你对GitHub还不熟悉,请按照下图所示下载项目的ZIP压缩包。

GitHub下载地址:
https://github.com/natalieburke/ShaderGraph-FeatureDemo-2018-2

01.png


与模板项目一样,该项目带有Readme自述文件,可以用来快速参阅我们所使用工具文档。

该项目附带用于制作漂亮树叶的示例视图和环境着色器,还可演示在二种渲染管线之间切换的技术。在自述文件的检视窗口中,你可以找到在轻量级和高清晰渲染管线之间切换的按钮。这个按钮主要用于让开发者制作资源并测试管线之间的兼容性,对于正式制作,我们建议只使用其中一个渲染管线。

请在Assets > Scenes文件夹中查找示例场景并开始使用。下面部分将介绍示例项目中的一些视图。

标准Shader Graph着色器视图
现在你可以使用Shader Graph着色器视图制作自定义的着色器。你可以在演示项目的Assets/Shaders/文件夹中找到我们的示例视图。

02副本.png


我们的视图属性几乎和标准表面着色器上的选项一样。视图遵循HDRP遮罩贴图的格式,你可以自定义它以满足项目需求。

该项目的标准着色器带有一些独特的特性,包括:
  • Master Node设置中,启用了双面渲染
  • 全新的Is Front-Face 节点可以翻转背面法线
  • 在Alpha通道有基于世界位置的抖动遮罩

简单植被视图
你可以在项目中找到一个简单的植被着色器视图。该视图是一个带有简单顶点动画的标准着色器。它制作出简单的来回摆动效果,为了营造多样化效果还添加了一些乱流特效。

grass-02.gif


我们使用顶点颜色控制动画。对于基础动画,我们使用一个简单的黑色到红色的渐变,因此只有叶子末端才会生成动画,而枝干会根植于地面。更复杂的动画将需要更复杂的颜色。

02.png


漂亮枝叶的动画基础是波形图。该视图使用了一个正弦波形图,带有时间输入和重新映射值从而使它看起来更吸引人。黑线代表基本的正弦波形,红线代表重新映射的正弦波形。

03.png
04.png


乱流波形是个基础正弦波形的修改版。该波形改变的是波速而不是振幅。这样能得到随机抖动值,用于在基础波形上创建一些小型振动曲线。我们还添加了一条蓝线来展示标准正弦波形和乱流波形的不同。

05.png
06.png


我们将二条波形相加后乘以所需的顶点颜色,也是我们在植物上看到的红色。然后,我们将波形添加到对象的位置,创建顶点偏移。虽然我们只在X轴上创建了一个偏移,但是它对任何方向或是所有轴都有作用。

于是我们得到了最后的输出结果,将其插入Master节点的Position槽,就得到了叶子在风中摆动的简单动画效果。

07.png


复杂植被视图
我们在项目中加入了复杂的植被视图。这个动态效果是基于Tiago Sousa发表的一篇文章内容所制作,该文章详细讲解了系统背后的数学原理,所以我们需要简要介绍一下。

tree-03.gif


这种系统最适合处理较大的枝叶,例如树木的枝叶。它会计算大型摆动效果,因为树的整体会在风中晃动,树枝上的变化较小,叶子也只会有较小的颤动。应用到网格的顶点颜色会控制各个阶段。

红色决定网格的哪些部分应该对叶子产生较小的颤动,所以它最适用于叶子的边缘。绿色能增加时间变化,确保枝干不会全部同时摆动。蓝色决定树枝连接树干的位置,还决定了哪些位置受风的影响最大。这是从底部向外延伸的简单黑-蓝渐变。

08.png


当将这几个阶段结合起来后,就会得到风吹过枝叶的逼真效果。

当查看下面视图的时候,或许会感到有点复杂,但它其实并不像外表看上去那么复杂。现在我们把它分成下面几块了解一下:基础树干、树枝和叶子阶段。

09.png


1、基础树干
这是系统的基础树干阶段。它的起始节点和简单植被视图的乱流节点相同,我们将这个波形乘以一个方向属性,以便更好地控制风所吹的方向。

这个阶段还使用了带有变化的重新映射正弦波形,就像简单植被视图一样。然后我们加入乱流波形和基础波形。

10.png


2、树枝
这部分是第二阶段树枝摆动动画。首先我们将树干阶段的运动分离为单个向量值,并将该波形和蓝色顶点颜色通道相乘,从而决定网格的哪些部分符合“树枝”特点。然后我们降低波形强度,使它速度更快。

这样会创造出一系列基于较大动作的小型颤动波形。树枝摆动的另一半部分会平滑处理数值,实现更柔和的梯度,得到的效果非常不错。

11.png


3、叶子
这部分是叶子阶段,用来添加快速的颤动效果。我们首先使用网格顶点颜色的红色和绿色通道,决定哪些边缘需要快速颤动。绿色通道决定动作的变化。区域绿色值的越高,动作会越强烈。红色通道决定网格的那些部分会有强烈的颤动效果。通常适用于树木网格上的树叶边缘。

12.png


4、合并
最后我们要把所有这些内容添加到一起。添加叶子阶段到树枝阶段,然后再添加到主树干阶段,于是我们就得到了好看又复杂的风特效。

13.gif


资源
请查看Assets文件夹中的示例内容。部分脚本带有自述文件,帮助开发者学习在自己的项目中使用。想要了解Shader Graph着色器视图更多示例内容,请查看Shader Graph着色器视图示例库:
https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary

更多Unity的最新功能分享尽在Unity官方中文论坛(UnityChina.cn)!

1

主题

17

帖子

370

贡献

初级UU族—3级

Rank: 3Rank: 3

积分
370
发表于 2018-8-13 05:47:27 | 显示全部楼层
棒棒哒,hdr看起来效果更棒

1

主题

99

帖子

1600

贡献

中级UU族—2级

Rank: 5Rank: 5

积分
1600
发表于 2018-8-13 10:01:35 | 显示全部楼层
学习,收藏
活到老,学到老
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表