Getting Started with Open GL ES

Vertex

• A point in 3D space

• x

• y

• z

Coordinates

Setting position via GLfloat

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 = inYret.z = inZreturn 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

Componentsof 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

• 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.

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.0Resources

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

• Shader Language - http://www.khronos.org/files/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