美文网首页
OpenGL ES 图片倒置的翻转解决方案

OpenGL ES 图片倒置的翻转解决方案

作者: 远方竹叶 | 来源:发表于2020-08-05 17:00 被阅读0次

在 案例中,运行后,发现加载的图片是倒置的,与我们最终实现的效果不一致

这是为什么呢?因为纹理坐标的原点(0,0)在左下角,而屏幕的坐标原点(0,0)是在左上角

这里总结了几种解决的方案

1. 解压图片时,将图片源文件翻转

在加载纹理 setupTexture 函数,在使用默认方法绘制前添加如下代码

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

2. 修改顶点着色器,纹理坐标沿 y 轴翻转

将 shaderv.vsh 中的 varyTextCoord = textCoordinate;改为varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);,将纹理坐标围绕y轴翻转

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

3. 修改片元着色器,纹理坐标围绕y轴翻转

将 shaderf.fsh 中的 gl_FragColor = texture2D(colorMap, varyTextCoord); 改为gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));,将纹理坐标围绕y轴翻转

precision highp float;
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));
}

4. 直接修改顶点数组中的纹理坐标

在顶点数组初始化的时候就把纹理坐标设置正确的方向

原顶点坐标

GLfloat attrArray[] = {
    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 attrArray[] = {
    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,
};

5. 图形顶点翻转180°(使用旋转矩阵)

在自定义的顶点着色器中,需要将顶点 * 旋转矩阵,得到新的顶点坐标,再赋值给内建变量 gl_Position

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 radius = 180 * 3.14159f / 180.0f;
    
    //3.求得弧度对于的sin\cos值
    float s = sin(radius);
    float c = cos(radius);
    
    //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.设置旋转矩阵
    /**
     location : 对于 shader 中的ID
     count : 个数
     transpose : 转置
     value : 指针
     */
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}

这个自定义的方法需要在链接了程序之后调用,才会有效果

总结

根据解决方案,可以简单归纳为以下三种倒置翻转的思路

  • 翻转纹理坐标
  • 翻转顶点坐标
  • 图片源文件翻转

以上方案中最常用的是第一种,也是最高效的。

相关文章

网友评论

      本文标题:OpenGL ES 图片倒置的翻转解决方案

      本文链接:https://www.haomeiwen.com/subject/edavrktx.html