NDK OpenGL ES 3.0 開發（二）：紋理映射

作者：位元組流動

來源：

https://blog.csdn.net/Kennethdroid/article/details/96887637

什麼是紋理

現實生活中，紋理（Texture）最通常的作用是裝飾 3D 物體，它就像是貼紙一樣貼在物體表面，豐富物體的表面和細節。 在 OpenGLES 開發中，紋理除了用于裝飾物體表面，還可以用來作為存儲資料的容器。

那麼在 OpenGL 中，紋理實際上是一個可以被采樣的複雜資料集合，是 GPU 使用的圖像資料結構，紋理分為 2D 紋理、 立方圖紋理和 3D 紋理。

2D 紋理是 OpenGLES 中最常用和最常見的紋理形式，是一個圖像資料的二維數組。紋理中的一個單獨資料元素稱為紋素或紋理像素。

立方圖紋理是一個由 6 個單獨的紋理面組成的紋理。立方圖紋理像素的讀取通過使用一個三維坐标（s,t,r）作為紋理坐标。

3D 紋理可以看作 2D 紋理作為切面的一個數組，類似于立方圖紋理，使用三維坐标對其進行通路。

什麼是紋理映射

在 OpenGLES 中，紋理映射就是通過為圖元的頂點坐标指定恰當的紋理坐标，通過紋理坐标在紋理圖中標明特定的紋理區域，最後通過紋理坐标與頂點的映射關系，将標明的紋理區域映射到指定圖元上。

紋理映射也稱為紋理貼圖，簡單地說就是将紋理坐标（紋理坐标系）所指定的紋理區域，映射到頂點坐标（渲染坐标系或OpenGLES 坐标系）對應的區域。

紋理坐标系

渲染坐标系或OpenGLES 坐标系:

4 個紋理坐标分别為

T0（0，0），T1（0，1），T2（1，1），T3（1，0）。

4 個紋理坐标對于的頂點坐标分别為

V0（-1，0.5），V1（-1， -0.5），V2（1，-0.5），V3（1，0.5）

由于 OpenGLES 繪制是以三角形為機關的，設定繪制的 2 個三角形為 V0V1V2 和 V0V2V3 。

當我們調整紋理坐标的順序頂點坐标順序不變，如 T0T1T2T3 -> T1T2T3T0 ，繪制後将得到一個順時針旋轉 90 度的紋理貼圖。是以調整紋理坐标和頂點坐标的對應關系可以實作紋理圖簡單的旋轉。

紋理映射的簡單實作

紋理映射的一般步驟：

• 生成紋理，編譯連結着色器程式
• 确定紋理坐标及對應的頂點坐标
• 加載圖像資料到紋理，加載紋理坐标和頂點坐标到着色器程式
• 繪制

生成紋理并加載圖像資料到紋理

//生成一個紋理，将紋理 id 指派給 m_TextureId
glGenTextures(1, &m_TextureId); 

//将紋理 m_TextureId 綁定到類型 GL_TEXTURE_2D 紋理
glBindTexture(GL_TEXTURE_2D, m_TextureId);

//設定紋理 S 軸（橫軸）的拉伸方式為截取
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); 
//設定紋理 T 軸（縱軸）的拉伸方式為截取
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

//設定紋理采樣方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

//加載 RGBA 格式的圖像資料
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, m_RenderImage.ppPlane[0]);
      

對紋理采樣的片元着色器腳本

#version 300 es                                     
precision mediump float;                            
in vec2 v_texCoord;                                 
layout(location = 0) out vec4 outColor;             
uniform sampler2D s_TextureMap; //聲明采用器                     
void main()                                         
{
  // texture() 為内置的采樣函數，v_texCoord 為頂點着色器傳進來的紋理坐标
  // 根據紋理坐标對紋理進行采樣，輸出采樣的 rgba 值（4維向量）                                                  
  outColor = texture(s_TextureMap, v_texCoord);      
}                                                         

簡單實作代碼

// 生成紋理，編譯連結着色器程式
void TextureMapSample::Init()
{
    //create RGBA texture
    glGenTextures(1, &m_TextureId);
    glBindTexture(GL_TEXTURE_2D, m_TextureId);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glBindTexture(GL_TEXTURE_2D, GL_NONE);

    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_TextureMap;                     \n"
            "void main()                                         \n"
            "{                                                   \n"
            "  outColor = texture(s_TextureMap, v_texCoord);     \n"
            "}                                                   \n";

    m_ProgramObj = GLUtils::CreateProgram(vShaderStr, fShaderStr, m_VertexShader, m_FragmentShader);
    if (m_ProgramObj)
    {
        m_SamplerLoc = glGetUniformLocation(m_ProgramObj, "s_TextureMap");
    }
    else
    {
        LOGCATE("TextureMapSample::Init create program fail");
    }

}

// 加載圖像資料、紋理坐标和頂點坐标資料，繪制實作紋理映射
void TextureMapSample::Draw(int screenW, int screenH)
{
    LOGCATE("TextureMapSample::Draw()");

    if(m_ProgramObj == GL_NONE || m_TextureId == GL_NONE) return;
    GLfloat verticesCoords[] = {
            -1.0f,  0.5f, 0.0f,  // Position 0
            -1.0f, -0.5f, 0.0f,  // Position 1
            1.0f, -0.5f, 0.0f,  // Position 2
            1.0f,  0.5f, 0.0f,  // Position 3
    };

    GLfloat textureCoords[] = {
            0.0f,  0.0f,        // TexCoord 0
            0.0f,  1.0f,        // TexCoord 1
            1.0f,  1.0f,        // TexCoord 2
            1.0f,  0.0f         // TexCoord 3
    };

    GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

    //upload RGBA image data
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, m_TextureId);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, m_RenderImage.ppPlane[0]);
    glBindTexture(GL_TEXTURE_2D, GL_NONE);

    // Use the program object
    glUseProgram (m_ProgramObj);

    // Load the vertex position
    glVertexAttribPointer (0, 3, GL_FLOAT,
                            GL_FALSE, 3 * sizeof (GLfloat), verticesCoords);
    // Load the texture coordinate
    glVertexAttribPointer (1, 2, GL_FLOAT,
                            GL_FALSE, 2 * sizeof (GLfloat), textureCoords);

    glEnableVertexAttribArray (0);
    glEnableVertexAttribArray (1);

    // Bind the RGBA map
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, m_TextureId);

    // Set the RGBA map sampler to texture unit to 0
    glUniform1i(m_SamplerLoc, 0);

    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

}
      

結果圖

聯系與交流

技術交流、擷取源碼可以掃碼添加我的微信：Byte-Flow ，領取視訊教程

「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。