iOS OpenGL 涂绘缤纷色彩，点亮图形世界

2023-11-14 06:03:09

为你的 iOS OpenGL 图形增添色彩

欢迎来到 OpenGL 图形编程的精彩世界！在之前的探索中，我们已经了解了 iOS OpenGL 的基础知识，现在是时候为我们的图形增添一些色彩，让它们在屏幕上大放异彩了！

顶点颜色数据

为图形着色的第一步是为顶点添加颜色数据。想象一下你正在绘画，你需要用不同的颜色填充不同区域。在 OpenGL 中，颜色数据使用 RGB（红、绿、蓝）颜色模型表示，每个顶点可以拥有自己的 RGB 值。这些值介于 0 到 1 之间，其中 (0, 0, 0) 代表黑色，(1, 1, 1) 代表白色。

着色器程序

就像绘画需要画笔和颜料，OpenGL 需要着色器程序来处理颜色数据。顶点着色器负责将顶点位置和颜色数据传递给片段着色器，而后者则根据顶点颜色数据计算每个片段（屏幕上的小点）的颜色。

绑定颜色数据

为了让 OpenGL 能够访问颜色数据，我们需要将数据绑定到顶点缓冲区。这就像把颜色颜料装进调色板，以便你可以使用它们。

绘制图形

当一切就绪时，就可以使用 glDrawArrays 函数绘制图形了。这个函数会根据顶点缓冲区中的数据绘制三角形、线条或其他形状。

示例代码

以下是为一个简单的三角形添加颜色的代码示例：

// 顶点位置和颜色数据
const 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.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f,  // 顶部，蓝色
};

// 顶点着色器
const char* vertexShaderSource =
  "#version 300 es\n"
  "layout(location = 0) in vec3 position;\n"
  "layout(location = 1) in vec3 color;\n"
  "out vec3 vertexColor;\n"
  "void main() {\n"
  "  vertexColor = color;\n"
  "  gl_Position = vec4(position, 1.0);\n"
  "}\n";

// 片段着色器
const char* fragmentShaderSource =
  "#version 300 es\n"
  "precision mediump float;\n"
  "in vec3 vertexColor;\n"
  "out vec4 fragColor;\n"
  "void main() {\n"
  "  fragColor = vec4(vertexColor, 1.0);\n"
  "}\n";