用 Shader Graph 实现世界坐标溶解特效,为场景切换做铺垫
最近群里一直在讨论《异环》那种场景转场的视觉表现,怪物消散溶解在游戏里很常见,但要是把这种感觉做到整个场景的切换上,感觉会特别带感。刚好看到 Nowpaper 分享了一个基于 Unity Shader Graph 的实现思路,虽然只是个基础版本,不过思路挺清晰的,整理出来一起看看。
核心原理:用 Shader 控制像素的显示与隐藏
其实原理说起来不复杂:我们需要定义一个中心点和范围,中心点周围区域内显示,区域外不显示(或者反过来也行)。边缘部分再加点噪声,让溶解过渡有那种不规则的感觉。
Shader 在这里扮演的角色就是决定屏幕上每个像素怎么显示——3D 模型和纹理数据要显示到屏幕上,都要经过 Shader 计算,顶点数据处理、光栅化、最终把像素颜色写入帧缓冲区。说白了,这套溶解效果就是在这一步控制了像素的显示和隐藏。
准备工作和基础设置
- 新建项目时要选择 URP,因为要用到 Shader Graph。我用的是 Unity Editor 6,其他版本也没太大区别
- 新建一个场景,加个地板和 cube 作为测试对象
- 在资产里创建 Shader Graph(Create → Shader Graph → URP → Lit Shader Graph)
- 打开后在右侧 Graph Settings 把 Surface Type 改成 Transparent,勾选 Alpha Clip,这样就能看到透明剔除相关的属性了
创建基本的溶解效果
核心节点连接
- 新建一个 Simple Noise 节点,生成噪声图,调整参数让图案看起来有随机感
- 新建一个 Add 节点,把 Noise 的输出连到 A,B 值设为 0.5,再把这个结果连到 Alpha Clip Threshold 属性——这时候预览图应该能看到镂空效果了
- 新建一个 Position 节点,获取物体自身的位置
- 创建一个 Vector3 类型的属性
Center,作为中心点
- 创建一个 Float 类型的属性
Distance,控制溶解范围
- 用网上的 Distance 节点计算出物体位置和中心点之间的距离
- 用 Divide 节点做个除法:
Distance 值除以计算出的距离,得到归一化比率(把 Distance 默认值设为 2 左右)
- 再用 Clamp 节点限制数值在 0-1 范围内,连到 Alpha 通道
保存 Shader Graph,在 Project 里新建材质,把刚刚的 Shader Graph 拖进去,材质应用到地板和 cube 上,移动测试物体就能看到基于中心点的消散效果了。
进阶:添加溶解边缘效果
为了视觉效果更好看,还需要给溶解边缘加个颜色和宽度:
- 新增两个属性:
Border Size(float 类型)和 Border Color(color 类型,记得改成 HDR 模式调整颜色)
- 从
Border Size 拉出一个 Vector2 节点,把它的值输入到 X,Y 值设为 1
- 加一个 Clamp 节点把噪声波数值限制在 0-1
- 用 Remap 节点调整数值范围,把
In Min Max 的 X 改成 0
- 通过这个计算得到溶解边缘的部分,再 Clamp 一下
- 用 Multiply 节点把输出值和颜色相乘,连到 Emission 属性
保存后调整数值就能看到边缘发光的效果了。
加个脚本方便调试
手动调参数太麻烦,写个简单的控制脚本:
// 脚本命名为 CenterController
// 添加 [ExecuteAlways] 装饰器,这样在编辑器里也能实时更新
public class CenterController : MonoBehaviour {
public Transform target;
public Material dissolveMaterial;
void Update() {
if (target != null && dissolveMaterial != null) {
dissolveMaterial.SetVector("center", target.position);
}
}
}
创建一个空物体挂上这个脚本,把测试物体拖到 target 引用,材质也引用上。移动这个物体就能看到溶解中心跟着动了。
如果要实现反向效果(从外向内溶解),在最终输出前加一个 One Minus 节点即可。
总结
这套实现虽然只完成了第一步,但思路很清晰——基于世界坐标的溶解效果,为后面做场景切换转场打下了基础。边缘处理、噪声控制这些都能自己调节,后续再结合贴图变化和场景跳转逻辑,应该能实现那种无缝的场景切换体验。
Next 视频应该会讲到贴图处理和场景跳转的实现,可以留意一下。