uv纹理坐标设定与贴图规则

喜欢ヅ旅行 2022-06-17 00:41 204阅读 0赞

1.什么是UV?

对于三维模型，有两个最重要的坐标系统，一是顶点的位置（X，Y，Z）坐标，另一个就是UV坐标。什么是UV？简单的说，就是贴图影射到模型表面的依据。 完整的说，其实应该是UVW（因为XYZ已经用过了，所以另选三个字母表示）。U和V分别是图片在显示器水平、垂直方向上的坐标，取值一般都是0~1，也 就是（水平方向的第U个像素/图片宽度，垂直方向的第V个像素/图片高度）。那W呢？贴图是二维的，何来三个坐标？嗯嗯，W的方向垂直于显示器表面，一般 用于程序贴图或者某些3D贴图技术（记住，确实有三维贴图这种概念！），对于游戏而言不常用到，所以一般我们就简称UV了。

所有的图象文件都是二维的一个平面。水平方向是U，垂直方向是V，通过这个平面的，二维的UV坐标系。我们可以定位图象上的任意一个象素。但是一个问题是如何把这个二维的平面贴到三维的NURBS表面和多边形表面呢？ 对于NURBS表面。由于他本身具有UV参数，尽管这个UV值是用来定位表面上的点的参数，但由于它也是二维的，所以很容易通过换算把表面上的点和平面图象上的象素对应起来。所以把图象贴带NURBS是很直接的一件事。但是对于多变形模型来讲，贴图就变成一件麻烦的事了。所以多边形为了贴图就额外引进了一个UV坐标，以便把多边形的顶点和图象文件上的象素对应起来，这样才能在多边形表面上定位纹理贴图。所以说多边形的顶点除了具有三维的空间坐标外。还具有二维的UV坐标。

UV" 这里是指u,v纹理贴图坐标的简称(它和空间模型的X, Y, Z轴是类似的). 它定义了图片上每个点的位置的信息. 这些点与3D模型是相互联系的, 以决定表面纹理贴图的位置. UV就是将图像上每一个点精确对应到模型物体的表面. 在点与点之间的间隙位置由软件进行图像光滑插值处理. 这就是所谓的UV贴图.  
那为什么用UV坐标而不是标准的投影坐标呢? 通常给物体纹理贴图最标准的方法就是以planar(平面),cylindrical(圆柱), spherical(球形),cubic(方盒)坐标方式投影贴图.  
Planar projection(平面投影方式)是将图像沿x,y或z轴直接投影到物体. 这种方法使用于纸张, 布告, 书的封面等 - 也就是表面平整的物体.平面投影的缺点是如果表面不平整, 或者物体边缘弯曲, 就会产生如图A的不理想接缝和变形. 避免这种情况需要创建带有alpha通道的图像, 来掩盖临近的平面投影接缝, 而这会是非常烦琐的工作. 所以不要对有较大厚度的物体和不平整的表面运用平面投影方式. 对于立方体可以在x, y方向分别进行平面投影, 但是要注意边缘接缝的融合. 或者采用无缝连续的纹理, 并使用cubic投影方式. 多数软件有图片自动缩放功能, 使图像与表面吻合. 显然, 如果你的图像与表面形状不同, 自动缩放就会改变图像的比例以吻合表面. 这通常会产生不理想的效果, 所以制作贴图前先测量你的物体尺寸.

2、uv纹理坐标设定与贴图规则

当opengl对一个四方形进行贴图时，会定义纹理贴图坐标，一串数组，相信初学openggl es者看到后会很头疼，不知道写得是什么东西。现在就将我的研究成果与大家分享下！

当纹理映射启动后绘图时，你必须为OpenGL ES提供其他数据，即顶点数组中各顶点的纹理坐标。纹理坐标定义了图像的哪一部分将被映射到多边形。它的工作方式有点奇怪。

下面看下在[Android][]平台下Opengl纹理系统坐标，左下角为原点。

![0_1289998846QE3e.gif][]

我们现在讨论怎样使用这些纹理坐标。当我们指定顶点数组中的顶点时，我们需要在另一个数组中提供纹理坐标，它称为纹理坐标数组。这里需要注意定义坐标数组顺序，这很关键。

![0_1289999265NvU4.gif][]

float texCoords\[\] = new float\[\] \{  
// FRONT  
0.0f, 0.0f,  
1.0f, 0.0f,  
0.0f, 1.0f,  
1.0f, 1.0f,  
\};

效果如下：

![0_1289999552NTlm.gif][]

如果我们想截取图片有上角不分做纹理，按照上面方法可获的数组

float texCoords\[\] = new float\[\] \{  
// FRONT  
0.5f, 0.5f,  
1f, 0.5f,  
0.5f, 1f,  
1f, 1f  
\};

效果如下：

![0_1289999739n8qc.gif][]

我们看下贴图的原始文件

![0_1290048201ba9c.gif][]

你会发现截屏中的图片y轴是颠倒的，其实这是android图像坐标系统与Opengl es 坐标系统不一致导致的。最简单的修正办法将原始图片用工具翻转过来，这样会比用程序翻转节省很多性能，资源是宝贵的。

三角形纹理映射，只要按照我们的映射规则，便可以顺利完成映射。

float texCoords\[\] = new float\[\] \{  
0.0f, 0.0f,  
1.0f, 0.0f,  
0.5f, 1.0f,  
\};

效果：

![0_1290051159wqcj.gif][]

看到这里应该知道纹理坐标数组规则定义的意义了吧。

平铺与箔拉

我们的纹理坐标系统在两个轴上都是从0.0 到 1.0，如果设置超出此范围的值会怎么样？根据视图的设置方式有两种选择。

平铺（也叫重复）  
一种选择是平铺纹理。按OpenGL的术语，也叫“重复”。如果我们将第一个纹理坐标数组的所有1.0改为2.0：  
static const GLfloat texCoords\[\] = \{  
0.0, 2.0,  
2.0, 2.0,  
0.0, 0.0,  
2.0, 0.0  
\};

我们可以通过glTexParameteri()函数设置。

glTexParameterf(GL\_TEXTURE\_2D, GL\_TEXTURE\_WRAP\_S, GL10.GL\_REPEAT);  
glTexParameterf(GL\_TEXTURE\_2D, GL\_TEXTURE\_WRAP\_T, GL10.GL\_REPEAT);

![0_129004932613x1.gif][]

箝位  
另一种可能的选择是让OpenGL ES简单地将超过1.0的值限制为1.0，任何低于0.0的值限制为 0.0。这实际会引起边沿像素重复。

我们可以通过glTexParameteri()函数设置。

glTexParameterf(GL\_TEXTURE\_2D, GL\_TEXTURE\_WRAP\_S, GL\_CLAMP\_TO\_EDGE);  
glTexParameterf(GL\_TEXTURE\_2D, GL\_TEXTURE\_WRAP\_T, GL\_CLAMP\_TO\_EDGE);

![0_1290049474vx5v.gif][]

[Android]: http://lib.csdn.net/base/android
[0_1289998846QE3e.gif]: /images/20220617/dc29e0ebf5c14ad88f24d7e9bf3b694c.png
[0_1289999265NvU4.gif]: /images/20220617/b6e90dbb5910413b8d478e4d527969e8.png
[0_1289999552NTlm.gif]: /images/20220617/4030dcc6f9a94f3e80997b3075fb642e.png
[0_1289999739n8qc.gif]: /images/20220617/70b4946e2e1c4cf2bf832fe820204f96.png
[0_1290048201ba9c.gif]: /images/20220617/426c42b4393b409baf5f36b17f9ccec6.png
[0_1290051159wqcj.gif]: /images/20220617/ce6923a398aa46409647a2e30a9e429a.png
[0_129004932613x1.gif]: /images/20220617/c19412e0c879429abd83c0e0330bb042.png
[0_1290049474vx5v.gif]: /images/20220617/afabea26654547fdb30570f72fb9e113.png