找回密码
 立即注册
收起左侧

第48篇 进阶(八) 3D绘图简介

17
回复
28680
查看
[复制链接]
累计签到:1564 天
连续签到:1 天
来源: 2013-10-7 09:44:37 显示全部楼层 |阅读模式
3D绘图简介



版权声明

该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处!




导语


OpenGL是一个跨平台的用来渲染3D图形的标准API。在Qt中提供了QtOpenGL模块,从而很轻松地实现了在Qt应用程序中使用OpenGL,这主要是在QGLWidget类中完成的。因为3D绘图涉及到了专业方面的内容,我们下面只是讲解最简单的使用,向大家演示在Qt中如何显示3D图形。如果大家想深入学习openGL绘图,可以查看网上比较经典的nehe的OpenGL教程,为了方便大家下载,我们在网站上提供了下载连接。





环境:Windows Xp + Qt 4.8.5+QtCreator2.8.0




目录


一、绘制简单的图形
二、添加颜色
三、实现3D效果





正文


一、绘制简单的图形

QGLWidget类是一个用来渲染OpenGL图形的部件,它提供了在Qt应用程序中显示OpenGL图形的功能。我们只需要继承该类,然后像使用其他QWidget部件一样来使用它。QGLWidget提供了三个虚函数,可以在子类中通过重新实现它们来执行典型的OpenGL任务:
initializeGL():设置OpenGL渲染环境,定义显示列表等。该函数只在第一次调用resizeGL()或paintGL()前被调用一次;
resizeGL():设置OpenGL的视口、投影等。每次部件改变大小时都会调用该函数;
paintGL():渲染OpenGL场景。每当部件需要更新时都会调用该函数。



下面先来看一个简单的例子。



1.新建空的Qt项目,项目名称为myOpenGL,完成后向项目中添加新的C++ Class,类名为MyGLWidget,基类修改为QGLWidget,类型信息选择“继承自QWidget”。



2.完成后打开myOpenGL.pro,添加一行代码:
QT += opengl
然后保存该文件。



3.打开myglwidget.h文件,添加函数声明:
protected:
    void initializeGL();
    void resizeGL(int w, int h);
    void paintGL();



4. 再到myglwidget.cpp文件中先添加头文件包含:
#include <GL/glu.h>

然后添加这三个函数的定义:
void MyGLWidget::initializeGL()
{
   glClearColor(0.0, 0.0, 0.0, 0.0);
   glShadeModel(GL_SMOOTH);
   glClearDepth(1.0);
   glEnable(GL_DEPTH_TEST);
}


       glClearColor()函数用来设置清除屏幕时使用的颜色,其四个参数分别用来设置红、绿、蓝颜色分量和Alpha值,它们的取值范围都是0.01.0,这里四个参数都为0,表示纯黑色。然后设置了阴影平滑(smooth shading),这样可以使色彩和光照更加精细。最后设置了深度缓存和启用深度测试,用来记录图形在屏幕内的深度值。

void MyGLWidget::resizeGL(int w, int h)
{
   glViewport(0, 0, (GLint)w, (GLint)h);
   glMatrixMode(GL_PROJECTION);
   glLoadIdentity();
   gluPerspective(45.0, (GLfloat)w/(GLfloat)h, 0.1, 100.0);
   glMatrixMode(GL_MODELVIEW);
   glLoadIdentity();
}


       glViewport()函数用来设置视口的大小。然后使用glMatrixMode()设置了投影矩阵,投影矩阵用来为场景增加**,后面使用了glLoadIdentity()重置投影矩阵,这样可以将投影矩阵恢复到初始状态。gluPerspective()用来设置**投影矩阵,这里设置视角为45度,纵横比为窗口的纵横比,最近的位置为0.1,最远的位置为100,这两个值是场景中所能绘制的深度的临界值。大家可以想象,离我们眼睛比较近的东西看起来比较大,而比较远的东西看起来就比较小。最后设置并重置了模型视图矩阵。

void MyGLWidget::paintGL()
{
   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
   glLoadIdentity();
   // 绘制三角形
   glTranslatef(-2.0, 0.0, -6.0);
   glBegin(GL_TRIANGLES);  
   glVertex3f(0.0, 1.0, 0.0);
   glVertex3f(-1.0, -1.0, 0.0);
   glVertex3f(1.0, -1.0, 0.0);
   glEnd();
   // 绘制四边形
   glTranslatef(4.0, 0.0, 0.0);
   glBegin(GL_QUADS);   
   glVertex3f(-1.0, 1.0, 0.0);
   glVertex3f(1.0, 1.0, 0.0);
   glVertex3f(1.0, -1.0, 0.0);
   glVertex3f(-1.0, -1.0, 0.0);
   glEnd();
}


       在开始绘制以前,先要使用glClear()清除屏幕和深度缓存。然后重置了模型视图矩阵,这样便将当前点移动到了窗口的中心,现在窗口中心即为坐标原点,X轴从左到右,Y轴从下到上,Z轴从里到外。完成这两步以后就可以进行图形的绘制了,在图形绘制开始时,一般会使用glTranslatef()来移动坐标原点,它是相对于当前点来移动的,比如这里先将坐标原点左移2.0,向里移6.0,然后绘制了三角形(TRIANGLES)。绘制从glBegin()开始,到glEnd()结束,使用glVertex3f()来设置各个顶点的坐标,顶点的绘制顺序可以是顺时针,也可以是逆时针。要注意逆时针绘制出来的是正面,而顺时针绘制出来的是反面,这一点在后面的纹理贴图部分会显示出来。当绘制完三角形以后,又将原点相对于当前点向右移动了4.0,然后绘制了一个四边形(QUADS)。



5.最后再向项目中添加main.cpp文件,更改内容如下:


#include <QApplication>
#include "myglwidget.h"
int main(int argc, char *argv[])
{
   QApplication app(argc,argv);
   MyGLWidget w;
   w.resize(400, 300);
   w.show();
   return app.exec();
}


       现在运行程序,效果如下图所示。






       可以看到,在Qt中只需要实现这三个函数就可以进行OpenGL绘图了。



二、添加颜色

       上面的例子中图形都是白色的,可以使用glColor3f()函数来设置绘制时使用的颜色,它的三个参数用来指定RGB(红绿蓝)颜色分量,取值范围为0.01.0。我们可以在绘制一个顶点时指定使用的颜色,如果后面不再设置其他颜色,那么所有的顶点都将使用同样的颜色。
       下面我们将图形的绘制代码更改如下:



void MyGLWidget::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(-2.0, 0.0, -6.0);
    glBegin(GL_TRIANGLES);
    glColor3f(1.0, 0.0, 0.0);
    glVertex3f(0.0, 1.0, 0.0);
    glColor3f(0.0, 1.0, 0.0);
    glVertex3f(-1.0, -1.0, 0.0);
    glColor3f(0.0, 0.0, 1.0);
    glVertex3f(1.0, -1.0, 0.0);
    glEnd();
    glTranslatef(4.0, 0.0, 0.0);
    glBegin(GL_QUADS);
    glColor3f(1.0, 1.0, 0.0);
    glVertex3f(-1.0, 1.0, 0.0);
    glVertex3f(1.0, 1.0, 0.0);
    glVertex3f(1.0, -1.0, 0.0);
    glVertex3f(-1.0, -1.0, 0.0);
    glEnd();
}



可以看到三角形的三个角分别是红色、绿色和蓝色,而正方形是纯黄色的。如下图所示。






三、实现3D效果



       前面的图形都还是平面图形,下面添加代码来实现三维立体效果。将程序中绘制图形的代码更改为:

void MyGLWidget::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(0.0, 0.0, -6.0);
    glRotatef(45, 0.0, 1.0, 0.0);
    glBegin(GL_QUADS);
    // 上面
    glColor3f(1.0, 0.0, 0.0);
    glVertex3f(1.0, 1.0, 1.0);
    glVertex3f(1.0, 1.0, -1.0);
    glVertex3f(-1.0, 1.0, -1.0);
    glVertex3f(-1.0, 1.0, 1.0);
    // 下面
    glColor3f(0.0, 1.0, 0.0);
    glVertex3f(1.0, -1.0, 1.0);
    glVertex3f(1.0, -1.0, -1.0);
    glVertex3f(-1.0, -1.0, -1.0);
    glVertex3f(-1.0, -1.0, 1.0);
    // 前面
    glColor3f(0.0, 0.0, 1.0);
    glVertex3f(1.0, 1.0, 1.0);
    glVertex3f(-1.0, 1.0, 1.0);
    glVertex3f(-1.0, -1.0, 1.0);
    glVertex3f(1.0, -1.0, 1.0);
    glEnd();
}



这里使用了glRotatef(angle, x, y, z)函数来对坐标轴进行旋转,它的第一个参数是旋转的角度,后面三个参数用来确定旋转轴向量。旋转轴经过原点,指向(x,y,z)点。图形的旋转满足右手定则,就是用右手握住旋转轴,大拇指指向旋转轴所指的方向,然后其他四个手指所指的方向就是要旋转的方向。再往下面,分别绘制了三个正方形作为正方体的三个面,大家还可以再补充上其他几个面。运行程序,效果如下图所示。







结语

       这一节只是向大家简单演示了如何在Qt中进行openGL编程来实现3D绘图,目的只是让大家看到在Qt中进行3D绘图是非常简单的。如果想进一步应实现更炫酷的效果,就需要拥有openGL的专业知识了。




涉及到的代码:




上一篇:   

下一篇:   

返回:系列教程目录    





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
参与人数 1人气 +2 收起 理由
冬临m雪诺 + 2 很实用!

查看全部评分总评分 : 人气 +2

回复

使用道具 举报

累计签到:6 天
连续签到:1 天
2017-2-28 17:20:45 显示全部楼层
如果实在win32环境下
.pro文件中加入
win32-g++ {
    LIBS += -lopengl32 -lglu32
}
回复 支持 1 反对 0

使用道具 举报

累计签到:3 天
连续签到:1 天
2014-4-28 18:07:01 显示全部楼层
新手!!过来学习学习了~~~
回复 支持 反对

使用道具 举报

累计签到:3 天
连续签到:1 天
2014-5-30 23:27:05 显示全部楼层
学的好痛苦啊。。
回复 支持 反对

使用道具 举报

累计签到:11 天
连续签到:1 天
2014-7-1 21:49:57 显示全部楼层
越到后面,跟进学习的人越少啊 。大家继续努力啊。
回复 支持 反对

使用道具 举报

累计签到:2 天
连续签到:1 天
2014-11-27 19:20:28 显示全部楼层
请问一下,如果想要在graphics view 里面或者在窗口的一部分显示3D可以怎么做啊?新手不太了解
回复 支持 反对

使用道具 举报

累计签到:9 天
连续签到:1 天
2014-12-2 15:45:34 显示全部楼层
graphics view 里面或者在窗口的一部分显示3D,我也有相同的问题,如何去做。
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2014-12-4 12:22:19 显示全部楼层
xiong_niu 发表于 2014-11-27 19:20
请问一下,如果想要在graphics view 里面或者在窗口的一部分显示3D可以怎么做啊?新手不太了解 ...

直接在普通的QWidget中调用界面即可。例如:
Form::Form(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Form)
{
    ui->setupUi(this);
    widget = new MyGLWidget(this);
    widget->resize(400, 300);
    widget->move(100, 100);
}
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2014-12-4 12:22:26 显示全部楼层
漓江烟雨 发表于 2014-12-2 15:45
graphics view 里面或者在窗口的一部分显示3D,我也有相同的问题,如何去做。

直接在普通的QWidget中调用界面即可。例如:
Form::Form(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Form)
{
    ui->setupUi(this);
    widget = new MyGLWidget(this);
    widget->resize(400, 300);
    widget->move(100, 100);
}
回复 支持 反对

使用道具 举报

累计签到:7 天
连续签到:1 天
2015-1-10 20:44:37 显示全部楼层
搞这坐标真麻烦.........
回复 支持 反对

使用道具 举报

尚未签到

2015-1-17 14:32:30 显示全部楼层
学习了,谢谢楼主........
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2015-3-3 09:54:57 显示全部楼层
特意来看看
新手!!过来学习学习了~~~

回复 支持 反对

使用道具 举报

累计签到:8 天
连续签到:1 天
2016-10-21 20:46:58 显示全部楼层
老师,您好,我下载您提供的代码,在我的机器上跑,提示undefined reference to '_imp_glClearColor@16'等
。我用的版本是QT5.7 32位 mingw,谢谢。
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2016-10-22 11:47:25 显示全部楼层
LittleQun 发表于 2016-10-21 20:46
老师,您好,我下载您提供的代码,在我的机器上跑,提示undefined reference to '_imp_glClearColor@16'等
...

代码是基于Qt 4的,Qt 5会有问题,而且3D部分内容更改较大,以前的代码都无法使用了。
回复 支持 反对

使用道具 举报

累计签到:42 天
连续签到:1 天
2017-4-15 07:45:35 显示全部楼层
本帖最后由 Qiang_Yan 于 2017-4-15 07:54 编辑

向yafeilinux 前辈讨点建议:我手头有一个几年前写的Opengl的科学数据显示程序,使用很老的GL写的,使用GLUT来做窗口显示和鼠标的左键、右键、滚轮交互来实现图形的旋转、缩放、平移。现在我需要把这部分功能移植到Qt框架下,我发现您在《Qt Creator快速入门》第2版12章中的例子(跟这里这里的程序一致)里paintGL函数里面的内容与原程序的display函数非常类似,但是缺少鼠标事件和图像缩放、平移的相应功能。想向您请教的是:1)、如果完全移植GLUT到qt中会不会有问题,尤其是讨厌的glutMainLoop()函数;2)、如果使用qt的event来实现鼠标控制三维图像的旋转、缩放、平移的话,有没有好的例子可以参考?3)、您在第三版里貌似推荐着色器画图(没有买到书,但下了源码),我也去学习了一点openGL的专业知识,但不得要领,由于东西要交得很急(最近几天),您觉得有没有必要抛弃以前的代码,重新写?非常感谢您的书籍和例程!
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2017-4-26 10:39:26 显示全部楼层
Qiang_Yan 发表于 2017-4-15 07:45
向yafeilinux 前辈讨点建议:我手头有一个几年前写的Opengl的科学数据显示程序,使用很老的GL写的,使用GLU ...

书中的例子有键盘控制图形旋转的,直接换成鼠标事件即可。如果没有OpenGL着色器编程基础,建议使用老版本。
回复 支持 反对

使用道具 举报

累计签到:42 天
连续签到:1 天
2017-4-28 06:18:03 显示全部楼层
yafeilinux 发表于 2017-4-26 10:39
书中的例子有键盘控制图形旋转的,直接换成鼠标事件即可。如果没有OpenGL着色器编程基础,建议使用老版本 ...

非常感谢您的回复,问题已经解决了
回复 支持 反对

使用道具 举报

尚未签到

2017-11-16 14:46:36 显示全部楼层
学习了,谢谢楼主........
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了