OpenGL-ES 学习(15) ----纹理

纹理简介

现实生活中，纹理(Texture) 类似于游戏中皮肤的概念，最通常的作用是装饰 3D 物体，它像贴纸一样贴在物体的表面，丰富物体的表面和细节
在 OpenGL-ES 开发中，纹理除了用于装饰物体表面，还可以用来作为存储数据的容器
所以在 OpenGL-ES 中，纹理实际上是一个可以被采样的复杂数据集合，是 GPU 的图像数据结构，纹理分为 2D纹理、立方图纹理和 3D纹理

• 2D 纹理是 OpenGL-ES 中最常见和最常用的纹理形式，是一个表示图像数据的二维数组，纹理中一个单独的数据单元被称为纹素或者纹理像素
• 立方图纹理(CubeMap)是一个由6个单独的 2D 纹理面组成的纹理，立方图纹理像素的读取是使用三维坐标(s, t, r)作为纹理坐标
• 3D 纹理 可以看做 2D 纹理的集合，2D 纹理是 3D 纹理的一个切面，使用三维坐标对齐进行访问

纹理映射

在 OpenGL-ES 中，纹理映射就是通过为图元的顶点坐标指定恰当的纹理坐标，通过纹理坐标在纹理图中选定特定范围的纹理区域，最后通过纹理坐标和顶点的映射关系，将选定的纹理区域映射到指定的图元上；
纹理映射也称为纹理贴图，简单说就是将纹理坐标所指定的纹理区域，映射到顶点坐标对应的渲染区域
纹理坐标是使用纹理坐标系
顶点坐标是使用渲染坐标系或者 OpenGL-ES 坐标系

4个纹理坐标T0(0,0), T1(0,1), T2(1,1), T3(1,0) 对应的顶点坐标为V0(-1,0.5),V1(-1,-0.5),V2(1,-0.5),V3(1,0.5)
OpenGL-ES 的基本图元是以三角形为单位的，设置绘制两个三角形V0V1V2 和 V0V2V3
当我们调整纹理坐标的顺序保持顶点坐标的顺序不变，T0T1T2T3 ==》T1T2T3T0 绘制后将会得到一个顺时针旋转 90 度为纹理贴图，所以调整纹理坐标和顶点坐标的对应关系可以实现纹理贴图的简单旋转
纹理坐标和纹理像素的映射关系如下：

纹理坐标（0，0）对应纹理像素的第一个元素
纹理坐标（1，0）对应纹理像素的index = width - 1的元素
纹理坐标（0，1）对应纹理像素的index = width* (height - 1) 的元素
纹理坐标（1，1）对应纹理像素的index = width* height - 1 的元素
对应纹理像素区域内的元素都会被采样

纹理映射流程

纹理映射的一般步骤：

• 生成纹理，编译链接着色器程序
• 确定纹理坐标和对应的顶点坐标
• 加载图形数据到纹理，加载顶点坐标和纹理坐标到着色器程序
• 开始绘制

软件流程如下：

对纹理采样的 FragmentShader：

"#version 300 es                                     \n"
"precision mediump float;                            \n"
"in vec2 v_texCoord;                                 \n"
"layout(location = 0) out vec4 outColor;             \n"
"uniform sampler2D s_texture;                        \n"
"void main()                                         \n"
"{                                                   \n"
"  outColor = texture( s_texture, v_texCoord );      \n"
"}      

其中 texture 是内置的采样函数，v_texCoord 是顶点着色器传入的纹理坐标，根据纹理坐标进行采样，输出为4向量的 RGBA 值
uniform sampler2D s_texture 是加载后的纹理内容

示例代码：

typedef struct
{// Handle to a program objectGLuint programObject;// Sampler locationGLint samplerLoc;// Texture handleGLuint textureId;
} UserData;// load texture form tga file 
static GLuint CreateSimpleTexture2D()
{// Texture object handleGLuint textureId;// load texture from tga fileconst char* files = "./Huskey.tga";int width;int height;GLubyte* pixels = esLoadTGA(NULL, files, &width, &height);// Use tightly packed dataglPixelStorei(GL_UNPACK_ALIGNMENT, 1);// Generate a texture objectglGenTextures(1, &textureId);// Bind the texture objectglBindTexture(GL_TEXTURE_2D, textureId);// Load the texture notice width height  format must align with real sizeglTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, pixels);// Set the filtering modeglTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);return textureId;
}///
// Initialize the shader and program object
//
static int Init(ESContext *esContext) {UserData *userData = esContext->userData;char vShaderStr[] ="#version 300 es                            \n""layout(location = 0) in vec4 a_position;   \n""layout(location = 1) in vec2 a_texCoord;   \n""out vec2 v_texCoord;                       \n""void main()                                \n""{                                          \n""   gl_Position = a_position;               \n""   v_texCoord = a_texCoord;                \n""}                                          \n";char fShaderStr[] ="#version 300 es                                     \n""precision mediump float;                            \n""in vec2 v_texCoord;                                 \n""layout(location = 0) out vec4 outColor;             \n""uniform sampler2D s_texture;                        \n""void main()                                         \n""{                                                   \n"
//使用内建函数在Fragmanet Shader 中进行纹理采样"  outColor = texture( s_texture, v_texCoord );      \n""}                                                   \n";// Load the shaders and get a linked program objectuserData->programObject = esLoadProgram(vShaderStr, fShaderStr);// Get the sampler locationuserData->samplerLoc = glGetUniformLocation(userData->programObject, "s_texture");// Load the textureuserData->textureId = CreateSimpleTexture2D();glClearColor(1.0f, 1.0f, 1.0f, 0.0f);return TRUE;
}///
// Draw a triangle using the shader pair created in Init()
//
static void Draw(ESContext *esContext)
{UserData *userData = esContext->userData;GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 00.0f,  0.0f,        // TexCoord 0 -0.5f, -0.5f, 0.0f,  // Position 10.0f,  1.0f,        // TexCoord 10.5f, -0.5f, 0.0f,  // Position 21.0f,  1.0f,        // TexCoord 20.5f,  0.5f, 0.0f,  // Position 31.0f,  0.0f         // TexCoord 3};GLushort indices[] = { 0, 1, 2, 0, 2, 3 };// Set the viewportglViewport(0, 0, esContext->width, esContext->height);// Clear the color bufferglClear(GL_COLOR_BUFFER_BIT);// Use the program objectglUseProgram(userData->programObject);// Load the vertex positionglVertexAttribPointer(0, 3, GL_FLOAT,GL_FALSE, 5 * sizeof(GLfloat), vVertices);// Load the texture coordinateglVertexAttribPointer(1, 2, GL_FLOAT,GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3]);glEnableVertexAttribArray(0);glEnableVertexAttribArray(1);// Bind the textureglActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, userData->textureId);// Set the sampler texture unit to 0glUniform1i(userData->samplerLoc, 0);glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);
}

注意其中的glTexImage2D是用于加载纹理的函数：
void glTexImage2D( GLenum target,GLint level,GLint internalFormat,GLsizei width,GLsizei height,GLint border,
GLenum format,GLenum type,const void * data);

• GLenum target ： 指定texture 类型，一般为 GL_TEXTURE_2D
• GLint level : 一般设置为0
• GLint internalFormat ： 设置纹理的存储格式 GL_RGB
• GLsizei width : texture 的宽度
• GLsizei height : texture 的高度
• GLint border : 一般设置为0
• GLenum format : 设置纹理输入图片的存储格式 GL_RGB
• GLenum type : 设置纹理输入图片的存储格式 GL_RGB
• const void * data : 指向加载为纹理内容的图片的指针

实际显示效果：

纹理的环绕和过滤方式

纹理坐标的范围通常是从(0, 0) 到 (1, 1)，如果设置的坐标超出这个范围，就会有重复的效果，比如 纹理的 S 坐标设置到 2，就表示 S 轴上要重复两次采样纹理，如果 将T 坐标设置为 2，表示 T 轴上重复两次采样纹理，通过设置不同的纹理坐标，就可以产生不同的重复的效果，纹理的环绕方式也可以设置，可以设置的类型如下：

设置的代码如下：

// GL_REPEAT  GL_CLAMP_TO_EDGE  GL_MIRRORED_REPEAT
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

纹理的过滤方式

纹理映射的原理是：光栅化之后，图元转换为一个个光栅，每个光栅化之后的 pixel 都会经过 PixelShader，PixelShader 中从纹理采样得到每个 pixel 的颜色，这里就会涉及采样方式的问题，如果图元的分辨率很大，但是关联到图元的纹理很小，就需要进行插值，纹理的过滤方式实际就是纹理到光栅的插值算法
现在只讨论最重要的两种：GL_NEAREST 和 GL_LINEAR

• GL_NEAREST（也叫邻近过滤，Nearest Neighbor Filtering）是 OpenGL 默认的纹理过滤方式。当设置为 GL_NEAREST 的时候，OpenGL 会选择中心点最接近纹理坐标的那个像素，原理是最近邻插值算法

• GL_LINEAR（也叫线性过滤，(Bilinear Filtering）它会基于纹理坐标附近的四个纹理像素的值，计算出一个插值，原理是双线性插值算法

邻近过滤算法简单，但是在放大图像的时候，会有严重的马赛克，线性过滤计算过程复杂，但是效果比邻近过滤算法好