OpenGL ES ：GLSL加载图片后图片倒置的解决方案

Dean的掘金技术博客
488 阅读3分钟

首先我们知道iOS设备坐标系 (0,0) 表示的是左上角, 而在纹理坐标系中(0,0)表示左小角,那么我们载入的纹理显示图片实际上会发生倒置现象

方案一：图形顶点翻转180°，纹理保持原状

在顶点着色器中我们添加旋转矩阵 shaderv.vsh 代码如下

gl_Position 最终为 顶点矩阵 * 旋转矩阵;

我们在执行绘制前通过rotateTextureImage函数添加旋转矩阵


-(void)rotateTextureImage
{
    CGFloat PI = 3.14159f;
    
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    //1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    //2.获取渲旋转的弧度
    float radians =  PI ;
    //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);
}

方案二：解压图片时，将图片源文件翻转

在加载纹理setupTexture函数的第六步 使用默认方法绘制后，及context绘制的图片进行翻转，主要代码如下

//围绕x、y平移
    CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
    //围绕y平移
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    //x⽅向不变 y⽅向沿着画布⾃己的 坐标系对应的y轴渲染
    CGContextScaleCTM(spriteContext, 1.0, -1.0);//翻转
    //相对于画布，在自己的坐标系上画图
    CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
    CGContextDrawImage(spriteContext, rect, spriteImage);

翻转过程图示如下 针对上面的这部分代码，其实可以简化成

CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    //x⽅向不变 y⽅向沿着画布⾃己的 坐标系对应的y轴渲染
    CGContextScaleCTM(spriteContext, 1.0, -1.0);//翻转
    CGContextDrawImage(spriteContext, rect, spriteImage);

简化后的翻转图示如下

方案三：修改片元着色器，纹理坐标围绕y轴翻转

将shaderf.fsh中的gl_FragColor = texture2D(colorMap, varyTextCoord);改为gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));，将纹理坐标围绕y轴翻转,绘图时更改映射y值

方案四：修改顶点着色器，纹理坐标围绕y轴翻转

将shaderv.vsh中的varyTextCoord = textCoordinate;改为varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);，将纹理坐标围绕y轴翻转，其实方案四与方案三是一个原理，只是在不同的着色器中修改纹理坐标,也是绘图时更改映射y值,与方案三原理一致

方案五：直接修改顶点数组中的纹理坐标

与方案三四原理一致,改变顶点对应的纹理坐标

  • 原顶点数据数组
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,
    };

方案六：直接翻转顶点着色器中的顶点

在翻转顶点时，就不是直接对Y值用1去减，因为顶点的取值范围是[-1 1] ,所以我们直接加上负号做翻转即可

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

void main(){
    varyTextCoord = textCoordinate;
    gl_Position = vec4(position.x, -position.y, position.z, 1);
}

总结

根据本文提及的6个方案，可以简单归纳为以下三种倒置翻转的思路

翻转纹理坐标（可以在顶点着色器、片元着色器，甚至顶点数组中修改）：方案三、方案四、方案五 翻转顶点坐标（通过矩阵旋转，或者定点着色器中修改顶点坐标）：方案一、方案六 图片源文件翻转（其实也是通过将context通过矩阵变换进行翻转）：方案二

avatar
文章
阅读
粉丝