当前位置：文档之家 › 浅谈怎样使用OpenGL绘制简单二维图形

浅谈怎样使用OpenGL绘制简单二维图形

  • 格式：pdf
  • 大小：189.13 KB
  • 文档页数：4

浅谈怎样使用OpenGL绘制简单二维图形
摘要：在上一章节中我们讲解了OpenGL的基本原理，以及怎样在MFC中配置OpenGL 绘图环境，而在这一章节我开始正式绘图（注意上一章节的内容严格的来讲是属于window 编程，而不属于OpenGL）。

我们先从一个简单例子开始讲解：绘制一个在视图中央，长宽各为视图长宽一半的矩形。

1.1 视图设置
与GDI二维函数库不同，OpenGL是一套三维绘图函数库。

使用GDI时，点的坐标对应的就是像素点坐标（已窗口左上角为(0,0)点），而OpenGL绘图时使用的是顶点坐标，要通过一系列转换最终换算成窗口的像素坐标，这种转换就是视图的设置，视图设置将在第三章详细讲解，本章只使用最简单的一种视图设置——2D正投影。

（视图设置的详细内容将在下一章讲解）
设置2D正投影所需的函数如下:
glMatrixMode(GL_PROJECTION);
将投影矩阵设置为当前矩阵(后续设置矩阵的函数都是对投影矩阵起作用)
glLoadIdentity();
将当前矩阵设置为单位矩阵
gluOrtho2D(left,right,bottom,top);
创建一个把二维坐标投影到屏幕上的矩阵，并把当前矩阵与它相乘。

裁剪区域为矩形，它的左下坐标为(left,bottom)，右上坐标为(right,top)。

glViewport(x,y,width,height);
在窗口中定义一个像素矩形，最终的图像将映射到这个矩形中。

（x,y）参数指定了视口的左下角，width和height表示这个视口矩形的宽度和高度。

在默认情况下，视口的初始值是(0,0,winWidth,winHeight)，其中winWidth和winHeight为对应窗口的大小。

在2D正投影模式下，OpenGL坐标于窗口显示的坐标对应逻辑如图 1 窗口映射关系所示：
图 1 窗口映射关系
1.2 绘制几何图元
设置完视图和投影模式之后，我们便可以开始绘图了，但在这之前还要注意清空视图，防止绘图效果累加，比如要画一个移动圆形，如果不将前一帧的绘图擦除，我们将看到的是一系列的圆形，而不是一个移动的圆形，这和使用GDI在每次绘图都要用背景将上一次的绘图效果覆盖一样。

在OpenGL中，擦除原有视图只需调用函数:
glClearColor(1.0,1.0,1.0,1.0f); //设置用于擦除的颜色，此例中使用的是白色
glClear(GL_COLOR_BUFFER_BIT); //擦除颜色缓冲区
OpenGL绘制几何图元的基本格式如下:
glBegin(GLenum mode /*几何图元类型*/); //开始绘制几何图元
glVertex2f( GLfloat x, GLfloat y); //设置此几何图元所包含的所有顶点坐标
glVertex2f( GLfloat x, GLfloat y);
······
glEnd(); //结束绘制几何图元
几何图元的类型和绘制效果如图 2 几何图元类型所示
图 2 几何图元类型
1.3 顶点数组
通过上一章节，我们知道OpenGL需要进行大量的函数调用才能完成对几何图元的渲染。

如绘制一条由2000个点相连的曲线，至少需要2002个函数调用。

首先调用1次glBegin()，然后为每个顶点调用1次函数glVertex2f，最后调用一次glEnd()。

函数调用本身就有一定的资源开销，如此多得函数调用必然会影响程序性能。

OpenGL提供了一些顶点数组函数，允许只用少数几个数组指定大量的与顶点相关的数据，并用少量的函数调用访问这些数据。

使用顶点数组对几何图形进行渲染需要3个步骤
1）激活（启用）最多可达8个数组，每个数组用于存储不同类型的数据：顶点坐标，表面法线，RGBA颜色，辅助颜色，颜色索引，雾坐标，纹理坐标以及多边形的边界
标志。

（本章只介绍顶点数组）
2）把数据放入数组中。

这些数组是通过它们的内存位置的地址（即指针）进行访问的。

3）用这些数据绘制几何图形
1.3.1 步骤1：启用数组
第一个步骤是调用glEnableClientState(GLenum cap)激活选择的数组，其参数是枚举值，表示要启用哪个数组，其值可以为
GL_VERTEX_ARRAY，//顶点坐标
GL_NORMAL_ARRAY, //表面法线
GL_COLOR_ARRAY, //RGBA颜色
GL_SECONDARY_COLOR_ARRAY，//辅助颜色
GL_INDEX_ARRAY, //颜色索引
GL_FOG_COORD_ARRAY, //雾坐标
GL_TEXTURE_COORD_ARRAY，//纹理坐标
GL_EDGE_FLAG_ARRAY, //多边形的边界标志
注意GL_COLOR_ARRAY数组和GL_INDEX_ARRAY不能同时启用
在使用完数组后要关闭相关数组，防止资源浪费。

为此，可以调用函数
glDisableClientState(GLenum cap)
1.3.2 步骤2：指定数组的数据
在启用了数组之后，边可以给数组指定数据了。

每个数组都有其对应的函数，这里只介绍设置顶点坐标数组的函数：
void glVertexPointer( Glint size, GLenum type, GLsizei stride, const GLvoid * pointer);
参数意义
size：每个顶点的坐标数量，它必须是2,3,或4。

type：指定数据的数据类型，如GL_FLOAT,GL_INT。

stride：连续顶点之间的字节偏移量，如果值为0，表示数组中的顶点是紧密相邻的pointer：数据指针
1.3.3 步骤3：解引用和渲染
指定完数组的数据，就可以使用这些数据绘图了，调用函数：
glDrawArrays (GLenum mode, GLint first, GLsizei count);
参数意义
mode：要绘制的几何图元类型，如GL_LINES，GL_POINTS
first：要使用的数组元素起点
count：要使用的数组元素个数
1.4 OpenGL函数的语法
OpenGL所有函数都使用前缀“gl”，并把组成函数的每个单词的首写字母用大写形式表示（例如：glClearColor（））。

类似的，OpenGL还定义了一些以前缀GL_开头的常量，所有的单词都使用大写形式，并以下划线分隔（例如GL_COLOR_BUFFER_BIT）OpenGL很多函数都有表示其参数个数和类型的后缀，如glVertex3f(),后缀为“3f”，其中“3”表示这个函数有三个参数，“f”表示所有参数的类型为32位浮点。

后缀中的字符与类型的相对关系如下表所示。

表1 函数后缀和参数数据类型。

合集下载

lecture5-二维绘制(MFC vs. OpenGL)_888005186(1)

lecture5-二维绘制(MFC vs. OpenGL)_888005186(1)

《计算机图形学基础》第五讲2D：MFC vs. OpenGL （光栅图形学II）刘永进第一个OpenGL程序main()主函数int _tmain(int argc, _TCHAR* argv[])([]) {return 0;}glutInit(&argc, (char**) argv);//该函数初始化工具包，//该函数初始化工具包//其参数是传送有关命令行信息的标准参数，//这里不会用到它们直线的扫描转换实例分析z计算机中如何存贮二维形状？•光滑曲线用折线段近似•二维形状用组折线段表示二维形状用一组折线段表示•在文件中存贮一组折线段•存贮数据结构214 169118文件中折线段的数目第一条折线段中的点数169 118174 120 179124第一条折线段的第一点第条折线段的第二点179 124 178 126第一条折线段的第二点。

5298 86 30492第二条折线段中的点数304 92 310 104 314119第二条折线段的第一点314 119 29 32435 32 435……21条折线段组成实例分析z计算机中如何存贮二维形状？•存贮的数据结构z如何读取并显示二维形状？•采用标准C++的流方法•采用GDI+在屏幕上绘制折线段I/Oz多个文件I/O 库•首先是传统的C/Unix 风格的库,由一些低级函数read()如read() 和open()组成;•其次是ANSI C 的<stdio.h> 库，它包含fopen()和fread()等函数。

等函数•其它的还有一些具备所有权的库或框架，比如MFC，它有很多自己的文件处理类。

•这些库一般都很难跨平台使用，而且缺乏类型安全支持。

C++提供提供了一个增强的面向对象的•标准C++ 提供提供了个增强的、面向对象的<fstream> 库。

<fstream> 提供了高级的自动控制机制和健壮性。

CFileDialog dlg(TRUE, NULL,L"*.dat",OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, L"*.dat", NULL);|if(dlg.DoModal() == IDOK) {fstream inStream;inStream.open(dlg.GetPathName(), ios::in);inStream open(dlg GetPathName()ios::in);if(inStream.fail()) return;inStream >> pl_num;if (pl_num==0 || pl_num>10000) {AfxMessageBox(L"The input data file is wrong!"); return;}clean_shape();shape = new polyline*[pl_num];[]unsigned int i, j, c_pt_num;for (j=0; j<pl_num; j++) { //read each polylineinStream >> c_pt_num;inStream>>c pt num;shape[j] = new polyline(c_pt_num);for (i=0; i<c_pt_num; i++)inStream >> shape[j]->pt_array[i].x >> shape[j]->pt_array[i].y;}inStream.close();Invalidate();}Windows GDI＋编程系统编(g p)¾GDI (graphical device interface)图形设备界面¾GDI是位于应用程序与不同硬件之间的中间层¾GDI的.net版本叫做GDI+：易用性更好具有强大的图像处理功能¾易用性更好，具有强大的图像处理功能实例分析¾第一步：安装并运行Microsoft Visual Studio 2005i f i l S di200,（Team Edition, Version8.0）安装并运行Microsoft Visual Studio 2008（Team Edition, Version 9.0）Team Edition,Version9.0¾选择File →New→ProjectMFC MFC Application ¾选择MFC 及对应的MFC Application ¾输入程序名称GDI＋，OK后生成单文档应用程序GDI作图¾在CGDIView类中找到OnDraw函数¾添加以下代码，即可使用GDI作图添加以下代码即可使用void CGDIView::OnDraw(CDC* pDC){CGDIDoc* pDoc = GetDocument();CGDID*D=G tD u nt()ASSERT_VALID(pDoc);if (!pDoc)if(!pDoc)return;// TODO: add draw code for native data here//GDI codeCPen newPen( PS_SOLID, 3, RGB(255, 0, 0) );CPen newPen(PS SOLID3RGB(25500));CPen* pOldPen = pDC->SelectObject( &newPen );pDC>MoveTo( 20, 10 );pDC->MoveTo(20,10);pDC->LineTo( 200, 100);pDC->SelectObject( pOldPen );}GDI＋作图GDI+的初始化¾在应用程序的stdafx.h文件中添加代码＃include “gdiplus.h”P j t P t ¾在菜单中选择Project →Propertyp g p ¾在Linker →Input 中加入gdiplus.lib¾在程序的应用类(CGDIApp)中，添加一个成员变量ULONG_PTR m_gdiplusToken;¾在应用类中添加ExitInstance函数，并添加以下代码：int CGDIApp::ExitInstance(void){Gdiplus::GdiplusShutdown(m_gdiplusToken);return CWinApp::ExitInstance();}¾在应用类的InitInstance函数中添加GDI+的初始化代码：的初始化代码……Gdiplus::GdiplusStartupInput gdiplusStartupInput; Gdiplus::GdiplusStartup(&m_gdiplusToken,&gdiplusStartupInput, NULL);&gdiplusStartupInput NULL);……¾现在可以在View类OnDraw函数中使用GDI+的绘制代码：……//GDI codeCPen newPen( PS_SOLID, 3, RGB(255, 0, 0) ); CP n n P n(PS SOLID3RGB(25500)) CPen* pOldPen = pDC->SelectObject( &newPen ); pDC>MoveTo( 20, 10 );pDC->MoveTo(20,10);pDC->LineTo( 200, 100);pDC->SelectObject( pOldPen );……//GDI+ codeusing namespace Gdiplus; // 使用名称空间using namespace Gdiplus;//使用名称空间Graphics graphics( pDC->m_hDC );Pen pen(Color::Red,3);Pen pen(Color::Red,3);graphics.DrawLine(&pen, 20,10,200,100);¾GDI是位于应用程序与不同硬件之间的中间层GDI是个中低层API,你还可能要¾是一个中低层API知道少量硬件(设备)信息¾GDI+是一个高层的API，你完全不必知道设备¾GDI+功能强大，以下仅举几例功能强大以下仅举几例using namespace Gdiplus; // 使用名称空间using namespace Gdiplus;//使用名称空间Graphics graphics( pDC->m_hDC );Pen pen(Color(255, 0, 0, 255), 15);pen.SetDashStyle(DashStyleDash); graphics.DrawLine(&pen, 0, 50, 400, 150); graphics DrawLine(&pen050400150);pen.SetDashStyle(DashStyleDot);graphics.DrawLine(&pen, 0, 80, 400, 180);h()pen.SetDashStyle(DashStyleDashDot); graphics.DrawLine(&pen, 0, 110, 400, 210);在工程应用中预定义风格的画笔有时并不能满足实际的需求在工程应用中，预定义风格的画笔有时并不能满足实际的需求，可以通过SetDashPattern函数自己定义新线型using namespace Gdiplus; // 使用名称空间Graphics graphics( pDC->m_hDC );REAL dashVals[4] = {REAL d hV l[4]{2, // 短划长为2, // 间隔为,//间隔为15, // 短划长为2}; // 间隔为P(C l(255000)5)Pen pen(Color(255, 0, 0, 0), 5);pen.SetDashPattern(dashVals, 4);graphics.DrawLine(&pen, 5, 20, 405, 200);GDI+的Pen类还提供SetStartCap和SetEndCap方法来设置一条直式线的起始端和终止端的样式using namespace Gdiplus;Graphics graphics( pDC->m_hDC );Pen pen( Color( 255, 0, 0, 255 ), 15);pen.SetStartCap(LineCapFlat);pen.SetEndCap(LineCapSquare);graphics.DrawLine(&pen, 50, 50, 250, 50);pen SetStartCap(LineCapRound);pen.SetStartCap(LineCapRound );pen.SetEndCap(LineCapRoundAnchor);graphics.DrawLine(&pen, 50, 100, 250, 100);pen.SetStartCap(LineCapDiamondAnchor);pen.SetEndCap(LineCapArrowAnchor);pen SetEndCap(LineCapArrowAnchor);graphics.DrawLine(&pen, 50, 150, 250, 150);画刷和渐变¾画刷用于指定填充的特性¾GDI+为填充色和阴影线画刷提供了SolidBrush和HatchBrush类水平线、垂直线、上斜线、下斜线、十字线、交叉线、实心菱形提供了和¾GDI+LinearGradientBrushPathGradientBrush类分别用来创建一个直线渐变和路径渐变画刷。

实验一 OPENGL中的二维编程

实验一 OPENGL中的二维编程

实验一OPENGL中的二维编程姓名叶传军学号 E11414103 得分一.实验题目1练习基本的openGL编程方法。

（1）配置openGL，能在VC下通过编译。

（2）阅读并运行simple.c，熟悉最简单的openGL程序结构。

（3）阅读并运行改进的simple2.c，掌握openGL程序的通用结构。

给simple2.c中的函数加注释。

可尝试做如下修改：（a）改变窗口的位置，尺寸，标题；（b）改变窗口背景色和矩形颜色；（c）改变矩形的尺寸和其在窗口中的位置，还可以只显示矩形的一部分（通过设置正投影参数和矩形四个顶点的坐标来完成）；2发挥想象，编程实现在窗口中绘制若干图形及设置它们的属性，并回答问题：（1）绘制若干个点，分别设置每个点的颜色和大小。

思考题1：glPointSize()可以放在glBegin()和glEnd()函数对之间吗？（2）绘制若干条直线段。

设置线段的颜色，线型和线宽。

思考题1：以下命令会显示什么样的线段?glEnable(GL_LINE_STIPPLE)；glColor3f(0.0, 1.0, 0.0);glLineWidth(2.0);glLineStipple(3, 0xcccc);glDisable(GL_LINE_STIPPLE)；思考题2：以下命令会显示什么样的线段?glShadeModel(GL_SMOOTH);glBegin(GL_LINES);glColor3f(1.0, 0.0, 0.0);glVertex2f(0.0, 0.5);glColor3f(0.0, 0.0, 1.0);glVertex2f(0.5, -0.5);glEnd();将glShadeModel(GL_SMOOTH)改为glShadeModel(GL_FLAT)，其余命令不变，结果又会如何？（3）绘制若干个多边形。

设置多边形的颜色，显示模式，隐藏某些边。

思考题1：以下命令会显示什么样的多边形?glShadeModel(GL_SMOOTH);glBegin(GL_POLYGON);glColor3f(1.0, 0.0, 0.0);glVertex2f(-0.5, -0.5);glColor3f(0.0, 1.0, 0.0);glVertex2f(-0.5, 0.5);glColor3f(0.0, 0.0, 1.0);glVertex2f(0.5, 0.5);glColor3f(1.0, 1.0, 0.0);glVertex2f(0.5, -0.5);glEnd();将glShadeModel(GL_SMOOTH)改为glShadeModel(GL_FLAT)，其余命令不变，结果又会如何？将glBegin(GL_POLYGON)改为glBegin(GL_QUADS)，分别尝试在SMOOTH和FLAT模式下的结果。

如何使用OpenGLES实现2D游戏

如何使用OpenGLES实现2D游戏

如何使用OpenGLES实现2D游戏随着技术的不断发展，越来越多的游戏开始采用OpenGL ES来进行开发。

尤其是在移动设备上，OpenGL ES无疑是最为常用的游戏开发工具之一。

那么，如何使用OpenGL ES实现2D游戏呢？以下是几条实用的建议：
1. 确定游戏类型
在开始开发之前，我们应该明确该游戏的类型。

这有助于我们为游戏选择正确的绘图方式和技术方案。

例如，平面、像素或者是矢量图形。

2. 选择正确的图像格式
不同的图像格式对OpenGL ES的性能影响是不同的。

对大多数的游戏而言，PNG和JPEG是最为理想的图像格式。

3. 集成物理引擎
集成物理引擎有助于增强游戏性，并使游戏更加真实和有趣。

Box2D是最为流行的物理引擎之一，它能够提供非常出色的性能和功能。

4. 使用OpenGL ES 2.0
OpenGL ES 2.0是目前最为流行的版本，它提供了更为现代和高级的特性。

例如，分层渲染、法线贴图、不透明物体的深度测试，等等。

5. 优化渲染效率
渲染效率是游戏性能的关键。

优化渲染效率意味着要通过各种方式来减少围绕每个渲染步骤的内存和CPU使用量。

这可以通过使用低多边形模型、减少纹理数量、避免超过每帧渲染的任务数量以及避免在频繁交换数据时卡住游戏等方式来实现。

总而言之，使用OpenGL ES来制作2D游戏是非常有趣和有挑战的。

通过上述建议，您将能够在开发过程中更好地理解并运用OpenGL ES，同时也可以优化您的游戏性能，使游戏玩家能够享受到更欣赏游戏的体验。

OpenGL中的二维编程

OpenGL中的二维编程


GLUT默认值
glutDisplayMode
GLUT_SNGLE单缓冲
glutInitWindowSize glutInitWindowPosition
OpenGL中的颜色
❖ RGB或RGBA ❖ 0 ～ 1， 也可以用 0 ～ 255来表示 ❖ （1.0， 0.0， 0.0） 红色 ❖ A -> alpha表示不透明度 ❖ 1 不透明
视口
❖ viewport是指视窗的大小，就好像我们的眼睛 ❖ glViewport
❖ 视景体越大，里面的物体显得越小
改变参数 -> example
一个点的坐标是(0,0,0)就是在平行六面体的中间， 也就是在viewport的中间;
点的坐标是(-5.0,-5.0,0),是在平行六面体的左下 角，也就是在viewport的左下角。
gluOrtho2D
❖ GLU库函数
void gluOrtho2D( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top );
❖
GLfloat vtex4[] = {0.5, -0.5};
❖
glBegin(GL_POLYGON);
❖
glVertex2fv(vtex1);
❖
glVertex2fv(vtex2);
❖
glVertex2fv(vtex3);
❖
glVertex2fv(vtex4);
❖
glEnd();
绘制
❖ glBegin(GL_POLYGON);
颜色的设置
❖ glColor*() ❖ glClearColor() ❖ 出现v表示接受的参数为数组 ❖ glClearColor只接受RGBA， float型 ❖ GLclampf -> float