Getting Started with OpenGL ES

Getting Started with
Open GL ES

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

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

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

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

Using Vertex3D

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

Blank OpenGL
Template

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

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;

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);

Triangles

A triangle is the same as an array of 9 GLfloats

typedef struct
{
Vertex 3D v1;
Vertex 3D v2;
Vertex 3D v3
} Triangle3D;

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

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

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);

Perspective

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

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);

Lights

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

Components
of Light

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

Ambient

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

Diffuse

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

Specular

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

Light Position

const GLfloat light0Position[] = {20.0, 20.0, 20.0,
1.0};

// light will be behind viewer20 units up and right

Directional light

const GLfloat light0Direction[] = {0.0, 0.0, -1.0};

glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION,
light0Direction);

Light Angle

glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 45);

// sets light angle to 90 degrees

Color

• Deﬁned as the color of light that an object
reﬂects.
• OpenGL allows us to specify color for each
component of light(specular, diffuse &
ambient) to material.

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

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);

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.

Emission

//giving and object a glow

GLfloat emission[] = {0.0, 0.4, 0.0, 1.0};

glMaterialfv(GL_FRONT_AND_BACK, GL_EMISSION,
emission);

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

OpenGL ES 2.0
Resources

• Updated for iPhone - http://opengles-
book.com/

• Shader Language - http://www.khronos.org/
ﬁles/opengles_shading_language.pdf

Gaming Engines

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

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

Getting Started with OpenGL ES

More Related Content

What's hot

Viewers also liked

Similar to Getting Started with OpenGL ES

More from John Wilker

Recently uploaded

Getting Started with OpenGL ES