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 溶解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-07-20

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

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

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

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

Unity shader实现自由放大缩小效果

本文实例为大家分享了Unity shader实现自由放大缩小效果的具体代码,供大家参考,具体内容如下 代码: 以下实现的shader代码: Shader "Hidden/Wave" { Properties { _MainTex ("Texture", 2D) = "white" {} _WaveWidth("Wave Width",float) = 0.5 _CenterX("CenterX",float

Unity Shader实现新手引导遮罩镂空效果

这两天实现了下新手引导需要的遮罩镂空shader效果,记录一下. 1.圆形镂空shader代码:  //计算片元世界坐标和目标中心位置的距离 float dis = distance(IN.worldPosition.xy, _Center.xy); //过滤掉距离小于(半径-过渡范围)的片元 clip(dis - (_Radius - _TransitionRange)); //优化if条件判断,如果距离小于半径则执行下一步,等于if(dis < _Radius) fixed tmp = st

AngularJS2中一种button切换效果的实现方法(二)

之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式: 路由 <button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button> <button class="btn2&q

js中常用的Tab切换效果(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

C#使用Protocol Buffer(ProtoBuf)进行Unity中的Socket通信

首先来说一下本文中例子所要实现的功能: 基于ProtoBuf序列化对象 使用Socket实现时时通信 数据包的编码和解码 下面来看具体的步骤: 一.Unity中使用ProtoBuf 导入DLL到Unity中, 创建网络传输的模型类: using System; using ProtoBuf; //添加特性,表示可以被ProtoBuf工具序列化 [ProtoContract] public class NetModel { //添加特性,表示该字段可以被序列化,1可以理解为下标 [ProtoMem

Android仿支付宝中余额宝的数字动画效果

实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

Android中Activity滑动关闭的效果

最近感觉有一个Activity关闭的效果挺不错的,就是手势滑动就可以关闭当前Activity,于是就想写一篇博客和大家一起分享下!废话不多说,老规矩,还先上效果图,更直观! 项目地址:https://github.com/xinyitiandi/SlidingFinishDemo 上代码: 1.第一个Activity: package com.ekeguan.slidingfinishdemo; import android.content.Intent; import android.os.B

在Unity中捕捉Android的常用按钮返回事件

在Unity开发中捕捉Android的常用事件其实很简单 Input.GetKey(KeyCode.Escape) Input.GetKeyDown(KeyCode.Home) // 返回键 if ( Application.platform == RuntimePlatform.Android &&(Input.GetKeyDown(KeyCode.Escape))) { //.... } // Home键 if ( Application.platform == RuntimePlat

Android实现在列表List中显示半透明小窗体效果的控件用法详解

本文实例讲述了Android实现在列表List中显示半透明小窗体效果的控件用法.分享给大家供大家参考,具体如下: Android 在列表List中显示半透明小窗体效果的控件,多的不多直接上代码,要说的都在注释里了: import com.hiapk.market.R; import android.content.Context; import android.graphics.PixelFormat; import android.os.Handler; import android.view