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

Answer 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);

Answer 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.