OpenGL学习脚印: 二维纹理映射(2D textures)

写在前面
前面两节介绍了向量和矩阵，以及坐标和转换相关的数学，再继续讨论模型变换等其他包含数学内容的部分之前，本节介绍二维纹理映射，为后面学习做一个准备。纹理映射本身也是比较大的主题，本节只限于讨论二维纹理的基本使用，对于纹理映射的其他方法，后面会继续学习。可以从我的github下载本节代码。

通过本节可以了解到

• 纹理映射的概念和原理
• 二维纹理映射的处理方法

使用纹理增加物体表面细节

要使渲染的物体更加逼真，一方面我们可以使用更多的三角形来建模，通过复杂的模型来逼近物体，但是这种方法会增加绘制流水线的负荷，而且很多情况下不是很方便的。使用纹理，将物体表面的细节映射到建模好的物体表面，这样不仅能使渲染的模型表面细节更丰富，而且比较方便高效。纹理映射就是这样一种方法，在程序中通过为物体指定纹理坐标，通过纹理坐标获取纹理对象中的纹理，最终显示在屏幕区域上，已达到更加逼真的效果。

纹素(texel)和纹理坐标

使用纹素这个术语，而不是像素来表示纹理对象中的显示元素，主要是为了强调纹理对象的应用方式。纹理对象通常是通过纹理图片读取到的，这个数据保存到一个二维数组中，这个数组中的元素称为纹素(texel)，纹素包含颜色值和alpha值。纹理对象的大小的宽度和高度应该为2的整数幂，例如16, 32, 64, 128, 256。要想获取纹理对象中的纹素，需要使用纹理坐标(texture coordinate)指定。

纹理坐标应该与纹理对象大小无关，这样指定的纹理坐标当纹理对象大小变更时，依然能够工作，比如从256x256大小的纹理，换到512x256时，纹理坐标依然能够工作。因此纹理坐标使用规范化的值，大小范围为[0,1]，纹理坐标使用uv表示，如下图所示(来自:Basic Texture Mapping):

u轴从左至右，v轴从底向上指向。右上角为(1,1)，左下角为(0,0)。
通过指定纹理坐标，可以映射到纹素。例如一个256x256大小的二维纹理，坐标(0.5,1.0)对应的纹素即是(128,256)。(256x0.5 = 128, 256x1.0 = 256)。

纹理映射时只需要为物体的顶点指定纹理坐标即可，其余部分由片元着色器插值完成，如下图所示(来自A textured cube)：

模型变换和纹理坐标

所谓模型变换，就是对物体进行缩放、旋转、平移等操作，后面会着重介绍。当对物体进行这些操作时，顶点对应的纹理坐标不会进行改变，通过插值后，物体的纹理也像紧跟着物体发生了变化一样。如下图所示为变换前物体的纹理坐标(来自:Basic Texture Mapping):

经过旋转等变换后，物体和对应的纹理坐标如下图所示，可以看出上面图中纹理部分的房子也跟着发生了旋转。(来自:Basic Texture Mapping):

注意 有一些技术可以使纹理坐标有控制地发生改变，本节不深入讨论，这里我们的纹理坐标在模型变换下保持不变。

创建纹理对象

创建纹理对象的过程同前面讲述的创建VBO，VAO类似：

   GLuint textureId;
   glGenTextures(1, &textureId);
   glBindTexture(GL_TEXTURE_2D, textureId);

这里我们绑定到GL_TEXTURE_2D目标，表示二维纹理。

WRAP参数

上面提到纹理坐标(0.5, 1.0)到纹素的映射，恰好为(128,256)。如果纹理坐标超出[0,0]到[1,1]的范围该怎么处理呢？ 这个就是wrap参数由来，它使用以下方式来处理：

• GL_REPEAT:坐标的整数部分被忽略，重复纹理，这是OpenGL纹理默认的处理方式.
• GL_MIRRORED_REPEAT: 纹理也会被重复，但是当纹理坐标的整数部分是奇数时会使用镜像重复。
• GL_CLAMP_TO_EDGE: 坐标会被截断到[0,1]之间。结果是坐标值大的被截断到纹理的边缘部分，形成了一个拉伸的边缘(stretched edge pattern)。
• GL_CLAMP_TO_BORDER: 不在[0,1]范围内的纹理坐标会使用用户指定的边缘颜色。

当纹理坐标超出[0,1]范围后，使用不同的选项，输出的效果如下图所示(来自Textures objects and parameters)：

在OpenGL中设置wrap参数方式如下：

   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

上面的几个选项对应的都是整数，因此使用glTexParameteri来设置。

Filter参数

当使用纹理坐标映射到纹素数组时，正好得到对应纹素的中心位置的情况，很少出现。例如上面的(0.5,1.0)对应纹素(128,256)的情况是比较少的。如果纹理坐标映射到纹素位置(152.34,745.14)该怎么办呢 ?

一种方式是对这个坐标进行取整，使用最佳逼近点来获取纹素，这种方式即点采样(point sampling)，也就是最近邻滤波( nearest neighbor filtering)。这种方式容易导致走样误差，明显有像素块的感觉。最近邻滤波方法的示意图如下所示(来自A Textured Cube)：

图中目标纹素位置，离红色这个纹素最近，因此选择红色作为最终输出纹素。

另外还存在其他滤波方法，例如线性滤波方法(linear filtering)，它使用纹素位置(152.34,745.14)附近的一组纹素的加权平均值来确定最终的纹素值。例如使用 ( (152,745), (153,745), (152,744) and (153,744) )这四个纹素值的加权平均值。权系数通过与目标点(152.34,745.14)的距离远近反映，距离(152.34,745.14)越近，权系数越大，即对最终的纹素值影响越大。线性滤波的示意图如下图所示(来自A Textured Cube)：

图中目标纹素位置周围的4个纹素通过加权平均计算出最终输出纹素。

还存在其他的滤波方式，如三线性滤波(Trilinear filtering)等，感兴趣的可以参考texture filtering wiki。最近邻滤波和线性滤波的对比效果如下图所示(来自