Unity 2018之ShaderGraph使用基础

创建shaderGraph

创建轻量级渲染管线

ShaderGraph是基于可编程渲染管线,我们要使用shaderGraph也就需要设置SRP。
首先创建Renderpipeline。在SRP中,unity帮我们封装了几种渲染管线:
– 我们可以创建LWRP(轻量级渲染管线),这种渲染管线适合移动设备。
– HDRP(高动态渲染管线),适用于PC等性能较高的设备
– Custom(自定义渲染管线)

20180515104141494

目前unity可使用LWRP。
创建Renderpipeline可通过在文件窗口中creat->rendering->lightweight pipeline asset创建。
创建之后可以进行渲染管线的设置:

20180515104203416
rendering一栏可以设置渲染相关:

pixel lights 像素级灯光的数量。
vertex lighting 顶点灯光是否可用
depth texture 深度贴图是否可用
HDR 高动态贴图是否可用
Anti aliasing 抗锯齿程度 一般选4x够用了
shadow一栏设置阴影相关:

type 阴影类型
shadowmap resolution 阴影贴图分辨率
distance 最大阴影渲染距离
cascade 阴影联级,一般来说值越大效果越好
设置SRP

设置方法:Edit->Project Setting-> Graphics.打开图像设置窗口,将之前设置的LWRP拖到SRP setting窗口中完成设置。注意这里,如果没有设置的话,所有的shadergraph都是不能使用的,会呈现为洋红色。设置完成后,显示效果。

20180515105855358
创建shader graph

在我们安装完成shadergraph之后,我们可以看到在项目窗口的创建栏中多了几个。
创建:creat->shader->pbr graph/sub graph/until graph。
– pbr graph对应基于物理的渲染方式
– sub graph
– unlit graph无灯光,也就没有阴影

创建完成之后,我们就可以使用可视化的窗口来调整我们需要的效果。

简单修改效果

创建好我们需要的graph之后,可以直接双击graph文件,就能够打开对应的shader窗口。这里以unlit graph为例:

20180515104231681

左边的是属性窗口,类型shader面板,中间的是主节点窗口,右边的是观察窗口。观察窗口可以看到事实效果,同时可以选择其他模型查看效果。

这里我们调整了主节点窗口的颜色窗口,并点击窗口右上角的sava保存查看效果。

2018051510422083

注意:这里为什么没有阴影,看起来很奇怪,原因当然是我们使用的shadergraph不计算灯光啊,哈哈哈。

一些tips

-使用SRP之后,之前的一些shader就不能使用了,我们需要选择特定的shader,在shader选择->light weightpipeline中。
———————
作者:thissky_Unity3D
来源:CSDN
原文:https://blog.csdn.net/u011618339/article/details/80319955
版权声明:本文为博主原创文章,转载请附上博文链接!

Unity 2018.3 Shader Graph着色器视图新功能:Lit Master Node

Unity 2018.3正式版中更新了HD Lit高级功能(HD Lit Advanced Features),简称HD Lit AF,包括:涂层遮罩、晕彩、半透明、次表面散射和各向异性。本文将介绍其中的一些高级功能,并展示如何使用它们在使用Shader Graph着色器视图中的HDRP创作精美的资源。

请访问GitHub下载本文的示例项目,该示例项目包含一个盆景和蝴蝶,项目中大量使用了晕彩和半透明效果。

Shader Graph着色器视图示例项目下载:
https://github.com/natalieburke/ … eDemo_LitMasterNode

115747acg7mejnwgnicwmh

快速入门
在开始创作精美的场景前,我们需要注意二个重要事项:
1、Lit Master Node仅在高清晰渲染管线HDRP中运行。
2、轻量级渲染管线LWRP中没有用于此节点的高级着色选项。如果你只需要PBR表面的基本输入,建议继续使用PBR主节点。

创建HDRP场景的最快速方法是在Unity启动器或Unity Hub上选择High-Definition RP模板。蝴蝶示例项目也使用了HDRP。

115747z89j88k5mmzn98on.png.thumb.jpg

使用High-Definition RP模板创建新项目时,建议将项目中的HDRP版本由4.1.0-preview更新为4.6.0-preview。

更新HDRP版本时,请依次点击Window > Package Manager来启动资源包管理器。然后从资源包列表选择High Definition RP资源包,此时在窗口右上方会有Update to按钮。在该按钮右侧选择4.6.0版本,然后单击Update to按钮。

115747ifi1ii9foxi7g0d7.png.thumb.jpg

使用HDRP项目时,你可以点击菜单Create > Shader > Lit Graph创建全新的HD Lit着色器视图。成功创建后,你会看见一些新的输入选项。

如果你在HDRP中使用过HD Lit材质,这些选项大致上差不多。如果你没有使用过该材质,BentNormal和CoatMask对你来说或许是陌生的概念。

115747drw5rc5q9quqmsbz.png.thumb.jpg

如果将CoatMask值提高到0以上(最大值为1),会为表面添加清晰的“涂层”效果。这意味着对象表面上会有类似封蜡的半透明薄层。

你可以想象一下在网格上绘制环氧树脂涂层的效果,涂层遮罩的一个常见用途是创建材质来模拟汽车涂料外观。

下图的苹果上材质的CoatMask值由0~1逐渐变化效果。

115748rdmdsiuj9aixzxjo

虽然CoatMask是Lit Master Node的默认输入,但请确保仅在该功能对项目非常重要时使用它来实现效果,因为将CoatMask值增大到0以上会增加着色器的性能消耗。

BentNormal允许输入特殊类型的贴图,以改善资源的间接光照(GI)效果。在与AO贴图结合使用时,BentNormal 会提供镜面遮蔽效果,这意味着我们可以向网格上的反射添加遮蔽效果。你可以通过Substance Designer、XNormal或Knald等软件生成弯曲法线贴图。

为了对弯曲法线贴图进行镜面遮罩,必须将着色器设置中的Specular Occlusion Mode(镜面遮蔽模式)设为From AO And Bent Normal(来自AO和弯曲法线)。你可以单击Shader Graph着色器视图主节点右上角的齿轮图标,来访问这些设置。

115748at5ez4ex498hetc4.png.thumb.jpg

镜面遮蔽有四个模式选项:Off(关闭)、From AO only(仅来自AO)、From AO and Bent Normal(来自AO和弯曲法线)和Custom(自定义)。

115749k6ctdprjzpbvyfbz.jpg.thumb

选择Custom 会在主节点创建新输入,从而为用户提供对镜面遮蔽的完整控制。例如:对该输入插入0会禁用所有反射。

主节点的设置菜单和Lit AF选项一起加载。你可以在此选择准备在Shader Graph着色器视图利用的高级材质类型,并设置其它实用的表面信息,例如:表面是不透明还是半透明。

115749b8kn7kk1py8kijna.png.thumb.jpg

修改这些设置会向主节点添加额外输入选项,根据启用的设置组合,你最后可能会得到一个非常庞大的节点以及性能开销很大的着色器。

下图是Lit AF选项展示。

115750cze2g9z2kk9agk0z.png.thumb.jpg

示例项目的高级材质
蝴蝶示例项目大量使用了晕彩和半透明二个高级材质类型。我们首先看看蝴蝶的效果。

蝴蝶的翅膀由细小鳞片的多个图层组成的复杂表面,这些图层会使人眼感觉蝴蝶翅膀呈现粉尘状。鳞片拥有非常高的反射率,并位于几丁质层的表面。

几丁质是一种半透明蛋白质,它是昆虫外骨骼的主要组成部分。这些生物知识在应用于着色模型时,意味着蝴蝶翅膀是半透明的,并具有晕彩效果和金属质感。

晕彩是特定表面的颜色随着表面光照角度变化而逐渐改变的现象,它是仅在HDRP中可用的高级着色功能之一。

下图展示了晕彩的实际效果,我们利用晕彩效果来改变蝴蝶扇动翅膀时的颜色。

115750nd5d2r4gs7ser8de

在将材质类型(Material Type)切换为晕彩(Iridescence)时,会在材质节点出现二个新选项:IridescenceMask(晕影遮罩)和IridescenceThickness(晕影厚度)。

120116en1koqq0fs1tqqtn.png.thumb.jpg

你可以使用这个简单的视图来轻松查看二个新输入的效果。

下图是不同晕彩厚度(Iridescent Thickness)值的变化效果。你可以看到晕影遮罩值从0到1(黑色到白色)调节时,晕影效果强度的变化,以及晕影厚度如何改变由晕影效果创建的颜色渐变。

120116epjwczktkddcdemg.jpg.thumb

如果你想在使用晕影时,使效果准确符合物理规则,IridescenceThickness值的单位需要设置为纳米(nm),相关输入的0-1数值范围会重新映射为0-3000nm。

下图是一只大闪蝶,它的翅膀背面是完全不同的颜色和图案。为了实现这种效果,我们在二组翅膀使用了面朝相反方向的法线。

120117c6i6w64ppx56i63f.png.thumb.jpg

为了实现光线穿透翅膀的效果,翅膀底面使用了半透明材质类型进行着色。半透明材质会模拟光线穿过表面的效果,并通过使用厚度图和散射配置文件,改变光线的强度。

120117z8wn989x8axnqdzn.jpg.thumb

 

120117fpuicdi0s5ncuzn6.png.thumb.jpg

我们有三种材质类型使用散射配置文件:Subsurface Scattering(次表面散射材质)、Subsurface Scattering with Transmission(带有透光效果的次表面散射材质)和Translucent(半透明材质,它只有透光效果)。

120117gnurbq7pzr6pkrtb.jpg.thumb

透光(Transmission)指光线可以完全穿透对象并从另一侧射出。利用透光效果的材质提供了一个选项,通过添加厚度图来调节穿过表面的光线强度。

了解次表面散射的概念及其使用方法,有助于了解如何使用散射配置文件。

次表面散射(Subsurface Scattering)适用于半透明表面。这类表面类型包括:树叶、水果、蔬菜、宝石、布料、牙齿、眼睛和皮肤。当光线进入这些材质的表面时,它会在材质中散射,然后从表面的不同位置射出。

120118x8lgbljrrelrep9v.png.thumb.jpg

利用次表面散射的表面将呈现出整体光照效果的柔化,光线会渗透到附近区域,而且较小的表面细节会变得模糊。

光线在对象中渗透得越远,光照的衰减和散射效果越强。光线可以渗透的“距离”是由厚度图控制的数值,数值越小,次表面散射的效果越明显。

你可以手动绘制厚度图,也可以在Substance Designer或Maya等其它软件生成厚度图。生成厚度图时,需要反转网格表面法线,烘焙环境遮蔽,然后反转环境遮蔽贴图。

散射的总量、角度、产生的颜色以及由光线渗出的颜色都由散射配置文件控制。HDRP中,散射配置文件设置(Diffusion Profile Settings )是一种独特的资源,它保存着散射配置文件。

如果你正使用示例项目,或是通过项目模板创建HD项目,你就已经拥有了散射配置文件设置资源。如果你需要新建该资源,可点击Create > Rendering > Diffusion Profile Settings进行创建。

你需要将其指定到高清渲染管线资源(HD Render Pipeline Asset)。通过点击Project Settings > Graphics > Scriptable Render Pipeline Settings,你可以轻松找到自己的HD资源。

120118aj2nnujs52xbp0n5.png.thumb.jpg

如果设置资源存在,该资源会包含项目正在使用的散射配置文件设置的引用。

120118s969lkcks6ihhqkc.png.thumb.jpg

蝴蝶示例项目包含二个自定义散射配置文件:一个用于翅膀的背面,另一个用于树叶。散射配置文件包含大量自定义选项,可以控制光照如何在网格中散射。

120415w756j67n5o755kv8.png.thumb.jpg

散射距离(Scattering Distance )控制光线散射的强度和颜色。简而言之,这允许你根据对象的材质,控制每个颜色通道上光线的吸收量和反射量。例如:人类皮肤可以显示出红色,因为随着光线的散射,它会呈现皮肤下血液和组织的颜色。

折射率(Index of Refraction)与光进入表面时的弯曲角度相关。折射率是可测量数值,例如:人类皮肤的折射率为1.4,其它多数材质的折射率在1.3~1.5之间。

纹理模式(Texturing Mode)仅适用于使用次表面散射的对象。多数情况下,开发者会使用预散射和后期散射,因为它会使反照率模糊,从而柔化光照的效果。如果反照率由于已有的次表面散射而包含柔化效果,你可以只使用后期散射。

其余选项只会在使用透光材质类型,即Translucent 或Subsurface Scattering with Transmission时可用。修改透光模式(Transmission Mode )将改变阴影使用的逻辑。对于树叶等厚度较薄的物体,你应该仅使用Thin 选项,而对于其它情况,请使用Regular选项。

透光色调(Transmission Tint)是用于透出光线的附加颜色,它会与已有的散射颜色混合。厚度重映射可以让你将0到1的厚度图重新映射到资源适用的范围。

对于较薄的物体,例如:蝴蝶翅膀和树叶,使用Translucency (Transmission only)即可。对于较大或较厚的物体,模拟光线进行散射并从表面其它位置射出的效果也很重要。此时应该使用Subsurface Scattering 或Subsurface Scattering with Transmission。

120415c8ahv97r328p1va5.jpg.thumb

使用Shader Graph改善创作流程
使用Shader Graph着色器视图来实现这些高级着色功能可以大幅减少迭代时间。调整和改善视觉效果需要多次迭代,但是Shader Graph着色器视图的快捷工作流将使该过程更轻松。

120415q6ofoidw6fxndtto.png.thumb.jpg

Shader Graph着色器视图可以减轻特定纹理要求的大部分负担,所以我们只使用三个纹理就能实现理想的视觉效果:散射贴图,主体法线贴图和平铺细节法线贴图。

通过使用Shader Graph着色器视图并进行一些实验,我们发现可以重用散射贴图的通道,并重用法线数据来改变光滑度数值,不必制作额外的纹理。

不必编写代码给Shader Graph着色器视图,带来了快速迭代和实验的自由度。此外它能轻松调整属性和内部数值,实现了强大的迭代能力。例如:如果我们发现经常要修改某个数值,可以右键单击并选择Convert to Property(转换为属性)。现在,当保存着色器后,该属性会出现在通过该着色器创建的任意材质的检视窗口中。

在对蝴蝶的外表进行迭代时,我们最后将许多内部数值公开为属性。这让我们在游戏视图中通过使用准确的光照,后期处理效果和动画效果,来调整蝴蝶。

下面视频中,你可以看到通过公开参数调整蝴蝶视觉效果是多么简单。

观看演示Demo

最后,因为蝴蝶翅膀的二个面很相似,但需要使用不同材质类型和纹理,我们将翅膀逻辑转换为Subgraph(子视图),同时将可定义属性保留为输入。这让我们可以同时编辑翅膀的二个表面,即使它们是二个不同的高级材质类型。

Shader Graph着色器视图实现快速迭代的另一个案例是盆景的树叶。在为盆景树叶选择合适颜色时,我们改变了很多次想法。在构建该场景时,已经到了秋天,为场景营造秋天的氛围会很合适。在尝试许多颜色后,我们最后决定创建由绿色到橙色的过渡,就像树木正处于颜色变化的过程。

我们不想编辑树叶纹理,通过Shader Graph着色器视图,我们可以使用Gradient(渐变)节点来根据树木几何体的世界位置来改变颜色。不同高度的树叶会从Gradient节点接收不同的颜色。我们还添加噪声来破坏Gradient节点的一致性,使盆栽的外表看起来更自然有机。

120416x7u4mmacdvdn7rc7.png.thumb.jpg

所有这些改动都不需要使用纹理制作软件,这也意味着我们不需要烘焙颜色到纹理贴图中,我们可以重复使用贴图中的其它通道来满足灰度纹理的要求,例如:半透明厚度贴图。

如下图所示,通过用属性控制树叶的渐变效果,我们制作出了树叶在一段时间内改变颜色的动画。

120416n33i3ir7773jkigx

使用Shader Graph实现《塞尔达传说:旷野之息》风格的着色器

Unity的技术经理Ciro Continisio在Connect上分享创作模仿任天堂游戏《塞尔达传说:旷野之息》角色风格的着色器,受到不少用户的关注,本文将在分享制作该着色器的方法。

014647qy1ofnof23f1rooj
说明事项:
1、该着色器使用Shader Graph着色器视图制作。
2、使用了全新的轻量级渲染管线LWRP
3、由于目前LWRP和Shader Graph着色器视图仍处于早期阶段,各自存在一些限制,本文将讲解如何使用技巧来解决这些限制问题。
4、受客户端所限制,为了方便大家更好阅读理解,本文中着色器完整视图图片提供了下载,请在文末获得下载地址

目标
我打算实现二个层级的着色器,它带有强光和阴影。我要以二种方法支持镜面光照:头发使用简单的颜色面片实现,而皮肤要通过画笔描边来定义。

你可以在下图看到二种方法的不同,塞尔达的衣服呈现了特有的画笔描边效果,而她的头发上的高光只是明亮颜色的硬块。

014649tnuz9wn3p73fc9vz.png.thumb.jpg希望实现的着色示例效果

我还想实现面向太阳时出现的边缘光照效果,以及当光线在特定角度时出现的几乎全白的边缘,请注意图中塞尔达的耳朵、手指和右臂。

最后,我想支持高光、法线和发射贴图。

视图流程
下图是视图流程的概述,所有重要部分都根据功能用方块突出显示。

左侧的TangentToWorld节点不是自定义节点,而是一个SubGraph。因为当时Transform节点存在bug,所以我必须使用SubGraph重新实现转换,从切线空间转为世界空间。

该节点内容如下图所示。

014650eaono4pdynoyaiia.png.thumb.jpgTangentToWorld SubGraph

让我们返回该视图,如我们所见视图从左到右,从几何体的法线开始处理,它混合了来自图中紫色方框Normal map部分的法线。法线定义了表面的方向性,对计算光照非常重要。

然后来到黄色方框Lighting部分,使用自定义节点从场景的主定向光获取光照数据。

为了创建着色效果,我计算了二个向量的数量积,即光的方向和法线。通过使用Smoothstep节点获得该遮罩,它看起来是带有硬边缘的黑色和白色。

除了作为模型实际的光线和阴影外,该遮罩还用于遮蔽高光和和镜面反射。可以看到,从Smoothstep节点中心分出了三个分支。

镜面高光和画笔效果
视图下方是蓝色方框Specular,我获得了视线和光线方向的半个向量,然后使用该向量来计算镜面的遮罩。在此阶段中,我使用了非常简单的Blinn-Phong着色模型。

我不认为该模型的实现是最完美的,但足以满足演示本项目,该效果取决于光线和视线角度,你也可以自行调整该实现。

然后,我使用这个遮罩来裁剪屏幕空间纹理,创建画笔轻触效果,即上半部分的Paint brush部分;还使用了该遮罩的原本功能,处理头发部分面片形状的镜面效果,即下半部分的Patch部分。为了切换使用这二个功能,我暴露了名为UseSpecularDabs的属性,通过分支节点验证该属性。

014651lipcgqzs0a9n2nrn.png.thumb.jpg
这个部分也是支持镜面贴图的关键部分,可以使金属物品看起来更有光泽,例如:皮肤或木材。

使用边缘效果实现有趣的反差
视图顶部的青色方框Rim highlights,在这里,我使用预制的Fresnel Effect节点,但我仍然使用了光线和视线方向的数量积来过滤该节点,这样做会得到只在对象面向光线时出现的边缘。

当对象背对着阳光或夕阳时,你知道观察此时该对象会得到什么效果吗?

对象会完全被黑暗掩盖。而通过加入该节点,角色会得到彩色的轮廓,即使这样的效果不现实。这是个伪造的效果,但它让角色看起来更有趣。

效果如下图所示。

014651f2ljzollsrbefosf.jpg.thumbFresnel节点连接到了二个Step,这是为什么呢?

下方的Step效果能在黑暗区域出现并重写这些区域,实现前面提到的“夕阳”效果。本示例中,光线没有人为加强,你会得到完全被阳光照射时的颜色。上图中角色身体和脸部轮廓可以看到该效果。

014652ar8n09zw29bnczkw.png.thumb.jpg顶部部分呈现了白色轮廓,可以从特定角度观察到,它只出现在已经受光的区域。所以该部分与表示卡通效果的Smoothstep相乘,所以它不会在黑暗区域呈现。Step函数偏移了0.2,这意味着该效果只会出现在靠近形状边缘的位置,使二个效果可以共存和重叠。

上图中女孩的手套上能清楚地看到该效果,手套几乎是全白色。

Master节点:合并所有节点
视图的剩余部分比较简单,你可以看到不同组件如何合并到着色器的“主干”,用红色表示,它最后会链接到Master节点,即右边的最后一个节点,这部分我只使用了一个技巧。

Shader Graph着色器视图如今支持二种类型的Master节点:PBR和Unlit。理想情况下,Unlit节点很适合卡通着色器,因为我要自己计算颜色。但由于我想要得到阴影,而无光照着色器不会默认获取阴影,所以我不得不使用PBR节点。如果以后Unity加入新的Master节点类型,我可能会修改Master节点类型。

014652jjs5hjjrrffxefjg.png.thumb.jpgPBR Master节点可以带来预制光照模型,适用于逼真的材质。然而,我不需要该模型,我只需要阴影而已。如果使用反照率的话,光线会再乘以已计算的颜色,这不是想要的效果,我想在视图中自行控制颜色。所以我没有使用反照率,我将反照率设为黑色,所以该材质没有得到任何PBR效果。

那么我是如何控制颜色的呢?答案是使用发射。这会带来额外问题:Emission槽需要同时充当反照率、镜面反射、金属度和发射。

发射是最难处理的:我需要计算所有着色器,将发射看作反照率,在最后为顶部添加发射值,不管它是单个值还是纹理,然后缩放它的大小,使不应具有发射效果的部分不被获取,例如:被Bloom屏幕过滤器获取。

实现该平衡的过程很麻烦,而且也不完美,但它让我得到了想要的效果:卡通风格的颜色、发射支持和自阴影。

资源下载
我很满意此次实践得到的结果,我也希望你喜欢该着色器和这篇文章。

我决定不分享视图的ShaderGraph文件,如果我分享了该文件,你会直接将它放到自己的游戏中,这样学不到任何知识。所以我将提供完整大小的着色器视图图片,你可以放大查看图片,了解所有节点和属性的细节。

当你重建该视图的话,你会学习到Shader Graph着色器视图的很多知识,了解这样的效果为什么能够实现。

完整大小的着色器视图图片地址:
https://pan.baidu.com/s/1nLIgow13HxdUzYhFUbovrw

本文中关于Blinn-Phong模型的信息,请访问:
https://paroj.github.io/gltut/Il … nPhong%20Model.html