上一篇已经知道什么是场景相交了

那么接下来就要上强度了! 准备好了吗?

海水波浪泡沫效果

还记得之前我们做过一个波浪图吗?

image-20260603201730525

这里我们需要复制一个来复用

我们可以为这些属性分组

image-20260603202602329

上一篇我们知道这个场景相交必须是透明transparent材质,所以我们设置为透明材质

image-20260603202732721

之前的节点都保持不变

image-20260603215246881

我们先把上一篇我们做的DepthIntersection节点插入(还记得这个是干什么的吗? 这个是用来计算相交的阴影逻辑的),

我们用这个深度交叉值使用divide除法节点除以我们自定义的float类型的Form distance(泡沫距离)参数,这个参数设置为默认值为1范围0~5的slider,

然后我们用之前的step阶梯函数节点做一个限制,将edge值(x)设置为1(也就是当深度值低于某个阈值时,这组节点才会输出1)

image-20260603223027770

image-20260603223059414

然后再添加一个color节点来控制泡沫颜色,当然还是要和基础色相加来控制海浪的颜色,此时Basecolor组用split 来分出alpha阿尔法值进行控制透明度

这里复习一下之前学的Step节点

Step 节点就是阶梯函数/阶跃函数,根据阈值把输入分成两部分:0 或 1。

数学公式

1
2
3
4
Step(Edge, In) = In >= Edge ? 1 : 0

输入 ≥ 阈值 → 输出 1
输入 < 阈值 → 输出 0

两个端口

端口 名称 作用
Edge 阈值/边缘 分界点,默认 0.5
In 输入值 要被判断的数值

image-20260603221356612

很好,我们已经看到其他模型和水材质接触的时候有白色的交叉面了

但是,我们也不希望我们的游戏里的水面效果如此简单吧(我记得以前玩的很多小游戏水面效果就是这样,当然也不是不能玩)

所以至少要真实一点点就像这样

不过由于我们没有高精度水面模型况且是在URP下操作的,所以水面波浪就这样吧

image-20260603223523731

噪波效果

在 Unity Shader Graph 的 Simple Noise 节点中,DeterministicLegacy SineHash Type(哈希类型) 下拉菜单中的两个选项,它们决定了节点生成伪随机值(即噪声)时使用的哈希函数

Scale 值 效果
较小(如 1~5) 噪声图案更大、更稀疏,单个噪声”斑点”尺寸大,过渡平缓
较大(如 50~100) 噪声图案更细小、更密集,高频细节丰富,纹理更细碎
非常大(如 500+) 可能开始出现重复或伪影(因为哈希精度限制),图案趋于混乱
选项 说明 适用场景
Deterministic 使用一个跨平台一致的哈希函数,确保在不同 GPU 和平台上生成完全相同的噪声结果。这是 Unity 2021.2 之后的默认选项。 需要跨平台一致性、可复现结果的项目
Legacy Sine 使用基于 sin() 函数的传统哈希函数。这个方式在不同 GPU 上可能产生差异,某些集成显卡甚至会出现明显的块状伪影或完全错误的结果。 旧项目兼容
image-20260603223712307

噪波可以让原本不自然的效果变得逼真自然,很多游戏的地图的生成也是用波函数坍缩实现的,在这个simple noise节点中有两个输入,UV用于噪声的坐标,不过我们可以使用任意的vector2的类型,另一个scale是比例尺用于控制噪声大小,这里添加一个Foam scale浮点类型默认值为500

为实现动态噪点,我们可以添加一个Foam velocity的vector 2值,然后和时间相乘

image-20260603225457891

然后在step中接入

image-20260603230318701

然后我们复习一下这几个节点

① Time 节点提供时间值,让材质动起来

输出端口 说明 典型用途
Time 自场景加载以来的总时间(秒),持续递增 持续循环的动画,如流动的水、飘动的云
Sine Time sin(Time),范围 -1 ~ 1,周期性波动 平滑的往复运动,如呼吸灯、摆动
Cosine Time cos(Time),范围 -1 ~ 1,与 Sine 相位差 90° 与 Sine 配合做圆周运动或交替效果
Delta Time 上一帧的耗时(秒),每帧不同 帧率无关的动画、物理模拟、平滑插值
Smooth Time 经过平滑处理的时间,变化更柔和 需要缓动效果的时间驱动动画

② Tiling And Offset 节点控制纹理的平铺次数和位置偏移

输入 作用
UV 原始 UV 坐标(通常直接连 UV 节点)
Tiling 平铺次数,默认 (1,1)。比如 (2,2) 就是 2×2 重复
Offset 偏移量,默认 (0,0)。比如 (0.5, 0) 让纹理横向移动一半

我们把材质运用上

image-20260603230657612

可以看到此时的泡沫就很真实了

但是可以注意到边缘没有泡沫,这不符合逻辑

image-20260605130856147

这里是因为子图的逻辑是用物体的遮挡背后的地面来渲染出来阴影也就是泡沫,但是没有物体遮挡的地方就没有影子,所以我们需要修改一下子图的节点

我们之前的子图里的scene depth节点的左侧有一个默认的小节点default,

这个等同于默认模式下(default)的屏幕位置节点(screen position),但是我们没有办法控制偏移量

所以我们添加一个vector2类型的偏移量offset,默认值保持为0不变, 然后和default模式下的screen position节点相加,这样就可以控制了

image-20260605132202006

然后我们在为这个噪波效果添加偏移量

我们添加一个浮点类型的depth sample offset的默认范围(0~0.1)的slider滑块,这个赋值之所以比较低是因为这个代表的是整个屏幕的比例,偏移量超过屏幕10%会显得很难看

然后和噪声节点相乘并将输出值导入深度相交子节点为offset节点赋值

image-20260605133240281

image-20260605133911352

此时我们已经可以看到这个在边缘有泡沫了,但是目前的效果看起来很别扭

这是因为我们原先的是经过step节点将小于0的转换为0,大于1的转换为1,但是我们刚才增加的操作是在这个处理之前的,而水面以上的像素点深度交集为负值,导致这部分像素通过step时都会输出1产生泡沫

image-20260605134135580

所以还需要改动

image-20260605134844609

我们将divide的输出的负值值用negate取反乘以-1,然后接入另一个step节点来判断

然后将噪声节点再接入这个step节点来判断,并将两个step节点的输出值相乘,并重新和泡沫颜色节点相乘

image-20260605141243812

现在看起来就自然多了,泡沫会随着波浪的滚动方向飘

但是想必你也发现了,咱们的节点已经快变成蜘蛛网了,说明之前的操作必须要简化了,这里我们直接在devide和step节点之间添加一个absolute绝对值节点,顾名思义,就是我们初中学的那个化负为正的绝对值

仔细思考一下,刚才绕一圈子是为了什么? 就是因为有负值的出现导致边缘出现了大面积的泡沫,我们之前的操作相当于: 一个盒子里有很多红色(非负值)和蓝色(负值)的小球,我们只要红色的,于是我们用筛子分别筛出两种小球,然后把蓝色的小球染成红色,然后再把两种颜色的小球倒在一起,但是我们其实可以直接把所有小球都直接染成红色,也就是对所有值取绝对值

image-20260605142021724

这样效果仍然是一样的

image-20260605143205430

物体边缘发光效果

这个其实可以拓展为物体边缘的黑边或者白边这些效果,很多游戏都喜欢给角色或者物体添加一个描边

image-20260605151423006

像之前那样添加材质和基础色

image-20260605154303634

我们首先添加UV节点,UV节点用于网格的每个顶点的坐标,用于定义材质纹理贴图的位置,在unity中默认立方体的UV映射使立方体的每个面都能完整显示纹理 ,

1
2
3
4
5
6
7
8
9
10
(0,1) ────── (1,1)
↑ ↑
│ │
左边 右边
│ │
(0,0) ────── (1,0)

UV的范围为:
x: 0 → 1
y: 0 → 1

我们需要检测在x或y方向上接近0的UV坐标,(也就是x轴对应的u轴,以及y轴对应的v轴),这里分为两步

① 上半部分的smoothstep

所以我们添加一个名为edge threshold 默认值为 0.1 范围为0-0.5 的slider的浮点类型的节点来控制,0表示无发光效果,0.5表示从物体两侧各覆盖一半的长度

然后我们用Smoothstep 节点,将UV输入in插槽,将默认值为0的float节点和edge threshold节点的值设置为上下限 即 smoothstep(0, edge, uv.x)

UV节点输出的是四维向量(x,y,z,w),一般情况下只用x和y

从上方的 Smoothstep 节点的颜色可以看出检测的位置是左侧和底部的边缘,当UV值超过edge值的时候会输出为1,我们需要用One minus 节点来反转为0 ,因为原本的是左边下面黑,中间白,转换为左边下面白,中间黑

image-20260605221445722

这里我们只用x和y分量,我们用split节点将x和y分离,然后用add相加

② 下半部分的smoothstep

然后我们同样的用UV连接另一个Smoothstep节点 in输入口, 我们添加一个x值为1的float节点,然后让flaot和edge threshold节点用subtract节点相减,即 smoothstep(1-edge, 1, uv.x)

此时内部为黑,右侧和上侧为白,不需要反色

我这样解释可能更直观

image-20260606230919506

这里之所以要用split分离出来R和G 然后相加,是因为R和G通道输入分别输出的是红色和绿色,我们将二者相加变成1,那么其他区域就是0,也就是只剩下黑白色

这里复习一下几个节点的作用

节点作用

① Smoothstep 节点—–平滑

端口 作用
Edge1 下限阈值(较小值)
Edge2 上限阈值(较大值)
In 当前输入值

输出规则

1
2
3
In ≤ Edge1    →  输出 0
In ≥ Edge2 → 输出 1
Edge1 < In < Edge2 → 输出 0~1 之间的平滑过渡值

直观理解

想象一个渐变条

plain

1
2
3
0                    0.5                    1
|←──── 黑色 ────→|←──── 灰色过渡 ────→|←──── 白色 ────→|
Edge1 Edge2
  • Edge1 左边:纯黑(0)
  • Edge2 右边:纯白(1)
  • 中间:平滑的灰度过渡(S 形曲线,不是直线)

② One minus ——反向

Unity 的 One Minus 节点就是1 减去输入值

1
输出 = 1 - 输入
端口 作用
In 输入值(0~1 范围)
Out 1 - In

没有 Edge,没有阈值,就是简单的反向

直观理解

1
2
3
输入 0  →  输出 1    (全黑变全白)
输入 0.5 → 输出 0.5 (中间不变)
输入 1 → 输出 0 (全白变全黑)

常见用法

场景 说明
反相颜色 白变黑,黑变白
反向遮罩 原来显示的地方隐藏,隐藏的地方显示
补数运算 配合其他节点做 1-x 的数学操作
反向透明度 不透明变透明

③ Subtract ——相减

Unity 的 Subtract 节点 是 Shader Graph(着色器图)中的一个数学运算节点,用于执行减法运算

属性 说明
输入 A 被减数(Minuend)
输入 B 减数(Subtrahend)
输出 A - B 的结果

④ Saturate —–限制范围(0-1)

属性 说明
输入 任意数值(标量或向量)
输出 将输入值钳制到 [0, 1] 范围

数学表达:output = clamp(input, 0, 1)

即:

  • 小于 0 的值 → 变为 0
  • 大于 1 的值 → 变为 1
  • 0 ~ 1 之间的值 → 保持不变

然后我们将左下角和右上角的值相加,因为角落会出现像素的总和大于一(这里我们打个比方,比如我们将两张纸条叠在一块,那么他们重叠的区域的纸条厚度一定大于一张纸条),为了避免交叉处的亮度和其他位置不一致,所以我们需要用saturate节点来限制值在(0,1)范围

image-20260607220728288

然后我们需要控制边框的颜色,这里添加一个Glowcolor颜色节点,设置为HDR,然后我们先用add节点预留一个接口,然后和glowcolor节点相乘并与基础色和纹理相加

然后将这个材质附加到物体上

image-20260607222811601

我们调整edge threshold的值就可以看到发光效果了

image-20260607223008473

刚才我们并没有添加与地面交叉的效果

这里我们复用之前的负责交叉逻辑的子图,用one minus取反(因为原本的是黑色阴影,这里变成白色),然后用saturate节点避免低于0的交集值,为了控制强度依旧添加power节点并连接浮点类型默认值为1 范围0.01-25的slider值 intersection power

image-20260607223823399

然后还记得吗,这个交叉效果必须是透明材质,否则无法显示出来

而且要注意的是这个效果只对不透明物体有效,对透明物体无效

image-20260607232149771

例如对普通不透明平面是这样

image-20260607232501774

对透明水体是这样,此时水体和箱子都无法互相检测,因为都是透明材质

image-20260607232615468