美文网首页
绘制基本几何图形

绘制基本几何图形

作者: simulationer | 来源:发表于2016-11-11 14:20 被阅读120次

    基本概念。

    点、直线和多边形

    数学中有点、直线和多边形的概念,但这些概念在计算机中会有所不同。

    数学上的点,只有位置,没有大小。但在计算机中,无论计算精度如何提高,始终不能表示一个无穷小的点。另一方面,无论图形输出设备(例如,显示器)如何精确,始终不能输出一个无穷小的点。一般情况下,OpenGL中的点将被画成单个的像素,虽然它可能足够小,但并不会是无穷小。同一像素上,OpenGL可以绘制许多坐标只有稍微不同的点,但该像素的具体颜色将取决于OpenGL的实现。当然,过度的注意细节就是钻牛角尖,我们大可不必花费过多的精力去研究“多个点如何画到同一像素上”。

    同样的,数学上的直线没有宽度,但OpenGL的直线则是有宽度的。同时,OpenGL的直线必须是有限长度,而不是像数学概念那样是无限的。可以认为,OpenGL的“直线”概念与数学上的“线段”接近,它可以由两个端点来确定。

    多边形是由多条线段首尾相连而形成的闭合区域。OpenGL规定,一个多边形必须是一个“凸多边形”(其定义为:多边形内任意两点所确定的线段都在多边形内,由此也可以推导出,凸多边形不能是空心的)。多边形可以由其边的端点(这里可称为顶点)来确定。(注意:如果使用的多边形不是凸多边形,则最后输出的效果是未定义的,OpenGL为了效率,放宽了检查,这可能导致显示错误。要避免这个错误,尽量使用三角形,因为三角形都是凸多边形)。

    可以想象,通过点、直线和多边形,就可以组合成各种几何图形。甚至于,你可以把一段弧看成是很多短的直线段相连,这些直线段足够短,以至于其长度小于一个像素的宽度。这样一来弧和圆也可以表示出来了。通过位于不同平面的相连的小多边形,我们还可以组成一个“曲面”。

    在OpenGL中指定顶点

    由以上的讨论可以知道,“点”是一切的基础。如何指定一个点呢?OpenGL提供了一系列函数。它们都以glVertex开头,后面跟一个数字和1~2个字母。例如:

    glVertex2d
    glVertex2f
    glVertex3f
    glVertex3fv
    ...
    

    数字表示参数的个数,2表示有两个参数,3表示三个,4表示四个。字母表示参数的类型,

    • s表示16位整数(OpenGL中将这个类型定义为GLshort),
    • i表示32位整数(OpenGL中将这个类型定义为GLintGLsizei),
    • f表示32位浮点数(OpenGL中将这个类型定义为GLfloatGLclampf),
    • d表示64位浮点数(OpenGL中将这个类型定义为GLdoubleGLclampd
    • v表示传递的几个参数将使用指针的方式,见下面的例子。

    这些函数除了参数的类型和个数不同以外,功能是相同的。例如,以下五个代码段的功能是等效的:

    glVertex2i(1, 3);
    glVertex2f(1.0f, 3.0f);
    glVertex3f(1.0f, 3.0f, 0.0f);
    glVertex4f(1.0f, 3.0f, 0.0f, 1.0f);
    
    GLfloat VertexArr3[] = {1.0f, 3.0f, 0.0f};     
    glVertex3fv(VertexArr3);
    

    以后我们将用glVertex*来表示这一系列函数。注意:OpenGL的很多函数都是采用这样的形式,一个相同的前缀再加上参数说明标记,这一点会随着学习的深入而有更多的体会。

    开始绘制

    假设已经指定了若干顶点,那么OpenGL是如何知道拿这些顶点来干什么呢?是一个一个的画出来,还是连成线?或者构成一个多边形?或者做其它什么事情?为了解决这一问题,OpenGL要求:指定顶点的命令必须包含在glBegin函数之后,glEnd函数之前(否则指定的顶点将被忽略)。并由glBegin来指明如何使用这些点。例如:

    glBegin(GL_POINTS);     
        glVertex2f(0.0f, 0.0f);     
        glVertex2f(0.5f, 0.0f);
    glEnd();
    

    则这两个点将分别被画出来。如果将GL_POINTS替换成GL_LINES,则两个点将被认为是直线的两个端点,OpenGL将会画出一条直线。

    我们还可以指定更多的顶点,然后画出更复杂的图形。

    除了GL_POINTSGL_LINES,还有 GL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FAN 等,每种方式的效果见下图:

    相同点不同模式绘制效果

    上述图形的代码如下。

    void myDisplay()
    {
        glClear(GL_COLOR_BUFFER_BIT);
        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        gluPerspective(90, 5, 1, 10);
        glMatrixMode(GL_MODELVIEW);
        glLoadIdentity();
        gluLookAt(0, 0, 2.0, 0, 0, 0, 0, 1, 0);
        glPointSize(2.0f);
        glTranslatef(-8, 0.0f, 0.0f);
        glBegin(GL_POINTS);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glTranslatef(3, 0.0f, 0.0f);
        glBegin(GL_LINES);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glTranslatef(3, 0.0f, 0.0f);
        glBegin(GL_LINE_STRIP);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glTranslatef(3, 0.0f, 0.0f);
        glBegin(GL_LINE_LOOP);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glTranslatef(3, 0.0f, 0.0f);
        glBegin(GL_TRIANGLES);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glTranslatef(3, 0.0f, 0.0f);
        glBegin(GL_TRIANGLE_STRIP);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glBegin(GL_TRIANGLE_FAN);
        glVertex2f(-0.8f, -0.8f);
        glVertex2f(0.4f, -0.8f);
        glVertex2f(0.9f, 0.0f);
        glVertex2f(0.5f, 0.4f);
        glVertex2f(-0.6f, 0.7f);
        glEnd();
        glFlush();
    }
    

    其中一些gl函数看字面意思很好理解,比如glTranslatef表示移动视图。具体用法在后面很快就会了解,此处不必过分纠结。

    一些简单的例子

    绘制一个圆

    正四边形,正五边形,正六边形,……,直到正n边形,当n越大时,这个图形就越接近圆当n大到一定程度后,人眼将无法把它跟真正的圆相区别这时我们已经成功的画出了一个“圆”(注:画圆的方法很多,这里使用的是比较简单,但效率较低的一种)。

    试修改下面的const int n的值,观察当n=3,4,5,8,10,15,20,30,50等不同数值时输出的变化情况将GL_POLYGON改为GL_LINE_LOOPGL_POINTS等其它方式,观察输出的变化情况。

    #include <math.h>
    const int n = 20;
    const GLfloat R = 0.5f;
    const GLfloat Pi = 3.1415926536f;
    void myDisplay(void)
    {
        int i;
        glClear(GL_COLOR_BUFFER_BIT);
        glBegin(GL_POLYGON);
        for (i = 0; i<n; ++i)
            glVertex2f(R*cos(2 * Pi / n*i), R*sin(2 * Pi / n*i));
        glEnd();
        glFlush();
    }
    
    绘制一个圆

    绘制一个五角星

    首先,根据余弦定理列方程,计算五角星的中心到顶点的距离a(假设五角星对应正五边形的边长为1.0)

    a = 1 / (2-2*cos(72*Pi/180));
    

    然后,根据正弦和余弦的定义,计算Bx坐标bxy坐标by,以及Cy坐标(假设五角星的中心在坐标原点)

    bx = a * cos(18 * Pi/180);
    by = a * sin(18 * Pi/180);
    cy = -a * cos(18 * Pi/180);
    

    五个点的坐标就可以通过以上四个量和一些常数简单的表示出来。

    五角星

    代码如下

    #include <math.h>
    const GLfloat Pi = 3.1415926536f;
    void myDisplay(void)
    {
        GLfloat a = 1 / (2 - 2 * cos(72 * Pi / 180));
        GLfloat bx = a * cos(18 * Pi / 180);
        GLfloat by = a * sin(18 * Pi / 180);
        GLfloat cy = -a * cos(18 * Pi / 180);
        GLfloat
            PointA[2] = { 0, a },
            PointB[2] = { bx, by },
            PointC[2] = { 0.5, cy },
            PointD[2] = { -0.5, cy },
            PointE[2] = { -bx, by };
    
        glClear(GL_COLOR_BUFFER_BIT);
        // 按照A->C->E->B->D->A的顺序,可以一笔将五角星画出
        glBegin(GL_LINE_LOOP);
        glVertex2fv(PointA);
        glVertex2fv(PointC);
        glVertex2fv(PointE);
        glVertex2fv(PointB);
        glVertex2fv(PointD);
        glEnd();
        glFlush();
    }
    

    绘制正弦曲线

    由于OpenGL默认坐标值只能从-1到1,(可以修改,但方法留到以后讲)所以我们设置一个因子factor,把所有的坐标值等比例缩小,这样就可以画出更多个正弦周期试修改factor的值,观察变化情况。

    正弦曲线

    代码如下:

    #include <math.h>
    const GLfloat factor = 0.1f;
    void myDisplay(void)
    {
        GLfloat x;
        glClear(GL_COLOR_BUFFER_BIT);
        glBegin(GL_LINES);
        glVertex2f(-1.0f, 0.0f);
        glVertex2f(1.0f, 0.0f);         // 以上两个点可以画x轴
        glVertex2f(0.0f, -1.0f);
        glVertex2f(0.0f, 1.0f);         // 以上两个点可以画y轴
        glEnd();
        glBegin(GL_LINE_STRIP);
        for (x = -1.0f / factor; x<1.0f / factor; x += 0.01f)
        {
            glVertex2f(x*factor, sin(x)*factor);
        }
        glEnd();
        glFlush();
    }
    

    本课讲述了点、直线和多边形的概念,以及如何使用OpenGL来描述点,并使用点来描述几何图形。大家可以发挥自己的想象,画出各种几何图形,当然,也可以用GL_LINE_STRIP把很多位置相近的点连接起来,构成函数图象。如果有兴趣,也可以去找一些图象比较美观的函数,自己动手,用OpenGL把它画出来。

    相关文章

      网友评论

          本文标题:绘制基本几何图形

          本文链接:https://www.haomeiwen.com/subject/uqdfpttx.html