返回顶部
首页 > 资讯 > 精选 >Unity中ShaderGraph怎么实现旋涡传送门效果
  • 269
分享到

Unity中ShaderGraph怎么实现旋涡传送门效果

2023-06-20 15:06:16 269人浏览 泡泡鱼
摘要

本篇内容主要讲解“Unity中ShaderGraph怎么实现旋涡传送门效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity中ShaderGraph怎么实现旋涡传送门效果”吧!一,最终效果

本篇内容主要讲解“Unity中ShaderGraph怎么实现旋涡传送门效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity中ShaderGraph怎么实现旋涡传送门效果”吧!

一,最终效果展示

老规矩,直接上效果图:

Unity中ShaderGraph怎么实现旋涡传送门效果

二,创建PBRGraph

在Project面板右键 --> Create --> Shader --> PBRGraph:

Unity中ShaderGraph怎么实现旋涡传送门效果

重命名:RPAShaderGraph(随意)

Unity中ShaderGraph怎么实现旋涡传送门效果

双击RPAShaderGraph打开编辑界面

Unity中ShaderGraph怎么实现旋涡传送门效果


三,实现原理介绍

通过Twirl 旋转节点对Gradient Noise 梯度噪声节点进行操作,就可得到一个旋转的旋涡效果。

Unity中ShaderGraph怎么实现旋涡传送门效果

然后我们添加时间节点调整Twir的偏移量,让其自动转起来,这个动态的旋涡效果基本就实现了。

Unity中ShaderGraph怎么实现旋涡传送门效果


四,完整效果实现

就接着三种的效果,继续说吧:
在“PBRGraph”面板空白处 右键 --> 选择“Create Note” 创建Twirl(直接搜索名字即可)。
同理创建“Gradient Noise” 和 “Time” 节点,然后将其输入输出连接如下图:

Unity中ShaderGraph怎么实现旋涡传送门效果

现在我们已经有了一个动态的旋涡,在一中的效果图上我们可以看到,它并不是黑白色的,下面修改一下颜色:

创建“Color”颜色节点 和 “Multiply”乘法节点,我们将“Gradient Noise”节点的输出 和 “Color”颜色节点的输出都连接到“Multiply”乘法节点的输入上:

Unity中ShaderGraph怎么实现旋涡传送门效果

然后修改下“Color”节点的颜色,就可以得到一个其他颜色的旋涡了:

Unity中ShaderGraph怎么实现旋涡传送门效果

接下来,将带有颜色旋涡的“Multiply”乘法节点输出,连接到”PBR Master”主节点的Albode输入上,即可在预览图上看到旋涡的效果上了:

Unity中ShaderGraph怎么实现旋涡传送门效果

现在预览效果上显示的是一个正方形的,这个样子看起来有点丑奥~ 而且和想要的效果也不一致,那怎么办呢?
添加一个圆形的遮罩不就行了:添加“Ellipse” 圆形节点,将其输入节点的宽高调整为0.8,然后将输出节点,连接到”PBR Master”主节点的Alpha输入上:

Unity中ShaderGraph怎么实现旋涡传送门效果

然后在点击Master 主节点的“设置”按钮,将“Surface”属性设置为“Transparent” 透明的,即可得到被遮罩的效果了:

Unity中ShaderGraph怎么实现旋涡传送门效果

其实这时的旋涡效果以及完成了,下面我们添加两个变量,来对旋转时间和旋涡的大小进行控制,这样我们就可以在材质球上进行数值修改,从而方便的得到想要的效果。

在“Blackboard” 上创建一个“Verctor1”的变量,将其拖拽到空白处,并赋值给“Twirl”的“Strength”输入,操作步骤如下:

Unity中ShaderGraph怎么实现旋涡传送门效果

同理我们在创建一个“Verctor1”变量,然后创建一个“Multiply” 乘法节点,将其“Time”和"V1"相乘后,输出给“Twirl”的“Offset”输入:

Unity中ShaderGraph怎么实现旋涡传送门效果

至此全部制作就完成了,完整RPA Graph如下:

Unity中ShaderGraph怎么实现旋涡传送门效果

PS:注意需要将主节点的“Surface”属性设置为“Transparent”透明的,上图并没有体现出来哦~


五,应用到场景中

在“RPA Graph” 编辑界面右上角,点击“Save Asset” 保存一下。然后创建材质球,将其材质选定为刚刚保存的这个“RPAShaderGraph”。

这里提供一个快捷创建材质球的方法,鼠标选中我们保存的“RPAShaderGraph”文件,然后右键创建材质球,这样我们创建出来的材质球,就自动使用这个Shader了。

Unity中ShaderGraph怎么实现旋涡传送门效果

最后一步,创建“Plane”将其材质赋值为上面创建的材质球,可以得到最终效果,这时我们可以编辑之前设置好的“Streght”和“Time”属性的值,就可以直接调节想要的效果了:

Unity中ShaderGraph怎么实现旋涡传送门效果

到此,相信大家对“Unity中ShaderGraph怎么实现旋涡传送门效果”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: Unity中ShaderGraph怎么实现旋涡传送门效果

本文链接: https://lsjlt.com/news/297795.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Unity中ShaderGraph怎么实现旋涡传送门效果
    本篇内容主要讲解“Unity中ShaderGraph怎么实现旋涡传送门效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity中ShaderGraph怎么实现旋涡传送门效果”吧!一,最终效果...
    99+
    2023-06-20
  • Unity中 ShaderGraph 实现旋涡传送门效果入门级教程(推荐)
    若你的工程还没有进行基础配置,请查看我的博文Unity 之 ShaderGraph入门使用详解,按照步骤操作完成配置即可,还能顺便学习一下基础操作流程哦~ 本文手把手教你制作旋涡效...
    99+
    2024-04-02
  • Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程
    目录前言一,效果展示二,原理介绍三,实现效果四,使用示例五,完整图示前言 若你的工程还没有进行基础配置,请查看我的博文Unity 之 ShaderGraph入门使用详解,按照步骤操...
    99+
    2024-04-02
  • vue2实现传送门效果的示例
    目录描述先看效果代码描述 在Vue3中<Teleport> 是一个内置组件,使我们可以将一个组件的一部分模板“传送”到该组件的 DOM ...
    99+
    2023-05-17
    vue2 传送门
  • CSS3 中怎么实现3D旋转rotate效果
    本篇文章为大家展示了CSS3 中怎么实现3D旋转rotate效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。效果图:示例代码XML/HTML Code复制内容到剪...
    99+
    2024-04-02
  • Unity Shader怎么实现模糊效果
    本篇内容主要讲解“Unity Shader怎么实现模糊效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity Shader怎么实现模糊效果”吧!本文实例为大家分享了Unity Shader...
    99+
    2023-06-20
  • CSS3中怎么实现开门效果
    本篇文章给大家分享的是有关CSS3中怎么实现开门效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。代码如下:<!DOCTYPE ...
    99+
    2024-04-02
  • html5中怎么实现3d旋转动画效果
    这篇“html5中怎么实现3d旋转动画效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“h...
    99+
    2024-04-02
  • 怎么在css中实现一个旋转效果
    这篇文章给大家介绍怎么在css中实现一个旋转效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。css中可以实现旋转效果的属性是“transform”。transform 属性向元素应用 2D 或 3D 转换。该属性允许...
    99+
    2023-06-14
  • Unity Shader怎么实现径向模糊效果
    本篇内容主要讲解“Unity Shader怎么实现径向模糊效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity Shader怎么实现径向模糊效果”吧!在游戏里面有很多模糊效果,像赛车类游...
    99+
    2023-06-20
  • CSS3怎么实现旋转圈动画效果
    这篇文章主要讲解了“CSS3怎么实现旋转圈动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3怎么实现旋转圈动画效果”吧!效果:html代码:<body style...
    99+
    2023-07-04
  • Unity中怎么利用ScrollView实现自动吸附效果
    Unity中怎么利用ScrollView实现自动吸附效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。通过使用UGUI的拖拽接口,在拖拽结束时比较当前滑动框的Normalize...
    99+
    2023-06-20
  • 怎么在html5中实现一个画布旋转效果
    今天就跟大家聊聊有关怎么在html5中实现一个画布旋转效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。keleyi.htm的代码如下:<!DOCTYPE HTML&...
    99+
    2023-06-09
  • 利用unity怎么实现一个翻页效果
    这期内容当中小编将会给大家带来有关利用unity怎么实现一个翻页效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。创建物体ToPanel;添加组件ScrollRect,在下面创建一个空物体用来装需要移动的...
    99+
    2023-06-06
  • HTLM怎么实现动态旋转木马效果
    这篇文章主要介绍“HTLM怎么实现动态旋转木马效果”,在日常操作中,相信很多人在HTLM怎么实现动态旋转木马效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTLM怎么实现...
    99+
    2024-04-02
  • 怎么使用CSS3实现旋转光环效果
    这篇文章主要介绍了怎么使用CSS3实现旋转光环效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.html框架<div class=...
    99+
    2024-04-02
  • html5怎么实现图片的3D旋转效果
    本篇内容主要讲解“html5怎么实现图片的3D旋转效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5怎么实现图片的3D旋转效果”吧!   完整代码如...
    99+
    2024-04-02
  • css怎么实现旋转翻牌动画效果
    小编给大家分享一下css怎么实现旋转翻牌动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css动画之旋转翻牌效果,具体内容如下所示:我们先设置两个盒子大小,...
    99+
    2023-06-08
  • CSS3代码怎么实现头像旋转效果
    这篇文章主要介绍“CSS3代码怎么实现头像旋转效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3代码怎么实现头像旋转效果”文章能帮助大家解决问题。transition: all 2.0s;表...
    99+
    2023-07-05
  • css怎么实现收缩圆环旋转效果
    这篇文章主要介绍“css怎么实现收缩圆环旋转效果”,在日常操作中,相信很多人在css怎么实现收缩圆环旋转效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css怎么实现收缩圆环旋转效果”的疑惑有所帮助!接下来...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作