[Unity]简易传送门效果

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

整体思路:

  1. 通过对纹理的扭曲与旋转,并挖空中间与边缘部分,实现传送门图形
  2. 加上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会变得很丝滑,但缺点是运行游戏时可能会死机。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容

  • 接下来的两篇内容,是用Unity来做传送门的效果。这里是用自己的方法来做的,中途踩了许多坑不过最终还是实现了。下面...
    TomasW阅读 2,462评论 0 0
  • (大牛绕道,大牛绕道,大牛绕道)前两天朋友问说一个传送门的效果怎么实现,当时第一反应想到是用shader实现,其实...
    AngerCow阅读 9,210评论 2 2
  • 一、Unity简介 1. Unity界面 Shift + Space : 放大界面 Scene界面按钮渲染模式2D...
    MYves阅读 8,198评论 0 22
  • 基本操作 选择:可以选择多个元素,但是不能拖动移动:可以拖动某个元素移动其位置层级:元素之间也可以存着上下层关系,...
    Alien的小窝阅读 1,879评论 0 1
  • “风吹仙袂飘飘举,犹似霓裳羽衣舞。” ——《长恨歌》 白居易 0. 前言 项目技术测试结束之后,各种美术效果提升...
    董夕阅读 8,177评论 2 19