iPhone 4S, OpenGL ES seems too slow. What's wrong?

Question

I draw 2560 very slim polygons for each frame on an iPhone 4S using OpenGL ES. The problem is that I'm getting framerates around 30, which is not smooth enough for my taste. I think it should be faster than that.

1. Is that right?

2. Please help me finding out what can be improved.

UPDATE: I do the rendering on the main thread. Are there any recommendations on which thread to perform the rendering operations?

A bit background: I'm trying to make a smoothly scrolling (target is 60 FPS) waveform of size 320x200 in iPhone view coordinates, so 640x400 pixels on a retina display. My test device is an iPhone 4S. With iOS 6 and 6.1, I could achieve this easily with normal UIKit drawing operations. However, since I updated the device to iOS 7, it got much slower, so I decided to use OpenGL ES, because I read lots of times that it allows faster 2D drawing.

I implemented drawing the waveform with OpenGL ES 2.0, but now it's just a slight bit faster on the device than with UIKit. And like with UIKit, the speed greatly depends on the number of pixels being drawn to, which makes me wonder what's going on.

The waveform is composed out of bars/rectangles, each of them is exactly 1 pixel in width. I draw two bars per pixel column, and each bar consists of two polygons, which means I draw 1280 bars, or 2560 polygons for each frame. The polygons are extremely slim. Each of them is at most 1 pixel wide. I think this should be no problem to draw at 60FPS with OpenGL ES.

I draw one bar like this:

- (void) glFillRect: (Float32)x0 : (Float32)y0 : (Float32)x1 : (Float32)y1 {
    glEnableVertexAttribArray(GLKVertexAttribPosition);

    GLfloat vertices[8];
    glVertexAttribPointer(GLKVertexAttribPosition, 2, GL_FLOAT, GL_FALSE, 0, vertices);

    GLfloat* vp = vertices;
    *vp++ = x0; *vp++ = y0;
    *vp++ = x1; *vp++ = y0;
    *vp++ = x0; *vp++ = y1;
    *vp++ = x1; *vp++ = y1;
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    glDisableVertexAttribArray(GLKVertexAttribPosition);
}

The code calling the above method is below. _maxDrawing and _avgDrawing are my effects, which are composed like this at app startup time:

_maxDrawing = [[GLKBaseEffect alloc] init];
_maxDrawing.useConstantColor = GL_TRUE;
_maxDrawing.constantColor = GLKVector4Make(0.075f, 0.1f, 0.25f, 1.0f);

I later adjust the projection matrix so that my drawing coordinates for OpenGL ES line up with the view coordinates of my view, which, afaik, is the standard way to go for 2D drawing.

[_maxDrawing prepareToDraw];
x_Cu = [self transformViewXToWaveformX:rect.origin.x];
for (Float32 x_Vu = rect.origin.x; x_Vu < viewEndX_Vu; x_Vu += onePixelInViewUnits) {
    x_Cu += onePixelInContentUnits;
    if (x_Cu < 0 || x_Cu >= waveformEndX_Cu) {
        continue;
    }

    SInt64 frameIdx = (SInt64) x_Cu;
    CBWaveformElement element;
    element = [self.dataSource getElementContainingFrame:frameIdx];

    prevMax = curMax;
    curMax = futureMax;
    futureMax = element.max;
    smoothMax = prevMax * 0.25 + curMax * 0.5 + futureMax * 0.25;
    if (smoothMax < curMax)
        smoothMax = curMax;

    Float32 barHeightHalf = smoothMax * heightScaleHalf;
    Float32 barY0 = viewHeightHalf - barHeightHalf;
    Float32 barY1 = viewHeightHalf + barHeightHalf;
    [self glFillRect: x_Vu : barY0 : x_Vu + onePixelInViewUnits : barY1];
}

[_avgDrawing prepareToDraw];
x_Cu = [self transformViewXToWaveformX:rect.origin.x];
for (Float32 x_Vu = rect.origin.x; x_Vu < viewEndX_Vu; x_Vu += onePixelInViewUnits) {
    x_Cu += onePixelInContentUnits;
    if (x_Cu < 0 || x_Cu >= waveformEndX_Cu) {
        continue;
    }

    SInt64 frameIdx = (SInt64) x_Cu;
    CBWaveformElement element;
    element = [self.dataSource getElementContainingFrame:frameIdx];

    Float32 barHeightHalf = element.avg * heightScaleHalf;
    Float32 barY0 = viewHeightHalf - barHeightHalf;
    Float32 barY1 = viewHeightHalf + barHeightHalf;
    [self glFillRect: x_Vu : barY0 : x_Vu + onePixelInViewUnits : barY1];
}

When I take out all the OpenGL calls, the execution duration for one frame is around 1ms, which means it could theoretically go up to 1000 FPS. All other time (around 33ms) is spent drawing.

Answer 1

Per Daniel's request, I'm posting this as an answer to close the question out.

In the above code, it appears that you're using a glDrawArrays() call per each box. This incurs a significant amount of overhead with a lot of boxes.

A more efficient way to approach this would be to use a VBO (probably a dynamically updated one) containing all the vertices of a your scene, or at least a larger group of the boxes, and to draw all of those with a single call.

As rickster points out, iOS 7 adds some nice support for instancing, which could also be a help here.

Regarding whether or not to render on a background thread, in my experience I've usually seen significant performance boosts (10-40%, particularly on the multicore devices) when rendering my OpenGL ES scene on a background thread. Using a serial GCD queue, it's also pretty easy to do that in a safe manner.