4. OpenGL ES基础
在 Qt 中集成 OpenGL ES 时，真正决定画面“长什么样”的并不是 Qt 窗口本身，而是 OpenGL ES 的渲染管线。理解管线各阶段的数据形态、着色器职责、坐标系变换以及缓冲区与纹理的组织方式，是从“能画出三角形”走向“能稳定渲染复杂场景”的关键。本节围绕这条主线，把零散 API 串成一条可操作的认知路径。
一、图形渲染管线：从顶点到像素的流水线
OpenGL ES 的渲染管线可以理解为一条高度并行的数据加工流水线。应用程序提供顶点数据，经过顶点着色器、图元装配、光栅化、片元着色器，最终写入帧缓冲。其中顶点着色器和片元着色器是可编程阶段，其余阶段由 GPU 固定功能完成。
顶点着色器对每个顶点执行一次，主要负责坐标变换：把模型空间的顶点经模型矩阵、视图矩阵、投影矩阵变换到裁剪空间，同时可计算法线、纹理坐标、颜色等随顶点插值的量。图元装配把顶点组合成点、线或三角形；光栅化把图元离散为片元，并对顶点属性进行插值。片元着色器对每个片元执行一次，决定该像素的最终颜色，常用于纹理采样、光照计算、透明度与特效处理。
二、顶点与片元着色器：GLSL ES 的输入输出
Qt 中通常使用 QOpenGLShaderProgram 管理着色器。顶点着色器通过 attribute 接收顶点属性，通过 uniform 接收全局参数，输出 varying 供片元着色器插值使用。片元着色器接收插值后的 varying，输出最终颜色。
// 顶点着色器
attribute vec3 aPos;
attribute vec2 aTexCoord;
uniform mat4 uMVP;
varying vec2 vTexCoord;
void main() {
gl_Position = uMVP * vec4(aPos, 1.0);
vTexCoord = aTexCoord;
}
// 片元着色器
precision mediump float;
uniform sampler2D uTexture;
varying vec2 vTexCoord;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoord);
}需要注意，OpenGL ES 2.0 使用 attribute/varying/gl_FragColor，而 OpenGL ES 3.0 改为 in/out 与自定义输出变量。Qt 的 QOpenGLFunctions 与 QOpenGLShaderProgram 能屏蔽部分差异，但着色器版本声明必须与上下文匹配。
三、坐标系：从模型空间到屏幕空间
顶点最终要落到屏幕上，必须经历一系列坐标变换。模型矩阵把物体从模型空间变换到世界空间；视图矩阵把世界空间变换到相机空间；投影矩阵把相机空间变换到裁剪空间。裁剪空间经过透视除法得到归一化设备坐标（NDC），再经视口变换映射到屏幕像素坐标。
| 阶段 | 空间 | 典型矩阵 | 作用 |
|---|---|---|---|
| 模型变换 | 模型 → 世界 | Model | 摆放物体位置、旋转缩放 |
| 视图变换 | 世界 → 相机 | View | 确定观察位置与朝向 |
| 投影变换 | 相机 → 裁剪 | Projection | 透视或正交投影 |
| 视口变换 | NDC → 屏幕 | glViewport | 映射到窗口像素区域 |
QMatrix4x4 可以方便地构造透视投影、正交投影、lookAt 视图矩阵，并通过 setUniformValue 传入着色器，避免手写矩阵运算。四、纹理与缓冲区对象：数据如何被 GPU 使用
缓冲区对象（VBO、EBO）负责存储顶点属性与索引数据。VBO 把顶点位置、纹理坐标、法线等打包上传到 GPU；EBO 存储索引，配合 glDrawElements 复用顶点，减少重复数据。纹理对象则通过 glGenTextures、glBindTexture、glTexImage2D 创建并上传像素数据，再在片元着色器中用 sampler2D 采样。
// 创建并填充 VBO
GLuint vbo;
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, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 纹理参数与上传
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, w, h, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixels);QImage 的像素数据上传纹理时，若未处理行对齐或格式转换，容易出现图像错位、颜色异常。建议统一转换为 QImage::Format_RGBA8888 并调用 mirrored() 处理 OpenGL 纹理坐标原点差异。五、案例与复盘：一个带纹理的旋转四边形
在 Qt 的 QOpenGLWidget 中，典型流程是：初始化时创建着色器程序、VBO、纹理；paintGL 中更新 MVP 矩阵、绑定纹理、绘制。若画面全黑，优先检查着色器编译日志、属性位置是否匹配、纹理是否绑定到正确的纹理单元，以及深度测试与面剔除是否误开。若纹理上下颠倒，检查纹理坐标与图像行序；若物体不显示，检查投影矩阵的远近裁剪面与顶点是否落在视口内。
把渲染管线、着色器、坐标系、缓冲区与纹理这五件事串起来，就能在 Qt 中构建出可维护的 OpenGL ES 渲染层。后续无论是做 2D 精灵、3D 模型还是后处理特效，本质上都是在这条管线上替换数据与着色器逻辑。