关于OpenGL ES绘制图片的翻转

由于纹理坐标左下为原点坐标, 所有我们绘制的图片为倒着的, 接下来介绍几种翻转方式.

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