【游戏开发实战】教你在Unity中实现模型消融化为灰烬飘散的效果(ShaderGraph |
您所在的位置:网站首页 › 图片粒子消散效果 › 【游戏开发实战】教你在Unity中实现模型消融化为灰烬飘散的效果(ShaderGraph |
文章目录
一、前言二、ShaderGraph环境准备三、模型准备:原神角色模型四、实现思路1、效果一的实现思路2、效果二的实现思路
五、ShaderGraph具体实现1、效果一1.1、创建Unlit Shader Graph1.2、获取顶点坐标的y轴坐标1.3、滑块控制1.4、边缘噪声1.5、AlhpaClip控制1.6、边缘渐变色1.7、输出基础色1.8、顶点坐标扰动1.9、插值计算顶点坐标1.10、完整节点图
2、效果二2.1、创建Unlit Shader Graph2.2、双噪声叠加扰动2.2、计算AlphaClip2.3、计算描边2.4、基础色2.5、完整节点图2.6、粒子的节点图
六、材质球设置七、粒子系统设置八、C#代码控制材质球属性九、最终运行效果十、工程源码十一、完毕
一、前言
嗨,大家好,我是新发。 有小伙伴在提问区给我提了这个问题,想要做一个模型消融化作灰烬飘散的效果, 本文我实现了两种效果,最终如下: 话不多说,我们开始吧~ 二、ShaderGraph环境准备因为本文我使用的是Unity的ShaderGraph来实现上面的效果的,需要先安装ShaderGraph相关插件,并做一些基础设置。 可以查看我之前这篇博客《ShaderGraph使用教程与各种特效案例》的环境准备部分,这里我就不赘述具体操作了。 本文我使用的是原神的角色模型,我之前写过一篇文章讲如何从原神官网下载角色模型并制作成FBX格式导入Unity的教程,感兴趣的同学可以看下:《【游戏开发实战】下载原神模型,PMX转FBX,导入到Unity中,卡通渲染,绑定人形动画(附Demo工程)》 在讲具体操作之前,我先说一下实现思路,本文我实现了两种效果,这里分别讲一下。 1、效果一的实现思路效果一 画个思维图, 效果二 注:这个效果并不是那些消融的碎片作为灰烬飘散,而是粒子单独去喷射一个灰烬的效果,其实有点障眼法,这是我想到的一个取巧的办法,如果你有更好更逼真的办法,欢迎交流。 画个思维图,分两个,一个是模型的,如下 这里我不考虑光照效果,所以创建Unlit的Shader,在Project窗口右键点击菜单Create / Shader / Universal Render Pipeline / Unlit Shader Graph,如下 我们先通过Position节点拿到顶点坐标(注意我这里取的是Object空间下的坐标),再通过Split拿到G分量,也就是顶点坐标的y坐标, 创建一个float节点,命名为disolve,并转为属性,类型选择Slider(即滑块),用它与刚刚的顶点坐标的y分量做一次平滑阶跃,得到的这个输出可以作为后面颜色混合和顶点扰动的输入, 接着我们创建一个噪声节点Simple Noise,通过定时器控制UV偏移,如下,这个噪声用于对边缘进行扰动, 我们把噪声与滑块值相加,再与定点坐标的y分量做一个Step阶跃,得到颗粒感的边界,最后反一下,作为AlphaClip的输入, 把步骤1.3的输出拿过来,与一个颜色混合,再进行加强,得到一个边缘渐变色, 对贴图进行采样,与边缘渐变色混合,作为基础色输出到片元着色器的Base Color, 我想要消融的地方的顶点有一个坐标扰动的效果,我构造了一个坐标扰动的噪声,如下,这里的扰动规则可自行发挥,我是采用Simple Noise对x、y轴进行扰动,使用Gradient Noise对y轴进行扰动, 我们把噪声与顶点坐标相加,再通过滑块控制线性插值,得到最终顶点坐标,输出给顶点着色器的Position, 最终完整的节点图如下,肯定看不清,只是给大家看下整体结构,想要看细节的同学可下载本文的工程源码进行查看, 同理是先创建一个Unlit Shader Graph,双击打开。 2.2、双噪声叠加扰动消融效果需要一个噪声,我这里采用了双噪声叠加的方式,分别对噪声一噪声二的UV的V分量做相反反向的偏移,最终混合出一个双噪声混合的效果, 我们创建一个float节点,作为滑块,与刚刚的噪声做一个阶跃,输出结果作为AlphaClip, 滑块与噪声做一个阶跃,再与刚刚计算的AlphaClip相减,就可以得到噪声的描边了,再混合一个颜色即可, 对贴图进行采样,然后与描边色混合,最终输出到片元着色器的Base Color, 最终完整的节点图如下,肯定看不清,只是给大家看下整体结构,想要看细节的同学可下载本文的工程源码进行查看, 粒子的ShaderGraph比较简单,主要控制在粒子系统的参数本身,Shader Graph节点图如下, 本文的角色的材质球分了多个,比如头发、衣服、表情等, 效果二需要一个粒子效果,贴图我自己画了一个,作为灰烬的贴图,如下 我们做一下简单的UI界面,弄一个Slider滑块,如下, 把PlayerMaterialCtrler.cs脚本挂到角色根节点上,并赋值Slider对象, 运行Unity,最终效果如下, 本文工程源码我已上传到GitCode,感兴趣的同学可自行下载学习。 地址:https://codechina.csdn.net/linxinfa/UnityDissolveAshEffect 注意:我使用的Unity版本是2021.1.7f1c1,使用的ShaderGraph版本是11.0.0,如果你使用的版本与我不同,可能会有兼容问题。 好啦,就到这里吧~ 我是林新发:https://blog.csdn.net/linxinfa 原创不易,若转载请注明出处,感谢大家~ 喜欢我的可以点赞、关注、收藏,如果有什么技术上的疑问,欢迎留言或私信~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |