OpenGL ES 2.0 on the iPhone

Welcome to the OpenGL ES 2.0 on the iPhone tutorial. Through the course of this tutorial, we’ll take the basic OpenGL ES application template as generated by Xcode 4 and upgrade it to an interactive, three-dimensional cube complete with textures and zoom.

All of the related Xcode project code can be downloaded from their chapter summaries below.

 

Part One: Introduction

A little bit about myself and this tutorial.

 

Part Two: OpenGL Basics

Some background on OpenGL, what it is and where it comes from.

 

Part Three: Getting Started in Xcode

This chapter walks through the process of creating an OpenGL ES application in Xcode 4, and explains the role of each of the generated files. After the Xcode project has been generated, we compile and run the application to see what it looks like.

 

Part Four: Creating the OpenGL Environment

Now that we have an OpenGL ES template application generated, we walk through the code that Apple has given us to create and configure the OpenGL ES environment on the iPhone. We go through the code to initialize OpenGL ES line by line.

 

Part Five: Drawing Something on the Screen

After walking through the code to initialize the OpenGL ES environment in chapter four, we now walk through all of the code used to actually draw something in that environment.

Related Xcode project code
EDCubeDemo.zip

 

Part Six: Making Some Changes

With a firm understanding of how the Xcode 4 OpenGL ES environment is set up and used on the iPhone, we dive into the code and make our first change: adding movement along the X axis in addition to the existing movement along the Y axis.

Related Xcode project code
EDCubeDemo_Part6.zip

 

Part Seven: Matrices

Chapter seven serves as an introduction to a very important concept in OpenGL, matrices. We take another look at the OpenGL code to move the rainbow square around, and learn about the identity matrix.

 

Part Eight: The Translation Matrix

This chapter takes a close look at one of the most useful OpenGL matrices, the translation matrix. We also get a crash course in matrix multiplication, with step-by-step instructions. By the end of this chapter, we have converted our X and Y uniform variables into a single translation matrix.

Related Xcode project code
EDCubeDemo_Part8.zip

 

Part Nine: The Scale Matrix

The next matrix we look into the scale matrix, use by OpenGL to shrink or enlarge objects. Without changing any shader code, we add scale to our rainbow cube.

Related Xcode project code
EDCubeDemo_Part9.zip

 

Part Ten: Matrix Tools

Part ten walks through the creation and implementation of a new utility class, EDMatrixTools. We get first hand experience with handling matrices in Objective-C and update our view controller to utilize the new class.

Related Xcode project code
EDCubeDemo_Part10.zip

 

Part Eleven: The Rotation Matrix

As one of the more complex matrices used in OpenGL, the rotation matrix will allow us to easily rotate objects around the X, Y, and Z axes without touching the shaders. We learn more about coding matrices in OpenGL by adding code to our EDMatrixTools class, and we expose a problem with our program logic.

Related Xcode project code
EDCubeDemo_Part11.zip

 

Part Twelve: The Projection Matrix

The last matrix we look at in depth, the projection matrix helps us solve a scaling problem and make conceptualizing our objects in OpenGL space easier.

Related Xcode project code
EDCubeDemo_Part12.zip

 

Part Thirteen: Rendering Textures

We’ve had all we can take of rainbows, we we’re going to load and Apply an OpenGL texture to our cube. We learn how OpenGL uses texture coordinates to apply textures to shapes, and what happens when there’s too much, or too little, texture for a shape.

Related Xcode project code
EDCubeDemo_Part13.zip

 

Part Fourteen: Creating the Cube

Finally, we create a cube. Part fourteen walks us through the cube creation process at a very low level, explaining the construction of the triangle strip and the role of degenerate triangles in OpenGL. By the end of the chapter, we have our cube, but there’s something wrong…

Related Xcode project code
EDCubeDemo_Part14.zip

 

Part Fifteen: Drawing and Culling

With our cube looking a little strange, we cover one possible fix: face culling. After playing with face culling for a bit, we decide to try another solution.

Related Xcode project code
EDCubeDemo_Part15.zip

 

Part Sixteen: The Depth Buffer

In part sixteen, we not only implement a depth buffer to solve our cube rendering problems, we also upgrade our projection matrix code to apply perspective, giving our cube a truly three-dimensional feel.

Related Xcode project code
EDCubeDemo_Part16.zip

 

Part Seventeen: Putting It All Together

In the final part of the main tutorial, we add methods to our view controller to handle iPhone screen touches to manipulate our cube, and add an icon to our application.

Related Xcode project code
EDCubeDemo_Part17.zip

 

Appendix A: Multiple Textures on the Cube

The first appendix in this tutorial covers loading multiple textures for an object.

Related Xcode project code
EDCubeDemo_AppendixA.zip

 

Appendix B: Adding a Cube Map and Velocity

The second appendix in this tutorial show how to load cube map data and apply it to a cube through projection. A simple simulated reflection applied in the shaders makes our cube appear glossy, reflecting one of five different cube mapped environment.

Related Xcode project code
EDCubeDemo_AppendixB.zip

 

2 Comments to “OpenGL ES 2.0 on the iPhone”

  1. By rdo, July 4, 2011 @ 11:55 am

    Thanks so much for this tutorial. You did an awesome job and it has really helped me understand openGL ES 2.0.
    Super job!