Click here to Skip to main content
15,884,537 members
Articles / Multimedia / OpenGL

2D Drawing with an OpenGL Control

Rate me:
Please Sign up or sign in to vote.
4.87/5 (30 votes)
8 Feb 2010CPOL2 min read 210K   7.7K   130   42
An article explaning how to create a user control for 2D shape drawing with OpenGL
Sample Image - GLView.png

Introduction

I had recently written some code to display lots of simple 2D shapes for a finite element program. My first thought was to use GDI. However, since I had to display thousands of shapes on the screen, GDI was too slow for me. The solution came up as an OpenGL control. In this article, I will try to explain how I created a control utilizing OpenGL for a 2D shape drawing.

Using the Code

The source code includes a control named GLCanvas2D based on System.Windows.Forms.UserControl. OpenGL specific initialization code is as follows:

C++
GLCanvas2D::GLCanvas2D()
{
    /* User control initialization code goes here
    ....
    .... */

    // Get a handle to the device context
    mhDC = GetDC((HWND)this->Handle.ToPointer());

    // Choose a pixel format
    PIXELFORMATDESCRIPTOR pfd = {
        sizeof(PIXELFORMATDESCRIPTOR),     // size of the structure
        1,                                 // version
        PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER,
                        // flags
        PFD_TYPE_RGBA,                     // pixel type
        32,                                // color bits
        0, 0, 0, 0, 0, 0, 0, 0,            // RGBA bits and shifts
        0,                                 // accumulation buffer bits
        0, 0, 0, 0,                        // accumulation buffer RGBA bits
        32,                                // depth bits
        24,                                // stencil bits
        0,                                 // aux bits
        PFD_MAIN_PLANE,                    // layer type
        0,                                 // reserved
        0, 0, 0                            // layer masks
    };

    // Set the pixel format
    int iPixelFormat = ChoosePixelFormat(mhDC, &pfd);
    SetPixelFormat(mhDC, iPixelFormat, &pfd);

    // Create the render context
    mhGLRC = wglCreateContext(mhDC);
    wglMakeCurrent(mhDC, mhGLRC);
}

This code is called in the constructor of GLCanvas2D. The destructor deletes the render context and releases the device context.

C++
GLCanvas2D::~GLCanvas2D()
{
    wglMakeCurrent(NULL, NULL);
    wglDeleteContext(mhGLRC);
    ReleaseDC((HWND)this->Handle.ToPointer(), mhDC);
}

I have two variables used for panning and zooming the view: a point structure containing a camera position and a zoom factor. In each paint event, the projection matrix is setup using these two variables.

C++
// Set an orthogonal projection matrix
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(mCameraPosition.X -
        ((float)ClientRectangle.Width) * mZoomFactor / 2, // Left
    mCameraPosition.X +
        ((float)ClientRectangle.Width) * mZoomFactor / 2, // Right
    mCameraPosition.Y -
        ((float)ClientRectangle.Height) * mZoomFactor / 2, // Bottom
    mCameraPosition.Y +
        ((float)ClientRectangle.Height) * mZoomFactor / 2, // Top
    -1.0f,     // Near plane
    1.0f);     // Far plane

Camera position and zoom factor are calculated when the user pans (by holding down the mouse wheel) or zooms (by scrolling the mouse wheel). I also needed some method of transforming coordinates from screen to model coordinates and back.

C++
/// <summary>
/// Converts the given point from world coordinates to screen coordinates.
/// </summary>
Drawing::Point WorldToScreen(float x, float y)
{
    // Move the given point to the origin, divide by the zoom factor and
    // add the screen coordinates of the center point
    return Drawing::Point(
        (int)((x - mCameraPosition.X) / mZoomFactor) +
            ClientRectangle.Width / 2,
        -(int)((y - mCameraPosition.Y) / mZoomFactor) +
            ClientRectangle.Height / 2);
}

/// <summary>
/// Converts the given point from screen coordinates to world coordinates.
/// </summary>
Drawing::PointF ScreenToWorld(int x, int y)
{
    // Move the given point to the origin, multiply by the zoom factor and
    // add the model coordinates of the center point (camera position)
    return Drawing::PointF(
        (float)(x - ClientRectangle.Width / 2) * mZoomFactor +
            mCameraPosition.X,
        -(float)(y - ClientRectangle.Height / 2) * mZoomFactor +
            mCameraPosition.Y);
}

GLCanvas2D exposes a Render event which is typically overridden in implementations. The control overrides the OnPaint event of the base class and raises the Render event passing a GLGraphics object as an argument. GLGraphics is similar to the System.Drawing.Graphics class. Drawing is done using the methods of the GLGraphics object.

C++
void MyCanvas2D::Render(System::Object ^ sender, GLView::GLGraphics ^ Graphics)
{
    // Draw a filled rectangle
    Graphics->FillRectangle(0.0f, 0.0f, 100.0f, 50.0f, Drawing::Color::Red);
}

Implementations can also use native OpenGL calls within the Render event.

C++
void MyCanvas2D::Render(System::Object ^ sender, GLView::GLGraphics ^ Graphics)
{
    // Draw a filled rectangle
    glBegin(GL_QUADS);
    glColor3f(1.0f, 0.0f, 0.0f);
    glVertex2f(0.0f, 0.0f);
    glVertex2f(100.0f, 0.0f);
    glVertex2f(100.0f, 50.0f);
    glVertex2f(0.0f, 50.0f);
    glEnd();
}

Points of Interest

If an implementation places more than one instance of GLCanvas2D on a Form, we have to make sure that OpenGL calls are directed to the correct render context. We achieve this by calling wglMakeCurrent with the handle of our render context each time the OnPaint event is fired.

C++
void GLCanvas2D::OnPaint(System::Windows::Forms::PaintEventArgs^ e)
{
    // Save previous context and make our context current
    HDC mhOldDC = wglGetCurrentDC();
    HGLRC mhOldGLRC = wglGetCurrentContext();
    wglMakeCurrent(mhDC, mhGLRC);

    /* Drawing code goes here
    ....
    .... */

    // Restore previous context
    wglMakeCurrent(mhOldDC, mhOldGLRC);
}

GLView uses OpenGL vertex arrays to speed up drawing. Vertex arrays are handled internally by a custom GLVertexArray class. The GLGraphics class collects vertex information using two GLVertexArray's. One GLVertexArray is used for filled shapes. Each filled shape is converted to triangles and stored in the vertex array. A second GLVertexArray collects lines. No drawing is actually performed until the Render event ends.

C++
System::Void Render()
{
    // Create the vertex arrays on the fly
    float * vp = new float[mVertices->Count * 3];
    float * cp = new float[mVertices->Count * 4];

    // Fill in the vertex arrays. mVertices is an internal list for collecting
    // vertex position and color.
    for (int j = 0; j < mVertices->Count; j++)
    {
        vp[j * 3] = mVertices[j].x;
        vp[j * 3 + 1] = mVertices[j].y;
        vp[j * 3 + 2] = mVertices[j].z;
        cp[j * 4] = mVertices[j].r;
        cp[j * 4 + 1] = mVertices[j].g;
        cp[j * 4 + 2] = mVertices[j].b;
        cp[j * 4 + 3] = mVertices[j].a;
    }

    // Set OpenGL vertex and color pointers to our vertex arrays
    glVertexPointer(3, GL_FLOAT, 3 * sizeof(float), vp);
    glColorPointer(4, GL_FLOAT, 4 * sizeof(float), cp);

    // Draw the arrays
    glDrawArrays(mType, 0, mVertices->Count);

    // Clean up
    delete[] vp;
    vp = 0;
    delete[] cp;
    cp = 0;
}

History

  • 25.01.2007 - First release
  • 26.04.2007 - Various bug fixes (Thanks to Jac for bug reports and suggestions)
  • 05.02.2010 - Fixed a memory leak in GLGraphics::Render

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Turkey Turkey
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: Printing Pin
Ozgur Ozcitak3-May-07 0:26
Ozgur Ozcitak3-May-07 0:26 
GeneralRe: Printing Pin
Jac4-May-07 22:01
Jac4-May-07 22:01 
GeneralCool article Pin
Jim Crafton26-Apr-07 9:03
Jim Crafton26-Apr-07 9:03 
GeneralRe: Cool article Pin
Rick York26-Apr-07 14:17
mveRick York26-Apr-07 14:17 
GeneralRe: Cool article Pin
Ozgur Ozcitak26-Apr-07 22:40
Ozgur Ozcitak26-Apr-07 22:40 
GeneralMultiple Controls in the same App Pin
Jac26-Apr-07 1:30
Jac26-Apr-07 1:30 
GeneralRe: Multiple Controls in the same App Pin
Ozgur Ozcitak26-Apr-07 22:16
Ozgur Ozcitak26-Apr-07 22:16 
GeneralRe: Multiple Controls in the same App Pin
Jac27-Apr-07 2:48
Jac27-Apr-07 2:48 
GeneralAnother bug ? (creating the font display list). Pin
Jac25-Apr-07 12:21
Jac25-Apr-07 12:21 
GeneralRe: Another bug ? (creating the font display list). Pin
Ozgur Ozcitak25-Apr-07 22:01
Ozgur Ozcitak25-Apr-07 22:01 
GeneralRe: Another bug ? (creating the font display list). Pin
Jac25-Apr-07 22:40
Jac25-Apr-07 22:40 
GeneralMissing call to the base class Pin
Jac26-Apr-07 4:57
Jac26-Apr-07 4:57 
GeneralRe: Missing call to the base class Pin
Ozgur Ozcitak26-Apr-07 23:53
Ozgur Ozcitak26-Apr-07 23:53 
GeneralA bug in GLGraphics::Render Pin
Jac24-Apr-07 15:23
Jac24-Apr-07 15:23 
GeneralRe: A bug in GLGraphics::Render Pin
Ozgur Ozcitak24-Apr-07 23:25
Ozgur Ozcitak24-Apr-07 23:25 
GeneralWOW ! Thanks Pin
Jac22-Apr-07 12:25
Jac22-Apr-07 12:25 
GeneralRe: WOW ! Thanks Pin
Ozgur Ozcitak24-Apr-07 23:13
Ozgur Ozcitak24-Apr-07 23:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.