持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
上一篇我们使用 OpenGL ES GLSL 自定义着色器来在屏幕上加载显示了一张图片， 简单回顾下流程：
- 我们先是设置了图层（CAEAGLLayer）；
- 第二步、我们创建一个图形的上下文EAGLContext（指定OpenGL ES 渲染API版本）；
- 第三步，将缓存区清空；
- 第四步、设置渲染缓存区；
- 第五步、设置顶点缓存区；
- 最后进行绘制。
在我们完成以上六步之后，就可以将我们的图片加载到屏幕上，以上内容为固定步骤，之后我们在加载显示纹理的时候都需要完成以上步骤。 之后，我们需要修改纹理的效果时，我们直接修改顶点着色器文件，和片元着色器文件就可以了。
好了，回到正题，
为什么我们加载显示的图片是倒着的呢？
CGContextDrawImage 使用的是 Core Graphics 框架，坐标系与 UIKit 不一样。UIKit 框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的 左下角。
纹理翻转策略
将图片翻转 （拒绝）
此通过修改图片的方向，可以实现效果，但是，实际开发中我们不推荐使用此方法。
旋转矩阵翻转图形（不推荐）
- 让图形顶点坐标旋转180°. 而纹理保持不变。
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
float radians = 180 * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
GLfloat zRotation[16] = {
c, -s, 0, 0,
s, c, 0, 0,
0, 0, 1.0, 0,
0.0, 0, 0, 1.0
};
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
解压图片的时候，将图片源文件做翻转操作 （推荐）
我们在解压图片数据的时候，将图片的源文件做翻转操作， 这样，在GLSL加载显示的时候，就可以正常显示了。
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage);
CGContextRelease(spriteContext);
glBindTexture(GL_TEXTURE_2D, 0);
修改片元着色器 （推荐）
因为图片是上下倒置，我们将纹理坐标的y值做一个倒置即可
precision highp float;
varying highp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0-varyTextCoord.y));
}
修改顶点着色器（推荐）
原理和修改片元着色器一样
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x 1.0-textCoordinate.y);
gl_Position = position;
}
修改数据源中的纹理坐标 （推荐）
通过修改纹理坐标来实现翻转
我们原始的顶点坐标和纹理坐标数据如下：
设置顶点、纹理坐标 -- 前三个是顶点坐标，后两个是纹理坐标
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,
};
看数据有点不太直观，我们通过一个顶点纹理映射的关系来直观的看一下：
A、B、C、D四个顶点的顶点坐标与纹理坐标之间的映射关系如上图所示，知道了它们之间的映射关系修改起来也就很简单了，只需要将纹理坐标对应的y坐标1.0和0.0兑换一下就可以了。
修改数据源中的顶点坐标（推荐）
正如上一小节修改纹理坐标一样，我们在看清楚顶点坐标和纹理坐标的映射关系之后，修改顶点坐标也是一种方案。
