【案例】故障雪花屏

开发平台:Unity 6.0

开发工具:Shader Graph

参考视频:【U2D Shader Graph】❄️雪❄️花❄️屏❄️

一、效果图


二、Shader Graph 路线图


三、案例分析


核心思路:雪花屏幕效果 +(混合)+ 原图像 = 最终图像

3.1 雪花屏实现 - 使用 Noise(噪声节点)



Simple Noise (简易噪声节点)的呈像符合雪花屏的表现,是实现雪花屏幕的最佳选择。

结合实际表现情况,雪花屏为动态型变化更新。

故需要引入 Time(定时器节点) + 变量 Speed(控制变化频率)的结果。如下所示:

[1] 可能出现的问题 :部署 Shader Graph 至 UnityEngine.UI.Image 后,发现雪花屏仍然保持静态。

这是因为 Simple Noise(简易噪声节点)的 Seed 输入值偏小所造成的。当输入值 ≥ 5 时,出现明显的浮动变化。

关于原作者选择的实现路线效果图 对比 Noise 效果图

|--------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
| 图1 使用 Simple Noise(简易噪声节点)输入 | 图2 使用 Random Range(随机数节点)输入 |

原视频作者采取 UV(光照贴图节点) + Random Range(随机数生成节点)实现动态的类噪声表现效果。
但笔者选择继续 Noise(噪声)线路进行改善。后续内容将延续该思路进行,大致最终实现效果与原视频作者思路相似。

3.2 动态 Noise(噪声)变化


  • 动态变化的固定节点组合 :Time(定时器节点)* 变量Speed 的 输出结果。
  • UV 位置变化关系固定组合:Tilling And Offset(缩放偏移节点)输入 Offset 信息。

Simple Noise(简易噪声节点) 需要 UV + Scale 两个变量来动态改变生成的噪声图。

  • 变量 Scale:控制噪声图的颗粒密度。
  • UV:控制变化速度

|------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
| 图1 Scale = 200 | 图2 Scale = 15 |

3.3 不透明度表现


控制雪花屏的透明度表现:变量 Alpha * UV 输出值。具体对比如下:

|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| 图1 alpha = 1.0 | 图2 alpha = 0.6 | 图2 alpha = 0.4 | 图2 alpha = 0.0 |

3.4 叠加背景纹理输出(可选)


叠加背景图,一般的为了方便使用 UnityEngine.UI.Image x2 来实现叠加效果。这是最快且迅速的方式。

如果需要在 Shader Graph 中实现叠加,引入 Blend(混合节点)。该节点将图层叠加输出至 Base Color 中即可。
须注意:应用于 Cavnas 上的纹理图选择 Mode = Screen。其他模式可自探索效果。

相关推荐
淡海水13 天前
【节点】[EvaluateTipThickness节点]原理解析与实际应用
unity·游戏引擎·shadergraph·图形·evaluate·thickness
淡海水15 天前
【节点】[EvaluateSimulationAdditionalData节点]原理解析与实际应用
unity·游戏引擎·shadergraph·图形·simulation·evaluate
淡海水16 天前
【节点】[EvaluateRefractionData节点]原理解析与实际应用
unity·游戏引擎·shadergraph·data·图形·evaluate·refraction
淡海水16 天前
【节点】[EvaluateScatteringColor节点]原理解析与实际应用
unity·游戏引擎·shadergraph·color·图形·evaluate·scattering
淡海水17 天前
【节点】[ComputeVertexPosition节点]原理解析与实际应用
unity·游戏引擎·shadergraph·图形·position·compute·vertex
淡海水18 天前
【节点】[ScleraLimbalRing节点]原理解析与实际应用
unity·游戏引擎·shadergraph·图形·ring·limbal·sclera
淡海水19 天前
【节点】[IrisOutOfBoundColorClamp节点]原理解析与实际应用
unity·游戏引擎·iris·shadergraph·图形·clamp·bound
淡海水21 天前
【节点】[EyeSurfaceTypeDebug节点]原理解析与实际应用
unity·游戏引擎·debug·shadergraph·图形·surface·eye
淡海水21 天前
【节点】[IrisLimbalRing节点]原理解析与实际应用
unity·游戏引擎·iris·shadergraph·图形·ring·limbal
淡海水22 天前
【节点】[CorneaRefraction节点]原理解析与实际应用
unity·游戏引擎·shadergraph·图形·cornea·refraction