ShaderGraph 案例集：2D/基础/叶子浮动

效果

效果描述： 树叶，草丛等叶片的随机浮动

效果分析

图片的像素点坐标在X方向左右随机摆动，且摆动幅度沿Y轴由下至上逐渐增强

效果分解

step 1： 移动像素点的X轴坐标

节点讲解

1. position 节点通过 split节点 分解出 X轴
2. 给X轴加上一个值，这里先加上0.5，
3. 把得到的X轴和原本的其他轴在通过Combine 节点组合起来，赋值给主节点

Combine 节点 也可以替换成 Vector3 节点，但是Combine语意更明确

下一步

我们可以看到图片整体都向右边偏移了，所以下一步，我想让这个偏移是动态的

step 2： 像素点的X轴动态偏移

节点讲解

1. 通过time 节点和 Gradient Noise 节点 生成随机数
2. 将生成随机数 和X轴相加

下一步

图片现在在x轴动态随机移动，但是移动范围始终限制在右半边

这是因为通过time 节点和 Gradient Noise 节点 生成随机数的范围是[0,1]

为了实现左右移动，并且限制移动范围，我想要将随机数限制在[-0.1，0.1]

step 3： 限制X轴偏移范围

节点讲解

1. 将生成的随机数 通过Subtract 节点 减去 0.5 ，相当于 x = x - 0.5
2. 原本的随机数范围是 [0,1],减去 0.5 后，现在是 [-0.5,0.5]
3. 再将得到的数 通过节点Multiply 节点 乘0.2 相当于 x = x * 0.2
4. [-0.5,0.5] * 0.2 = [-0.1,0.1]

简单方法

Remap 节点 可以直接将 [0,1] 重映射 到 [-0.1,0.1]

下一步

图片已经动起来了，但是我希望浮动的幅度越往上幅度越大，而底部是完全不动的,
所以我需要进一步根据Y轴限制X轴的偏移值

step 4： 根据Y轴限制X轴的偏移值

节点讲解

1. UV 节点通过 split节点 分解出 Y轴
2. UV节点Y轴的值是由下往上 从0到1的，
3. 将UV节点Y轴的值和上一步得到的值相乘
4. 最后得到的数在UV节点Y轴的影响下，Y轴值为0时，随机数也为0，Y轴值为1时，随机数为最大数

所以最后的效果是最上面浮动幅度最大，最下面完全不动

结束