纳金网

标题: 使用Shader Graph实现《塞尔达传说：旷野之息》风格的着色器 [打印本页]

作者: 铁锹 时间: 2018-10-30 11:47
标题: 使用Shader Graph实现《塞尔达传说：旷野之息》风格的着色器

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

说明事项：

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

目标

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

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

希望实现的着色示例效果

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

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

视图流程

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

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

该节点内容如下图所示。

TangentToWorld SubGraph

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

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

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

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

镜面高光和画笔效果

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

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

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

这个部分也是支持镜面贴图的关键部分，可以使金属物品看起来更有光泽，例如：皮肤或木材。

使用边缘效果实现有趣的反差

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

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

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

效果如下图所示。

Fresnel节点连接到了二个Step，这是为什么呢？

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

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

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

Master节点：合并所有节点

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

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

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

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

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

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

资源下载

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

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

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

完整大小的着色器视图图片地址：

本文中关于Blinn-Phong模型的信息，请访问：

结语

可视化编程工具Shader Graph的出现，帮助更多开发者，美术等，进行可视化的着色器构建，不必手工编写代码.我们希望以这个着色器为示例帮助你更好理解和使用着色器视图Shader Graph.

来自unity官方特此鸣谢。

作者: lhy_ps 时间: 2018-10-30 18:28
E: 使用Shader Graph实现《塞尔达传说：旷野之息》风格的着色器 [修改]

作者: 毛毛虫 时间: 2018-10-31 09:07
谢谢分享，很不错啊，学习一下

作者: Bighead 时间: 2018-10-31 10:01
感謝分享

作者: yin3593 时间: 2018-10-31 10:10
感謝分享

作者: 577683035 时间: 2018-10-31 13:00
我就看看不说话的勒

作者: zombieman 时间: 2018-10-31 14:27
好东西感谢分享

作者: lionzhanyue 时间: 2018-11-1 10:46
有现成的shader可以直接用么~

作者: lionzhanyue 时间: 2018-11-1 17:58
mainlight节点是怎么实现的~能发张图么~谢谢~

作者: xatyang 时间: 2018-11-5 10:25
看看看看看看

作者: xblueocean 时间: 2018-11-10 13:39
好东西感谢分享

作者: uitgh 时间: 2018-11-14 20:39
谢谢楼主好人的啊

作者: uitgh 时间: 2018-11-14 20:40
楼主好人的

作者: bcdefbver 时间: 2018-11-16 12:08
感谢分享！1024

作者: Qweqwe312 时间: 2018-11-22 04:04
感谢LZ！！！

作者: zeroo123 时间: 2018-11-22 11:05
加油努力支持

作者: claien 时间: 2018-11-24 09:28
感谢分享

作者: elvaad 时间: 2018-12-28 10:31
这个是官方的那个么

作者: ArthurCold 时间: 2019-1-3 16:02
感謝分享

作者: sx359680283 时间: 2019-1-4 13:57
下来看看！！！！！！

作者: Ryan.T 时间: 2019-1-23 11:06
感謝分享

作者: Riddick 时间: 2019-1-23 14:57
dfgdfgsdg

作者: paopaotang 时间: 2019-1-23 16:04
谢谢分享

作者: gxf5168 时间: 2019-1-23 21:16
感觉很牛逼

作者: wei04029006 时间: 2019-2-1 10:41
使用Shader Graph实现《塞尔达传说：旷野之息》风格的着色器

作者: why0813 时间: 2019-2-2 10:00
学习了～～～

作者: soulvision 时间: 2019-2-11 16:00
谢谢分享；。

作者: 蜗牛 时间: 2019-3-10 19:13
谢谢分享。。。。。。。。。。。。。。

作者: siniani 时间: 2019-4-1 19:29
想看看，好东西啊。流口水

作者: 阿海 时间: 2019-4-3 18:57
学习学习学习学习

作者: doiii 时间: 2019-4-4 14:47
不错，，受教了~

作者: firefox888 时间: 2019-6-28 09:25
厉害~~~~~~~

作者: develo 时间: 2019-7-1 18:14
谢谢楼主分享

作者: alexjk2 时间: 2019-7-3 06:53
谢谢你的分享

作者: wssxm000 时间: 2019-7-3 18:00
塞尔达传说：旷野之息》风格的着色器 [修改]

作者: skygreen 时间: 2019-11-19 11:28

谢谢分享，很不错啊，学习一下

作者: 大雄_z9ViR 时间: 2019-12-24 12:28
胜多负少的收到发送到都是负数

作者: kusogo 时间: 2019-12-26 16:57
帅气啊非常帅

作者: 2823896 时间: 2019-12-27 09:40
哈哈哈哈哈谢谢分享

作者: dang050 时间: 2020-4-8 03:17
角色风格的着色器

作者: cmxsi 时间: 2020-4-23 09:39
其实必须要看看

作者: saint0818 时间: 2020-9-3 16:10
谢谢分享，学习一下

作者: 濮轩 时间: 2020-11-19 13:17
看一下看一下看一下看一下

作者: hellfire6865 时间: 2021-8-7 11:16
unityde ?

作者: Mtanxi 时间: 2021-10-29 15:20
很棒的效果，感谢大佬分享！

作者: 小二郎回忆录 时间: 2021-11-8 23:11
666666666666666666

欢迎光临纳金网 (http://go.narkii.com/club/)