在上一个文章中，我们通过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
};
本文参考了 https://blog.51cto.com/u_8392210/3750347 文章；
