OpenGL学习（十二）-- OpenGL ES 纹理翻转的策略对比

个人 OpenGL 专题学习目录，但愿和你们一块儿学习交流进步！

• OpenGL学习（一）-- 术语了解
• OpenGL学习（二）-- Xcode 搭建 OpenGL 环境
• OpenGL学习（三）-- OpenGL 基础渲染
• OpenGL学习（四）-- 正面&背面剔除和深度测试
• OpenGL学习（五）-- 裁剪与混合
• OpenGL学习（六）-- 基础纹理
• OpenGL学习（七）-- 基础变化综合练习实践总结
• OpenGL学习（八）-- OpenGL ES 初探（上）
• OpenGL学习（九）-- OpenGL ES 初探（下）GLKit
• OpenGL学习（十）-- 着色语言 GLSL 语法介绍
• OpenGL学习（十一）-- 用 GLSL 实现加载图片
• OpenGL学习（十二）-- OpenGL ES 纹理翻转的策略对比

---

1、前言

我在上一篇 OpenGL学习（十二）-- OpenGL ES 纹理翻转的策略对比 讲了若是用 GLSL 加载一张图片，可是最后发现加载出来的图片是 倒置 的，这是 为何 呢？

由于 OpenGL 要求 y 轴 0.0 坐标是在图片的底部的，可是图片的 y 轴 0.0 坐标一般在顶部。 这要怎么解决呢？下面罗列了 5 种解决策略供咱们选择。

2、纹理翻转策略

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

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

//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,
    };
复制代码

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

• 在顶点着色器 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);
}
复制代码

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

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

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

从图片加载纹理的总体代码以下：

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

    //二、读取图片的大小，宽和高
    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);
    

    //五、在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);
    
    //七、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //八、绑定纹理到默认的纹理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;
}
复制代码

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

这里是修改了片元着色器的代码，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));
}
复制代码

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

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

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

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

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

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