GLSL解决图片倒置

GLSL实现对Shader编译链接里的Demo渲染的图片是倒置的，本篇文字来通过不同的方式来解决这个问题：

1. 在顶点着色器程序中添加一个 uniform mat4 rotateMatrix; 旋转矩阵变量，在给gl_Position赋值的时候做一下矩阵相乘：

    vec4 vPos = position;
    vPos = vPos * rotateMatrix;
    
    gl_Position = vPos;

计算旋转矩阵：

    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    float radians = 180 * 3.14159f / 180.0f;
   
    //求得弧度对应的sin\cos值
    float s = sin(radians);
    float c = cos(radians);
    
    /*
     Z轴旋转矩阵
     */
    GLfloat zRotation[16] = {
        c,-s,0,0,
        s,c,0,0,
        0,0,1,0,
        0,0,0,1
    };
    
    //设置旋转矩阵
    /*
     glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     location : 对于shader 中的ID
     count : 个数
     transpose : 转置
     value : 指针
     */
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);

2. 设置纹理坐标时，直接对y坐标做个翻转：（y = 1 - y ）
   旧坐标：

    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,

        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
       -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };

新坐标：

    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 1.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
    };

3.在片元着色器中执行 texture2D读取像素对应的颜色值时，对坐标进行翻转

    //gl_FragColor = texture2D(colorMap, varyTextCoord);
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));

4.与第3步类似，只不过运算放到了顶点着色器程序中

    //varyTextCoord = textCoordinate;
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;

5. 在读取纹理时对图像进行翻转：
   调用CGContextTranslateCTM函数来修改每个点的x, y坐标值,使用方法：

// 沿x轴移动了100个单位，沿y轴移动了50个单位
CGContextTranslateCTM(myContext,100,50);

//以原点(左下角)为中心旋转45度
CGContextRotateCTM (myContext, radians(–45.));

CGContextScaleCTM来进行缩放：坐标系X,Y缩放[图片上传中...(翻转流程.jpg-aa5a38-1560569225238-0)]

对图像进行翻转：

    CGContextTranslateCTM(imageContext, rect.origin.x, rect.origin.y);
    CGContextTranslateCTM(imageContext, 0, rect.size.height);
    CGContextScaleCTM(imageContext, 1.0, -1.0);
    CGContextTranslateCTM(imageContext, -rect.origin.x, -rect.origin.y);
    CGContextDrawImage(imageContext, rect, spriteImage);

变换流程：

翻转流程.jpg