Hello大家好,此次的解决方案其实很久之前就想写的,但是由于一直比较忙,又发现网上很难找到一个简单易懂的解决方案,所以此次汪汪决定动手写一篇,希望能帮助到大家学习和入门。 好啦,汪汪在一期的ShaderLab入门实践中给大家简单展示了一个描边shader的实现方法,就是基于法线来挤出我们的模型,再上色,但是对于一些法线比较特殊的点,我们的法线挤出方案是无效的。会出现一些比较奇怪的现象: 这是我们原始的描边shader代码: 很简单,就是通过把模型放大一圈,然后剔除正面。 其实,如果我们通过往vertex方向挤出,而不是法线方向,就不会出现这种情况了: 利用上述代码实现的话效果如下:




好啦,全章终。
. . .
等等!!什么??又有新的问题?? 其实,这个方法只能正确挤出坐标在物体中间的物体,如果坐标是这样的: 如我们所见,坐标轴不在物体中心,如果我们继续挤出,也会出现奇怪的现象: 厚度不统一,抑或是,我们挤出的模型,直接移位。 这里,我们就想到一个权衡之计,即照顾法线,又照顾vertex,于是,我们想到使用Lerp线性插值来实现,我们在法线和vertex之间线性插值,并用一个0-1的数来控制值: 我们使用_Width2来控制挤出是偏向法线方向,还是偏向Vertex方向,或者我们可以取中间值。 小伙伴们会发现,对于坐标轴有问题的规则模型,效果还是不太好啊,所以小伙伴们在建模时,一定要注意坐标问题,还有光滑组(软硬边)啊。 如果遇到坐标不好改变的时候(或者模型比较复杂),我们还有解决方案,通过Z偏移来实现: 我们在模型Pass中加入Offset 2 -1,然后描边Pass加入 Offset -1,-1,感兴趣的小伙伴们可以下去研究一下。 如果觉得效果不好,可以结合美术那边,给模型制作一个单独的UV描边蒙版,类似自发光贴图吧,如果UV形状比较规则,可以通过算法来实现;不过复杂模型我们一般只需要按照法线挤出一般是没问题的,如果此类效果较多,推荐利用后处理,进行边缘检测来实现。 接下来是拓展,我们需要把线画出来的效果: 我们让贴图模型按照法线挤出, 然后Line正确挤出,法线挤出我们在上面提到过: 怎么样,是不是很简单?? 当然,汪汪也是站在一个学习者的身份来写这篇文章,技术能力有限,有不对的地方,希望大家多多海涵。






本文介绍了一种基于法线和顶点方向的描边Shader实现方法,解决了特殊模型法线挤出问题,通过线性插值和Z偏移优化模型挤出效果。
2199

被折叠的 条评论
为什么被折叠?



