使用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着色器视图的很多知识,了解这样的效果为什么能够实现。

完整大小的着色器视图图片地址:https://pan.baidu.com/s/1nLIgow13HxdUzYhFUbovrw 本文中关于Blinn-Phong模型的信息,请访问:https://paroj.github.io/gltut/Illumination/Tut11%20BlinnPhong%20Model.html

结语

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

原文链接:https://connect.unity.com/p/shi-yong-shader-graphshi-xian-sai-er-da-chuan-shuo-kuang-ye-zhi-xi-feng-ge-de-zhao-se-qi?app=true

更多Unity技术文章介绍欢迎戳上方链接,下载Unity官方app!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容