Rendering Texture Quad to Screen or FBO (OpenGL ES)

| | August 4, 2015

I need to render the texture on the iOS device’s screen or a render-to-texture frame buffer object. But it does not show any texture. It’s all black.

(I am loading texture with image myself for testing purpose)

//Load texture data

UIImage *image=[UIImage imageNamed:@"textureImage.png"];

    GLuint width = FRAME_WIDTH;
    GLuint height = FRAME_HEIGHT;

    //Create context
    void *imageData = malloc(height * width * 4);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);

    //Prepare image
    CGContextClearRect(context, CGRectMake(0, 0, width, height));
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), image.CGImage);

    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

Simple Texture Quad drawing code mentioned here

//Bind Texture, Bind render-to-texture FBO and then draw the quad

const float quadPositions[] = {  1.0,  1.0, 0.0, 
                                -1.0,  1.0, 0.0, 
                                -1.0, -1.0, 0.0, 
                                -1.0, -1.0, 0.0, 
                                 1.0, -1.0, 0.0, 
                                 1.0,  1.0, 0.0 };
const float quadTexcoords[] = { 1.0, 1.0, 
                                0.0, 1.0, 
                                0.0, 0.0, 
                                0.0, 0.0, 
                                1.0, 0.0, 
                                1.0, 1.0 };

// stop using VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);

// setup buffer offsets
glVertexAttribPointer(ATTRIB_VERTEX, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), quadPositions);
glVertexAttribPointer(ATTRIB_TEXCOORD0, 2, GL_FLOAT, GL_FALSE, 2*sizeof(float), quadTexcoords);

// ensure the proper arrays are enabled
glEnableVertexAttribArray(ATTRIB_VERTEX);
glEnableVertexAttribArray(ATTRIB_TEXCOORD0);

//Bind Texture and render-to-texture FBO.
glBindTexture(GL_TEXTURE_2D, GLid);

//Actually wanted to render it to render-to-texture FBO, but now testing directly on default FBO.
//glBindFramebuffer(GL_FRAMEBUFFER, textureFBO[pixelBuffernum]);

// draw
glDrawArrays(GL_TRIANGLES, 0, 2*3);

What am I doing wrong in this code?

P.S. I’m not familiar with shaders yet, so it is difficult for me to make use of them right now.

One Response to “Rendering Texture Quad to Screen or FBO (OpenGL ES)”

  1. glDrawArrays(GL_TRIANGLES, 0, 2*3) won’t draw anything because you do not have any shaders attached. OpenGL ES 2 does not have a fixed pipeline, therefore you need to implement your own shaders. You can use GLKit’s GLKBaseEffect as a shader or better write you own.

    I recommend you the following series of tutorials as a starting point: http://iphonedevelopment.blogspot.com/2010/11/opengl-es-20-for-ios-chapter-4.html

Leave a Reply