[Qt教程] 第48篇 进阶(八) 3D绘图简介

简介:
楼主
  发表于 2013-10-7 09:44:37  | 查看: 184 | 回复: 0
3D绘图简介



版权声明

该文章原创于 作者 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.0 1.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();
}


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



01.jpg



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



二、添加颜色

        上面的例子中图形都是白色的,可以使用glColor3f() 函数来设置绘制时使用的颜色,它的三个参数用来指定RGB (红绿蓝)颜色分量,取值范围为0.0 1.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();
}



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


02.jpg




三、实现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)点。图形的旋转满足右手定则,就是用右手握住旋转轴,大拇指指向旋转轴所指的方向,然后其他四个手指所指的方向就是要旋转的方向。再往下面,分别绘制了三个正方形作为正方体的三个面,大家还可以再补充上其他几个面。运行程序,效果如下图所示。


03.jpg





结语

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




涉及到的代码:  myOpenGL.rar (1.38 KB, 下载次数: 1) 
相关文章
|
2月前
|
数据可视化 API vr&ar
探索Qt 3D之旅:从基础到实战,打造引人入胜的三维界面与应用
探索Qt 3D之旅:从基础到实战,打造引人入胜的三维界面与应用
498 2
|
2月前
|
数据可视化 图形学 C++
C++ Qt开发:Charts绘图组件概述
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`QCharts`二维绘图组件的常用方法及灵活运用。Qt Charts 提供了一个强大且易于使用的工具集,用于在 Qt 应用程序中创建各种类型的图表和图形可视化,该模块提供了多种类型的图表,包括折线图、散点图、条形图、饼图等。这使得开发人员能够轻松地将数据以直观的方式呈现给用户,增强应用程序的可视化效果。
105 0
C++ Qt开发:Charts绘图组件概述
|
2月前
QT4.7版本的OPENGL的3D旋转模型例子
QT4.7版本的OPENGL的3D旋转模型例子
|
27天前
Qt绘图(线条、椭圆、矩形、图片滚动)
Qt绘图(线条、椭圆、矩形、图片滚动)
22 3
|
1月前
|
IDE 开发工具 数据安全/隐私保护
【干货】Qt Creator快速下载、安装、使用教程
【干货】Qt Creator快速下载、安装、使用教程
166 2
Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
|
2月前
|
缓存 Linux 定位技术
Qt绘图指南:掌握高效、美观的GUI设计之道
Qt绘图指南:掌握高效、美观的GUI设计之道
668 1
|
2月前
|
Linux API iOS开发
【Qt 渲染引擎】一文带你了解qt的三种 渲染引擎,包括栅格引擎(Raster)、OpenGL 和本地绘图系统
【Qt 渲染引擎】一文带你了解qt的三种 渲染引擎,包括栅格引擎(Raster)、OpenGL 和本地绘图系统
91 0
|
2月前
|
数据可视化 算法 C++
C++ cmake工程引入qt6和Quick 教程
C++ cmake工程引入qt6和Quick 教程
176 0
|
2月前
Qt6学习笔记十三(绘图)
Qt6学习笔记十三(绘图)
55 0

相关实验场景

更多

推荐镜像

更多