流光效果是非常常见的游戏特效，不管是2D的UI和图片还是3D的模型在一些精致的特写镜头下，都会加入流光的效果。本篇文章将使用shadergraph来制作两种不同的流光效果。

2D流光效果
首先是我们为了创造流光效果所准备的图片。一张主要的贴图和一个流光的贴图。在这里我们仍然使用蒙娜丽莎作为主要贴图，流光贴图采用一个条状贴图。

蒙娜丽莎贴图

流光效果贴图

最终实现的效果如下，流光贴图会在蒙娜丽莎上面进行移动。

这个shader的实现也比较简单，我们发现流光贴图的UV和主要贴图的UV是重合的，也就是说我们使用主要贴图的UV坐标加上一个时间的变换，就可以实现流光贴图的UV的流动效果。其中时间的变换我们通过定义一个UV的移动速度来实现。

更多精彩图片 请登录

流光的UV变化

接下来，我们将变化的UV对流光贴图进行采样，并且叠加到原图上即可实现2D下的流光效果。

更多精彩图片 请登录

流光贴图叠加原图

最后完整的实现如下。

更多精彩图片 请登录

2D流光完整graph

2D流光效果的在3D中的问题
那么3D模型的流光效果能不能用同样的方法实现呢？我们先看下直接应用的效果。

更多精彩图片 请登录

我们发现并没有得到我们预期的流光效果。这是因为3D模型的UV坐标和流光贴图的坐标完全不对应导致的。在2D流光效果中，我们的模型是一个面片，他的UV坐标和流光贴图的UV坐标是对应起来的。

为了实现正确的3D流光效果，我们需要根据模型生成正确的流光贴图UV坐标。

3D流光效果的实现
我们先来看下示例中所使用的流光贴图模型贴图以及最终的效果。

更多精彩图片 请登录

流光贴图

更多精彩图片 请登录

模型贴图

正确的3D流光效果
那么如何根据模型生成正确的流光贴图UV坐标呢？

我们观察流光的特点，我们相当于把流光贴图的UV坐标和模型的XY坐标对应了起来。模型的Z并不影响流光贴图的坐标。

根据模型的XY坐标生成流光贴图的UV坐标的方法如下：

获得模型的模型空间的坐标（X, Y, Z），在这里我们是用Postion节点，其中坐标空间选择Object，取出XY坐标。
根据模型的大小设定模型的X轴范围，例如（0.5， 0.5），Y轴范围，例如（0.0， 1.0），根据XY轴范围，将模型空间的坐标映射到0-1的UV坐标。
将XY分别映射的坐标合并起来，就得到了流光贴图的UV坐标。

更多精彩图片 请登录

得到了正确的流光贴图UV坐标，我们再将它进行UV动画移动起来，就实现了3D的流光效果。

完整的graph如下

更多精彩图片 请登录

3D流光效果

感谢分享

感谢楼主分享

感谢分享