[Unity]简易传送门效果

DungDaj · 发表于 2021-12-26 20:33

使用ShaderGraph连连看与粒子系统制作一个简易的传送门效果。

整体思路：

部分思路有参考一些文章与视频教程。
图形部分

项目安装并配置好通用渲染管线（URP），新建一个Lit Shader Graph:

我使用的URP版本为10.6.0，暂时没升级到新版本，不过只要思路一致，新版本的操作应该也差不了太多。

打开新建的ShaderGraph，传送门需要透明显示，并且前后两面都要渲染，在Graph Settings修改这两个配置项：

旋转与扭曲

先来做纹理的旋转与扭曲。依然是用Voronoi节点，其他的纹理也可以，好看就行。Twirl节点可以将纹理旋转扭曲，Strength参数决定了扭曲的力度：

通过调整Twirl的Offset参数可以让它动起来，新建一个TwirlSpeed属性，值先随便填个0.2，与Time节点的值相乘连入Offset，顺便把其他要在外部调整的属性一并创建好，并在Node Settings中设置好它们的值：

观察可以发现，这样的旋转扭曲在视觉上并不是统一往一个方向流动。个人觉得这个效果不错，但还不是非常OK，需要让整个图像真正地旋转起来。

新建一个Rotate节点，并新建一个名为RotateSpeed的Float属性（值为2），将其与Time相乘，然后连到Rotate节点的Rotation参数中，之后Rotate节点的输出连到Twirl节点的UV输入：

这部分就完成了，将TwirlSpeed临时调为0，可以更清楚地看到旋转效果。
遮罩

接下来挖空中间与边缘部分，需要用到一张纹理做遮罩。新建一个名为Mask的Texture2D属性，设置默认值为自带的Default-Particle纹理：

用Sample Texture 2D节点对其采样，并用Voronoi的输出减去采样结果：

中间出现了空洞，但不够明显，对Mask的采样结果做进一步处理，先用乘一个正数扩大中心，再用指数函数减小边缘：

如果希望这部分可以在外部调整，可以将两个Float变量转换为属性。

在挖空边缘之前，先来控制一下图形中纹理的溶解程度。新建一个Dissolve的Float属性（值为2），将Subtract节点的输出做一个Saturate，然后用指数函数控制溶解：

因为之前做了减操作，可能会出现负数，Saturate用来将输入限制在0到1范围内，避免Power节点出错。

溶解这一步不是很有必要（我后来又把Desolve改回1了），如果希望能调整条纹的稀疏程度，让它们看起来变厚（调小）或变薄（调大），可以加上。

接下来挖空边缘，依然是利用Mask，将采样结果与另一个正数相乘，让它变得大一些：

再与纹理部分相乘：

边缘挖空也完成了。
收尾

最后染色并查看效果，新建一个Color属性，模式设置为HDR，这样才能闪闪发亮，调一个喜欢的颜色（如果太亮了就把强度调低点）：

混合颜色并输出到Fragment：

以这个ShaderGraph新建一个材质：

场景中新建Global Volume，开启Bloom后处理：

相机的后处理也记得开一下：

场景中新建一个Quad，拖入材质可以看到效果：

如果没在动的话，把Always Refresh勾上：

调整后的各项属性值：

可以尝试不同的属性值，以达到不同的效果：

完整的ShaderGraph:

加一些特技

粒子效果基本照抄印度小哥的教程，根据个人需求有一些修改。
环绕粒子

单独的环绕粒子效果：

环绕粒子需要发光，新建一个粒子材质，Shader选择Universal Render Pipeline/Particles/Unlit，按如下配置：

在Quad下新建一个Particle System，Renderer中拖入刚才创建的粒子材质，其他大致这样配置：

粒子的配置比较随意，根据个人喜好可以有不同的配法。这里为了让粒子环绕中心旋转，用的是甜甜圈形状，如果运动要更随机一些，可以再加上Noise。
背景阴影

这个感觉可加可不加，比较简单就不说明了。

最终效果：

一些传送门的模型会给出特效所在的Mesh，这种情况下只要将传送门材质拖上去，适当调整粒子的形状即可。另外记得关闭阴影投射，避免影子穿帮：

项目中用到的素材：

Portal by Vetech82

Sand portal by Yarelon

一个题外话，mac上如果出现ShaderGraph编辑界面卡顿掉帧的情况，可以尝试在Player设置中临时使用OpenGLCore图形API并重启编辑器，ShaderGraph会变得很丝滑，但缺点是运行游戏时可能会死机。

		自动登录	找回密码
密码			立即注册

[Unity]简易传送门效果

本帖子中包含更多资源