OpenGL ES 初学者指南：掌握坐标系和着色器渲染流程

IOS

2023-10-22 07:25:45

坐标系与着色器：OpenGL ES 渲染的基础

概述

在 OpenGL ES 图形编程的世界中，坐标系和着色器渲染流程是两个至关重要的概念，它们共同奠定了创建逼真、交互式 3D 场景的基础。通过了解这些基本要素之间的相互作用，开发者可以释放 OpenGL ES 的强大功能。

坐标系

OpenGL ES 使用右手坐标系，类似于数学和物理中常用的坐标系。在这个坐标系中：

X 轴 向右水平延伸，与屏幕平行。
Y 轴 向上垂直延伸，与 X 轴和屏幕垂直。
Z 轴 从屏幕向外延伸，与 X 轴和 Y 轴垂直。

理解坐标系对于确定场景中对象的相对位置和方向至关重要。

视口和投影

为了将 3D 场景渲染到 2D 屏幕上，OpenGL ES 采用了视口和投影机制。

视口定义了屏幕上用于显示场景的矩形区域。
投影将 3D 世界坐标系中的点转换为 2D 视口坐标系中的点。

通过调整视口和投影，开发者可以控制场景在屏幕上的大小和透视。

着色器渲染流程

着色器是 GPU 上运行的小型程序，用于计算每个屏幕像素的颜色。在 OpenGL ES 中，有两种类型的着色器：

顶点着色器 处理每个顶点，计算其最终位置和颜色。
片段着色器 处理每个片段（屏幕上的最小可寻址单元），计算其最终颜色。

着色器渲染流程涉及以下步骤：

顶点着色器阶段： 顶点着色器计算每个顶点的最终位置和颜色。
光栅化阶段： 三角形被分解为片段。
片段着色器阶段： 片段着色器计算每个片段的最终颜色。
融合阶段： 片段颜色与现有帧缓冲区颜色融合，生成最终图像。

实际应用：渲染一个立方体

为了展示坐标系和着色器的实际应用，我们使用 OpenGL ES 渲染一个简单的立方体。

顶点着色器代码：

#version 300 es
in vec3 aPos;
in vec3 aColor;
out vec3 vColor;

void main() {
    vColor = aColor;
    gl_Position = vec4(aPos, 1.0);
}

片段着色器代码：

#version 300 es
in vec3 vColor;
out vec4 fragColor;

void main() {
    fragColor = vec4(vColor, 1.0);
}

初始化代码：

// 顶点数据
GLfloat vertices[] = {
    // ...
};

// 顶点着色器
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

// 片段着色器
GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

// 着色器程序
GLuint program = glCreateProgram();
glAttachShader(program, vertexShader);
glAttachShader(program, fragmentShader);
glLinkProgram(program);

// VAO 和 VBO
GLuint VAO, VBO;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
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);

// 渲染循环
while (...) {
    // ...
}