iOS开发之OpenGL ES(三) —— 图片纹理翻转策略

前言

在上一个iOS开发之OpenGL ES(二) —— 快速了解并使用GLKit案例中，使用了如下代码来做翻转，如果我们不做翻转，加载出来的图片会是倒置的。

 //纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft,nil];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];

要翻转的原因和上面的注释所写的差不多，简单理解一下，是因为OpenGL要求y轴0.0坐标是在图片的底部的，但是图片的y轴0.0坐标通常在顶部。

1. 翻转原始纹理坐标

原始顶点数组中的坐标如下:

  //前3个是顶点坐标，后2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, 0.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, 0.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, 0.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, 0.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, 0.0f,     0.0f, 1.0f,
        0.5f, -0.5f, 0.0f,     1.0f, 0.0f,
    };

由于纹理坐标是0-1的，所以我们只需要用 1 减原来的纹理坐标的y值，即可完成翻转，如下:

  //前3个是顶点坐标，后2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 1 - 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1 - 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 1 - 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1 - 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1 - 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 1 - 0.0f,
    };

2. 翻转图片源文件

在解压过程中，可以对图片的源文件进行翻转，代码如下:

 //  第二种方法:解决翻转问题，平移再翻转Y轴
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);

第一步调CGContextTranslateCTM是把spriteContext沿Y轴正方向移动图片的高度,然后再调CGContextScaleCTM是把图片直接翻转过来。

3. 通过旋转矩阵直接旋转图形

在加载纹理时，把图形直接旋转180度即可,如下先写一个旋转矩阵传入顶点着色器

 //解决纹理翻转
- (void)rotateTextureImage{
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    //1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    //2.获取渲旋转的弧度
    float radias = 180 * 3.1415926 / 180.0f;
    
    //3.求得弧度对于的sin\cos值
     float s = sin(radias);
     float c  = cos(radias);
    
    //4.在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);
}

在顶点着色器中，代码如下所示, 上面是把旋转矩阵rotateMatrix传入了，然后设置顶点坐标gl_Postion时，用传入的原始顶点和传入的roatateMatrix相乘即可完成旋转180度。

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

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

4. 修改着色器里的纹理坐标

我们可以修改顶点着色器里的纹理坐标或者修改片元着色器里的纹理坐标，两种方式原理是一样的。

修改顶点着色器

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

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

修改片元着色器

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

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