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

整体思路:
- 通过对纹理的扭曲与旋转,并挖空中间与边缘部分,实现传送门图形
- 加上Bloom后处理、粒子与点光源
部分思路有参考一些文章与视频教程。
图形部分
项目安装并配置好通用渲染管线(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会变得很丝滑,但缺点是运行游戏时可能会死机。

网友评论