OpenGL的纹理坐标与旋转显示
贴一张我自己用draw.io画的图,顺便推荐一下这个在线画图的网站 :draw.io。
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,
};
...
镜像
对应上图,水平镜像(即我们平常照镜子)将图按垂直中轴线翻转,垂直镜像(比较少用)将图按水平中轴线翻转。