OpenGL的纹理坐标与旋转显示

贴一张我自己用draw.io画的图，顺便推荐一下这个在线画图的网站 ：draw.io。

image.png

OpenGL的纹理坐标原点是在左下角，ios/Android显示系统的原点在左上角，跟纹理是上下颠倒的（其实应该说是垂直镜像的），所以红1代表ios图片原点位置。如图中的R0，没有任何旋转时图片从左上角红1开始到右下角红4。
此时手机采集摄像头是横屏状态采集而来的，在iphone上的橫屏是Home键在左的状态。
所以opengl的显示矩阵按红1开始到红4排列。

当把手机竖起来Home键朝下时，相当于将手机向右旋转90度，如图R90。红1从左上角变成了右上角。

以下是openGL显示图片时的矩阵，代码中填写坐标的从图中对应的红色1开始顺序填写即可：

static const GLfloat rotation0[] = {
      0.0f, 1.0f,//bottom left 这个注释对应OpenGL纹理左下角原点
      1.0f, 1.0f,//bottom right
      0.0f, 0.0f,//top left
      1.0f, 0.0f,//top right
  };

  static const GLfloat rotateRight90[] = {
      1.0f, 1.0f,
      1.0f, 0.0f,
      0.0f, 1.0f,
      0.0f, 0.0f,
  };

  static const GLfloat rotateRight180[] = {
      1.0f, 0.0f,
      0.0f, 0.0f,
      1.0f, 1.0f,
      0.0f, 1.0f,
  };

  static const GLfloat rotateRight270[] = {
      0.0f, 0.0f,
      0.0f, 1.0f,
      1.0f, 0.0f,
      1.0f, 1.0f,
  };

以上是显示的矩阵，但如果是openGL内部处理旋转而不是显示时，按openGL的原点顺序旋转即可，如：

static const GLfloat rotation0[] = {
      0.0f, 0.0f,//bottom left 
      1.0f, 0.0f,//bottom right
      0.0f, 1.0f,//top left
      1.0f, 1.0f,//top right
  };
  static const GLfloat rotateRight90[] = {
      1.0f, 0.0f,
      1.0f, 1.0f,
      0.0f, 0.0f,
      0.0f, 1.0f,
  };
...

镜像

对应上图，水平镜像(即我们平常照镜子)将图按垂直中轴线翻转，垂直镜像(比较少用)将图按水平中轴线翻转。