OpenGL ES 纹理翻转的策略对比

一、前言

我在上一篇《OpenGL ES 用 GLSL 实现加载图片》讲了如果用 GLSL 加载一张图片，但是最后发现加载出来的图片是倒置的，这是为什么呢？

效果图.png

因为 OpenGL 要求 y 轴 0.0 坐标是在图片的底部的，但是图片的 y 轴 0.0 坐标通常在顶部。
这要怎么解决呢？下面罗列了五种解决策略供我们选择。

二、纹理翻转策略

1、修改纹理坐标和顶点坐标的映射关系

图片之所以倒置，就是纹理坐标和顶点坐标的映射关系发生了错误，所以我们把映射关系改对就行了。这种方法最直接最原始，也一劳永逸，但是容易在对应的时候犯糊涂出错。

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

2、旋转矩阵翻转图形，不翻转纹理

• 在顶点着色器 shaderv.vsh 中，我们传进一个旋转矩阵 rotateMatrix，因为矩阵传进来就不会再修改了，所以我们用 uniform 来修饰，4行4列的矩阵 mat4。然后用顶点坐标 vPos 乘以这个 rotateMatrix 旋转矩阵，让每一个顶点都应用旋转变化。

⚠️ 注意只能是 vPos * rotateMatrix，顺序不能反过来，因为顶点是1行4列，旋转矩阵是4行4列。
shaderv.vsh 中：

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

3、在解压图片时，将图片源文件翻转

使用下面三行代码，对图片进行了平移缩放操作以后，再重新绘制。

    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);

从图片加载纹理的整体代码如下：

//从图片中加载纹理
- (GLuint)setupTexture:(NSString *)fileName {
    
    //1、将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

    //2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //5、在CGContextRef上--> 将图片绘制出来
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默认方式绘制
    //CGContextDrawImage(spriteContext, rect, spriteImage);
    // 图片翻转后绘制
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //8、绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.设置纹理属性
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    
    float fw = width, fh = height;
    
    //10.载入纹理2D数据
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);   
    return 0;
}

4、修改片元着色器中的纹理坐标

这里是修改了片元着色器的代码，x 坐标不动，将 y 坐标改为 1-y，这样就达到了翻转的效果。其他地方代码不用动。

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

5、修改顶点着色器中的纹理坐标

在顶点着色器传入的时候，就翻转。相比上面的片元着色器，执行次数要少很多，有几个顶点执行几次。

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

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

上面五种方法都可以解决图片倒置问题，第一种是最直接也是最原始的修改方式，但容易映射关系出错。第二种和第三种相对麻烦。后两种只用修改一行代码最轻松，喜欢选哪种看你的了。最后就得到了正着的图片啦！

正常图.png

转载请备注原文出处，不得用于商业传播——凡几多