关于UV纹理坐标映（Texture Mapping）射原理

纹理坐标

 

当纹理映射启动后绘图时，你必须为OpenGL ES提供其他数据，即顶点数组中各顶点的 纹理坐标。纹理坐标定义了图像的哪一部分将被映射到多边形。它的工作方式有点奇怪。你有一个正方形或长方形的纹理，其左下角为二维平面的原点，高和宽的单位为一。像这样：

 

这就是我们的“纹理坐标系统”，不使用x 和 y 来代表二维空间，我们使用 s 和 t 作为纹理坐标轴，但原理上是一样的。

 

除了 s 和 t 轴外，被映射的纹理在多边形同样有两个轴，它们称为 u 和 v轴。这是源于许多3D图像程序中的UV 映射 的术语。

 

好，我们明白了纹理坐标系统，我们现在讨论怎样使用这些纹理坐标。当我们指定顶点数组中的顶点时，我们需要在另一个数组中提供纹理坐标，它称为纹理坐标数组。 每个顶点，我们将传递两个GLfloats (s, t) 来指定顶点在上图所示坐标系统的位置。让我们看看一个可能是最为简单的例子，将整个图像映射到一个由三角形条组成的正方形上。首先，我们创建一个由四个顶点组成的顶点数组：

 

现在将两个框图叠在一起，所使用的坐标数组的值变得很明显：

将其转化为 GLfloat数组：

    static const GLfloat texCoords[] = {
        0.0, 1.0,
        1.0, 1.0,
        0.0, 0.0,
        1.0, 0.0
    };

 

下面是我使用的纹理：

 

运行时的结果：

 

请等下：那并不正确。如果你仔细对比一下纹理图像和上面的截屏，你就会发现它们并不完全相同。截屏中图像的y轴（或t轴）完全颠倒了。它上下颠倒了，并不是旋转，而是翻转了。

 

 

更多的映射方式

 

上个例子中这个图像都被映射到绘制的正方形上。那是因为设定的纹理坐标所决定的。我们可以改变坐标数组仅使用源图像的中心部分。让我们看看仅使用了图像中心部分的另一个框图：

 

其坐标数组为：

    static const GLfloat texCoords[] = {
        0.25, 0.75,
        0.75, 0.75,
        0.25, 0.25,
        0.75, 0.25
    };

 

运行使用了新映射到程序，屏幕上只显示了图像的中心部分：

 

类似地，如果我们只希望显示纹理的左下部：

 

坐标数组为:

    static const GLfloat texCoords[] = {
        0.0, 0.5,
        0.5, 0.5,
        0.0, 0.0,
        0.5, 0.0
    };

 

显示结果：

 

等一下，还有更多的方式

 

实际上，并不是真正还有更多的映射方式，只是说此功能在正方形到正方形的映射时并不很明显。同样的步骤适合于几何体中任何三角形，而且你甚至可以通过非常规方式的映射来扭曲纹理。例如，我们可以定义一个等腰三角形：

 

但将底部顶点映射到纹理的左下角：

 

运行时结果如下：

 

注意到纹理正方形左下角的弧形花纹现在处于三角形的底部了吗？总而言之，纹理上的任何一点都可以映射到多边形的任何一点。或者换而言之，你可以对任何地点（u，v）使用任何（s，t）而OpenGL ES则为你进行映射。

（2011-12-30，文章来源：http://www.iphone-geek.cn/%E7%BC%96%E7%A8%8B/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0opengl-es%E4%B9%8B%E5%85%AD-%E7%BA%B9%E7%90%86%E5%8F%8A%E7%BA%B9%E7%90%86%E6%98%A0%E5%B0%84）