粉丝2565
关注 3
获赞 10390
使用Shader Graph实现《塞尔达传说:旷野之息》风格的着色器(转)

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

 !heats_icon! [复制链接]
14025 16 6 44 5年前 举报
Unity的技术经理Ciro Continisio在Connect上分享创作模仿任天堂游戏《塞尔达传说:旷野之息》角色风格的着色器,受到不少用户的关注,本文将在分享制作该着色器的方法。

1.gif

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



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

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

2.jpg
希望实现的着色示例效果

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

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

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

3.jpg

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

该节点内容如下图所示。

4.jpg
TangentToWorld SubGraph

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

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

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

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

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

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

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

5.jpg

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

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

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

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

效果如下图所示。

6.jpg

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

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

7.jpg

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

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

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

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

8.jpg

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

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

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

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

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

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

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

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

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

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

转自:Unity官方平台
6
点赞
0
打赏
44
添加到收藏夹
打赏一次,1个CG券
全部评论15
您需要登录后才可以回帖 登录 | 立即注册

ShaderGraph升级之后,有些节点都不存在了,比如 TangentToWorld这个节点,除此之外还有其他的节点都没有了,所以,希望博楼主能纠正一下,和分享源文件。谢谢
3年前
回复

使用道具 举报

这篇文章是搬运unity官方的 ,懂得看门道,不懂的看热闹,我这边有自定义光照的cs文件,但是只适用于unity2018.1-2018.3版本  高级版本可能会由于shadergraph升级后API变动无法获取刀自定义节点信息,升级到了customfunction,暂时没搞懂怎么用, 重点就是怎么在shadergraph里获取主灯光来渲染明暗信息,希望有大佬能指点迷津,我先研究下怎么上传cs附件
4年前
回复

使用道具 举报

感谢楼主分享···
4年前
回复

使用道具 举报

感谢楼主分享···
4年前
回复

使用道具 举报

牛逼   感谢分享!
4年前
回复

使用道具 举报

感谢楼主分享···
4年前
回复

使用道具 举报


感谢楼主分享···
4年前
回复

使用道具 举报

Lighting部分,使用自定义节点从场景的主定向光获取光照数据

这部分怎么处理
5年前
回复

使用道具 举报