How To Load and Display an Image with DevIL and OpenGL

DevIL song:
“la la la, a cross-platform image library utilizing a
simple syntax to load, save, convert, manipulate, filter and display
a variety of images with ease, la la la”

As I promised in this post here is a tutorial about DevIL. This tutorial shows one way to load an image file and use it as a texture in OpenGL. We’ll use DevIL 1.7.5.

This is the first real tutorial at Geeks3D. I have a million of tutorials to write and a blog is a perfect place for that purpose because of the high interaction with you, dear reader. For those who know my work on oZone3D.Net website, Geeks3D Tutorials can be seen as the continuation…

That said, let’s dive into DevIL.

DevIL (also known as OpenIL) is an image libray that allows image loading and manipulation (filtering, resizing). The developer of DevIL, Denton Woods, has put the project in zombie mode during 2 years, but he recently re-started DevIL coding. That’s why it’s worth to know this cool library.

DevIL follows OpenGL’s philosophy in functions’s syntax and the way we use them. So if you’re familiar with OpenGL, you should be operational with DevIL in a couple of minutes. DevIL is open source and should be free for both commercial and non commercial works. I said “should” because I didn’t find a clear licence text…

You can find more information about DevIL HERE.

The tutorial I propose, shows a way to load a JPG image and use it as a RGB byte source data to texture a quad. The core of the tutorial is the function DevILTextureLoader() (in ctexture.cpp file).

Basically, this function does the following steps:
1 – Generate an image name and bind it.

ILuint ImgId = 0;
ilGenImages(1, &ImgId);
ilBindImage(ImgId);

The same thing than OpenGL glGenTextures() / glBindTexture() functions.

2 – Load the image from the file name

ilLoadImage(filename);

3 – Get image size and allocate memory to copy the texture (RGB byte).

width = ilGetInteger(IL_IMAGE_WIDTH);
height = ilGetInteger(IL_IMAGE_HEIGHT);
pixmap = new BYTE[width * height * 3];
ilCopyPixels(0, 0, 0, width, height, 1, IL_RGB, 
IL_UNSIGNED_BYTE, pixmap);

4 – Unbind image and free DevIL image memory.

ilBindImage(0);
ilDeleteImage(ImgId);

Depending on your application, step 3 is not necessary. DevIL keeps a memory buffer with image data attached to an image name (ImgId in our example). You can directly access to DevIL image buffer like this:

ilBindImage(ImgId);
BYTE* data = ilGetData();

ilGetData() allows to get a direct pointer to the current bound image’s data pointer. Then as long as the image name is valid, you can use the data pointed by ilGetData().

Okay, I think this short tutorial is enough to start with DevIL. To make your geek’s life easier, I’ve prepared a Visual C++ 2005 project ready to be compiled. This project contains all you need to create the demo executable: data + DevIL files (*.h + *.dll + *.lib). You can download the project here:
[download#27#image]

Enjoy!

Related links:

• Tutorials @ Geeks3D