2D graphics with OpenGL Posted on 28 July 2008 | Tagged , | Comments (2071)

Just a quick tech note here - I've been playing round with OpenGL a little bit recently, and managed to figure out how to do some basic 2D graphics with it. Chucking my code here in case it helps anyone - this is just for basic drawing image to the screen.

First things first, you need to create your window and OpenGL context. I use SDL to do most of the hard work for me.

// Initialise SDL & DevIL
SDL_Init(SDL_INIT_VIDEO);
ilInit();
// Enable double buffering
SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1);
// Initialise video surface
SDL_SetVideoMode(xRes, yRes, bpp, SDL_OPENGL);
// Set up OpenGL for 2d rendering
gluOrtho2D(0.0, xRes, yRes, 0.0);
// Enable textures
glEnable(GL_TEXTURE_2D);
// Enable blending
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

We use SDL to set up OpenGL for us, being careful to enable double buffering. The gluOrtho2D sets up a 2D coordinate system for us. Here I've made (0,0) the top left of the screen. Then I enabled textures (which we use to draw images) and alpha blending.

Before we can draw an image, we need to load it into a texture. I used the DevIL library to do this, as it is written specifically to work well with OpenGL. It provides some utility functions to do things quicker than I did it here, but I found the textures lost of a lot quality if I used them, so I stuck to the basics.

// Generate DevIL image and make it current context
ILuint image;
ilGenImages(1, &image);
ilBindImage(image);
// Load the image
if(!ilLoadImage(const_cast<char*>(filename.c_str()))) {
   throw runtime_error("Unable to load image " + filename);
}
width = ilGetInteger(IL_IMAGE_WIDTH);
height = ilGetInteger(IL_IMAGE_HEIGHT);
// Copy to OpenGL texture
if(!ilConvertImage(IL_RGBA, IL_UNSIGNED_BYTE)) {
   throw runtime_error("Unable to convert image " + filename + " to display friendly format.");
}
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // Use nice (linear) scaling
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); // Use nice (linear) scaling
glTexImage2D(GL_TEXTURE_2D, 0, ilGetInteger(IL_IMAGE_BPP), width, height, 0, ilGetInteger(IL_IMAGE_FORMAT), GL_UNSIGNED_BYTE, ilGetData());
// Free DevIL image since we have it in a texture now
ilDeleteImages(1, &image);

Pretty straight forward - use DevIL to load the image, and then convert the image to a display friendly format and copy it into a texture. The final step is to actually draw the image on the screen. We do this by drawing a four sided polygon and binding the texture to it.

// Bind texture to current context
glBindTexture(GL_TEXTURE_2D, texture);
// Set the alpha
glColor4f(1.0, 1.0, 1.0, alpha);
// Draw texture using a quad
glBegin(GL_POLYGON);
// Top left
glTexCoord2f(0.0, 0.0);
glVertex2i(x, y);
// Top right
glTexCoord2f(1.0, 0.0);
glVertex2i(x + width, y);
// Bottom right
glTexCoord2f(1.0, 1.0);
glVertex2i(x + width, y + height);
// Bottom left
glTexCoord2f(0.0, 1.0);
glVertex2i(x, y + height);
// Finish quad drawing
glEnd();

Care must be taken here to make sure you draw your points clockwise, to make sure you get a front facing polygon. Texture coordinates are always from (0.0, 0.0) to (1.0, 1.0), regardless of the size of the image.

That's it! Tuck that away behind some abstraction so you don't have to deal with it, and you have nice hardware accelerated 2D drawing. I've been playing round with creating a 2D graphics library/engine with OpenGL, so I'll probably chuck that online in a little while. :)

Edit: Sorry about the lack of spacing in the code - SilverStripe appears to have a bug with line breaks in code blocks with bbcode. I'll fix this at some point - syntax highlighting might also be nice! :)

Post your comment

Comments

  • To study issues adjoining http://paxil-paroxetine.blogspot.com Paxil Paroxetine medication non-adherence in fiery bowel disease (IBD), including the clinical and strength serving implications in the UK, and about strategies for optimizing medication adherence.
    <a href=http://renova-tretinoin.blogspot.com >Renova</a>

    Posted by Review MD, 05/02/2012 11:08am (14 mins ago)

  • To study issues adjoining http://paxil-paroxetine.blogspot.com Paxil Paroxetine medication non-adherence in fiery bowel disease (IBD), including the clinical and strength serving implications in the UK, and about strategies for optimizing medication adherence.
    <a href=http://renova-tretinoin.blogspot.com >Renova</a>

    Posted by Review MD, 05/02/2012 11:08am (14 mins ago)

  • To study issues adjoining http://paxil-paroxetine.blogspot.com Paxil Paroxetine medication non-adherence in fiery bowel disease (IBD), including the clinical and strength serving implications in the UK, and about strategies for optimizing medication adherence.
    <a href=http://renova-tretinoin.blogspot.com >Renova</a>

    Posted by Review MD, 05/02/2012 11:08am (15 mins ago)

  • http://propeciaexpresspharmacy.com finasteride without prescription buy propecia <a href=http://propeciaexpresspharmacy.com>Finasteride</a> canada cheap propecia http://buylevitraus.com/ what pills look like generic levitra <a href=http://buylevitraus.com/>buy levitra</a> forzest 20 generic levitra http://buypropeciapillsus.com/ best buy propecia <a href=http://buypropeciapillsus.com/>propecia pharmacy</a> buy propecia france

    Posted by Clomid, 05/02/2012 9:27am (2 hours ago)

  • So previous month I started to think for starting my internet business and to obtain any affiliate websites I need some opinion if it is best option to get one myself or purchase any already ready made affiliate websites. I just found site <a href=http://www.home-businessreviews.com/Turnkey-Affiliate-Websites.html>affiliate websites</a> and here was very interesting reviews about these websites but I still haven't made decision what to do. Are here some customers who can give some opinion for sites reviewed at this website?

    Posted by bynctemnete, 05/02/2012 1:58am (9 hours ago)

  • Thanks for sharing your thoughts and ideas on this one. Please keep posting about such articles as they really spread useful information. Thanks for this particular sharing.

    Posted by Restaurant coupons Philadelphia, 05/02/2012 1:45am (10 hours ago)

  • Within 6 months of sanction http://sildenafil.unblog.fr/viagra-generique-en-ligne Viagra Pas Cher by the U.S. Food and Drug Supervision (FDA), 5.3 million prescriptions were written representing sildenafil citrate. It represented the beginning without doubt impressive and FDA-approved oral group therapy for the treatment of ED.
    <a href=http://sildenafil.unblog.fr/viagra-generique-en-ligne >Viagra</a>

    Posted by Sildenafil Pas Cher, 05/02/2012 1:38am (10 hours ago)

  • Within 6 months of sanction http://sildenafil.unblog.fr/viagra-generique-en-ligne Viagra Pas Cher by the U.S. Food and Drug Supervision (FDA), 5.3 million prescriptions were written representing sildenafil citrate. It represented the beginning without doubt impressive and FDA-approved oral group therapy for the treatment of ED.
    <a href=http://sildenafil.unblog.fr/viagra-generique-en-ligne >Viagra</a>

    Posted by Sildenafil Pas Cher, 05/02/2012 1:38am (10 hours ago)

  • Within 6 months of sanction http://sildenafil.unblog.fr/viagra-generique-en-ligne Viagra Pas Cher by the U.S. Food and Drug Supervision (FDA), 5.3 million prescriptions were written representing sildenafil citrate. It represented the beginning without doubt impressive and FDA-approved oral group therapy for the treatment of ED.
    <a href=http://sildenafil.unblog.fr/viagra-generique-en-ligne >Viagra</a>

    Posted by Sildenafil Pas Cher, 05/02/2012 1:37am (10 hours ago)

  • The Native Translator arbeitet ausschließlich mit hochqualifizierten Übersetzern, die nur in ihre Muttersprache übersetzen. <a href=http://www.native-translator.de>Übersetzern</a>

    Posted by ceamawaxiamop, 04/02/2012 9:41pm (14 hours ago)

RSS feed for comments on this page | RSS feed for all comments