Question

I’m currently learning OpenGL ES for iPhone and I’m wondering how to take an array of RGB pixel data and blit it to the screen, so far all the tutorials I’ve found cover loading a pre-existing image into a texture and displaying it.

Here’s how I’ve accomplished it using Core Graphics by creating an imageref then using a UIImage and UIImageView:

int screenWidth = (int)[[UIScreen mainScreen] bounds].size.width;
int screenHeight = (int)[[UIScreen mainScreen] bounds].size.height;

//Create blank image
CGImageRef blankImageRef = [self createBlankImageRef];
CFDataRef m_DataRef; 
m_DataRef = CGDataProviderCopyData(CGImageGetDataProvider(blankImageRef)); 
UInt8* bufferData = CFDataGetBytePtr(m_DataRef); 


//Manipulate the image here
for(int x=0; x < screenWidth-1; x++)
{
    int y = x;//*2;

    [self setPixel:bufferData width:screenWidth x:x y:y r:255 g:0 b:0];
}


//Paint the image to the screen
CGImageRef imageRef = blankImageRef; 
CGContextRef ctx; 
ctx = CGBitmapContextCreate(bufferData, 
                            CGImageGetWidth( imageRef ), 
                            CGImageGetHeight( imageRef ), 
                            8, 
                            CGImageGetBytesPerRow( imageRef ), 
                            CGImageGetColorSpace( imageRef ), 
                            kCGImageAlphaPremultipliedLast ); 
screenImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage (ctx)]; 
CGContextRelease(ctx); 

[imageView setImage:screenImage];

free(bufferData);

…

- (CGImageRef) createBlankImageRef
{
CGFloat imageScale = (CGFloat)1.0;
CGFloat width = [[UIScreen mainScreen] bounds].size.width;
CGFloat height = [[UIScreen mainScreen] bounds].size.height;

// Create a bitmap graphics context of the given size
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, width * imageScale, height * imageScale, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);

// Draw ...
CGContextSetRGBFillColor(context, (CGFloat)0.0, (CGFloat)0.0, (CGFloat)0.0, (CGFloat)1.0 );

// Get your image
CGImageRef cgImage = CGBitmapContextCreateImage(context);

CGColorSpaceRelease(colorSpace);
CGContextRelease(context);

return cgImage;
}

-(void)setPixel:(UInt8*)buffer width:(int)width x:(int)x y:(int)y r:(int)r g:(int)g b:(int)b
{
buffer[x*4 + y*(width*4)] = r;
buffer[x*4 + y*(width*4)+1] = g;
buffer[x*4 + y*(width*4)+2] = b;
buffer[x*4 + y*(width*4)+3] = 255;
}

Any ideas how I could accomplish this using OpenGL ES (currently using 1.0) instead of Core Graphics?

Answer 1

you can create a texture by using glTexImage2D (http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml) or glTexSubImage2D (http://www.opengl.org/sdk/docs/man/xhtml/glTexSubImage2D.xml). glTexSubImage2D is mainly for updating textures in real time.

e.g. for an RGBA texture:

GLubyte texBuffer[4*texWidth*texHeight];
GLuint texName;
glGenTextures(1, &texName) ;
glBindTexture(GL_TEXTURE_2D, texName) ;
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, texBuffer);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

if you’re using ES 1.x you can also use glDrawPixels (http://www.opengl.org/sdk/docs/man/xhtml/glDrawPixels.xml).