OpenGL ES 1.1 is the 3D graphics API used by the iPhone and while it is extremely powerful it can often be very intimidating to the beginner. One of the main issues is that while there is a great deal of documentation and tutorials for OpenGL like the “Red Book” and other sources online there seem to be very few available resources for Open GL ES. This session will introduce the concepts of developing with OpenGL ES 1.1 and demonstrate them via sample code.

1. Getting Started with
Open GL ES

2. Vertex
• A point in 3D space
•x
•y
•z

3. Coordinates

4. Setting position
via GLfloat
GLfloat vertex[3];
vertex[0] = 20.0 //x
vertex[1] = 23.0 //y
vertex[2] = 15.75 //z

5. Vertex Array
• A block of vertex data (vertex
coordinates, texture coordinates, etc) for
some or all objects.
• size determined by number of vertices
submitted x 3 for 3d objects (or 2 for 2d
objects)
• vertex array of 6 triangles =
6 x 3 x 3 = 54

6. Data structure to
hold vertex
typedef struct {
GLfloat x;
GLfloat y;
GLfloat z
} vertex3D;

7. Using Vertex3D
Vertex3D vertex;
vertex.x = 20.0
vertex.y = 23.0
vertex.z = 15.75

8. Blank OpenGL
Template
• Jeff Lamarche’s Template
• http://iphonedevelopment.blogspot.com/
2008/12/updated-opengl-es-xcode-
project.html

9. creating vertices
static inline Vertex3D Vertex3DMake(CGFloat inX,
CGFloat inY, CGFloat inZ)
{
Vertex3D ret;
ret.x = inX;
ret.y = inY
ret.z = inZ
return ret;

10. Distance
between vertices
static inline GLfloat
Vertex3DCalculateDistanceBetweenVertices(Vertex3D
first, Vertex3D second)
{
GLfloat deltaX = second.x - first.x;
GLfloat deltaY = second.y - first.y;
GLfloat deltaZ = second.z - first.x;
return sqrtf(deltaX*deltaX + deltaY * deltaY + deltaZ
*deltaZ);

11. Triangles
A triangle is the same as an array of 9 GLfloats
typedef struct
{
Vertex 3D v1;
Vertex 3D v2;
Vertex 3D v3
} Triangle3D;

12. Triangles Terminology
• front face - face the viewer sees of an
object
• winding - order in which vertices are drawn
matters for mechanics of which direction
an object faces
• backface - side that is not drawn
• backface culling - process to determine
which triangles are visible ot the user

13. Viewports
• Portion of viewable space that can be seen
by viewer
• Perspective Viewport- Converging lines and
items change size based on distance
• Orthogonal Viewport - No converging lines
and changes in size to communicate
distance

14. GLOrthof()
CGRect rect = view.bounds;
glOrthof(-1.0,
1.0,
-1.0 / rect.size.width / rect.size.height),
-1.0 / rect.size.width / rect.size.height),
0.01,
1000.0,
glViewport(0, 0, rect.size.width,
rect.size.height);

15. Perspective
• Frustum - the shape of our space we see.
Not cubic.
• Field of Vision - angles used to calculate our
frustum

16. GLFrustumf()
CGRect rect = view.bounds;
glfloat size = .01 * tanf(DEGREES_TO_RADIANS(45.0)/
2.0);
glFrustumf(-size,
size,
-size / rect.size.width /rect.size.height),
size / rect.size.width / rect.size.height),
0.01,
1000.0);

17. Lights
• You can have up to 8 lights
• must be enabled using
• glEnable(GL_LIGHT0);
• Specify properties of light

18. Components
of Light
• Ambient - No clear source.
• Diffuse - even directional light on side of
object that faces light
• specular - highlight or hotspot

19. Ambient
const GLfloat light0Ambient[] = {0.05, 0.05,
0.05, 0.05, 1.0};
glLightfv(GL_LIGHT0, GL_AMBIENT,
light0Ambient);

20. Diffuse
const GLfloat light0Diffuse[] = {0.5, 0.5, 0.5,
0.5, 1.0};
glLightfv(GL_LIGHT0, GL_DIFFUSE,
light0Diffuse);

21. Specular
const GLfloat light0Specular[] = {0.7, 0.7, 0.7,
1.0};

22. Light Position
const GLfloat light0Position[] = {20.0, 20.0, 20.0,
1.0};
// light will be behind viewer20 units up and right

23. Directional light
const GLfloat light0Direction[] = {0.0, 0.0, -1.0};
glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION,
light0Direction);

24. Light Angle
glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 45);
// sets light angle to 90 degrees

25. Color
• Defined as the color of light that an object
reflects.
• OpenGL allows us to specify color for each
component of light(specular, diffuse &
ambient) to material.

26. Color on
Material
GLfloat ambientAndDiffuse[] = {0.0, 0.1, 0.9, 1.0};
glMaterialfv(GL_FRONT_AND_BACK,
GL_AMBIENT_AND_DIFFUSE, ambientAndDiffuse);
//OpenGL ES only supports applying material to
FRONT_AND_BACK

27. Colors on different
components of light
GLfloat ambient[] = {0.0, 0.1, 0.9, 1.0};
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT, ambient);
GLfloat diffuse[] = {0.0, 0.1, 0.9, 1.0};
glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, diffuse);

28. Shininess on
Specular
GLfloat specular[] = {0.3, 0.3, 0.3, 1.0};
glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR,
specular);
glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 25.0);
//tighter hotspot with shininess at 25 than default
50.

29. Emission
//giving and object a glow
GLfloat emission[] = {0.0, 0.4, 0.0, 1.0};
glMaterialfv(GL_FRONT_AND_BACK, GL_EMISSION,
emission);

30. Resources
• http://www.khronos.org/opengles/1_X/
• http://iphonedevelopment.blogspot.com/2009/05/
opengl-es-from-ground-up-table-of.html
• http://maniacdev.com/2009/07/16-killer-opengl-es-
resources/
• http://web.me.com/smaurice/AppleCoder/
iPhone_OpenGL/iPhone_OpenGL.html

31. OpenGL ES 2.0
Resources
• Updated for iPhone - http://opengles-
book.com/
• Shader Language - http://www.khronos.org/
files/opengles_shading_language.pdf

32. Gaming Engines
• http://code.google.com/p/cocos2d-iphone/
• http://sio2interactive.com/
• http://www.oolongengine.com/

33. Thank you
• A special thanks to Jeff Lamarche who’s
series on Open GL ES from the ground up
served as a major resources for this
presentation and who’s openGL template I
used in several examples. I highly
recommend that you check out the series
at:
• http://iphonedevelopment.blogspot.com/2009/05/
opengl-es-from-ground-up-table-of.html