OpenGL ES 加载纹理图片倒置的几种解决办法

一、前言

上一篇博客中，我们实现了使用OpenGL ES的核心语言GLSL渲染一张图片到屏幕上，虽然最后成功了，但是也出现了一点点小问题，就是我们渲染的图片是并不是我们期望的那样，而是上下倒置了。
原因是OpenGL要求Y轴的0.0坐标是在图片的底部的，Y坐标从下到上增加；而图片纹理的Y轴0.0默认是图片的顶部，Y坐标从上到下增加。所以最后显示的图片就变成了上下倒置旋转了180°的效果。

二、解决方案

既然知道了产生倒置的原因，那么我们就来解决它。

方案1-- 矩阵变换

在OpenGL/OpenGL ES中我们经常使用矩阵来实现图像的旋转和位移，所以我先来用矩阵将图像旋转180°，变成正常显示即可。主要代码如下：

-(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);
    
}

然后我们在- (void)renderLayer中调用

 //11. 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //解决纹理导致(方法1)
    [self rotateTextureImage];
    
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];

注意点：
1.因为要获得的变量是从shader中获取的，所以我们一定要在glLinkProgram之后执行，否则着色器文件还没有编译和链接，我们是无法获得shader中的变量的。

2.我们以前学习或者认知的矩阵一般都是列向量，但是在OpenGL/OpenGL ES中都是使用的列向量，所以在创建旋转矩阵的时候一定注意。

方案2 -- 设置纹理的时候旋转纹理

既然是纹理倒置了，那我们将纹理旋转到正确位置也就可以了。这一步我们主要在- (GLuint)setupTexture:(NSString *)fileName函数中进行，关键代码：

    //5、在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架  的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage 
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //纹理翻转
    CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
    //纹理绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);

纹理翻转的4行代码过程：
1、将画布整体位移
2、将画布沿着Y轴正方向移动图像高度的大小
3、将画布沿着Y轴翻转180°
4、再将画布移回到原点

这样即可得到正确的显示结果。

方案3 -- 片元着色器纹理翻转

和方案2一样都是针对纹理来实现翻转，但是前者是在纹理读取的时候，后者实在绘制纹理的时候。因为是使用片源着色器来实现，所以我们修改片源着色器中的代码即可：

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));
}

代码很简单，因为纹理的坐标范围是(0.0,0.0)到(1.0,1.0)，所以用1.0-varyTextCoord.y即可得到翻转后的纹理坐标。

方案4 -- 顶点着色器纹理翻转

这种方案和方案3原理一样，都是通过着色器来翻转纹理，不同之处是方案3是在片源着色器实现，而此方案是在顶点着色器中实现。上代码：

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

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

片源着色器的纹理坐标是由顶点着色器传递进去的，所以在顶点着色器里面翻转也是可以的。

方案5 -- 修改顶点坐标

纹理是按照我们给顶点坐标绘制的，那么如果给的顶点坐标就是翻转之后的，纹理也就可以正常显示了。这一方案是在- (void)setupPositionData中实现的：

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

上面的顶点数组是最开始的数据，下面的是我们翻转后的顶点。

方案6 -- 顶点着色器修改顶点坐标

此和方案5一样，也是通过翻转顶点的方式实现的。不过是在顶点着色器里面实现的：

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

void main()
{
    varyTextCoord = textCoordinate;
    ///方式1
    vec4 vPos = position;
    vPos *= vec4(1, -1, 1, 1);
    gl_Position = vPos;
    ///方式2
    //   gl_Position = vec4(position.x, -position.y,1,1);
    
}

这里要注意，顶点坐标的取值范围是-1到1，所以是直接去反，而纹理坐标是0到1，所以不再是用纹理坐标的1减去坐标点了，要注意区分。同时这里也可以分为两种方式：

使用矩阵实现顶点翻转

手动给Y轴坐标翻转

三、总结

针对OpenGL ES加载纹理图片倒置的几种解决都讲完了，不过几种方式原理还是又多不同。因为本身翻转的是纹理，本着谁的事情谁来做的原则。最好是在纹理的部分处理翻转的问题。并且在着色器中处理坐标，有可能会产生其他的绘制结果。所以我比较推荐方案2。当然，各位也可以看自己的喜好或者需求灵活选用。