OpenGL ES 1.1: transparent line + sprite/texture

Hi all:

I’m fairly new to OpenGL, and while I’ve been able to get a lot of different things to work, I’m having trouble with something that seems fairly simple.

I’m working with OpenGL ES 1.1 for iPhone. I create a new project using the XCode OpenGL sample. It creates a rainbow colored bouncing square on a flat gray background.

I want to draw a semi-transparent red line on top of it, but no matter what I do, I can’t seem to get it to work: it’s always opaque.

Here’s the code. I apologize that it’s so large, but most of it can be ignored since it came straight from the XCode template. I clearly marked the code I added.


- (void)render
{
    // Replace the implementation of this method to do your own custom drawing

    static const GLfloat squareVertices[] = {
        -0.5f,  -0.33f,
         0.5f,  -0.33f,
        -0.5f,   0.33f,
         0.5f,   0.33f,
    };

    static const GLubyte squareColors[] = {
        255, 255,   0, 255,
        0,   255, 255, 255,
        0,     0,   0,   0,
        255,   0, 255, 255,
    };

    static float transY = 0.0f;

    // This application only creates a single context which is already set current at this point.
    // This call is redundant, but needed if dealing with multiple contexts.
    [EAGLContext setCurrentContext:context];

    // This application only creates a single default framebuffer which is already bound at this point.
    // This call is redundant, but needed if dealing with multiple framebuffers.
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, defaultFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);

    //-----------------------------------------------------
    // Original code from XCode template
    //-----------------------------------------------------

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glTranslatef(0.0f, (GLfloat)(sinf(transY)/2.0f), 0.0f);
    transY += 0.075f;
    
    glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    
    glVertexPointer(2, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
    glEnableClientState(GL_COLOR_ARRAY);
    
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    //-----------------------------------------------------
    // My code to draw a line
    //-----------------------------------------------------

#define USE_COLOR_ARRAY 1

    glLoadIdentity();
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

#if USE_COLOR_ARRAY
    static const GLubyte redColors[] = {
        255,    0,      0,  64,
        255,    0,      0,  64,
        255,    0,      0,  64,
        255,    0,      0,  64,
    };
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, redColors);
#else
    glDisableClientState(GL_COLOR_ARRAY);
    glColor4ub(255, 0, 0, 64);
    glDisable(GL_TEXTURE_2D);
#endif

    glLineWidth(40);
    GLfloat points[] = {-0.4, -0.4, 0.4, 0.4};
    glVertexPointer(2, GL_FLOAT, 0, points);
    glDrawArrays(GL_LINES, 0, 2);

    //-----------------------------------------------------
    // End of my code
    //-----------------------------------------------------
    
    // This application only creates a single color renderbuffer which is already bound at this point.
    // This call is redundant, but needed if dealing with multiple renderbuffers.
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, colorRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

As you can see, I’ve tried this two different ways. Neither one works.

Any help would be much appreciated!

EDIT:
I just wanted to reiterate that the red line shows up fine: it’s just not transparent. It’s the transparency issue that I’m trying to solve. Thanks!

You are missing a glEnable(GL_BLEND), to enable blending, it is off initially.

OMIGOSH thanks, that fixed it!

In fact, tracing a similar theme fixed another problem I was having. I owe you a beer, mate.