OpenGLES 2.0 (GLKit, iPhone): Polygons partially obscure wireframe lines

Question

I am trying to create a 3D function plotter for iOS. I have succeeded to render the graph using triangle strips and also implemented drawing a wireframe via lines. But if I render both at the same time using a 24-bit (or 16-bit doesn't matter) depth buffer the lines get partially obscured by the polygons, making them appear very thin or disappear entirely. Turning off 4xMSAA doesn't solve the issue. See the image below for an example.

Drawing just lines works just fine - the lines have just the proper thickness. If I disable depth-buffering for the lines they get drawn correctly as well, but they of course appear above all the polygons (i.e. lines that are indeed hidden by polygons). I have also tried to reduce the polygons' transparency, to no avail. Slightly increasing the lines' y-coordinates makes it look better, as long as you are looking at them from above, so that they indeed are in front of the polygons then.

For optimum performance, I statically store all vertex data and indices into vertex arrays prior to rendering. Thus, my rendering loop is quite short:

- (void)drawRect:(CGRect)rect
{
    glClearColor(1, 1, 1, 1);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    [self.effect prepareToDraw];

    for (NSUInteger i = 0; i < _nVertexArrays; i ++)
    {
        glBindVertexArrayOES(_vertexArrays[i].vertexArray);
        glDrawElements(_vertexArrays[i].mode, _vertexArrays[i].indexCount, GL_UNSIGNED_INT, NULL);
    }
}

How can I display polygons and wireframes properly at the same time? I also thought of just moving the lines a bit nearer to wherever the camera happens to be right now, but I don't know how to do that in OpenGL ES, and I'm not sure if it might impact performance, as this shift is dependent on the current position of the camera. Is it possible to dynamically apply a transformation to the lines just before drawing them?

Answer 1

Check out glPolygonOffset. It is made specifically for this use.