Part Three: Getting Started in Xcode

When you develop an application for the iPhone, there is certain initialization and event handling code that must be in place. Fortunately, Xcode generates all of that code for you, and even throws in some sample processing. In the case of the OpenGL ES Application template, we get an application shell that initializes OpenGL ES 1.1 or 2.0, depending on the device capabilities, and bounces a rainbow square up and down on the screen.

Once we’ve generated that application shell, we’ll walk through the code and learn exactly how OpenGL ES on the iPhone works.

Fire up Xcode 4 and the welcome panel will appear.


Xcode 4 welcome panel


Click on the ‘Create a new Xcode project’ option.


Xcode 4 application type selection panel


When you see the next panel, make sure that you have ‘Application’ selected under the ‘iOS’ category in the left column, and ‘OpenGL ES Application’ selected in the main area. Click ‘Next’.


Naming your Xcode project


At the next panel, choose a name for your new application. If you will be following along with this tutorial, name your project ‘EDCubeDemo’. Click ‘Next’.

You will be asked to specify a location to save the project files. I usually put everything in a ‘Projects’ directory in my ‘Documents’ directory, but it’s simply a matter of personal preference.


Xcode OpenGL ES project template


At this point, Xcode has finished writing out your new project template, and created a sample OpenGL ES 2.0 project. Let’s look at the files it created and try to figure out what they do.

EDCubeDemoAppDelegate.h & EDCubeDemoAppDelegate.m

This is a standard application delegate class that handles the launch of your application. The only interesting things in here are the stopAnimation and startAnimation messages being sent to the view controller. We’ll get to those in a few minutes.


In this OpenGL ES application, we’ll be accessing the view directly, and won’t need to worry about doing anything with this file.

Shader.fsh & Shader.vsh

These are the programs called by OpenGL to execute your code at render time. The Shader.fsh is the fragment shader, and the Shader.vsh is the vertex shader. They are similar in function, but are called at different times during the render process. We’ll come back to these later.

EAGLView.h & EAGLView.m

The OpenGL ES specification has all kinds of nifty functions for manipulating and rendering stuff, but because it’s multi-platform, it doesn’t do anything directly with any one computer’s operating system. OpenGL runs on the Mac, the iPhone, the iPad, Windows, Linux, and many other devices. In order for all of the rendering work that OpenGL does to get to a user’s video screen, there needs to be a layer between the OpenGL engine and the actual operating system that it’s running under.

The Khronos group, the same body that manages the OpenGL specification, manages the EGL API specification. The EGL API is the ‘glue’ between the host operating system and the implementation of OpenGL that is running on that host. Since we need that same ‘glue’ to make OpenGL ES 2.0 work and display graphics on the screens of iOS devices, Apple provides their implementation of the EGL API, and throws in an extra ‘A’, for ‘Apple’.

The EAGLView class in our project creates a place for OpenGL ES to use to get the rendered graphics onto the iOS device screen. It does this through the use of the CAEAGLLayer class, the leading ‘CA’ standing for ‘Core Animation’, part of the Apple QuartzCore framework.

In order for all of this to work, your program must make iOS aware that you’re an OpenGL ES application, and the layerClass override in EAGLView.m does just that.

EDCubeDemoViewController.m & EDCubeViewController.h

This is the programmer’s playground for implementing whatever OpenGL ES magic he or she desires. Inside of this class, you’ll find methods to initialize and utilize OpenGL ES, and perform application logic.

We’ll be spending most of our time in this file, and any supporting classes we create.


Like the MainWindow.xib file, we won’t be using this file in this tutorial.

Now that we’ve got at least an idea of what these files are for, let’s see what they do. Click on the ‘Run’ button at the upper left-hand corner of the Xcode IDE. After a moment, the iPhone emulator will launch and run our application, which at this point consists of a rainbow box moving up and down the screen against a gray background.


OpenGL ES project template running on the iPhone


Congratulations, you’re ready to start modifying the application template, but first we’re going to take a much closer look at what the code is doing now.

Part Two | Index | Part Four