【Unity Shader 消融效果_案例分享】

1.实现逻辑

消融效果主要是利用了Shader中的clip()函数,也就是透明测试功能,在ASE中叫“Opacity Mask”。
消融效果是基于一张“Noise”纹理图就行计算的,“Noise”纹理图灰度区间在 [0,1]
开始先将纹理图加上一个数值 “v = 1” ,使纹理上灰度值的区间变为 [1 , 2]
然后逐渐减少v值,当 “v = -1” 时,纹理上灰度值当区间就变成 [-1 , 0]
把纹理的变化过程传给Cilp()函数就可以实现模型逐渐消融的效果,并且可以通过v的数值来控制消融的程度,数值的范围在**[-1 , 1]**。

2.资源准备

“Noise”纹理图是在Photoshop中进行绘制的。
方法如下:

1. 在Photoshop中创建一个512*512的灰度图。

在这里插入图片描述

2. 点击滤镜->渲染->云彩,为当前图生成Noise纹理。

在这里插入图片描述

3. 点击菜单图像->自动色调,使用图像中最暗的像素灰度值达到0、最亮的像素灰度值达到255。

在这里插入图片描述

4. 导出资源到Unity项目。

最终Noise效果如图:

Noise

为了增加视觉效果,还需要在消融的同时为边缘附加燃烧效果,因此还需要准备一个燃烧的渐变纹理。
同样也是在Photoshop中制作。选择渐变工具,渐变的颜色设置如图:

参照火焰效果从外焰到焰心设置渐变色。
Photoshop中的渐变设置 如图:
在这里插入图片描述

  • 最左侧是最亮的白色外焰。
  • 稍微靠右侧一点的是黄色内焰
  • 中间的位置是火焰心。
  • 最右侧是还没有燃烧到的黑色区域。
  • 将纹理到处导入到Unity中,在Unity中将渐变纹理的Wrap Mode(包裹模式)设置为“Clamp”,设置面板如下:
    在这里插入图片描述
Wrap Mode的默认选项为Repeat,它与Clamp的效果对比图如图
  • Repeat : 当纹理坐标大于等于1的时候,纹理会从坐标0重新采样,当需要重复使用贴图,平铺整个模型可以使用这个选项。
  • Clamp : 当纹理坐标大于1的时候,大于的部分会持续1坐标位置的采样,为了消除Cubemap的接缝纹理,一般会使用这个选项。
    在这里插入图片描述
Repeat和Clamp包裹模式的对比效果。

在本次效果中为了防止x坐标为1的时候,采样到的渐变纹理最左侧的白色像素,因此将Wrap Mode设置成Clamp。

3.使用ASE实现效果

准备好资源后,下面
  • 创建一个使用Surface Shader_ASE Shader文件,命名为“Dissolve_ASE”。然后双击打开文件进入ASE编辑器进行Shader设置。
  • 设置Shader路径,例如“Sample/Dissolve_ASE”
  • 光照模型为“Specular”,并将Blend Mode设置为“Masked”
    在这里插入图片描述
  • 从而开启Output节点的Opacity Mask功能。
    在这里插入图片描述
    除此之外其他设置保持不变。
3.1.Clip Mask

消融效果基于Clip()函数进行,因此需要先连接出Clip Mask。
节点连接如图:
在这里插入图片描述

- 添加一个纹理节点,命名为“Dissolve_Noise”。

在实现逻辑时候提到的v数值,控制物体的消融程度。(当v=0的时候,模型完全显示;当v=1的时候,模型消融不见。)

  • 按键盘数字“1”鼠标单击ASE面板空白处,添加一个数值节点,命名为“Dissolve”,范围设置为[0,1]
  • 连接到“Scale And Offset”节点上,将Scale和Offset分别设置为“2”和“-1”。

根据“Scale And Offset”节点的运算规律 :“Value*Scale + Offset” 可以得出最终输出的数值范围 [-1,1]

纹理节点与Dissolve数值计算后的范围值进行相减,就可以通过Dissolve节点控制溶解纹理。

  • 已知条件:Dissolve=[0,1] , Scale=2 , Offset=-1 , A=[0,1]
    说明:Dissolve_Noise是采样纹理的完整 RGBA 颜色,对应 R是Vector4 的 X 分量的颜色值,范围也即[0,1]
  • Subtract减法计算公式: Subtract = A - B
  • “Scale And Offset”节点的计算公式: Value*Scale + Offset (其中Value为节点的输入值)
  • 到Subtract这一节点的计算公式:A - (Dissolve*Scale + Offset )
  • 当Dissolve为0的时候,纹理上的数值大于1,模型完全显示;
  • 当Dissolve为1的时候,纹理上的数值小于0,模型消融不见。
  • 将Subtract的计算结果连接到Saturate上。Saturate是将输入的值限制在[0,1] 的范围。
  • 使用“Register”节点存储以上的计算,命名为“ClipMask”,方便后续再次调用。
  • 使用“Get”节点获取“ClipMask”变量,连接到Output节点的Opacity Mask上。
  • 消融效果的节点大致已连接完成。

效果如图:
请添加图片描述

3.2.消融边缘的燃烧效果

上一节实现了基础消融效果,为了使消融效果更丰富,在消融边缘添加一层燃烧的效果。
节点如图:
在这里插入图片描述
使用Get节点获取到“ClipMask”变量,先将基于这个变量开始计算。
首先使用“Scale And Offset”节点对“ClipMask”的数值范围进行从新映射,使黑色区域和白色区域增大、中间的灰度的区域缩小。

“Scale And Offset”节点计算公式:

Output = Input * Scale - 0.5 * Scale
在这里插入图片描述
重新映射之后的数值范围会超出[0,1],使用Saturate节点对输出范围进行限制,限制范围后的结果对渐变纹理进行采样。
采样逻辑如图:
在这里插入图片描述
黑色区域为溶解的部分,采样到渐变纹理最左侧的白色。
白色区域为正常显示的部分,采样到渐变纹理最右侧的黑色部分。
居于黑色和白色范围之间的区域会以线性的方式对渐变纹理进行采样。
呈现出黄色到红色的渐变颜色。
复制下面的口令到ASE面板内,或者点击这个链接进行复制粘贴到ASE面板内。

AMPLIFY_CLIPBOARD_ID;-1086.054,328.3064,0#CLIP_ITEM#Node;AmplifyShaderEditor.CommentaryNode;9;-1986.863,-136.5265;Inherit;False;1660.349;548.1189;ClipMask;9;7;51;5;1;4;2;52;56;55;ClipMask;0.9433962,0.8237941,0.5206479,1;0;0#CLIP_ITEM#Node;AmplifyShaderEditor.SimpleTimeNode;53;-1879.517,232.3839;Inherit;False;1;0;FLOAT;1;False;1;FLOAT;0#CLIP_ITEM#Node;AmplifyShaderEditor.TextureCoordinatesNode;52;-1941.087,-57.87365;Inherit;False;0;1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4#CLIP_ITEM#Node;AmplifyShaderEditor.Vector2Node;56;-1860.198,93.78954;Inherit;False;Property;_Speed;Speed;10;0;Create;True;0;0;False;0;False;0,0;0,0;0;3;FLOAT2;0;FLOAT;1;FLOAT;2#CLIP_ITEM#Node;AmplifyShaderEditor.RangedFloatNode;2;-1338.702,188.2476;Inherit;False;Property;_Dissolve;Dissolve;2;0;Create;True;0;0;False;0;False;0.4254827;0.35;0;1;0;1;FLOAT;0#CLIP_ITEM#Node;AmplifyShaderEditor.PannerNode;55;-1614.513,21.52922;Inherit;False;3;0;FLOAT2;0,0;False;2;FLOAT2;0,0;False;1;FLOAT;1;False;1;FLOAT2;0
WireConnection;55;0;52;0
WireConnection;55;2;56;0
WireConnection;55;1;53;0#CLIP_ITEM#Node;AmplifyShaderEditor.ScaleAndOffsetNode;4;-1038.458,190.1663;Inherit;False;3;0;FLOAT;0;False;1;FLOAT;2;False;2;FLOAT;-1;False;1;FLOAT;0
WireConnection;4;0;2;0#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;1;-1343.127,-52.50734;Inherit;True;Property;_Dissolve_Noise;Dissolve_Noise;1;0;Create;True;0;0;False;0;False;-1;ec00e971a3c684402b062fca29f7b3c0;ec00e971a3c684402b062fca29f7b3c0;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;Assets/Noise/Texture/Noise.png
WireConnection;1;1;55;0#CLIP_ITEM#Node;AmplifyShaderEditor.SimpleSubtractOpNode;5;-810.8718,10.61445;Inherit;False;2;0;FLOAT;0;False;1;FLOAT;0;False;1;FLOAT;0
WireConnection;5;0;1;1
WireConnection;5;1;4;0#CLIP_ITEM#Node;AmplifyShaderEditor.CommentaryNode;20;-2099.957,488.5295;Inherit;False;1784.215;649.1902;Dissolve Edge;8;19;17;18;16;15;14;12;11;Dissolve Edge;0.9056604,0.3460306,0.3460306,1;0;0#CLIP_ITEM#Node;AmplifyShaderEditor.SaturateNode;51;-672.808,16.31946;Inherit;False;1;0;FLOAT;0;False;1;FLOAT;0
WireConnection;51;0;5;0#CLIP_ITEM#Node;AmplifyShaderEditor.RegisterLocalVarNode;7;-532.043,-5.181609;Inherit;False;ClipMask;-1;True;1;0;FLOAT;0;False;1;FLOAT;0
WireConnection;7;0;51;0#CLIP_ITEM#Node;AmplifyShaderEditor.RangedFloatNode;11;-2056.812,781.239;Inherit;False;Property;_EdgeRange;Edge Range;4;0;Create;True;0;0;False;0;False;11;2;2;100;0;1;FLOAT;0#CLIP_ITEM#Node;AmplifyShaderEditor.SimpleMultiplyOpNode;14;-1733.657,812.1591;Inherit;False;2;2;0;FLOAT;0;False;1;FLOAT;-0.5;False;1;FLOAT;0
WireConnection;14;0;11;0#CLIP_ITEM#Node;AmplifyShaderEditor.GetLocalVarNode;12;-1972.911,558.801;Inherit;True;7;ClipMask;1;0;OBJECT;;False;1;FLOAT;0#CLIP_ITEM#Node;AmplifyShaderEditor.ScaleAndOffsetNode;15;-1575.701,609.8519;Inherit;True;3;0;FLOAT;0;False;1;FLOAT;2;False;2;FLOAT;-1;False;1;FLOAT;0
WireConnection;15;0;12;0
WireConnection;15;1;11;0
WireConnection;15;2;14;0#CLIP_ITEM#Node;AmplifyShaderEditor.SaturateNode;16;-1272.825,614.8868;Inherit;False;1;0;FLOAT;0;False;1;FLOAT;0
WireConnection;16;0;15;0#CLIP_ITEM#Node;AmplifyShaderEditor.CommentaryNode;24;-310.4271,-79.53671;Inherit;False;487.9635;1147.53;Texture;5;23;10;21;22;8;Texture;1,1,1,1;0;0#CLIP_ITEM#Node;AmplifyShaderEditor.RangedFloatNode;18;-697.9905,944.9069;Inherit;False;Property;_Brightness;Brightness;6;0;Create;True;0;0;False;0;False;1;1;1;10;0;1;FLOAT;0#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;17;-1083.81,614.452;Inherit;True;Property;_EdgeGradient;Edge Gradient;5;0;Create;True;0;0;False;0;False;-1;e99d38de2a1ad4994920f54620c179af;a309dc3b1e460487fa40e2a92e8b29f3;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;Assets/Noise/Texture/Gradient2.png
WireConnection;17;1;16;0#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;23;-252.416,699.0963;Inherit;True;Property;_AmbientOcclusion;AmbientOcclusion;9;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;None#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;21;-260.4271,211.0963;Inherit;True;Property;_Normal;Normal;7;0;Create;True;0;0;False;0;False;-1;None;None;True;0;True;bump;Auto;True;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;FLOAT3;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;None#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;22;-259.4271,473.0963;Inherit;True;Property;_SpecularSmoothness;Specular Smoothness;8;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;None#CLIP_ITEM#Node;AmplifyShaderEditor.SamplerNode;10;-259.5274,-29.53671;Inherit;True;Property;_Albedo;Albedo;3;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;None#CLIP_ITEM#Node;AmplifyShaderEditor.SimpleMultiplyOpNode;19;-628.8099,564.8112;Inherit;False;2;2;0;COLOR;0,0,0,0;False;1;FLOAT;0;False;1;COLOR;0
WireConnection;19;0;17;0
WireConnection;19;1;18;0#CLIP_ITEM#Node;AmplifyShaderEditor.GetLocalVarNode;8;-184.649,942.9157;Inherit;False;7;ClipMask;1;0;OBJECT;;False;1;FLOAT;0#CLIP_ITEM#
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

暴走约伯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值