OpenGL中的纹理

OpenGL中的纹理可以用来表示图像、照片、视频画面等数据，在视频渲染中，只需要处理二维的纹理，每个二维纹理都由许多小的纹理元素组成，它们都是小块数据，类似于前面章节所说的像素点。要使用纹理，最常用的方式是直接从一个图像文件加载数据。为了访问到每一个纹理元素，每个二维纹理都有其自己的坐标空间，其范围是从左下角的（0，0）到右上角的（1，1）。按照惯例，一个维度称为S，而另一个则称为T。如图4-6所示，对于OpenGL内部的纹理，坐标的方向性是规定的，t方向下面是0，上面是1，而对于s方向，左边是0，右边是1，从而构成
了上述四个顶点的坐标位置，而中间的位置就是（0.5，0.5）。但是在这里还有另外一个坐标系的概念，那就是计算机系统里的坐标系，通常将x轴称为横轴，y轴称为纵轴，如图4-7所示。

我们所熟知的不论是计算机还是手机的屏幕坐标系，x轴从左到右都是从0到1，y轴从上到下是从0到1，与图片的存储恰好是一致的，假设图片的存储是把所有的像素点都存储到一个大数组中，图片存储的第一个像素点也是左上角的像素点（即第一排第一列的像素点），然后是第二个像素点（第一排第二列）存储在数组的第二个元素中，那么，这里的坐标和OpenGL中的纹理坐标正好是做了一个180度的旋转，后面将会看到如何从本地图片中加载一张纹理并且渲染到界面上，而对于纹理坐标和计算机系统坐标的理解，在那时就会显得非常重要了。下面再来看一下如何加载一张图片作为OpenGL中的纹理，首先要在显卡中创建一个纹理对象，OpenGL ES提供的方法原型如下：
void glGenTextures (GLsizei n, GLuint* textures)
这个方法传递进去的第一个参数是需要创建几个纹理对象，并且把创建好的纹理对象的句柄放到第二个参数中去，所以第二个参数是一个数组（指针）的形式。如果只需要创建一个纹理对象的话，则只需要声明一个GLuint类型的texId，然后针对该纹理ID取地址，并将其作为第二个参数，就可以创建出这个纹理对象了，代码如下：
glGenTextures(1, &texId);
执行完这行代码之后，就会在显卡中创建出一个纹理对象，并且把该纹理对象的句柄返回给texId变量。紧接着开发者要操作该纹理对象，但是在OpenGL ES的操作过程中必须告诉OpenGL ES具体操作的是哪一个纹理对象，所以必须调用OpenGL ES提供的一个绑定纹理对象的方法，调用代码如下：
glBindTexture(GL_TEXTURE_2D, texId);
执行完毕上面这行代码之后，下面的操作就都是针对于texId这个纹理对象的了，最终对该纹理对象操作完毕之后，我们可以调用一次解绑定的代码：
glBindTexture(GL_TEXTURE_2D, 0);
这行代码执行完毕之后，代表开发者不会对texId纹理对象做任何操作了，所以上面这行代码只在最后的时候才调用。接下来就是最关键的部分，即如何将本地磁盘上的一个PNG的图片上传到显卡中的这个纹理对象上。在将图片上传到这个纹理上之前，首先应该要对这个纹理对象设置一些参数，具体参数有哪些？其实就是纹理的过滤方式，当纹理对象（可以理解为一张图片）被渲染到物体表面上的时候（实际上是OpenGL绘制管线将纹理的元素映射到OpenGL生成的片段上的时候），有可能要被放大或者缩小，而当其放大或者缩小的时候，具体应该如何确定每个像素是如何被填充的，就由开发者配置的纹理对象的纹理过滤器来指明。
magnification（放大）：
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
minification（缩小）：
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
一般在视频的渲染与处理的时候使用GL_LINEAR这种过滤方式，该过滤方式称为双线性过滤，可使用双线性插值平滑像素之间的过渡，OpenGL会使用四个邻接的纹理元素，并在它们之间用一个线性插值算法做插值，该过滤方式是最主要的过滤方式，当然OpenGL中还提供了另外几种过滤方式。常见的有GL_NEAREST，称为最邻近过滤，该方式将为每个片段选择最近的纹理元素，但是当其放大的时候会有很严重的锯齿效果（因为相当于将原始的直接放大，其实就是降采样），而当其缩小的时候，因为没有足够的片段来绘制所有的纹理单元（这个是真正的降采样），许多细节都会丢失；相较于这两种过滤方式，本书在使用纹理的过滤方式时都会选用双线性过滤的过滤方式（GL_LINEAR）；其实OpenGL还提供了另外一种技术，称为MIP贴
图，但是这种技术会占用更多的内存，其优点是渲染也会更快。当缩小和放大到一定程度之后效果也比双线性过滤的方式更好，但是其对纹理的尺寸以及内存的占用是有一定限制的，不过，在视频的处理以及渲染的时候不需要放大或者缩小这么多倍，所以在进行视频的处理以及渲染的场景下，MIP贴图并不适用。紧接着来看一下对于纹理对象的另外一个设置，也就是在纹理坐标系的s轴和t轴的纹理映射过程中用到的重复映射或者约简映射的规则，
代码如下：
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
上述代码所表示的含义是，将该纹理的s轴和t轴的坐标设置为GL_CLAMP_TO_EDGE类型，因为纹理坐标可以超出（0，1）的范围，而按照上述设置规则，所有大于1的纹理值都要设置为1，所有小于0的值都要置为0。
接下来，就是将PNG素材的内容放到该纹理对象上，OpenGL的大部分纹理一般都只接受RGBA类型的数据（否则还得去做转化，后续会讲到YUV420P格式的视频帧在显卡中是如何转换RGBA格式的），所以我们需要对PNG这种压缩格式进行解码操作，如果想要采用一种更通用的方式，那么可以引用libpng库来进行解码操作，当然也可以使用各自平台的API进行解码，最终可以得到RGBA的数据。待得到RGBA的数据之后，记为uint8_t数组类型的pixels，然后执行如下操作：glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width,height,0,GL_RGBA,GL_UNSIGNED_BYTE, pixels);
这样就可以将该RGBA的数组表示的像素内容上传到显卡里面texId所代表的纹理对象中去了，以后只要使用该纹理对象，其实表示的就是这个PNG图片。
OpenGL中的纹理表示如何为物体增加细节，现在我们已经准备好了该纹理，那么如何把这张图片（或者说这个纹理）绘制到屏幕上呢？
首先来看一下OpenGL中的物体坐标系，如图4-8所示，物体坐标系中x轴从左到右是从-1到1变化的，y轴从下到上是从-1到1变化的，物体的中心点恰好是（0，0）的位置。

接下来的任务就是如何将这个纹理绘制到屏幕上，其实相关的基础知识已经都讲解过了，首先是搭建好各自平台的OpenGL ES的环境（包括上下文与窗口管理），然后创建显卡可执行程序书写VertexShader，代码如下：
static char* COMMON_VERTEX_SHADER =
"attribute vec4 position; \n"
"attribute vec2 texcoord; \n"
"varying vec2 v_texcoord; \n"
" \n"
"void main(void) \n"
"{ \n"
" gl_Position = position; \n"
" v_texcoord = texcoord; \n"
"} \n";

在客户端代码中，开发者要从VertexShader中读取出两个attribute，并放置到全局变量的mGLVertexCoords与mGLTextureCoords中，接下来是Fragment Shader的内容，代码如下所示：
static char* COMMON_FRAG_SHADER =
"precision highp float; \n"
"varying highp vec2 v_texcoord; \n"
"uniform sampler2D texSampler; \n"
" \n"
"void main() { \n"
" gl_FragColor = texture2D(texSampler, v_texcoord); \n"
"}
从FragmentShader中读取出来的uniform会放置到mGLUniformTexture变量里，利用上面两个Shader创建好的Program，称为mGLProgId。紧接着进行真正的绘制操作，下面将详细地讲解一下绘制部分。
1）规定窗口的大小：
glViewport(0, 0, screenWidth, screenHeight);
假定screenWidth表示绘制区域的宽度，screenHeight表示绘制区域
的高度。
2）使用显卡绘制程序：
glUseProgram(mGLProgId);
3）设置物体坐标：
GLfloat vertices[] = { -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f };
glVertexAttribPointer(mGLVertexCoords, 2, GL_FLOAT, 0, 0, vertices);
glEnableVertexAttribArray(mGLVertexCoords);
4）设置纹理坐标：
GLfloat texCoords1[] = { 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f };
GLfloat texCoords2[] = { 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f };
glVertexAttribPointer(mGLTextureCoords, 2, GL_FLOAT, 0, 0, texCoords2);
glEnableVertexAttribArray(mGLTextureCoords);
这里需要注意的是texCoords2这个纹理坐标，因为其纹理对象是将一个PNG图片的RGBA格式的形式上传到显卡上（即计算机坐标），如果该纹理对象是OpenGL中的一个普通纹理对象，则需要使用texCoords1，这两个纹理坐标恰恰就是要做一个上下的翻转，从而将计算机坐标系和OpenGL坐标系进行转换。
5）指定将要绘制的纹理对象并且传递给对应的FragmentShader：
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texId);
glUniform1i(mGLUniformTexture, 0);
6）执行绘制操作：
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
至此就可以在绘制区域（屏幕）绘制出最初的PNG图片了。如果该纹理对象不再使用了，则需要将其删除掉，需要执行的代码是：
glDeleteTextures(1, &texId);
当然，只有在最终不再使用这个纹理的时候才会调用上述这个方法，如果不调用该方法则会造成显存的泄漏。具体的实例请读者参考代码仓库中的OpenGLRenderer项目，注意，Android项目首先需要把resource目录下的PNG图片放到运行设备的sdcard的根目录之下。