Radial gradient draw performance - Can OpenGL-ES improve?

Question

I'm working on a image manipulation app that overlays a radial gradient over an image loaded from the photo library.

On screen I have a slider to dynamically in/decrease the radius of the radial gradient. I've found the performance on the simulator to be just fine, but on an iPhone 3G or 3GS it is much slower to redraw when moving the slider.

I'm currently using CGContextDrawRadialGradient for drawing. The steps I'm following for every redraw:

1. Create the graphics context: UIGraphicsBeginImageContext(size);
2. Create gradient object: CGGradientCreateWithColorComponents
3. Draw the image (photo loaded from photo library) to the scale of the screen: drawInRect
4. Set to an overlay blend mode: CGContextSetBlendMode
5. Draw the gradient: CGContextDrawRadialGradient
6. Create a UIimage from using UIGraphicsGetImageFromCurrentImageContext();
7. UIGraphicsEndImageContext();
8. Draw the completed image to screen: drawInRect.

Is there a faster way to draw? Perhaps using OpenGL?

Any suggestions/sample code would be appreciated.

Thanks.

Answer 1

Here are some ideas that might improve performance
(assuming you're using the gradient to add vignetting to the image):

• cache your image drawing in a CGLayer that has the same size as the view, this avoids scaling each time you need to draw it.
• cache the drawing of the radial gradient into another CGLayer.
• when you need to show the result:
  • draw the image layer
  • followed by the overlay blend setting
  • followed by the gradient layer
  • all into the drawing context of the view.
• when the user moves the slider, you can either:
  • redraw the gradient layer then the composition.
  • redraw the composition while scaling the gradient layer, and when the use lifts his finger off the slider redraw the gradient layer then composite again.