Top Banner
OpenGL ES on iOS 2012.1.19 EungShik Kim
66

OpenGL ES on iOS

May 30, 2015

Download

Software

Henry Kim

Describe the basic of OpenGL ES of iOS for novice.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: OpenGL ES on iOS

OpenGL����������� ������������������  ES����������� ������������������  on����������� ������������������  iOS2012.1.19����������� ������������������  EungShik����������� ������������������  Kim

Page 2: OpenGL ES on iOS

Today’s����������� ������������������  Topics

Page 3: OpenGL ES on iOS

Today’s����������� ������������������  Topics

OpenGL����������� ������������������  on����������� ������������������  Desktop

OpenGL����������� ������������������  ES����������� ������������������  on����������� ������������������  iOS

Novice Advanced

Page 4: OpenGL ES on iOS

Today’s����������� ������������������  Topics

OpenGL����������� ������������������  on����������� ������������������  Desktop

OpenGL����������� ������������������  ES����������� ������������������  on����������� ������������������  iOS

Novice Advanced

OpenGL����������� ������������������  Tutorial����������� ������������������  on����������� ������������������  Internet

Page 5: OpenGL ES on iOS

Today’s����������� ������������������  Topics

OpenGL����������� ������������������  on����������� ������������������  Desktop

OpenGL����������� ������������������  ES����������� ������������������  on����������� ������������������  iOS

Novice Advanced

OpenGL����������� ������������������  Tutorial����������� ������������������  on����������� ������������������  Internet

This����������� ������������������  Lecture

Page 6: OpenGL ES on iOS

Today’s����������� ������������������  Topics

•OpenGL����������� ������������������  Overview����������� ������������������  Coordinate����������� ������������������  Systems����������� ������������������  and����������� ������������������  Transformations����������� ������������������  Drawing����������� ������������������  Geometry����������� ������������������  Using����������� ������������������  Textures����������� ������������������  Other����������� ������������������  Details

Page 7: OpenGL ES on iOS

OpenGL����������� ������������������  Overview

Page 8: OpenGL ES on iOS

OpenGL����������� ������������������  Overview

Page 9: OpenGL ES on iOS

OpenGL����������� ������������������  Overview

OpenGL����������� ������������������  is����������� ������������������  short����������� ������������������  for����������� ������������������  "Open����������� ������������������  Graphic����������� ������������������  Library"����������� ������������������  !Software����������� ������������������  interface����������� ������������������  for����������� ������������������  graphics����������� ������������������  hardware����������� ������������������  Quickly����������� ������������������  render����������� ������������������  2D����������� ������������������  or����������� ������������������  3D����������� ������������������  graphics����������� ������������������  Hardware����������� ������������������  implementation����������� ������������������  agnostic����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  is����������� ������������������  a����������� ������������������  subset����������� ������������������  of����������� ������������������  OpenGL����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  GLUT����������� ������������������  and����������� ������������������  GLU����������� ������������������  are����������� ������������������  not����������� ������������������  available����������� ������������������  on����������� ������������������  the����������� ������������������  iOS

Page 10: OpenGL ES on iOS

OpenGL����������� ������������������  is����������� ������������������  a����������� ������������������  State����������� ������������������  Machine

Page 11: OpenGL ES on iOS

OpenGL����������� ������������������  is����������� ������������������  a����������� ������������������  State����������� ������������������  Machine

Page 12: OpenGL ES on iOS

OpenGL����������� ������������������  is����������� ������������������  a����������� ������������������  State����������� ������������������  Machine

•Change����������� ������������������  Machine����������� ������������������  State����������� ������������������       glEnable(); glDisable(); glMatrixMode(); glBindFramebufferOES();      glViewport(); glVertexPointer(); glColorPointer(); glTranslatef(); !Issue����������� ������������������  Drawing����������� ������������������  Commands����������� ������������������  

     glDrawArrays(); glDrawElements(); … !Read����������� ������������������  Back����������� ������������������  State,����������� ������������������  Drawing����������� ������������������  Results����������� ������������������  

     glGetBooleanv(); glGetFloatv(); glReadPixels();

Page 13: OpenGL ES on iOS

Coordinate����������� ������������������  System

Page 14: OpenGL ES on iOS

The����������� ������������������  Coordinate����������� ������������������  System����������� ������������������  Onion

Page 15: OpenGL ES on iOS

The����������� ������������������  Coordinate����������� ������������������  System����������� ������������������  Onion

Window����������� ������������������  Coordinates

Normalized����������� ������������������  Device����������� ������������������  Coordinates

Clip����������� ������������������  and����������� ������������������  Eye����������� ������������������  Coordinates

World����������� ������������������  Coordinates

Object����������� ������������������  Coordinates

Page 16: OpenGL ES on iOS

Window����������� ������������������  Coordinates

Page 17: OpenGL ES on iOS

Window����������� ������������������  Coordinates

Page 18: OpenGL ES on iOS

Normalized����������� ������������������  Device����������� ������������������  Coordinates

Page 19: OpenGL ES on iOS

Normalized����������� ������������������  Device����������� ������������������  Coordinates

Page 20: OpenGL ES on iOS

Normalized����������� ������������������  Device����������� ������������������  Coordinates

Page 21: OpenGL ES on iOS

Normalized����������� ������������������  Device����������� ������������������  Coordinates

Page 22: OpenGL ES on iOS

Eye����������� ������������������  Coordinates

Page 23: OpenGL ES on iOS

Eye����������� ������������������  Coordinates

Page 24: OpenGL ES on iOS

World����������� ������������������  Coordinates

Page 25: OpenGL ES on iOS

World����������� ������������������  Coordinates

Page 26: OpenGL ES on iOS

Object����������� ������������������  Coordinates

Page 27: OpenGL ES on iOS

Object����������� ������������������  Coordinates

Page 28: OpenGL ES on iOS

DEMOTransformations

Page 29: OpenGL ES on iOS

DEMOTransformations

Documentation > iOS 4.2 Library > Media Layer > OpenGLES > GLES2Sample.xcodeprj

Page 30: OpenGL ES on iOS

Transformations����������� ������������������  Cheat����������� ������������������  Sheet

Page 31: OpenGL ES on iOS

Transformations����������� ������������������  Cheat����������� ������������������  Sheet

glMatrixMode(GL_PROJECTION);      glMatrixMode(GL_MODELVIEW); !     glLoadIndetity(); !     glOrthof(left, right, bottom, top, zNear, zFar);      glFrustumf(left, right, bottom, top, zNear, zFar); !     glRotatef(degrees, x, y, z);      glTranslatef(x, y, z);      glScalef(x, y, z);      glMultMatrixf(matrix); !     glPushMatrix();      glPopMatrix();

Page 32: OpenGL ES on iOS

Drawing����������� ������������������  Geometry

Page 33: OpenGL ES on iOS

Verties

•OpenGL����������� ������������������  ES����������� ������������������  draws����������� ������������������  triangles,����������� ������������������  lines,����������� ������������������  and����������� ������������������  points����������� ������������������  Object����������� ������������������  space����������� ������������������  vertices����������� ������������������  mapped����������� ������������������  into����������� ������������������  window����������� ������������������  space����������� ������������������  Rasterize����������� ������������������  the����������� ������������������  shapes����������� ������������������  to����������� ������������������  get����������� ������������������  pixels

Page 34: OpenGL ES on iOS

Verties

•OpenGL����������� ������������������  ES����������� ������������������  draws����������� ������������������  triangles,����������� ������������������  lines,����������� ������������������  and����������� ������������������  points����������� ������������������  Object����������� ������������������  space����������� ������������������  vertices����������� ������������������  mapped����������� ������������������  into����������� ������������������  window����������� ������������������  space����������� ������������������  Rasterize����������� ������������������  the����������� ������������������  shapes����������� ������������������  to����������� ������������������  get����������� ������������������  pixels

Page 35: OpenGL ES on iOS

Colors

•Each����������� ������������������  vertex����������� ������������������  can����������� ������������������  have����������� ������������������  a����������� ������������������  color����������� ������������������  associated����������� ������������������  RGBA����������� ������������������  

•Alpha����������� ������������������  usually����������� ������������������  means����������� ������������������  opacity����������� ������������������  Lines����������� ������������������  and����������� ������������������  triangles����������� ������������������  interpolate����������� ������������������  colors

Page 36: OpenGL ES on iOS

Colors

•Each����������� ������������������  vertex����������� ������������������  can����������� ������������������  have����������� ������������������  a����������� ������������������  color����������� ������������������  associated����������� ������������������  RGBA����������� ������������������  

•Alpha����������� ������������������  usually����������� ������������������  means����������� ������������������  opacity����������� ������������������  Lines����������� ������������������  and����������� ������������������  triangles����������� ������������������  interpolate����������� ������������������  colors

Page 37: OpenGL ES on iOS

Drawing����������� ������������������  Modes

•Vertices����������� ������������������  are����������� ������������������  passed����������� ������������������  to����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  in����������� ������������������  arrays����������� ������������������  Drawing����������� ������������������  modes����������� ������������������  determine����������� ������������������  how����������� ������������������  vertices����������� ������������������  are����������� ������������������  interpreted����������� ������������������  to����������� ������������������  produce����������� ������������������  shapes����������� ������������������  Vertex����������� ������������������  order����������� ������������������  matters

Page 38: OpenGL ES on iOS

Drawing����������� ������������������  Modes

•Vertices����������� ������������������  are����������� ������������������  passed����������� ������������������  to����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  in����������� ������������������  arrays����������� ������������������  Drawing����������� ������������������  modes����������� ������������������  determine����������� ������������������  how����������� ������������������  vertices����������� ������������������  are����������� ������������������  interpreted����������� ������������������  to����������� ������������������  produce����������� ������������������  shapes����������� ������������������  Vertex����������� ������������������  order����������� ������������������  matters

GL_TRIANGLES

Page 39: OpenGL ES on iOS

Drawing����������� ������������������  Modes

•Vertices����������� ������������������  are����������� ������������������  passed����������� ������������������  to����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  in����������� ������������������  arrays����������� ������������������  Drawing����������� ������������������  modes����������� ������������������  determine����������� ������������������  how����������� ������������������  vertices����������� ������������������  are����������� ������������������  interpreted����������� ������������������  to����������� ������������������  produce����������� ������������������  shapes����������� ������������������  Vertex����������� ������������������  order����������� ������������������  matters

GL_TRIANGLES GL_TRIANGLE_FAN

Page 40: OpenGL ES on iOS

Drawing����������� ������������������  Modes

•Vertices����������� ������������������  are����������� ������������������  passed����������� ������������������  to����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  in����������� ������������������  arrays����������� ������������������  Drawing����������� ������������������  modes����������� ������������������  determine����������� ������������������  how����������� ������������������  vertices����������� ������������������  are����������� ������������������  interpreted����������� ������������������  to����������� ������������������  produce����������� ������������������  shapes����������� ������������������  Vertex����������� ������������������  order����������� ������������������  matters

GL_TRIANGLES GL_TRIANGLE_FAN GL_TRIANGLE_STRIP

Page 41: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 42: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 43: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 44: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 45: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 46: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 47: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 48: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 49: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 50: OpenGL ES on iOS

Drawing����������� ������������������  a����������� ������������������  Tetrahedron

• Use����������� ������������������  a����������� ������������������  triangle����������� ������������������  strip

Page 51: OpenGL ES on iOS

DEMOGeometry

Page 52: OpenGL ES on iOS

DEMOGeometry

Documentation > iOS 4.2 Library > Media Layer > OpenGLES > GLES2Sample.xcodeprj

Page 53: OpenGL ES on iOS

Geometry����������� ������������������  Cheat����������� ������������������  Sheet

 GLfloat vertexArray[] = {           x1, y1, z1,           x2, y2, z2,           x3, y3, z3,            ...      }; !     GLubyte colorArray[] = {           r1, g1, b1, a1,           r2, g2, b2, a2,           r3, g3, b3, a3,            ...      } !     glVertexPointer(dimOfVertices, GL_FLOAT, arrayOffset, vertexArray);      glEnableClientState(GL_VERTEX_ARRAY);      glColorPointer(4, GL_UNSIGNED_BYTE, arrayOffset, colorArray);      glEnableClientState(GL_COLOR_ARRAY); !     glDrawArrays(GL_TRIANGLE_STRIP, arrayOffset, numberOfVertices);           // or GL_TRIANGLE_FAN, GL_TRIANGLES !     glDisableClientState(GL_VERTEX_ARRAY);      glDisableClientState(GL_COLOR_ARRAY);

Page 54: OpenGL ES on iOS

Using����������� ������������������  Textures

Page 55: OpenGL ES on iOS

Texture����������� ������������������  Mapping

Color����������� ������������������  pixels����������� ������������������  according����������� ������������������  to����������� ������������������  an����������� ������������������  image����������� ������������������  in����������� ������������������  memory����������� ������������������  Almost����������� ������������������  always����������� ������������������  2D����������� ������������������  (3D����������� ������������������  textures����������� ������������������  are����������� ������������������  possible����������� ������������������  though)����������� ������������������  Vertices����������� ������������������  are����������� ������������������  given����������� ������������������  texture����������� ������������������  coordinates����������� ������������������  (u,����������� ������������������  v)

Page 56: OpenGL ES on iOS

Texture����������� ������������������  Mapping

Color����������� ������������������  pixels����������� ������������������  according����������� ������������������  to����������� ������������������  an����������� ������������������  image����������� ������������������  in����������� ������������������  memory����������� ������������������  Almost����������� ������������������  always����������� ������������������  2D����������� ������������������  (3D����������� ������������������  textures����������� ������������������  are����������� ������������������  possible����������� ������������������  though)����������� ������������������  Vertices����������� ������������������  are����������� ������������������  given����������� ������������������  texture����������� ������������������  coordinates����������� ������������������  (u,����������� ������������������  v)

Page 57: OpenGL ES on iOS

Texture����������� ������������������  Atlasing

•Swapping����������� ������������������  textures����������� ������������������  often����������� ������������������  is����������� ������������������  inefficient����������� ������������������  Instead����������� ������������������  make����������� ������������������  one����������� ������������������  giant����������� ������������������  shared����������� ������������������  texture

Page 58: OpenGL ES on iOS

Texture����������� ������������������  Atlasing

•Swapping����������� ������������������  textures����������� ������������������  often����������� ������������������  is����������� ������������������  inefficient����������� ������������������  Instead����������� ������������������  make����������� ������������������  one����������� ������������������  giant����������� ������������������  shared����������� ������������������  texture

Page 59: OpenGL ES on iOS

Texture����������� ������������������  Atlasing

•Swapping����������� ������������������  textures����������� ������������������  often����������� ������������������  is����������� ������������������  inefficient����������� ������������������  Instead����������� ������������������  make����������� ������������������  one����������� ������������������  giant����������� ������������������  shared����������� ������������������  texture����������� ������������������  !!!!!!!!!Vertices����������� ������������������  may����������� ������������������  not����������� ������������������  have����������� ������������������  consistent����������� ������������������  (u,v)����������� ������������������  coordinates

Page 60: OpenGL ES on iOS

DEMOTextures

Page 61: OpenGL ES on iOS

DEMOTextures

Documentation > iOS 4.2 Library > Media Layer > OpenGLES > GLES2Sample.xcodeprj

Page 62: OpenGL ES on iOS

Texture����������� ������������������  Cheat����������� ������������������  Sheet

bash$ export PATH=${PATH}:/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/ bash$ texturetool -f PVR -e PVRTC image.png -o image.pvrtc bash$ # image.png must be square with power of side length -- e.g. 64, 256, 1024 !#import "PVRTexture.h" // From Apple's PVRTextureLoader Example Project !NSString *path = [[NSBundle mainBundle] pathForResources:@"image" ofType:@"pvrtc"]; PVRTexture *texture = [[PVRTexture alloc] initWithContentsOfFile:path]; !glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, 1.0f); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); !glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, texture.name); !GLFloat textureCoordArray[] = {      u1, v1,      u2, v2,      u3, v3,      … }; !glTexCoordPointer(2, GL_FLOAT, arrayOffset, textureCoordArray); glEnableClientState(GL_TEXTURE_COORD_ARRAY); glDrawArrays(GL_TRIANGLE_STRIP arrayOffset, numberOfVertices); glDisableClientState(GL_TEXTURE_COORD_ARRAY);

Page 63: OpenGL ES on iOS

Other����������� ������������������  Detail

Page 64: OpenGL ES on iOS

OpenGL����������� ������������������  ES����������� ������������������  1.1����������� ������������������  vs����������� ������������������  ES����������� ������������������  2.0

•This����������� ������������������  lecture����������� ������������������  described����������� ������������������  OpenGL����������� ������������������  ES����������� ������������������  1.1����������� ������������������  ES����������� ������������������  2.0����������� ������������������  is����������� ������������������  drastically����������� ������������������  different����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  Uses����������� ������������������  shader����������� ������������������  based����������� ������������������  approach����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  More����������� ������������������  flexible,����������� ������������������  harder����������� ������������������  to����������� ������������������  wrap����������� ������������������  your����������� ������������������  head����������� ������������������  around����������� ������������������  ES����������� ������������������  2.0����������� ������������������  not����������� ������������������  available����������� ������������������  in����������� ������������������  iPhones����������� ������������������  before����������� ������������������  3GS

Page 65: OpenGL ES on iOS

OpenGL����������� ������������������  References

•Apple����������� ������������������  OpenGL����������� ������������������  Programming����������� ������������������  Guide����������� ������������������  OpenGL����������� ������������������  Redbook����������� ������������������  The����������� ������������������  Internets

Page 66: OpenGL ES on iOS

Thank����������� ������������������  you����������� ������������������  !

@neoroman