Debugging tools for OpenGL in XCode

Development / iOS

My first iOS app has some UI elements that use OpenGL. It’s been interesting learning to optimise this particular part of the app for 60fps (60 frames per second) rendering. You hear 60fps being talked about a lot with iOS UI development, and there is very good reason for this.

If what you are doing animates in response to touches, 60fps updates are essential to avoid it feeling laggy. Apple spent a lot of time working this out before they unleashed even the first iPhone on the world.

Of course with an iPhone 5 or iPad 3+ you can pretty much get 60FPS without having a clue what you are doing. It is when you test your app on a phone two or three generations older that you realise that you have work to do.

The common problems are related to the amount of compositing you do, and that is certainly the case for me. That CAEAGLLayer you have in your view with opaque set to NO? Ouch. There are some very useful past WWDC video sessions available for download on optimizing your 2D rendering performance, and these relate to when you use 3D layers within a 2D view-based UI. Watch them. There’s nothing I hate more than an app that uses a UITableView that is all jittery and laggy. It squanders the great experience that users appreciate in Apple devices.

The first thing you should have noticed is that in Xcode (from 4.5 or 4.6 on I think) there is a small but very handy frame-rate timeline shown right in Xcode whenever you run your app on a real device. Forget using the simulator for performance testing. You can find this by clicking the burger-like icon AKA the “Debug Navigator”. If you click to select this FPS timeline graph you then get some CPU and GPU utilisation values right there in Xcode without even using Instruments.

Once you are viewing this information, you will see a button at the bottom left of the main content area in Xcode, labelled “Analyze Performance”. This feature is magic.

XCode OpenGL Analyzer

When you click this button it will spend a little time thinking and your device will freeze and then show an analyser icon on the screen. Then Xcode will show you a snapshot of your OpenGL pipeline, including image captures of the frame buffers at each stage in the rendering.

Not only that, it gives you tips and warnings about your performance, and some basic information about the state of the various buffers and variables from the OpenGL pipeline.

Using this you can step through your pipeline and find redundant sections of code, and visualise the amount of work your rendering requires, as well as the time involved.

Through this I have got my UI working at 60fps even on the lowly iPhone 4. The iPhone 5 GPU is pretty sick it has to be said, the difference in GPU load over iPhone 4 is huge for my app which is not a game.

The Author

Marc Palmer (Twitter, Mastodon) is a consultant and software engineer specialising in Apple platforms. He currently works on the iOS team of Concepts sketching app, as well as his own apps like video subtitle app Captionista. He created the Flint open source framework. He can also do a pretty good job of designing app products. Don't ask him to draw anything, because that's really embarrassing. You can find out more here.