How to use OpenGL and DevIL get user drawing pixels

Question

I need to load an image, display the image, and let user draw some strokes on the image and get those drawing pixels.

I know OpenGL can load a texture image read by DevIL, and display it. But I am not sure how to use OpenGL to get user drawing pixels from loaded texture.

or any other library that is better than DevIL and OpenGL to serve such purpose? — realmq
I know glReadPixels can read the frame buffer and save it. Can it also read pixels selected while user drawing strokes, and display strokes in red color on top of original image in real time? Do you have any code snippet for such functionality? — realmq

Kevin Kevin · Accepted Answer · 2013-06-11T22:22:02

First off, note that a lot of this code is deprecated. But it is easier to understand from just code snippets. I'm not doing everything for you, but I hope to get you started by providing the basic workflow.

There are a few things you need to do to get the result you are looking for.
Firstly you have to load your texture in video memory. This is done with:

glGenTextures(1, texture_id); //generate a texture object
glBindTexture(GL_TEXTURE_2D, texture_id); //bind the texture
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); //set filters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); //set filters
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, original_image_data); //create the actual texture in video ram

When this succeeds you can draw your texture with:

glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();

//set to ortographic projection
glOrtho(0.0, window_width, 0.0, window_height, -1.0, 1.0);

glMatrixMode(GL_MODELVIEW);
glPushMatrix();

glLoadIdentity();
glBindTexture(GL_TEXTURE_2D,texture_id);

glBegin(GL_QUADS);
  glTexCoord2f(0, 1); glVertex2f(-1.0f,  1.0f);
  glTexCoord2f(1, 1); glVertex2f( 1.0f,  1.0f);
  glTexCoord2f(1, 0); glVertex2f( 1.0f, -1.0f);
  glTexCoord2f(0, 0); glVertex2f(-1.0f, -1.0f);
glEnd();

glPopMatrix();

glMatrixMode(GL_PROJECTION);
glPopMatrix();

glMatrixMode(GL_MODELVIEW);

The next thing you will need to do is capture your user's mouse input. If you are on windows you can use the windowprocedure callback and look for the WM_MOUSE event. If you use a library for window management then the library will probably provide functionality for keyboard and mouse intput.

Now that you have the mouse input, you should draw a line on the screen every time a user moves the mouse while holding down the button:

glLineWidth(2.5); 
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_LINES);
  glVertex2f(mouse_x_start, mouse_y_start);
  glVertex2f(mouse_x_end, mouse_y_end);
glEnd();
glColor3f(1.0, 1.0, 1.0);

When all of the above goes well, you should see your texture on the screen and a red line if you hold the mouse button and move the mouse. You are nearly there. The last thing that needs to be done is read the pixels. You can do this with glReadPixels() like this:

void glReadPixels(0, 0, window_width, window_height, GL_RGB, GL_UNSIGNED_BYTE, new_image_data);

You now have a byte array with the user's strokes on it. I would highly recommend writing your own code for this process, because the code I used is deprecated, and should only be used when targeting older platforms. The workflow should remain the same though. I hope this is enough to get you started. Good luck!

How to use OpenGL and DevIL get user drawing pixels

2 Answers