★ FEATURED ARTICLE 简介本资源面向具备一定Qt与OpenGL基础的开发者聚焦3D图形绘制与旋转这一进阶主题帮助读者理解如何从平面图形过渡到立体几何的渲染。内容以四棱锥为实例讲解由4个共顶点的三角形侧面与1个四边形底面构成的封闭立体图并说明三维顶点坐标的计算思路与绘制方法适合正在学习Qt OpenGL管线、想掌握3D变换与深度处理的读者参考。压缩包共16个文件约451KB包含3个cpp源文件、2个h头文件、1个ui界面文件、1个pro工程文件及makefile、release、debug等构建产物另有过程说明txt与可执行exe工程结构完整可直接编译运行。目前已有2421人学习下载。通过该源码读者可对照实现四棱锥的顶点组织、面片绘制与旋转逻辑理解三维坐标与深度维度的处理方式并借助工程文件快速搭建自己的Qt OpenGL实验环境为后续复杂3D场景开发打下基础。1. Qt_OpenGL3D图形的绘制和旋转从黑窗口到能转的立方体中间隔着多少坑很多人第一次在 Qt 里碰 OpenGL都是被同一个场景逼的项目需要一个能实时旋转、缩放、带点光照的三维视图用 QPainter 硬画伪 3D 已经卡到没法看于是想到 Qt 自带的 OpenGL 模块。结果打开 Qt Creator新建一个项目继承 QOpenGLWidget重写三个函数编译通过运行——屏幕一片黑。这就是 Qt_OpenGL3D 图形绘制和旋转最经典的入门翻车现场代码没报错但什么都看不见。这个标题讲的事情其实很具体在 Qt 框架下用 OpenGL 把三维几何体画出来并且让它能绕轴旋转。它解决的是「桌面端原生 3D 可视化」这个需求适合做工业组态、三维数据展示、教学演示、简单建模预览的开发者。它不适合想直接上游戏引擎的人也不适合只想画个 2D 图表的人。核心难点不在「画三角形」而在 Qt 的上下文管理、着色器管线、矩阵变换这三件事怎么串起来。下面按我实际做的顺序把这条链路拆开讲。2. 选型与最小可运行框架QOpenGLWidget 到底替你做了什么2.1 为什么是 QOpenGLWidget 而不是 QGLWidgetQt 早期用的是 QGLWidget现在已经被标记为过时。QOpenGLWidget 是 Qt5 之后的标准做法它把 OpenGL 的上下文创建、帧缓冲绑定、与 Qt 控件系统的合成都封装好了。你只需要继承它重写三个虚函数initializeGL()上下文第一次就绪时调用用来初始化着色器、VBO、VAO以及glEnable各种状态。resizeGL(int w, int h)窗口尺寸变化时调用用来设置视口和投影矩阵。paintGL()每一帧绘制时调用用来清屏、更新矩阵、发出绘制命令。这三个函数的调用时机是 Qt 保证的你不需要自己管上下文切换。但要注意initializeGL()只调用一次如果你在里面申请了资源释放要放在析构函数里并且要确保当时上下文是 current 的否则资源泄漏或者崩溃。2.2 最小工程配置.pro 里必须写的那几行很多人卡在第一步不是代码是工程文件没配对。用 qmake 的话.pro 里至少要加QT core gui opengl widgets LIBS -lopengl32 -lglu32 # Windows 下需要Linux 下换成 -lGL -lGLU如果是 CMake对应的是find_package(Qt5 COMPONENTS Core Gui OpenGL Widgets REQUIRED) target_link_libraries(你的目标 PRIVATE Qt5::Core Qt5::Gui Qt5::OpenGL Qt5::Widgets)这里有个血泪经验Windows 上如果只写QT opengl而不加widgetsQOpenGLWidget 的头文件会找不到。另外某些 Qt 版本里opengl模块和openglwidgets是分开的Qt6 里 QOpenGLWidget 被挪到了QtOpenGLWidgets模块.pro 要写QT openglwidgets。这个差异不查文档很容易翻车。2.3 一个能跑通的最小骨架下面这段代码是我一般用来验证环境是否正常的模板画一个三角形不涉及旋转先确认管线通了#include QOpenGLWidget #include QOpenGLFunctions #include QOpenGLShaderProgram #include QOpenGLBuffer #include QOpenGLVertexArrayObject class GLWidget : public QOpenGLWidget, protected QOpenGLFunctions { Q_OBJECT public: explicit GLWidget(QWidget *parent nullptr) : QOpenGLWidget(parent) {} ~GLWidget() override { makeCurrent(); // 析构时必须先让上下文 current delete m_program; m_vbo.destroy(); m_vao.destroy(); doneCurrent(); } protected: void initializeGL() override { initializeOpenGLFunctions(); // 必须调用否则 gl* 函数指针为空 glClearColor(0.1f, 0.1f, 0.1f, 1.0f); m_program new QOpenGLShaderProgram; // 顶点着色器直接把位置传出去 m_program-addShaderFromSourceCode(QOpenGLShader::Vertex, attribute highp vec3 pos;\n void main() { gl_Position vec4(pos, 1.0); }); // 片元着色器固定输出橙色 m_program-addShaderFromSourceCode(QOpenGLShader::Fragment, void main() { gl_FragColor vec4(1.0, 0.5, 0.2, 1.0); }); m_program-link(); // 三个顶点NDC 坐标 GLfloat verts[] { 0.0f, 0.5f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f }; m_vao.create(); m_vao.bind(); m_vbo.create(); m_vbo.bind(); m_vbo.allocate(verts, sizeof(verts)); m_program-bind(); m_program-enableAttributeArray(pos); m_program-setAttributeBuffer(pos, GL_FLOAT, 0, 3); m_vbo.release(); m_vao.release(); m_program-release(); } void resizeGL(int w, int h) override { glViewport(0, 0, w, h); } void paintGL() override { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); m_program-bind(); m_vao.bind(); glDrawArrays(GL_TRIANGLES, 0, 3); m_vao.release(); m_program-release(); } private: QOpenGLShaderProgram *m_program nullptr; QOpenGLBuffer m_vbo{QOpenGLBuffer::VertexBuffer}; QOpenGLVertexArrayObject m_vao; };逻辑说明initializeOpenGLFunctions()是必须的它把当前上下文里的 OpenGL 函数指针加载进来不调用的话所有gl开头的函数都是空指针程序直接崩。VAO 用来记录顶点属性配置VBO 存实际顶点数据。setAttributeBuffer的四个参数分别是属性名、数据类型、每个分量的字节偏移、每个顶点几个分量。这里每个顶点 3 个 float所以是 3。参数说明glClearColor的四个值范围是 0 到 1不是 0 到 255。glViewport的宽高用像素不是逻辑坐标。如果窗口有高 DPI 缩放resizeGL收到的 w、h 可能和实际像素不一致需要乘devicePixelRatio()这是另一个常见坑。3. 从三角形到立方体顶点数据、深度测试和 MVP 矩阵3.1 立方体顶点怎么组织36 个顶点还是 8 个顶点加索引画立方体有两种做法。一种是直接写 36 个顶点12 个三角形每个面独立好处是每个面可以有自己的法线和颜色坏处是数据冗余。另一种是写 8 个顶点加 36 个索引用glDrawElements绘制数据紧凑但法线需要额外处理。我一般用 36 个顶点的写法因为做旋转和光照时每个面的法线是独立的共享顶点反而会让法线插值出错。下面是一个带法线的立方体顶点数组片段// 每个顶点位置(x,y,z) 法线(nx,ny,nz)共 6 个 float GLfloat vertices[] { // 前面 (z 0.5)法线朝 z -0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, -0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, -0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, // 后面 (z -0.5)法线朝 -z // ... 其余五个面同理 };逻辑说明每个面两个三角形六个顶点顺序要保证逆时针从外面看否则开启背面剔除后会被剔掉。法线方向决定光照计算的结果写反了面就是黑的。参数说明顶点属性有两个pos和normal。在setAttributeBuffer里pos的偏移是 0normal的偏移是3 * sizeof(GLfloat)也就是 12 字节。步长stride是6 * sizeof(GLfloat)24 字节。3.2 深度测试为什么你的立方体看起来像纸片不开启深度测试后画的三角形会覆盖先画的立方体看起来就是一堆乱叠的面。开启方式glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LESS);并且在paintGL()里清屏时要带上GL_DEPTH_BUFFER_BITglClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);注意QOpenGLWidget 默认的帧缓冲是带深度附件的但如果你自己做了离屏渲染或者用了 QOpenGLFramebufferObject要确认深度附件有没有创建。这个坑我在做多视图渲染时踩过主视图正常离屏视图全是平的查了半天才发现 FBO 没加深度缓冲。3.3 MVP 矩阵旋转到底转的是哪个矩阵MVP 是 Model模型、View视图、Projection投影三个矩阵的合称。顶点着色器里通常写成uniform highp mat4 mvp; attribute highp vec3 pos; attribute highp vec3 normal; varying highp vec3 vNormal; void main() { vNormal normal; gl_Position mvp * vec4(pos, 1.0); }在 C 侧用 QMatrix4x4 构造这三个矩阵QMatrix4x4 model; model.rotate(m_angle, 0.0f, 1.0f, 0.0f); // 绕 Y 轴旋转 m_angle 度 QMatrix4x4 view; view.lookAt(QVector3D(0, 0, 3), // 相机位置 QVector3D(0, 0, 0), // 看向原点 QVector3D(0, 1, 0)); // 上方向 QMatrix4x4 projection; projection.perspective(45.0f, // 视场角 float(width()) / height(), // 宽高比 0.1f, 100.0f); // 近远裁剪面 QMatrix4x4 mvp projection * view * model; m_program-setUniformValue(mvp, mvp);逻辑说明矩阵乘法顺序不能反。projection * view * model表示先对顶点做模型变换再做视图变换最后做投影。写成model * view * projection结果完全错误物体会跑到屏幕外或者变形。参数说明rotate的第一个参数是角度单位是度不是弧度。perspective的宽高比要用浮点数除法如果写成width() / height()且两个都是 int会得到整数除法结果通常是 1画面会被拉伸。这个坑非常隐蔽因为编译不报错只是看起来「有点怪」。3.4 用 QTimer 驱动旋转帧率控制和角度累加要让立方体转起来需要一个定时器不断更新角度并触发重绘QTimer *timer new QTimer(this); connect(timer, QTimer::timeout, this, [this]() { m_angle 1.0f; // 每帧增加 1 度 if (m_angle 360.0f) m_angle - 360.0f; update(); // 请求重绘会触发 paintGL }); timer-start(16); // 约 60 FPS逻辑说明update()是异步的它只是标记需要重绘实际调用paintGL()由 Qt 的事件循环决定。不要在paintGL()里直接改角度那样旋转速度会和帧率耦合帧率波动时转速不稳定。参数说明start(16)的单位是毫秒16 毫秒约等于 60 帧每秒。如果显示器是 144Hz可以改成 7。但要注意定时器精度受系统调度影响不能用来做精确计时。如果需要按真实时间旋转应该用QElapsedTimer计算时间差再乘以角速度。4. 避坑与排查旋转相关的五个高频翻车点4.1 现象立方体旋转时某个面突然消失原因开启了背面剔除glEnable(GL_CULL_FACE)但顶点顺序不统一有的面是逆时针有的是顺时针。旋转到某个角度时被判定为背面直接剔掉。解决统一所有面的顶点顺序为逆时针从外部看。如果懒得改数据可以先关掉剔除确认形状正确后再逐个面检查。用glFrontFace(GL_CCW)可以指定逆时针为正面但前提是你的数据确实都是逆时针。4.2 现象旋转中心不在物体中心物体像在绕圈公转原因模型矩阵里先平移后旋转或者旋转轴没选对。比如model.translate(1, 0, 0); model.rotate(angle, 0, 1, 0);会让物体一边自转一边绕原点公转。解决如果想让物体绕自身中心旋转先旋转再平移或者确保顶点数据本身是以原点为中心的。QMatrix4x4的rotate和translate是右乘顺序很关键。我一般会在纸上画一遍变换顺序再写代码。4.3 现象旋转速度忽快忽慢帧率不稳定原因用定时器固定角度增量但定时器回调受系统负载影响实际间隔不均匀。或者paintGL()被调用的频率和定时器不同步。解决用QElapsedTimer记录上一帧时间计算 deltaTime角度增量写成角速度 * deltaTime。这样即使帧率波动旋转速度也是恒定的。角速度单位是度每秒比如 90 度每秒。4.4 现象高 DPI 屏幕上画面模糊或者只显示在左下角原因resizeGL里直接用w和h设置视口但 Qt 在高 DPI 下传入的是逻辑像素实际帧缓冲是物理像素两者差一个缩放因子。解决在resizeGL里乘上devicePixelRatio()void resizeGL(int w, int h) override { const qreal ratio devicePixelRatioF(); glViewport(0, 0, w * ratio, h * ratio); }投影矩阵的宽高比仍然用逻辑宽高因为那是给相机用的和像素无关。4.5 现象程序退出时崩溃或者资源没释放原因析构函数里没有makeCurrent()导致删除 OpenGL 资源时上下文不是 current 的。或者QOpenGLShaderProgram用裸指针 new 出来但没 delete。解决析构函数里先makeCurrent()删完资源再doneCurrent()。能用智能指针就用但注意QOpenGLShaderProgram的删除必须在上下文 current 时进行所以不能简单用std::unique_ptr托管而不控制时机。我一般还是手动管理但把释放逻辑集中在一个函数里。5. 进阶技巧用四元数做平滑旋转和鼠标交互5.1 为什么欧拉角做交互旋转会万向节死锁用model.rotate(angleX, 1, 0, 0); model.rotate(angleY, 0, 1, 0);这种方式做鼠标拖拽旋转当绕 X 轴转到 90 度时Y 轴和 Z 轴会重合丢失一个自由度表现为继续拖动时旋转方向突然跳变。这就是万向节死锁。做固定轴动画没问题做自由交互就会翻车。替代方案是用四元数QQuaternion累积旋转。鼠标移动时根据位移量构造一个绕屏幕坐标轴的旋转四元数然后和当前四元数相乘。这样无论怎么转都不会死锁。5.2 用 QQuaternion 累积旋转的代码骨架// 鼠标按下时记录位置 void mousePressEvent(QMouseEvent *e) override { m_lastPos e-pos(); } // 鼠标移动时更新旋转 void mouseMoveEvent(QMouseEvent *e) override { const QPoint delta e-pos() - m_lastPos; m_lastPos e-pos(); // 根据水平和垂直位移构造旋转轴和角度 QQuaternion rx QQuaternion::fromAxisAndAngle(0, 1, 0, delta.x() * 0.5f); QQuaternion ry QQuaternion::fromAxisAndAngle(1, 0, 0, delta.y() * 0.5f); m_rotation rx * ry * m_rotation; // 左乘相对于屏幕坐标 update(); } // paintGL 里构造模型矩阵 QMatrix4x4 model; model.rotate(m_rotation); // QMatrix4x4 支持直接传 QQuaternion逻辑说明fromAxisAndAngle的轴是屏幕坐标系下的轴水平拖动绕 Y 轴垂直拖动绕 X 轴。左乘表示旋转相对于当前视角右乘表示相对于物体自身。做轨迹球交互一般用左乘。角度系数 0.5 是灵敏度可以调。参数说明QQuaternion的乘法顺序和矩阵一致不满足交换律。m_rotation初始为单位四元数。如果发现旋转方向反了把角度取负或者轴取反。5.3 验证旋转是否正确的一个小技巧在paintGL()里临时把模型矩阵设为单位矩阵只保留视图和投影确认立方体在原点、正面朝向相机。然后逐步加旋转每加一个轴就转一圈看看有没有异常。这个笨办法能快速定位是矩阵顺序问题还是数据问题。我一般还会在片元着色器里用gl_FragCoord画个渐变确认整个视口都被覆盖排除视口设置错误。5.4 性能上的一个边界什么时候该换方案如果场景里只有几个立方体QOpenGLWidget 完全够用旋转流畅。但如果要画几万个三角形或者需要复杂的材质和阴影QOpenGLWidget 的默认帧缓冲和合成路径会成为瓶颈。这时候要考虑用 QOpenGLWindow 配合 QWidget::createWindowContainer或者直接上 Qt Quick 的 3D 模块。判断标准很简单如果paintGL()里的绘制调用超过几百次或者帧率掉到 30 以下就该考虑换方案了。我自己在这个方向上踩过最深的坑不是代码写错而是没搞清楚「旋转的是模型矩阵还是视图矩阵」。有一次做相机环绕效果我一直在改模型矩阵的旋转结果物体自转的同时相机没动看起来就是物体在乱晃。后来改成旋转视图矩阵的相机位置用球坐标算相机坐标才做出正确的环绕效果。这个教训让我养成了一个习惯动手写矩阵之前先在纸上画清楚哪个是物体、哪个是相机、哪个是投影三者的关系理清了再写代码比调试半天快得多。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
