翻转纹理的5中方式

由于CoreGraphics坐标系与UIKit坐标系不一致，导致CoreGraphics解码图片加载纹理后，图片显示倒置，下面介绍五种翻转纹理的方式。

方式一：在顶点着色器中，给顶点坐标乘以一个旋转矩阵，之后再赋值给内建变量gl_Position。

即顶点着色器代码改为

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
uniform mat4 rotateMatrix;

void main() {
    varyTextCoord = textCoordinate;
    
    vec4 vPos = position;
    vPos = vPos * rotateMatrix;
    gl_Position = vPos;
}

注意，如果想要获取shader里面的变量，必须要在glLinkProgram后面！

在开始绘制步骤中 设置纹理采样器glUniform1i 和 开始绘制glDrawArrays之间将旋转矩阵传入顶点着色器。

设置旋转矩阵，旋转纹理

//设置旋转矩阵
- (void)rotateTexture {
    //获取shader中的 rotateMatrix 变量
    GLuint rotate = glGetUniformLocation(self.program, "rotateMatrix");
    
    //设置旋转弧度
    float radians = 180 * 3.14159f / 180.0f;
    
    //求弧度对于的sin/cos值
    float s = sin(radians);
    float c = cos(radians);
    
    //旋转矩阵
    GLfloat zRotation[16] = {
        c,-s,0,0,
        s,c,0,0,
        0,0,1,0,
        0,0,0,1
    };
    
    //设置旋转矩阵
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}

方法二：使用CoreGraphics函数 对图片做翻转

在 加载纹理函数 - (GLuint)setupTexture:(NSString *)filePath 中，解码图片后，翻转坐标，再次重新绘制一次

    CGContextDrawImage(cgContext, rect, cgImage);
    
    CGContextTranslateCTM(cgContext, rect.origin.x, rect.origin.y);
    CGContextTranslateCTM(cgContext, 0, height);
    CGContextScaleCTM(cgContext, 1.0, -1.0);
    CGContextTranslateCTM(cgContext, -rect.origin.x, -rect.origin.y);
    CGContextDrawImage(cgContext, rect, cgImage);
    
    CGContextRelease(cgContext);

方法三：修改片元着色器，对纹理坐标的y值进行翻转

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    lowp vec4 temp = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
    
    gl_FragColor = temp;
}

方法四：修改顶点着色器中的纹理坐标，对y值进行翻转

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

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

方法五：直接修改顶点坐标 对应对纹理坐标

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, // 右下
        };

推荐使用 方法二