纹理翻转

OpenGL的纹理坐标是左下角的，而图片的坐标是在左上角的，所以画上去的时候会是倒立的，有五种方法可以使图片正过来

1.直接修改源纹理坐标数据

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

2.修改片元着色器纹理坐标

只需要修改y轴的坐标即可。

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
修改前：
void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
修改后：
void main()
{
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}

3.修改顶点着色器纹理坐标

片元着色器的纹理坐标是通过顶点着色器传递过去，同理修改顶点着色器的纹理坐标。

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
修改前：
void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
修改后：
void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}

4.旋转矩阵翻转图形,不翻转纹理

让图形顶点坐标旋转180°. 而纹理保持原状

- (void)rotateTextureImage
{
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    //rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    float radians = 180 * 3.14159f / 180.0f;
    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);
}
//对应的shaderv.vsh
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    //让每一个顶点坐标应用旋转矩阵
    gl_Position = position * rotateMatrix;
}

上面主要参考的是围绕Z轴旋转

image.png

5.图片解压缩时，翻转源文件

    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    //获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //创建上下文
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    //在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。
     UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CTM（current transformation matrix当前转换矩阵）
    */
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
    CGContextRelease(spriteContext);
    
    //绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);
    free(spriteData);