Shader Graph着色器视图示例项目介绍
在Unity 2018中新增了Shader Graph着色器视图的工具,它可以让开发者可视化构建着色器。今天我们将介绍最新Unity2018.2中,Shader Graph着色器视图新功能以及示例项目。
Shader Graph着色器视图新功能
Unity 2018.2中Shader Graph着色器视图新增功能包括:
高清晰渲染管线(HDRP)支持
顶点位置
属性引用名称
视图的可编辑通道
新节点:Gradient、Texture 2D Array和Texture 3D等。
获取示例项目
让我们深入研究示例项目,了解如何使用ShaderGraph着色器视图创建由枝叶组成的场景。
请访问GitHub下载示例项目。如果你对GitHub还不熟悉,请按照下图所示下载项目的ZIP压缩包。
GitHub下载地址:
https://github.com/natalieburke/ShaderGraph-FeatureDemo-2018-2
与模板项目一样,该项目带有Readme自述文件,可以用来快速参阅我们所使用工具文档。
该项目附带用于制作漂亮树叶的示例视图和环境着色器,还可演示在二种渲染管线之间切换的技术。在自述文件的检视窗口中,你可以找到在轻量级和高清晰渲染管线之间切换的按钮。这个按钮主要用于让开发者制作资源并测试管线之间的兼容性,对于正式制作,我们建议只使用其中一个渲染管线。
请在Assets > Scenes文件夹中查找示例场景并开始使用。下面部分将介绍示例项目中的一些视图。
标准Shader Graph着色器视图
现在你可以使用Shader Graph着色器视图制作自定义的着色器。你可以在演示项目的Assets/Shaders/文件夹中找到我们的示例视图。
我们的视图属性几乎和标准表面着色器上的选项一样。视图遵循HDRP遮罩贴图的格式,你可以自定义它以满足项目需求。
该项目的标准着色器带有一些独特的特性,包括:
Master Node设置中,启用了双面渲染
全新的Is Front-Face 节点可以翻转背面法线
在Alpha通道有基于世界位置的抖动遮罩
简单植被视图
你可以在项目中找到一个简单的植被着色器视图。该视图是一个带有简单顶点动画的标准着色器。它制作出简单的来回摆动效果,为了营造多样化效果还添加了一些乱流特效。
我们使用顶点颜色控制动画。对于基础动画,我们使用一个简单的黑色到红色的渐变,因此只有叶子末端才会生成动画,而枝干会根植于地面。更复杂的动画将需要更复杂的颜色。
漂亮枝叶的动画基础是波形图。该视图使用了一个正弦波形图,带有时间输入和重新映射值从而使它看起来更吸引人。黑线代表基本的正弦波形,红线代表重新映射的正弦波形。
乱流波形是个基础正弦波形的修改版。该波形改变的是波速而不是振幅。这样能得到随机抖动值,用于在基础波形上创建一些小型振动曲线。我们还添加了一条蓝线来展示标准正弦波形和乱流波形的不同。
我们将二条波形相加后乘以所需的顶点颜色,也是我们在植物上看到的红色。然后,我们将波形添加到对象的位置,创建顶点偏移。虽然我们只在X轴上创建了一个偏移,但是它对任何方向或是所有轴都有作用。
于是我们得到了最后的输出结果,将其插入Master节点的Position槽,就得到了叶子在风中摆动的简单动画效果。
复杂植被视图
我们在项目中加入了复杂的植被视图。这个动态效果是基于Tiago Sousa发表的一篇文章内容所制作,该文章详细讲解了系统背后的数学原理,所以我们需要简要介绍一下。
这种系统最适合处理较大的枝叶,例如树木的枝叶。它会计算大型摆动效果,因为树的整体会在风中晃动,树枝上的变化较小,叶子也只会有较小的颤动。应用到网格的顶点颜色会控制各个阶段。
红色决定网格的哪些部分应该对叶子产生较小的颤动,所以它最适用于叶子的边缘。绿色能增加时间变化,确保枝干不会全部同时摆动。蓝色决定树枝连接树干的位置,还决定了哪些位置受风的影响最大。这是从底部向外延伸的简单黑-蓝渐变。
当将这几个阶段结合起来后,就会得到风吹过枝叶的逼真效果。
当查看下面视图的时候,或许会感到有点复杂,但它其实并不像外表看上去那么复杂。现在我们把它分成下面几块了解一下:基础树干、树枝和叶子阶段。
1
基础树干
这是系统的基础树干阶段。它的起始节点和简单植被视图的乱流节点相同,我们将这个波形乘以一个方向属性,以便更好地控制风所吹的方向。
这个阶段还使用了带有变化的重新映射正弦波形,就像简单植被视图一样。然后我们加入乱流波形和基础波形。
2
树枝
这部分是第二阶段树枝摆动动画。首先我们将树干阶段的运动分离为单个向量值,并将该波形和蓝色顶点颜色通道相乘,从而决定网格的哪些部分符合“树枝”特点。然后我们降低波形强度,使它速度更快。
这样会创造出一系列基于较大动作的小型颤动波形。树枝摆动的另一半部分会平滑处理数值,实现更柔和的梯度,得到的效果非常不错。
3
叶子
这部分是叶子阶段,用来添加快速的颤动效果。我们首先使用网格顶点颜色的红色和绿色通道,决定哪些边缘需要快速颤动。绿色通道决定动作的变化。区域绿色值的越高,动作会越强烈。红色通道决定网格的那些部分会有强烈的颤动效果。通常适用于树木网格上的树叶边缘。
4
合并
最后我们要把所有这些内容添加到一起。添加叶子阶段到树枝阶段,然后再添加到主树干阶段,于是我们就得到了好看又复杂的风特效。
资源
请查看Assets文件夹中的示例内容。部分脚本带有自述文件,帮助开发者学习在自己的项目中使用。想要了解Shader Graph着色器视图更多示例内容,请查看Shader Graph着色器视图示例库:
https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary
更多Unity的最新功能分享尽在Unity官方中文论坛(UnityChina.cn)!
推荐阅读
官方活动
8月15日晚,新一期的直播课程将介绍Unity 2018.1版本中正式推出的ProBuilder快速建模套件使用方法,帮助你快速掌握快速生成关卡用于游戏玩法的测试。[详情介绍...]
直播地址:
https://connect.unity.com/events/probuilder_level_design
8月Asset Store资源商店促销
8月期间,只需在Asset Store资源商店消费满50-255美元,即可获赠2-6款精品资源,最高消费250美元,更可附赠获得一件Asset Store定制款T恤!
活动地址:
https://assetstore.unity.com/g/august-promo-activation-demo
点击“阅读原文”访问Unity官方中文论坛