![](https://img.haomeiwen.com/i25024734/c356677c1c14779f.png)
使用ShaderGraph连连看与粒子系统制作一个简易的传送门效果。
![](https://img.haomeiwen.com/i25024734/b0a13231ea4333a4.gif)
整体思路:
- 通过对纹理的扭曲与旋转,并挖空中间与边缘部分,实现传送门图形
- 加上Bloom后处理、粒子与点光源
部分思路有参考一些文章与视频教程。
图形部分
项目安装并配置好通用渲染管线(URP),新建一个Lit Shader Graph:
![](https://img.haomeiwen.com/i25024734/a23fa9002109fe5c.png)
我使用的URP版本为10.6.0,暂时没升级到新版本,不过只要思路一致,新版本的操作应该也差不了太多。
打开新建的ShaderGraph,传送门需要透明显示,并且前后两面都要渲染,在Graph Settings修改这两个配置项:
![](https://img.haomeiwen.com/i25024734/578add95ceffd137.png)
旋转与扭曲
先来做纹理的旋转与扭曲。依然是用Voronoi节点,其他的纹理也可以,好看就行。Twirl节点可以将纹理旋转扭曲,Strength参数决定了扭曲的力度:
![](https://img.haomeiwen.com/i25024734/6f30cb85ee44ef69.png)
通过调整Twirl的Offset参数可以让它动起来,新建一个TwirlSpeed属性,值先随便填个0.2,与Time节点的值相乘连入Offset,顺便把其他要在外部调整的属性一并创建好,并在Node Settings中设置好它们的值:
![](https://img.haomeiwen.com/i25024734/f82318ea3dc4ab5c.png)
![](https://img.haomeiwen.com/i25024734/6cd7604f9bab6725.gif)
观察可以发现,这样的旋转扭曲在视觉上并不是统一往一个方向流动。个人觉得这个效果不错,但还不是非常OK,需要让整个图像真正地旋转起来。
新建一个Rotate节点,并新建一个名为RotateSpeed的Float属性(值为2),将其与Time相乘,然后连到Rotate节点的Rotation参数中,之后Rotate节点的输出连到Twirl节点的UV输入:
![](https://img.haomeiwen.com/i25024734/f688f33a9db16a82.gif)
这部分就完成了,将TwirlSpeed临时调为0,可以更清楚地看到旋转效果。
遮罩
接下来挖空中间与边缘部分,需要用到一张纹理做遮罩。新建一个名为Mask的Texture2D属性,设置默认值为自带的Default-Particle纹理:
![](https://img.haomeiwen.com/i25024734/acffbc99ff3964b7.png)
用Sample Texture 2D节点对其采样,并用Voronoi的输出减去采样结果:
![](https://img.haomeiwen.com/i25024734/e71728b28818628b.png)
中间出现了空洞,但不够明显,对Mask的采样结果做进一步处理,先用乘一个正数扩大中心,再用指数函数减小边缘:
![](https://img.haomeiwen.com/i25024734/20f65b6fa77faa7d.png)
如果希望这部分可以在外部调整,可以将两个Float变量转换为属性。
在挖空边缘之前,先来控制一下图形中纹理的溶解程度。新建一个Dissolve的Float属性(值为2),将Subtract节点的输出做一个Saturate,然后用指数函数控制溶解:
![](https://img.haomeiwen.com/i25024734/1ef32cd0d4a9d1fc.png)
因为之前做了减操作,可能会出现负数,Saturate用来将输入限制在0到1范围内,避免Power节点出错。
溶解这一步不是很有必要(我后来又把Desolve改回1了),如果希望能调整条纹的稀疏程度,让它们看起来变厚(调小)或变薄(调大),可以加上。
接下来挖空边缘,依然是利用Mask,将采样结果与另一个正数相乘,让它变得大一些:
![](https://img.haomeiwen.com/i25024734/4b87f38c465a3fe6.png)
再与纹理部分相乘:
![](https://img.haomeiwen.com/i25024734/c683d0936d0b4958.png)
边缘挖空也完成了。
收尾
最后染色并查看效果,新建一个Color属性,模式设置为HDR,这样才能闪闪发亮,调一个喜欢的颜色(如果太亮了就把强度调低点):
![](https://img.haomeiwen.com/i25024734/6731dc044a37a28d.png)
混合颜色并输出到Fragment:
![](https://img.haomeiwen.com/i25024734/77afe4b556f0c48c.png)
以这个ShaderGraph新建一个材质:
![](https://img.haomeiwen.com/i25024734/db4a152eff961edf.png)
场景中新建Global Volume,开启Bloom后处理:
![](https://img.haomeiwen.com/i25024734/1bb98a94522b2283.png)
相机的后处理也记得开一下:
![](https://img.haomeiwen.com/i25024734/7b9140529ddbb819.png)
场景中新建一个Quad,拖入材质可以看到效果:
![](https://img.haomeiwen.com/i25024734/c1c99bff9452b20f.gif)
如果没在动的话,把Always Refresh勾上:
![](https://img.haomeiwen.com/i25024734/5733200458ebaff8.png)
调整后的各项属性值:
![](https://img.haomeiwen.com/i25024734/48e7ee48a910e3a8.png)
可以尝试不同的属性值,以达到不同的效果:
![](https://img.haomeiwen.com/i25024734/a34e9a1f15ee68fa.gif)
![](https://img.haomeiwen.com/i25024734/0feea3074214f9e2.gif)
![](https://img.haomeiwen.com/i25024734/1144a7aa6ad30c62.gif)
完整的ShaderGraph:
![](https://img.haomeiwen.com/i25024734/752034ddf5d0f437.png)
加一些特技
粒子效果基本照抄印度小哥的教程,根据个人需求有一些修改。
环绕粒子
单独的环绕粒子效果:
![](https://img.haomeiwen.com/i25024734/12f62b32b9d98209.gif)
环绕粒子需要发光,新建一个粒子材质,Shader选择Universal Render Pipeline/Particles/Unlit,按如下配置:
![](https://img.haomeiwen.com/i25024734/ad8610737ffa0156.png)
在Quad下新建一个Particle System,Renderer中拖入刚才创建的粒子材质,其他大致这样配置:
![](https://img.haomeiwen.com/i25024734/9cb15e89c7906d0d.png)
粒子的配置比较随意,根据个人喜好可以有不同的配法。这里为了让粒子环绕中心旋转,用的是甜甜圈形状,如果运动要更随机一些,可以再加上Noise。
背景阴影
![](https://img.haomeiwen.com/i25024734/ea3ebfe3dfdfb7d6.gif)
这个感觉可加可不加,比较简单就不说明了。
最终效果:
![](https://img.haomeiwen.com/i25024734/9e0e7b9b4543282a.gif)
一些传送门的模型会给出特效所在的Mesh,这种情况下只要将传送门材质拖上去,适当调整粒子的形状即可。另外记得关闭阴影投射,避免影子穿帮:
![](https://img.haomeiwen.com/i25024734/e4f0d5a1ebac6896.png)
![](https://img.haomeiwen.com/i25024734/c00ab9cd88221a83.gif)
项目中用到的素材:
Portal by Vetech82
Sand portal by Yarelon
一个题外话,mac上如果出现ShaderGraph编辑界面卡顿掉帧的情况,可以尝试在Player设置中临时使用OpenGLCore图形API并重启编辑器,ShaderGraph会变得很丝滑,但缺点是运行游戏时可能会死机。
![](https://img.haomeiwen.com/i25024734/8ffe35a8a2a2a835.png)
网友评论