图片的反转策略

在OpenGL中,一张图片解压缩后,并不像我们在日常所看到正常方向,图片解压缩后,实际上是点到过来的,如果直接显示会导致图片方向的不正确.

颠倒的方向.png 正确方向.jpeg

解决这个问题,有一下几种策略

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);
CGContextDrawImage(spriteContext, rect, spriteImage);

关于CGContextd的用法,这里有个文章讲解的挺好: iOS 坐标转换

3.在片元着色器中进行映射调整

//gl_FragColor = texture2D(colorMap, varyTextCoord);
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
//1减去纹理的Y坐标,刚好使得纹理Y坐标上下翻转,从而实现图片翻转

4.在顶点着色器中进行映射调整

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

//原理与第三种是一样的,只不过在顶点着色器对纹理坐标进行翻转时,数据还没有传入片元着色器而已

5.在顶点数据与纹理数据数组中进行映射调整

    //6.设置顶点、纹理坐标
    //前3个是顶点坐标，后2个是纹理坐标
//    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,
    };