drawRect performance

Question

I need to draw lots of polygons 500k to a million on the iPad. After experimenting, I can only get only get 1 fps if that. This is just an example my real code has some good sized polygons.

Here are a few question:

1. Why don't I have to add the Quartz Framework to my project?
2. If many of the polygons repeat can I leverage that with views or are they too heavy etc?
3. Any alternatives, QTPaint can handle this but dips into the gpu. Is there is anything like QT or ios?
4. Can Opengl increase 2d performance of this type?

Example drawrect:

//X Y Array of boxes

- (void)drawRect:(CGRect)rect
{
    int reset = [self pan].x;
    int markX = reset;
    int markY = [self pan].y;
    CGContextRef context = UIGraphicsGetCurrentContext();
    for(int i = 0; i < 1000; i++)//1,000,000
    {
        for(int j = 0; j < 1000; j++)
        {
            CGContextMoveToPoint(context, markX,  markY);
            CGContextAddLineToPoint(context, markX, markY + 10);
            CGContextAddLineToPoint(context, markX + 10, markY + 10);
            CGContextAddLineToPoint(context, markX + 10, markY);
            CGContextAddLineToPoint(context, markX, markY);
            CGContextStrokePath(context);
            markX+=12;
        }
        markY += 12;
        markX = reset;
    }

}

The pan just move the array of boxes around on screen with pan gesture. Any help or hints would greatly appreciated.

Answer 1

The key issue with your example is that it is not optimized. Whenever drawRect: is called, the device is rendering all 1,000,000 squares. Worse still, it's making 6,000,000 calls to those APIs in the loop. If you want to refresh this view at even a modest 30fps, that is 180,000,000 calls / second.

With your 'simple' example, the size of the draw area is 12,000px × 12,000px; the maximum area you can display on the iPad's display is 768×1024 (assuming full-screen portrait). Therefore, the code is wasting a lot of CPU resources drawing outside the visible area. UIKit has ways of handling this scenario with relative ease.

When managing content that is significantly larger than the visible area, you should limit drawing to only that which is visible. UIKit has a couple of ways of handing this; UIScrollView in combination with a view backed by a CATiledLayer is your best bet.

Steps:

Disclaimer: This is specifically an optimization of your example code above

• Create a new View Based Application iPad project
• Add a reference to the QuartzCore.framework
• Create a new class, say MyLargeView, subclassed from UIView and add the following code:

:

#import <QuartzCore/QuartzCore.h>

@implementation MyLargeView
- (void)awakeFromNib {
    CATiledLayer *tiledLayer = (CATiledLayer *)[self layer];
    tiledLayer.tileSize = CGSizeMake(512.0f, 512.0f);
}

// Set the layer's class to be CATiledLayer.
+ (Class)layerClass {
    return [CATiledLayer class];
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    // only draws what is specified by the rect parameter

    CGContextRef context = UIGraphicsGetCurrentContext();

    // set up some constants for the objects being drawn        
    const CGFloat width  = 10.0f;           // width of rect
    const CGFloat height = 10.0f;           // height of rect
    const CGFloat xSpace = 4.0f;            // space between cells (horizontal)
    const CGFloat ySpace = 4.0f;            // space between cells (vertical)
    const CGFloat tWidth = width + xSpace;  // total width of cell
    const CGFloat tHeight = height + ySpace;// total height of cell

    CGFloat xStart = floorf(rect.origin.x / tWidth);     // first visible cell (column)
    CGFloat yStart = floorf(rect.origin.y / tHeight);    // first visible cell (row)
    CGFloat xCells = rect.size.width / tWidth + 1;       // number of horizontal visible cells
    CGFloat yCells = rect.size.height / tHeight + 1;     // number of vertical visible cells

    for(int x = xStart; x < (xStart + xCells); x++) {
        for(int y = yStart; y < (yStart + yCells); y++) {
            CGFloat xpos = x*tWidth;
            CGFloat ypos = y*tHeight;

            CGContextMoveToPoint(context, xpos,  ypos);
            CGContextAddLineToPoint(context, xpos, ypos + height);
            CGContextAddLineToPoint(context, xpos + width, ypos + height);
            CGContextAddLineToPoint(context, xpos + width, ypos);
            CGContextAddLineToPoint(context, xpos, ypos);
            CGContextStrokePath(context);
        }
    }
}


@end

• Edit the view controller nib and add a UIScrollView to the view
• Add a UIView to the UIScrollView and make sure it fills the UIScrollView
  
• Change the class to MyLargeView
  
• Set frame size of MyLargeView to 12,000×12,000
  
• Finally, open up the view controller .m file and add the following override:

:

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
    UIScrollView *scrollView = [self.view.subviews objectAtIndex:0];
    scrollView.contentSize = CGSizeMake(12000, 12000);
}

If you look at the drawRect: call, it is only drawing into the area specified by the rect parameter, which will correspond to the tile size (512×512) for the CATiledLayer we configured in the awakeFromNib method. This will scale to a 1,000,000×1,000,000 pixel canvas.

Alternatives to look at are the ScrollViewSuite example, specifically 3_Tiling.

Answer 2

OpenGL is GPU hardware accelerated on iOS devices. Core Graphics drawing is not, and can be many many times slower when dealing with a large number of small graphics primitives (lines).

For lots of small squares, just writing them into a bitmap in C code is faster than Core Graphics line drawing. Then just draw the bitmap to the view once when done. But Open GL would be even faster.