Why does this minimal code fail to draw textured triangles with OpenGL ES 1.1?

Question

I'm trying to render a 512 * 512 texture onto a 256 * 256 square composed of two triangles.

The goal is to learn how to draw a textured rectangle of two triangles in OpenGL ES 1.1 with the least minimal amount of code possible.

EXC_BAD_ACCESS: Problem solved! +500 bounty goes to Sam :-) At the point where it came to calling glDrawArrays I got an EXC_BAD_ACCESS. The project uses ARC, created with Xcode 5.0.2 and I tried to run it on both the iPhone 5 simulator as well as an iPhone 5S with the same results. Sam pointed out that instead of enabling a color array with glEnableClientState(GL_COLOR_ARRAY);, I should enable the texture coordinates array with glEnableClientState(GL_TEXTURE_COORD_ARRAY);.

I put the second problem in here for completeness if others happen to come here to learn about how to texture polygons in OpenGL ES 1.1.

This is how I setup the CAEAGLLayer:

// Configure the drawable properties
CAEAGLLayer *glLayer = (CAEAGLLayer *)self.layer;
glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
    [NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking,
    kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];

// Create the OpenGL context
EAGLContext *ctx = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES1];
self.context = ctx;
[EAGLContext setCurrentContext:ctx];

// Create buffers
glGenFramebuffersOES(1, &framebuffer);
glGenRenderbuffersOES(1, &renderbuffer);

glBindFramebufferOES(GL_FRAMEBUFFER_OES, framebuffer);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, renderbuffer);

[context renderbufferStorage:GL_RENDERBUFFER_OES fromDrawable:(CAEAGLLayer*)self.layer];

glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES, GL_COLOR_ATTACHMENT0_OES, GL_RENDERBUFFER_OES, renderbuffer);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_WIDTH_OES, &framebufferWidth);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_HEIGHT_OES, &framebufferHeight);


// Config OpenGL ES
glMatrixMode(GL_PROJECTION);
glLoadIdentity();

glOrthof(0, framebufferWidth / self.contentScaleFactor, (framebufferHeight / self.contentScaleFactor), 0, 0, 1);

glMatrixMode(GL_MODELVIEW);

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);

glDisable(GL_DEPTH_TEST);

glClearColor(0, 0, 0, 1);
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);

After the UIView backed by a CAEAGLLayer is created and configured like shown above, I get the pixel data of the UIImage. I added comments with the print output while stepping through:

GLubyte *pixelData = (GLubyte*)calloc(_width * _height * 4, sizeof(GLubyte)); // 0x00000001004c8000

CGColorSpaceRef imageCS = CGImageGetColorSpace(img.CGImage); // 0x0000000170027040
CGContextRef ctx = CGBitmapContextCreate(pixelData, _width, _height, 8, _width * 4, imageCS, (CGBitmapInfo)kCGImageAlphaPremultipliedLast); // 0x0000000170161f80

CGContextDrawImage(ctx, CGRectMake(0, 0, _width, _height), img.CGImage);

CGColorSpaceRelease(imageCS);
CGContextRelease(ctx);

Everything looks fine. The UIImage gets loaded correctly. Then I use this pixelData to create the texture:

glGenTextures(1, &_textureID);
glBindTexture(GL_TEXTURE_2D, _textureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (GLsizei)_width, (GLsizei)_height, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixelData);

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

Finally, the CADisplayLink gets created and it calls a -draw method which performs the scene drawing operations in a GCD background queue. This is how I attempt to draw it on screen in the render callback, within the GCD block:

CGFloat height = 256;
CGFloat width = 256;

GLshort imageVertices[] = {
    0, height,  // left bottom
    width, height,  // right bottom
    0, 0,       // left top
    width, 0    // right top
};

GLshort textureCoords[] = {
    0, 1,   // left bottom
    1, 1,   // right bottom
    0, 0,   // left top
    1, 0    // right top
};

glEnable(GL_TEXTURE_2D);

glColor4f(1, 1, 1, 1);
glBindTexture(GL_TEXTURE_2D, _textureID);
glVertexPointer(2, GL_SHORT, 0, imageVertices);
glTexCoordPointer(2, GL_SHORT, 0, textureCoords);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // EXC_BAD_ACCESS

glDisable(GL_TEXTURE_2D);

When it reaches glDrawArrays I end up with an EXC_BAD_ACCESS.

Any clue why this might happen? I double checked:

The UIImage used to generate the pixelData does not get deallocated. The UIView backed by CAEAGLLayer does not get deallocated either. The problem also occurs when I remove GCD and render on the main thread.

The UIImage gets loaded correctly. It is 512 x 512 big.
The image is a PNG 24 with alpha.
textureID is set to 1. When I step through it halts nowhere and all values make sense. Until I reach glDrawArrays.

Thank you @genpfault - I updated the question with more code. — openfrog, Nov 15 '13 at 12:59

Sam · Accepted Answer · 2013-11-17T23:53:09.160

5

This one may be the problem, you don't actually provide a color array pointer: glEnableClientState(GL_COLOR_ARRAY);

glColor4f(1, 1, 1, 1); sets the vertex attribute to a resident value. Instead of the absent GL_COLOR_ARRAY, the texture coord array should be enabled: glEnableClientState(GL_TEXTURE_COORD_ARRAY);

The same goes for disabling with glDisableClientState(...):

To explicitly target the texture unit 0 and texture coord array 0 respectively, do glClientActiveTexture(GL_TEXTURE0); before any of the following calls:

glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, _textureID);
glVertexPointer(2, GL_SHORT, 0, imageVertices);
glTexCoordPointer(2, GL_SHORT, 0, textureCoords);

edited Nov 17 '13 at 23:53

answered Nov 17 '13 at 11:32

Sam

7,778
1
23
49

Thanks Sam! glEnableClientState(GL_TEXTURE_COORD_ARRAY) solved the EXC_BAD_ACCESS issue. The rendered triangles are white however, ignoring the texture. I tried glClientActiveTexture(GL_TEXTURE0); after glGenTextures(1, &tID);. – openfrog Nov 17 '13 at 20:25
You're welcome! `glEnable(GL_TEXTURE_2D);` is also a per TU state (edited). Difficult to guess, what the remaining problems are. If this doesn't help, exclude blending for now: `glDisable(GL_BLEND);`. – Sam Nov 17 '13 at 20:43
glEnable(GL_TEXTURE_2D); was the problem. I had uncommented it during debugging and forgot to reactivate this line. Now the texture renders! Thank you very much! Do you know why OpenGL would draw a very fine white outline around the objects in the texture that uses alpha transparency? – openfrog Nov 17 '13 at 20:48
1

Turns out that the outline was in fact part of the image ;-) – openfrog Nov 17 '13 at 20:59
Just wanted to suggest the same :). Should you ever encounter very thin, uniform seams at polygon edges/borders, you can probably improve sampling (interpolation) like this (applied to the texture bound to the current TU): `glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_REPEAT);` `glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_REPEAT);` – Sam Nov 17 '13 at 21:03

Why does this minimal code fail to draw textured triangles with OpenGL ES 1.1?

1 Answers1