重返起点：OpenGL ES 2.0漫游奇幻之旅，从Hello Triangle开始！

2023-10-19 09:22:06

OpenGL ES 2.0 入门：绘制你的第一个三角形

探索 3D 图形世界的第一步是从一个简单的三角形开始。在本文中，我们将指导你创建你的第一个 OpenGL ES 2.0 程序——Hello Triangle。虽然它只是一个三角形，但它却包含了 OpenGL ES 2.0 编程的基本要素，是踏入 3D 图形之旅的必经之路。

了解 OpenGL ES 2.0

OpenGL ES 2.0 是为移动设备、游戏机和其他嵌入式系统设计的图形 API。它提供了一组完整的图形渲染指令，让你能够创建从简单的形状到复杂场景的各种视觉效果。

OpenGL ES 2.0 采用图形管线设计模式，将渲染过程分解成一系列独立的步骤：

顶点着色器： 将顶点数据转换为裁剪空间坐标。
片段着色器： 将片段数据转换为颜色值。
光栅化： 将片段数据转换为像素数据。
合成： 将像素数据与颜色缓冲区混合，生成最终图像。

创建 Hello Triangle

现在，让我们动手创建一个 Hello Triangle 实例。

1. 创建 OpenGL ES 2.0 上下文

这是 OpenGL ES 2.0 程序运行的环境。

2. 加载并编译顶点和片段着色器

着色器是 OpenGL ES 2.0 程序的核心，它们定义了如何将顶点数据转换为像素。

3. 创建三角形并绘制到屏幕上

现在，我们创建一个三角形，并使用着色器将其绘制到屏幕上。

代码示例

// 创建一个三角形顶点数组
GLfloat vertices[] = {
    -0.5f, -0.5f, 0.0f,
     0.5f, -0.5f, 0.0f,
     0.0f,  0.5f, 0.0f
};

// 创建顶点缓冲区对象
GLuint vbo;
glGenBuffers(1, &vbo);
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// 启用顶点属性数组
glEnableVertexAttribArray(0);

// 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);

// 获取 Uniform 变量的地址
GLint u_color_location = glGetUniformLocation(program, "u_color");

// 设置 Uniform 变量的值
glUniform4f(u_color_location, 1.0f, 0.0f, 0.0f, 1.0f);

// 清除颜色缓冲区
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

// 绘制三角形
glDrawArrays(GL_TRIANGLES, 0, 3);

// 交换前后缓冲区
eglSwapBuffers(display, surface);