由于紋理坐標左下為原點坐標, 所有我們繪制的圖片為倒著的, 接下來介紹幾種翻轉方式.

1.通過旋轉矩陣進行翻轉.(這種方式是通過改變頂點, 相當于把畫布翻轉了)

首先需要在頂點著色器中創建旋轉矩陣的管道

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;//旋轉矩陣

varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;

    vec4 vPos = position;
    vPos = vPos * rotateMatrix;//每次頂點向量都乘以旋轉矩陣得到新的頂點
    
    gl_Position = vPos;
}

接下來創建一個旋轉矩陣, 并通過管道傳到頂點著色器.

-(void)rotateTextureImage
{
    //注意，想要獲取shader里面的變量，這里記得要在glLinkProgram后面，后面，后面！
    //1. rotate等于shaderv.vsh中的uniform屬性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    //2.獲取渲旋轉的弧度
    float radians = 180 * 3.14159f / 180.0f;
   
    //3.求得弧度對于的sin\cos值
    float s = sin(radians);
    float c = cos(radians);
    
    //4.因為在3D課程中用的是橫向量，在OpenGL ES用的是列向量
    /*
     參考Z軸旋轉矩陣
     */
    GLfloat zRotation[16] = {
        c,-s,0,0,
        s,c,0,0,
        0,0,1,0,
        0,0,0,1
    };

    //5.設置旋轉矩陣
    /*
     glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     location : 對于shader 中的ID
     count : 個數
     transpose : 轉置
     value : 指針
     */
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}

2. 在解壓圖片時, 將圖片翻轉(頂點不改變), 可以自己想象一下.

CGContextTranslateCTM(spriteContext, 0, rect.size.height);//將圖片向下移動圖片高度的距離
CGContextScaleCTM(spriteContext, 1.0, -1.0);//先圍繞x軸翻轉上來, 在圍繞y軸翻轉一次(里外翻轉).

3. 改變紋理采樣坐標(頂點著色器和片元著色器都可以, 由于頂點著色器執行次數小于片元著色器, 所以修改頂點著色器更好, 但是也不用太過于糾結).

OpenGL要求y軸0.0坐標是在圖片的底部的，但是圖片的y軸0.0坐標通常在頂部.
我們可以改變頂點數據的紋理坐標，翻轉y值（用1減去y坐標）。
我們可以編輯頂點著色器來自動翻轉y坐標，替換TexCoord的值為TexCoord = vec2(texCoord.x, 1.0f - texCoord.y);.

//修改片元著色器
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}

//修改頂點著色器
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}

4.直接修改源紋理數據

  GLfloat attrArr[] =
     {
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
     0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
     };
     */