Question

I need to draw a gridded image using opengl. I’ve read that images created using grids allows to do various effects on images, like the famous wave effect, or a ripple effect from this link:

http://www.soulstorm-creations.com/index.php?option=com_content&view=article&id=111:opengl-making-a-2d-grid-image&catid=18:programming-articles&Itemid=39

I’ve also gone through lesson 6 android port from NEHE Tutorials:
http://insanitydesign.com/wp/projects/nehe-android-ports/

I can convert it from cube to rectangle, but I need help in understanding
1) why we are using vertex coordinates in terms of 0 and 1? Why have they not used coordinates according to image width and height?
2) How can we divide the texture region in small grids as explained in tutorial above? If some one can guide on 1), I guess I can work on point 2).

Any help would be really appreciated.

Answer 1

The vertex coordinates are from 0 to 1 so that you can use vertex data with many different textures without worrying about the dimensions of the image.
That said, for pixel perfect operations you often have to often the texture coordinates by a fraction the image’s pixel width (say 0.5f * (float) image->width()) and height in order to make sure OpenGl (or d3D) samples from the correct place.

As for dividing the grid, straight forward simple linear interpolation. If you have a grid going from pixel coordinates 0 to 100 and you want 10 steps in your grid, you start at 0 and increment in steps of 10 pixels :

  vertex_xi =  (start_x + ((end_x - start_x) / 10) * i));
  vertex_yi =  (start_y + ((end_y - start_y) / 10) * i));

similarly,, for texture coordinates, you’d do the same thing only you usually name them like this:

  vertex_ui =  (start_u + ((end_u - start_u) / 10) * i));
  vertex_vi =  (start_v + ((end_v - start_v) / 10) * i));

where ‘start_u’ and ‘start_v’ are ‘1.0f +/- offset and end ‘end_u’ and ‘end_v’ are ‘1.0f +/- offset’. Put those in your vertex array and you should be good to go.

HTH.