纹理简介

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

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

纹理映射

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

纹理坐标映射.jpg

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度为纹理贴图，所以调整纹理坐标和顶点坐标的对应关系可以实现纹理贴图的简单旋转
纹理坐标和纹理像素的映射关系如下：

纹理坐标和纹理像素.png

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

纹理映射流程

纹理映射的一般步骤：

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

软件流程如下：

texture_rendering.jpg

对纹理采样的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 object
    GLuint programObject;
    // Sampler location
    GLint samplerLoc;
    // Texture handle
    GLuint textureId;
} UserData;

// load texture form tga file 
static GLuint CreateSimpleTexture2D()
{
    // Texture object handle
    GLuint textureId;

    // load texture from tga file
    const char* files = "C:/Users/86185/Documents/Visual Studio 2015/Projects/opengl_demo/opengl_demo/Huskey.tga";
    int width;
    int height;
    GLubyte* pixels = esLoadTGA(NULL, files, &width, &height);

    // Use tightly packed data
    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

    // Generate a texture object
    glGenTextures(1, &textureId);

    // Bind the texture object
    glBindTexture(GL_TEXTURE_2D, textureId);

    // Load the texture notice width height  format must align with real size
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, pixels);

    // Set the filtering mode
    glTexParameteri(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 object
    userData->programObject = esLoadProgram(vShaderStr, fShaderStr);

    // Get the sampler location
    userData->samplerLoc = glGetUniformLocation(userData->programObject, "s_texture");

    // Load the texture
    userData->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 0
        0.0f,  0.0f,        // TexCoord 0 
        -0.5f, -0.5f, 0.0f,  // Position 1
        0.0f,  1.0f,        // TexCoord 1
        0.5f, -0.5f, 0.0f,  // Position 2
        1.0f,  1.0f,        // TexCoord 2
        0.5f,  0.5f, 0.0f,  // Position 3
        1.0f,  0.0f         // TexCoord 3
    };
    GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

    // Set the viewport
    glViewport(0, 0, esContext->width, esContext->height);

    // Clear the color buffer
    glClear(GL_COLOR_BUFFER_BIT);

    // Use the program object
    glUseProgram(userData->programObject);

    // Load the vertex position
    glVertexAttribPointer(0, 3, GL_FLOAT,
        GL_FALSE, 5 * sizeof(GLfloat), vVertices);
    // Load the texture coordinate
    glVertexAttribPointer(1, 2, GL_FLOAT,
        GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3]);

    glEnableVertexAttribArray(0);
    glEnableVertexAttribArray(1);

    // Bind the texture
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, userData->textureId);

    // Set the sampler texture unit to 0
    glUniform1i(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 : 指向加载为纹理内容的图片的指针

实际显示效果：

texture_result.jpg

纹理的环绕和过滤方式

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

纹理环绕方式.jpg

GL_REPEAT.jpg

GL_MIRRORED_REPEAT.jpg

GL_CLAMP_TO_EDGE.jpg

设置的代码如下：

// 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（也叫线性过滤，(Bi)linear Filtering）它会基于纹理坐标附近的四个纹理像素的值，计算出一个插值，原理是双线性插值算法

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

GL_NEAREST.jpg

参考网址：
纹理映射