使用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会变得很丝滑，但缺点是运行游戏时可能会死机。
网友评论