OpenGL ES 3. 顶点坐标 纹理坐标

大家好，接下来将为大家介绍OpenGL ES 3. 顶点坐标 纹理坐标。

上一节我们介绍了OpenGL ES 3. 坐标系及坐标变换。

了解坐标系是渲染绘制图形的基础。在实际OpenGL的开发中，有世界坐标、纹理坐标、屏幕坐标等几种。

1、顶点坐标

首先需要明确的是，OpenGL使用的是笛卡尔右手坐标系，如下图所示。

分X Y Z 3个轴，X轴朝右为正，Y轴朝上为正，Z轴垂直屏幕朝外为正。X Y Z 3个轴的最大与最小值为 1 和 -1，这是经过归一化处理的。

2、屏幕坐标

屏幕坐标系，就是应用在设备屏幕上的坐标系，也就是图形最终显示的地方。

X轴朝右为正，Y轴朝下为正。

3、纹理坐标

纹理坐标系如下图所示。

原点在左下角，X轴朝右为正，Y轴朝上为正，X Y 轴的最大与最小值为 0 和 1，这是经过归一化处理的。

4、号外注意

按照如下的顶点坐标，纹理坐标进行纹理映射（下节内容介绍），得到的结果将会是倒立的（上下颠倒）。

//顶点坐标
GLfloat vertices[12] = {
    -1.0f,  1.0f, 0.0f,     // top left
    -1.0f, -1.0f, 0.0f,     // bottom left
    1.0f, -1.0f, 0.0f,      // bottom right
    1.0f,  1.0f, 0.0f       // top right
};

//纹理坐标
GLfloat texCoor[16] = {
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f
};

为了得到正立的渲染结果，可以对纹理坐标进行上下翻转，再用于渲染。

也即：Y正立 = 1 - Y倒立

//顶点坐标
GLfloat vertices[12] = {
    -1.0f,  1.0f, 0.0f,     // top left
    -1.0f, -1.0f, 0.0f,     // bottom left
    1.0f, -1.0f, 0.0f,      // bottom right
    1.0f,  1.0f, 0.0f       // top right
};

//纹理坐标
GLfloat texCoor[16] = { 
    0.0f, 0.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f
};