Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程

目录
  • 前言
  • 一，效果展示
  • 二，原理介绍
  • 三，实现效果
  • 四，使用示例
  • 五，完整图示

前言

若你的工程还没有进行基础配置，请查看我的博文Unity 之 ShaderGraph入门使用详解，按照步骤操作完成配置即可，还能顺便学习一下基础操作流程哦~
本文手把手教你制作超级炫酷的溶解效果，入门级教程，还不快动手试试？有经验的童鞋可以直接跳到最后一步，按照图示搭建即可。

一，效果展示

老规矩，直接上效果图：（最高端的效果只需要最简单的模型呈现）

没学习Shader Graph之前：我靠😱 ！这效果有点牛啊，那个大佬写的？
学习了Shader Graph之后：我去😒 ！就这？岂不是有手就行？

二，原理介绍

通过主节点Alpha Clip Thresholdα剪辑阈值属性，来控制显示隐藏（取值范围0-1），意为Alpha输入的大于“α剪辑阈值”则显示，否则隐藏。（Alpha:0-1代表白色-黑色）

创建Simple Noise节点控制Alpha，调节Simple Noise节点Scale属性控制大小，调整Alpha Clip Threshold控制显示隐藏，效果如下：

怎么样？是不是觉得看完原理介绍就不用往下看了？

读者😈 ：就这？😒 在此基础上随便加一个Time时间节点控制一下自动溶解，再加一个Color颜色节点修改下颜色不就实现了开篇时展示的效果，这么简单的制作也好意思单独拿出来水一篇文章？

尝试第一步，添加颜色节点，连接如下图，结果发现不但颜色没加上，预览图连球都显示不出来了🙃 …

尝试第二步，添加颜色节点，连接如下图，结果发现溶解效果是有颜色了，但是效果看起来还不如不加颜色了…

作者👿 ：Emm…🙄 虽说我这是入门级文章，要是这么简单也不至于写这么长吧，如果你做到了第二步这个效果的话，距离成功就还差一点点了(使用Step节点)要是明白了呢？就去尝试。表示看不懂什么意思的话，还是继续往下看吧~

三，实现效果

准备工作
在Project面板右键 --> Create --> Shader --> PBRGraph（我这里命名为“DissolvePBRGraph”），然后双击打开编辑器面板：

实现溶解
创建两个Vector 1节点并将其设置为公开属性（选中节点右键选择“Convert To Property”）分别命名为"Width"和”NoiseScale“，然后创建Simple Noise节点，和主节点连接情况如下：

添加颜色
创建Color颜色节点的并将其设置为公开属性，创建Step节点（作用：如果输入In的值大于或等于输入Edge的值，则返回 1，否则返回 0。）创建Multiply乘法节点，连接情况如下：

PS：这里我将Color颜色节点的模式调整为HDR是为了增加亮度，可按需修改。

自动溶解
创建Time时间节点，为了效果我选择使用其Sine Time输出，所以为保证输出值一直为正数，添加Remap节点控制其输出映射为0-1之间。然后添加Add加法节点，用于连接时间节点和"Width"属性值，最终连接情况如下：

记得点击左上角的"Save Asset"保存一下哦~

四，使用示例

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

在“Hierarchy”面板创建Sphere，并将刚刚创建的材质球赋值给它，得到结果如下：

若需要多个不同颜色不同效果的溶解效果，复制材质球修改公开属性即可。

五，完整图示

到此这篇关于Unity中的 ShaderGraph 实现超级炫酷的溶解效果入门级教程的文章就介绍到这了,更多相关Unity ShaderGraph 溶解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Unity中的ShaderGraph入门使用教程

    详解Unity中的ShaderGraph入门使用教程

    一,ShaderGraph 简介 简介: Unity2018版本之后推出了一个可编程渲染管线工具ShaderGraph,让我们可以通过可视化界面拖拽来实现着色器的创建和编辑. 官方话术: Shader Graph 使您能够直观地构建着色器.您无需编写代码,而是在图形框架中创建和连接节点.Shader Graph 提供反映您的更改的即时反馈,并且对于不熟悉着色器创建的用户来说非常简单. Shader Graph 仅与可编写脚本的渲染管线 (SRP) 兼容,即高清晰度渲染管线 (HDRP) 和通用渲

  • Unity中 ShaderGraph 实现旋涡传送门效果入门级教程(推荐)

    Unity中 ShaderGraph 实现旋涡传送门效果入门级教程(推荐)

    若你的工程还没有进行基础配置,请查看我的博文Unity 之 ShaderGraph入门使用详解,按照步骤操作完成配置即可,还能顺便学习一下基础操作流程哦~ 本文手把手教你制作旋涡效果,入门级教程,还不快动手试试? 一,最终效果展示 老规矩,直接上效果图: 二,创建PBRGraph 在Project面板右键 --> Create --> Shader --> PBRGraph: 重命名:RPAShaderGraph(随意) 双击RPAShaderGraph打开编辑界面 三,实现原理介绍 通

  • Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程

    Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程

    目录 前言 一,效果展示 二,原理介绍 三,实现效果 四,使用示例 五,完整图示 前言 若你的工程还没有进行基础配置,请查看我的博文Unity 之 ShaderGraph入门使用详解,按照步骤操作完成配置即可,还能顺便学习一下基础操作流程哦~ 本文手把手教你制作超级炫酷的溶解效果,入门级教程,还不快动手试试?有经验的童鞋可以直接跳到最后一步,按照图示搭建即可. 一,效果展示 老规矩,直接上效果图:(最高端的效果只需要最简单的模型呈现) 没学习Shader Graph之前:我靠

  • JS+CSS3制作炫酷的弹窗效果

    JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

  • js实现炫酷的烟花效果

    本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下 我们要理清整个流程的思路. 首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式. 所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同. 1.建立一块画布(div)用于展示烟花的效

  • react-three-fiber实现炫酷3D粒子效果首页

    react-three-fiber实现炫酷3D粒子效果首页

    目录 背景 Three.js工作原理 场景(Scene) 相机(Camera) 渲染器(renderer) 网格对象(mesh) react-three-fiber 画布(Canvas) 3D粒子模型构建 实现思路 定义buffer几何体,并填充数据 将buffer几何体包裹在点模型中,并为每个点引入材质 加入旋转动画 最后呈现结果 背景 初学者怎么用react-three-fiber实现一个炫酷粒子效果的首页 Three.js工作原理 场景(Scene).相机(Camera)和渲染器(Rend

  • Android打造炫酷进度条效果

    本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 学习:视频地址 HorizontalProgressbarWithProgress的代码 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Build; imp

  • PowerShell中调用WPF生成炫酷窗口实例

    PowerShell中调用WPF生成炫酷窗口实例

    怎样在PowerShell中调用WPF,你知道,我也知道:怎样在PowerShell中将很长的.NET类型名称缩短成别名,你知道,我也知道.但是怎样将这两个知识点融汇贯通,写出一个优雅的DEMO,并且让你一眼就能看出,这就是WPF,不是别的,也许你以前就知道,而我直到今天才知道,有种相见恨晚的感觉. 先看一下炫酷的效果吧! PowerShell之WPF炫酷 # Plik: 4_Demo_v3_Reflection.ps1 #requires -version 3 $Akceleratory =

  • Android中通过AsyncTask类来制作炫酷进度条的实例教程

    AsyncTask (API level 3,所以几乎所有目前在市面上流通的 Android 版本皆可使用) 是除 Thread 外的另一种选择,Android 团队鼓励主执行绪(UI thread) 专注于操作 & 画面的流畅呈现, 其余工作 (如网络资料传输.档案/磁碟/资料存取) 最好都在背景执行: Thread 通常要搭配 Handler 使用,而 AsyncTask 用意在简化背景执行 thread 程序码的撰写. 如果您预期要执行的工作能在几秒内完成,就可以选择使用 AsyncTas

  • Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

    Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

    分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下,如果大家觉得还不错,很满意可以下载源码哦. 效果展示     源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="sl

  • 新年快乐! javascript实现超级炫酷的3D烟花特效

    本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <title>3D烟花</title> <style> html,b

随机推荐