OpenGL ES之纹理翻转的解决策略

原因分析

• 在前面的文章：OpenGL ES之Swift使用GLSL语言渲染图片的显示和OpenGL ES之GLSL渲染图片显示的整体流程中，我们都对图片纹理做了翻转的处理，不做处理，最后看到的图片显示将是一张倒着的图片。
• 为什么会出现这种情况呢？这是因为OpenGL要求y轴0.0坐标是在图片的底部的（屏幕左上角），但是图片的y轴0.0坐标通常在顶部（屏幕左下角）：我们可以改变顶点数据的纹理坐标，翻转y值（用1减去y坐标），也可以编辑顶点着色器来自动翻转y坐标，替换TexCoord的值为TexCoord = vec2(texCoord.x, 1.0f - texCoord.y);。

解决策略

一、旋转矩阵来翻转图形，不翻转纹理

• 在顶点着色器 shaderv.vsh 中，我们传进了一个旋转矩阵 rotateMatrix，因为矩阵传进来就不会再修改了，所以我们用 uniform 来修饰，4行4列的矩阵 mat4。然后用顶点坐标 vPos 乘以这个 rotateMatrix 旋转矩阵，让每一个顶点都应用旋转变化；
• 让图形顶点坐标旋转180°，而纹理保持原状；
• vPos * rotateMatrix，顺序不能反过来，因为顶点是1行4列，旋转矩阵是4行