Explain how OpenGL ES background images work

Question

Could someone please explain how you render background images on an OpenGL ES view? From the basics of setting up the OpenGL environment. I'm a newbie to OpenGL here.

I'm seeing a few questions/answers on stackoverflow about creating background images, but I'm trying to modify existing code at the moment (Apple's GLPaint in particular), and I'm not sure what is needed and what is not. Having tried the solutions, with no success, I thought I should take a step back and actually try and understand what is going on. Mindlessly hacking hasn't gotten me far =(

Are there any simple apps that show this? Or reference manuals would be useful too (preferably ones for newbies) - I tried looking at the references for this answer, but I don't get it =(

Answer 1

you need to render an image (dimensions need to be powers of 2) to opengl.

you can either place the image in your 3d world so that it appears to be background (I do this because my camera angle is fixed.) or you can push some matrices to make use of glOrthof before drawing the images and pop the matrices off after.

Here is some code to help you with the image draw to opengl

glPushMatrix();

glGenTextures(1, &texture[0]);
glBindTexture(GL_TEXTURE_2D, texture[0]);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); 
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);

UIImage *image = [UIImage imageNamed:@"map1.jpg"];
if (image == nil)
    NSLog(@"Do real error checking here");

GLuint width = CGImageGetWidth(image.CGImage);
GLuint height = CGImageGetHeight(image.CGImage);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
void *imageData = malloc( height * width * 4 );
CGContextRef context = CGBitmapContextCreate( imageData, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big );
CGContextTranslateCTM (context, 0, height);
CGContextScaleCTM (context, 1.0, -1.0);
CGColorSpaceRelease( colorSpace );
CGContextClearRect( context, CGRectMake( 0, 0, width, height ) );
CGContextTranslateCTM( context, 0, height - height );
CGContextDrawImage( context, CGRectMake( 0, 0, width, height ), image.CGImage );

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);

CGContextRelease(context);

free(imageData);
[image release];

static const GLfloat texCoords[] = {
    0.0, 1.0,
    1.0, 1.0,
    0.0, 0.0,
    1.0, 0.0
};

glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glTexCoordPointer(2, GL_FLOAT, 0, texCoords);   


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

static const GLfloat vertices[] = {
    -1.0,  1.0, -0.0,
    1.0,  1.0, -0.0,
    -1.0, -1.0, -0.0,
    1.0, -1.0, -0.0
};
static const 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
};

glBindTexture(GL_TEXTURE_2D, texture[0]);
glVertexPointer(3, GL_FLOAT, 0, vertices);
glNormalPointer(GL_FLOAT, 0, normals);
glTexCoordPointer(2, GL_FLOAT, 0, texCoords);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

glPopMatrix();

Answer 2

I recommend you to read this articles from the very beginning link if you want to understand the basics of OpenGL ES 1.1 . There are also lots of sample projects provided.