OpenGLES学习----图片翻转(3)

在上一个文章中，我们通过Opengl ES 绘制了一张图片；但是因为Opengl 的纹理坐标和iOS 的系统坐标是不一样的，所以呈现了图片翻转的效果；

翻转后的结果

1716313-4538810df642f491.png

先来看一下系统坐标系和 Opengl 坐标系的区别；

image

方法1 - 将顶点沿z轴旋转180度

修改顶点着色器，加入旋转矩阵和缩放矩阵，虽然缩放矩阵暂时用不到；

const NSString * vertexShader1 =
@"attribute vec4 position;                      \
attribute vec2 textCoordinate;                  \
uniform mat4 rotateMatrix;                      \
uniform mat4 scaleMatrix;                       \
varying lowp vec2 varyTextCoord;                \
void main(){                                    \
    varyTextCoord = textCoordinate;             \
    vec4 vPosition = position;                  \
    vPosition = vPosition * rotateMatrix * scaleMatrix;       \
    gl_Position = vPosition ;                   \
}";

在绘制前，将旋转矩阵和缩放矩阵的值传入片源着色器；以纠正之前的纹理y坐标；（这个方法略微复杂，但是实用性最强，可以对图片做一些矩阵操作，比如旋转、缩放，翻转等等）
具体实现代码如下；

- (void)rotateImage {
   /// 0.获取纹理坐标
    GLuint colorMap = glGetUniformLocation(_program, "colorMap");
    glUniform1i(colorMap, 0);

    /// 1.获取旋转矩阵
    GLuint rotate = glGetUniformLocation(_program, "rotateMatrix");
    GLuint scale = glGetUniformLocation(_program, "scaleMatrix");

    /// 2.获取旋转弧度 （旋转矩阵网上有，一搜一大把）
    float radius = 180 * 3.14159f / 180.0f;
    float sin = sin(radius);
    float cos = cos(radius);
    GLfloat rotateMatrix[16] = {
        cos,-sin,0 ,0,
        sin,cos,0 ,0,
        0,0,1 ,0,
        0,0,0 ,1,
    };
    GLfloat scaleMartix[16] = {
        -1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1,
    };
    /// 赋值
    glUniformMatrix4fv(rotate, 1, GL_FALSE, rotateMatrix);
    glUniformMatrix4fv(scale, 1, GL_FALSE, scaleMartix);
}

方法2 - 将原始图片反转

这个方法就比较简单了，在保证纹理坐标不变的情况下，对数据源进行操作，但是这种方法不太推荐，因为如果数据源很多的话，每次绘制前都需要对原始图片或者视频图像进行翻转，消耗性能；

- (GLuint)setupTexture2:(NSString *)fileName {
    NSDictionary *option = @{GLKTextureLoaderOriginBottomLeft: @(YES)};
    NSError *error;
    GLKTextureInfo *textureInfo  = [GLKTextureLoader textureWithCGImage:[UIImage imageNamed:fileName].CGImage options:option error:&error];
    return textureInfo.name;
}

方案3 - 修改片元着色器代码，纹理坐标围绕x轴翻转

该方案比较简单就是，将之前A、B、C、D 的纹理坐标的Y值，沿着X 轴翻转，翻转的逻辑在片源着色器内实现；具体片源着色器代码如下

const NSString * fragmentShader3  =
@"precision highp float;            \
varying lowp vec2 varyTextCoord;    \
uniform sampler2D colorMap;         \
void main(){                        \
  gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0 - varyTextCoord.y));\
}";

方案4 - 修改顶点着色器代码纹理坐标沿x轴翻转

方案4 和方案3 是异曲同工的方法，只是把纹理坐标沿x轴翻转的逻辑放到了顶点着色器中；
将原来的实现逻辑中的顶点着色器替换成如下即可；
代码如下：

const NSString * vertex_Shader =
@"attribute vec4 position;          \
attribute vec2 textCoordinate;      \
varying lowp vec2 varyTextCoord;    \
void main(){                        \
    varyTextCoord = vec2(textCoordinate.x ,1.0 - textCoordinate.y); \
    gl_Position = position;         \
}";

方法5 - 直接修改纹理坐标数据，让其沿着x轴翻转

该方案没什么可具体细讲的，如果说之前的通过调整片源着色器和顶点着色器达到 修改纹理坐标的目地，那这种方案就是直接把纹理坐标沿着x轴翻转了，不需要再对着色器做一些矩阵操作，直接修改数据源；

/// 未修改前的顶点坐标 和纹理坐标；
GLfloat vertices[]  = {
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f, //右下角A
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    -0.5f, -0.5f, -1.0f,    0.0f, 0.0f, //左下角C

    0.5f, 0.5f, -1.0f,      1.0f, 1.0f, //右上角D
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f, //右下角A
};

/// 修改后的顶点坐标 （顶点不变）和纹理坐标
GLfloat vertices5[]  = {
    0.5f, -0.5f, -1.0f,     1.0f, 1.0f, //右下角A （已转）
    -0.5f, 0.5f, -1.0f,     0.0f, 0.0f, //左上角B （已转）
    -0.5f, -0.5f, -1.0f,    0.0f, 1.0f, //左下角C （已转）

    0.5f, 0.5f, -1.0f,      1.0f, 0.0f, //右上角D  （已转）
    -0.5f, 0.5f, -1.0f,     0.0f, 0.0f, //左上角B  （已转）
    0.5f, -0.5f, -1.0f,     1.0f, 1.0f, //右下角A  （已转）
};

方法6 - 直接修改顶点坐标数据，让其沿着x轴翻转

该方案没什么可具体细讲的，如果说之前的通过调整片源着色器和顶点着色器达到 修改顶点坐标的目地，那这种方案就是直接把纹理坐标沿着x轴翻转了，不需要再对着色器做一些矩阵操作，直接修改数据源；

/// 未修改顶点坐标的 顶点坐标 和 纹理坐标
GLfloat vertices[]  = {
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f, //右下角A
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    -0.5f, -0.5f, -1.0f,    0.0f, 0.0f, //左下角C

    0.5f, 0.5f, -1.0f,      1.0f, 1.0f, //右上角D
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f, //右下角A
};
/// 修改后顶点坐标的顶点坐标 、 纹理坐标保持不变
GLfloat vertices6[]  = {
    0.5f, 0.5f, -1.0f,     1.0f, 0.0f, //右下角A
    -0.5f, -0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    -0.5f, 0.5f, -1.0f,    0.0f, 0.0f, //左下角C

    0.5f, -0.5f, -1.0f,      1.0f, 1.0f, //右上角D
    -0.5f, -0.5f, -1.0f,     0.0f, 1.0f, //左上角B
    0.5f, 0.5f, -1.0f,     1.0f, 0.0f, //右下角A
};

源码地址：OpenGL06-EAGL加载图片（包含翻转）

本文参考了 https://blog.51cto.com/u_8392210/3750347 文章；