uv操作实例一

1，先看效果，给图片增加扭曲效果

未进行处理时的状态

处理完之后

2，实现所用节点和贴图

这张图是使用三个通道组合而成的图，每个通道都有一张噪波图

3分步详解

3.1

把时间节点加到texcoord节点，时间节点是线性增加的，所以每一秒都会使贴图x轴方向向左、y轴方向向上移动一次

结果

3.2，如果把一张贴图替换上面的时间节点呢

也很漂亮，之所以这样，是因为传递的数值太大了，导致这样。

正常不对uv进行操作时，材质会默认使用texcoord中的u和v方向的两张灰度图。

当texture sample的uvs端口有输入时，它会使用输入的这张灰度图。

在这个地方，将云图r/g通道加入到texcoord的u/v方向后，取某一个点，在这个点，云图的（r1，g1）值会加上texcoord（r2，g2），得到一个（r3，g3）值，无论这个点在材质贴图的哪个位置，当这个点被texture sample调用时，它会调用原uv图中（r3，g3）这个值对应的纹理信息。

这里直接将一张噪波图加上来，很多点都会调用离他比较远的点的信息。

所以，这里，需要将加进来的这张噪波处理一下，让它所有值都降低，这样就可以让材质上的点只取临近点的信息。

把将数值调小

调小以后，图片有一些扭曲了，但是右边和下边都露出来一些，这个后面再调

3.3如果我们让云图图片的uv产生移动会怎样？

节点

材质图像将以恒定频率波动

将乘节点传递给基础颜色，看一下传给材质纹理的是什么样的图像

可以看出来，传递给材质贴图的就是这么一张图，以恒定速度向左上角移动的噪波图

针对材质贴图的一个点来想，当这么一张两通道灰度图传进来时，这个点的rg大小每时每刻都在变化，又因为变化值很小，它只会调用离他比较近点的贴图信息，所以构成的画面就是这种扭曲画面。

3.4，效果差不多了，只是它的波动频率太单一，速度又太快

ben用套娃的方式，用红色区域的这一堆替代了原来的时间节点，增加了复杂性。

在时间节点，乘以比较小的一个数，使它的变化频率降低了。

在红框里的数据，出红框时，并没有乘以较小的数，是因为这样就可以保持比较高的扰动性，就像直接把贴图未经处理加给texcoord一样。

效果就是文章开头的第二张图。

3.5

ben为了使其更加不规律，还做了这样的处理

4，解决出现的边角位移问题

经过这些计算，材质贴图向左向上位移了一部分，要解决这个问题，直接在最后节点减某一个数就可以了。

u减就是让它向右移动，v减就是让它向下移动。

试了几个数，大体效果就不错了

结果