UV纹理坐标怎样在UE5_Unity中应用/可以制作出那些效果?【Ben图形/03】...
教程纹理Game艺视界原创 15206 1
实名

通过了实名认证的内容创造者

发布于 2022-3-21 20:44:51

您需要 登录 才可以下载或查看,没有账号?注册

x
本期内容
今天我们将讨论在着色器中使用 uv 坐标,在我向您展示您可以使用着色器中的 uv 坐标,做什么之前在我向您展示您可以使用着色器中的 uv 坐标,做什么之前我想做的第一件事 是向您展示什么是 uv 坐标,uv 坐标也称为纹理坐标或简称为 uvs 是一种将3d 空间转换为 2d 的便捷方式。 我们需要能够做到这一点,因为像左边这样的纹理贴图 是 2d 图像,但像右边这个立方体这样的模型是三维因此 uv 坐标是我们用来定义如何将 2d 图像 包裹在我们的 3d 网格周围的方法,

46fa8be46d263b4e04be9c1b4336cb63.png


如果我们仔细剥开橙色,它是3d对象我们可以将果皮保持在一块并放置现在果皮是平坦的,它在2d空间中但是如果我们再次将果皮包裹在橙色周围,我们已经将 2d 空间转换为 3duv坐标,就像我们模型中的每个顶点一样,

我们可以在这里看到这个立方体的每个角上都有一个顶点,每个顶点在 3d 空间和 2d 空间中都有一个位置,

所以现在我们可以将纹理应用于我们的模型 ,3d 软件使用 2d 空间uv坐标,知道应该如何应用纹理,所以在这里你可以在我的uv空间视图中,看到我的立方体的顶部、立方体的正面、立方体的左侧和右侧、立方体的底部和背面,我可以对这些 uv 坐标做一些有趣的事情,我可以移动它们 ,您可以看到,当我在 2d 空间中移动它们时, 它们也在 3d 空间中移动,因此我可以左右和向上平移我的 uv 坐标、我也可以旋转我的UV
我现在可以缩放我的uv这很有趣,因为我将它们缩放得更大它给出了纹理越来越小的外观,当我在 uv 空间中将它们缩放得更小它给出了纹理的外观越来越大

让我们跳到虚幻 5 和unity,看看你可以用 uv 坐标做什么的几个例子,所以我们在这里是虚幻的我们有一个带有测试纹理的纹理样本,你可以看到这里是 红色,这里是绿色这些颜色只是为了展示uv坐标从零到一 在垂直方向上也从0到1,现在我没有插任何东西但你仍然可以看到纹理应用于我的 3D 立方体 ,这是因为纹理样本节点默认使用 uv 坐标集0(texcoord[0])。为什么这里有个0表示第一个集合或者说0集合是默认的呢

所以如果我取我的纹理坐标节点它从模型中引入纹理坐标,并将其插入我的纹理,我会得到完全相同的结果 ,就好像没有插入任何东西一样。
因为使用这个纹理坐标集只是在默认情况下发生,如果这个插座(Texture Sample UVs)是空的它就会像Tex cord 0被插入一样

在这里稍微绘制一下图表,我在 这里列出了几个示例,

我们要做的第一件事是将纹理坐标乘以一个值,如果我把它插到纹理样本的uv插座上,现在就可以了在使用uv坐标之前采样纹理,我把它们乘了两倍。记得我们在3ds Max里的时候放大uv坐标吗?就是乘法在这种情况下,如果我乘以2你可以看到现在不是平铺,一旦穿过表面纹理坐标被平铺了两次,因为我乘以了2这样做的效果是让纹理看起来更小。这里的值越来越大我的纹理变得越来越小

因此有时候人们在缩放uv坐标,他们喜欢使用除法节点。因为当我用除法的时候,看看会发生什么。这里是2我将纹理坐标除以2而不是相乘,你可以看到现在我的纹理变大了。如果我除以3得到更大的值,当我的值增加时纹理的大小也会增加。你可以用乘法来缩放uv坐标,但是很多人喜欢用除法因为它直觉上你的纹理正在变大,因为你的比例值也在变大。我们可以缩放纹理坐标大一点,小一点。

好了,你可以看到现在我们加了一个值0任何东西加0都是一样的,所以这里我们需要做的是添加像0.1这样我们可以看到添加的效果。你可以看到它是如何将我的纹理向上和向左移动一个单位,如果我加上0.2现在它向上移动到了剩下两个单位,随着我的数字变大纹理是向上和向左移动。所以添加Add就是移动纹理在表面上的坐标,我没有缩放它们乘和除,我只是在移动它们。有趣的是,加法和减法的作用是一样的它只是向相反的方向移动

如果我只想让它在一个维度上移动而不是另一个维度我可以用一个向量值,就像这个常数值
然后加上这个有两个不同通道的值,如果我在u坐标上加上0但是如果我加上0.2到v坐标,现在你可以看到它只是在垂直方向移动。我在水平方向上加上0所以它不在那个维度上移动,所以可以控制方向坐标的移动取决于哪个是0,哪个是一个值,乘以除以比例坐标的加减法移动了坐标。

我有还有一个例子,我在给我的纹理坐标添加时间,所以如果我现在你可以看到我的纹理坐标实际上是随着时间滚动的,因为随着时间的推移给我的纹理坐标添加一个越来越高的时间值,就是这样我可以实现动画纹理坐标效果。

如果我现在引入这个时间值,如果我想让时间变慢或者更快的方法是在这里再加一个乘法我们把它乘以一个值,比如0.2坐标会让它滚动移动纹理坐标稍微慢一点,因为我已经放慢了时间,用这个乘以0.2。我们可以用乘以我们可以移动纹理坐标周围添加,我们可以动画纹理通过增加时间的价值来协调,

我也可以动画我的纹理坐标的比例,如果我要采取乘以0.2然后将它们乘以纹理坐标我们看看会发生什么,我要用纹理坐标乘以sin,现在你可以看到,这个值很大,然后又变小了变得很小,那是因为正弦会产生一个波,不管有多高时间值得到正弦会在某处产生一个波在- 1和1之间,现在可以了我已经得到了纹理坐标的动画效果先是变大,然后又变小,这很酷。

让我们切换到unity,看看同样的东西好了,现在我们在unity,

你可以看到我有了我的纹理插进底色,我只是使用默认值,这里是Uv0,所以我得到了立方体就像我在unreal中做的一样

如果我代入uv坐标就像我在虚幻5里做的一样那里什么都不会发生,因为默认的uv进入我的纹理样本与添加通道0的uv相同

就像我们之前做的一样如果我纹理坐标乘以2,它们会变小我会平铺纹理两次或者平铺三到四次我想乘多少次就乘多少次

除法使得纹理坐标得到随着值的增大而增大

如果我Add纹理坐标,我要加上0.2,你们可以看到过去一点现在注意到虚幻和统一之间有一点不同。在虚幻中,当我添加纹理坐标时,它们在向上向左移动,在unity中当我添加纹理坐标时它们向下和向右移动,这是一个很有趣的区别。

这里你可以看到uv坐标被添加到时间中如果我们把这个代入我们会得到uv坐标向下滚动

时间乘以乘法,然后将乘法代入纹理中,你可以看到我得到了一个非常高的放大值,所以我实际上需要做的是添加一个sin节点,我用的是sin时间这里我们让纹理坐标来回滚动

但是如果我们用sin乘以uv坐标就像我们在虚幻世界里做的那样,我们就能得到我们的Uv坐标缩放大,然后缩小,太酷了好!本期就到这里。
ben讲过的uv视频
https://www.youtube.com/watch?v=gwx2NOZJ5CE



本帖被以下画板推荐:

微信公众号:Game艺视界
使用道具 <
MJ漫步  发表于 2022-3-22 15:12:27  
2#
谢谢楼主,谢谢楼主!
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表