How to load and display image in OpenGL ES for iphone

Question

I'm a newbie and trying to display a sprite on my iPhone screen using OpenGL ES. I know its far simpler and easier to do it with cocos2d but now I'm trying to code directly on OpenGL. Is there any simple yet efficient way to load and display sprites in OpenGL ES. What I've found until now is much much complex. :(

Solution 1

Here is some code to load a png from bundle:

UIImage* image = [UIImage imageNamed:@"PictureName.png"];
GLubyte* imageData = malloc(image.size.width * image.size.height * 4);
CGContextRef imageContext = CGBitmapContextCreate(imageData, image.size.width, image.size.height, 8, image.size.width * 4, CGColorSpaceCreateDeviceRGB(), kCGImageAlphaPremultipliedLast);
CGContextDrawImage(imageContext, CGRectMake(0.0, 0.0, image.size.width, image.size.height), image.CGImage);
CGContextRelease(imageContext); 

Here is some code to create a texture with that image data.

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image.size.width, image.size.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

And an example of how to render this:

glBindTexture(GL_TEXTURE_2D, texture);
glVertexPointer(2, GL_FLOAT, 0, vertices);
glNormalPointer(GL_FLOAT, 0, normals);
glTexCoordPointer(2, GL_FLOAT, 0, textureCoords);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4)

Here you need to find the values of vertices, normals and textureCoords that fit your needs.

Update 1

Remember to set the right states like this:

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_NORMAL_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY); 

If you use glOrthof (See below) to set a 2D projection in your app, you can use these values:

GLfloat vertices[] = {
   -1.0, 1.0,
   1.0, 1.0,
   -1.0, -1.0,
   1.0, -1.0, }; 

GLfloat normals[] =  {
   0.0, 0.0, 1.0,
   0.0, 0.0, 1.0,
   0.0, 0.0, 1.0,
   0.0, 0.0, 1.0 }; 

GLfloat textureCoords[] = {
   0.0, 0.0,
   1.0, 0.0,
   0.0, 1.0,
   1.0, 1.0 };

Update 2

This is how I sat the projection mode when using the above code to render sprites:

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-5.0, 5.0, -7.5, 7.5, -1, 1);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity(); 

And this is how i set my blending function. This allows for transparency in the png files:

glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Solution 2

I recommend looking at Apple's GLSprite example application. That's exactly what this application does.

If you want to load PVRTC-compressed textures, look to their PVRTextureLoader example. I use code from this in a sample application I wrote for my iPhone class.