本篇文章主要介绍了ShaderGraph内置的“UV”中的常见节点的表现效果。并且结合UV的扭曲和旋转来实现“传送门”的中间的半透明旋转效果。

uv中包含的内置节点

本篇文章前面讲述UV的旋转依然使用这张蒙娜丽莎。正常情况下的输出如下。

正常的蒙娜丽莎

FlipBook节点
首先来看FlipBook节点，这个节点的效果是将图像拆成Width Height块，然后给定一个输入来决定想要显示的块。通常可以用来实现帧动画。在下面的例子中我们将蒙娜丽莎分成了2*24块，并且将Tile的值设为1，显示其中的第二块（第一块为0）。

更多精彩图片 请登录

第二块

第一块，第三块和第四块分别如下所示。将四块拼在一起就可以得到完整的蒙娜丽莎了。

更多精彩图片 请登录

第一块

更多精彩图片 请登录

第三块

更多精彩图片 请登录

第四块

PolarCoordinates
PolarCoordinates节点

更多精彩图片 请登录

PolarCoordinates效果将图像映射成了一个类似星云的效果。调整RadialScale和LengthScale可以调整缩放的细节。

RadialShear

更多精彩图片 请登录

RadialShear效果将图像沿着中心进行了一个扭曲。调整Strength的值可以调节横向和纵向扭曲的效果。

Rotate

更多精彩图片 请登录

Rotate可以实现将UV根据给定的角度进行旋转。

Spherize

更多精彩图片 请登录

Spherize效果是类似一个椭圆型透镜。

TilingAndOffset

更多精彩图片 请登录

这个效果是将纹理分块平铺。

Triplaner

更多精彩图片 请登录

Triplaner这个效果有些特殊，他的作用是将一张图像投影到一个模型上，也就是不再使用原来模型的UV坐标进行变换，而是根据片段的位置生成UV坐标。

Twirl

更多精彩图片 请登录

Twirl也是一种常见的扭曲效果，可以呈现一种不规则的旋转效果。增大强度的话扭曲效果更严重。

更多精彩图片 请登录

传送门效果的实现
最后，我们使用其中的两个旋转效果，Rotate和Twirl，实现一个类似传送门的特效。本身Twirl的效果是静态的，我们也不能通过增大强度的办法使得图像发生旋转，因为增大强度只会增大图像扭曲的程度。这时候我们可以结合Rotate效果，让Rotate的角度和时间相关，这样就实现了图像的自动旋转。

更多精彩图片 请登录

Twirl+Rotate

这样输出的最终UV坐标我们可以用来采样了。

更多精彩图片 请登录

最后还有一小点优化，我们的传送门中间旋转的空心部分通常是圆形的。但是模型通常采用一个Quad，因此我们还要想办法切出来一个圆形，这时候我们使用Ellipse节点（椭圆），通过采样椭圆作为Alpha通道的值，这样就实现了透明的效果。

更多精彩图片 请登录

添加椭圆作为alpha通道

感谢分享

感谢分享

感谢大佬分享