初识OpenGLES绘制正方形：易上手的入门指引

踏入OpenGLES的大门

OpenGLES（OpenGL ES）是专为移动设备和嵌入式系统设计的3D图形API，也是iOS、Android等平台的图形处理标准。作为学习OpenGL ES的开篇之作，我们将绘制一个正方形来了解其基本概念和操作。

OpenGLES坐标系：理解图形世界的基石

OpenGLES使用一个归一化的笛卡尔坐标系作为图形世界的基础。坐标系的原点是（0,0），最大最小值范围为[-1,1]。这意味着无论屏幕大小，最终都会被映射到这个统一的坐标系中。

OpenGLES图形绘制的步骤：绘制正方形实例

绘制正方形时，我们需要经过如下步骤：

1. 准备顶点数据： 顶点数据定义了正方形的形状，包括位置、颜色、纹理等属性。

2. 准备索引数据： 索引数据定义了顶点的排列方式，决定了正方形的绘制顺序。

3. 创建顶点缓冲区对象： 将顶点数据和索引数据存储在显存中，供GPU快速访问。

4. 创建着色器程序： 着色器程序定义了如何将顶点数据转换为片段数据，片段数据决定了最终在屏幕上显示的颜色和纹理。

5. 绘制正方形： 通过调用OpenGLES的绘制函数，将正方形绘制到屏幕上。

代码实现：绘制正方形的具体步骤

// 1. 顶点数据
float vertices[] = {
    // 位置                // 颜色
    0.5f,  0.5f, 0.0f,    1.0f, 0.0f, 0.0f, // 右上角
    0.5f, -0.5f, 0.0f,    0.0f, 1.0f, 0.0f, // 右下角
    -0.5f, -0.5f, 0.0f,    0.0f, 0.0f, 1.0f, // 左下角
    -0.5f,  0.5f, 0.0f,    1.0f, 1.0f, 0.0f  // 左上角
};

// 2. 索引数据
unsigned int indices[] = {
    0, 1, 3, // 第一个三角形
    1, 2, 3  // 第二个三角形
};

// 3. 顶点缓冲区对象
unsigned int VBO, VAO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);

// 将顶点数据绑定到VAO
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// 将索引数据绑定到EBO
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

// 4. 着色器程序
const char *vertexShaderSource =
    "attribute vec3 aPos; // 顶点位置\n"
    "attribute vec3 aColor; // 顶点颜色\n"
    "varying vec3 vColor; // 用于插值的颜色\n"
    "void main() {\n"
    "  vColor = aColor;\n"
    "  gl_Position = vec4(aPos, 1.0);\n"
    "}\n";

const char *fragmentShaderSource =
    "varying vec3 vColor; // 从顶点着色器插值的颜色\n"
    "void main() {\n"
    "  gl_FragColor = vec4(vColor, 1.0);\n"
    "}\n";

unsigned int vertexShader, fragmentShader, shaderProgram;
vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

// 5. 绘制正方形
glUseProgram(shaderProgram);

// 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

// 绘制正方形
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

结语：用正方形开启OpenGLES之旅

通过绘制一个正方形，我们了解了OpenGLES的基础概念和操作步骤。这些知识将为我们进一步探索3D图形世界奠定坚实的基础。