Ciro Continisio Unity technical manager Connect Share on creative imitation Nintendo game "The Legend of Zelda: wilderness interest" role-style shader, by the concern of many users, this method will share the shader in production.
Description matters:
-
The shader Shader Graph view shaders produced.
-
It uses a new lightweight rendering pipeline LWRP.
-
Due to the current LWRP and shader Shader Graph view is still in its early stages, each has some limitations, this article will explain how to use the techniques to address these limitations.
-
Limited by the client, in order to facilitate better reading comprehension, this article shader complete view images available for download, please download the address at the end of the text.
aims
I intend to achieve two-level shader, it comes with light and shadow. I want to support specular lighting two ways: using a simple hair color patches to achieve, and the skin should be defined by the brush stroke.
You can see a different figure below two methods, Zelda clothes presents a unique brush stroke effect, and highlights on her hair just brightly colored lumps.
Example achieve desired coloring effect
I would like to achieve that occurs when the sun facing edge lighting effects, and when the light appears at a particular angle of almost all white edge, the note Zelda ears, fingers and the right arm of FIG.
Finally, I would like to support high light, normal, and launch maps.
View of the process
Below is an overview of view of the process, all the important parts are highlighted with a functional block.
TangentToWorld the left node is not the custom node, but a SubGraph. Because at that time there is bug Transform node, so I have to use SubGraph re-implement the conversion from the tangent space into world space.
The contents of the node as shown in FIG.
TangentToWorld SubGraph
Let us return to this view, as we have seen the view from left to right, started from the normal geometry processing that blends from FIG normal purple Normal map block portion. It defines a surface normal directivity is very important for lighting calculations.
Then came the yellow block Lighting part, using custom node acquires light from the main beam illumination data scene.
为了创建着色效果，我计算了二个向量的数量积，即光的方向和法线。通过使用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.
