阅读 112

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

我的 OpenGL 专题学习目录,希望和大家一起学习交流进步!


一、前言

我在上一篇 OpenGL学习(十二)-- OpenGL ES 纹理翻转的策略对比 讲了如果用 GLSL 加载一张图片,但是最后发现加载出来的图片是 倒置 的,这是 为什么 呢?

因为 OpenGL 要求 y0.0 坐标是在图片的底部的,但是图片的 y0.0 坐标通常在顶部。 这要怎么解决呢?下面罗列了 5 种解决策略供我们选择。

二、纹理翻转策略

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 来修饰,44 列的矩阵 mat4。然后用顶点坐标 vPos 乘以这个 rotateMatrix 旋转矩阵,让每一个顶点都应用旋转变化。

⚠️ 注意只能是 vPos * rotateMatrix,顺序不能反过来,因为顶点是 14 列,旋转矩阵是 44 列。 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

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

关注下面的标签,发现更多相似文章
评论