CocoaHeads Rennes #8                           Aymeric De Abreu        15 mars 2012             La 3D sur iOSWest Indie Co...
Quels sont les outils ?• OpenGL ES• QuartzCore
OpenGL ?• Open Graphic Library• API Graphique• “Multi-plateformes”• Bas niveau
OpenGL ?
Sur iOS ?• OpenGL ES • OpenGL for Embedded Systems• Intégré dans Core Animation
Sur iOS ?
Utilisation ?• Moteurs graphiques : • UDK • Unity • Cocos2D/3D • etc.
Architecture sur iOS
Implémentation• Deux versions majeures : • OpenGL ES 1.1 • OpenGL ES 2.0• GLKit
Les maths• (quelques) Mots clés : • Matrices • Projection • Repère
Les matrices• Représentation dans l’espace• 4 dimensions pour la 3D (x, y, z, N)• 3 dimensions pour la 2D (x, y, N)• Utili...
Projection• Conversion 3D vers écran (2D)• Plusieurs types de projections• Exprimée par une matrice
Repère• Représentation de la 3D pour les maths• Influence sur les transformations
OpenGL ES 1.1• Plus compréhensible• Compatibilité étendue (depuis iOS 2.0 !)• Moins de maths ;-)
UIView + OpenGL ES• Intégration à CoreAnimation• Layer spécial : CAEAGLLayer• Context : EAGLContext
UIView + OpenGL ES
Notions de base• Les vertex• Les couleurs• Les transformations
Les vertex• Les sommets• Création d’une surface• Ordre spécifique (inverse des aiguilles  d’une montre)• Définitions d’un ta...
Les vertex
Les vertex
Les couleurs• Définition de la couleur  de fond• Une couleur pour  chaque sommet• Interpolation entre les  sommets
Les couleurs• Définition de la couleur  de fond• Une couleur pour  chaque sommet• Interpolation entre les  sommets
Les textures• Taille multiple de 2• A partir de UIImage• Coordonnées entre 0 et 1
Les textures• < iOS 5 • Chargement des texture “à la main”• >= iOS 5 • Utilisation de GLKTextureLoader
Les textures• < iOS 5 • Chargement des texture “à la main”• >= iOS 5 • Utilisation de GLKTextureLoader
Les transformations• Translation• Rotation• Mise à l’échelle
La translation glTranslatef(xt, yt, zt);
La translation glTranslatef(xt, yt, zt);
La rotationglRotatef(angle, xr, yr, zr);
Mise à l’échelle   glScalef(xs, ys, zs);
Transformations• Attention à l’ordre des transformations• Transformations sur le repère
Transformations• Attention à l’ordre des transformations• Transformations sur le repère
Animation simple• Evolution des transformations dans le  temps
Le tactile• Implémentation des méthodes classiques : - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (...
Le tactile• Implémentation des méthodes classiques : - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (...
OpenGL ES 2.0• Basé sur des shaders• Meilleures performances• Plus compliqué
GLKit• Wrapper OpenGL ES 2.0• Basé sur des “effets”• Simplification d’implémentation
CocoaHeads Rennes #8    julien@cocoaheads.fr       15 mars 2012        thomas.dupont@cocoaheads.fr               Questions...
Prochain SlideShare
Chargement dans…5
×

Cocoaheads Rennes #8: La 3D sur iOS

3 959 vues

Publié le

La création d'animations 3D est un sujet qui peut faire peur de prime abord: "c'est compliqué, c'est mathématique et c'est long". Quand on dit ça, c'est que l'on n'a pas les bonnes clefs, les bons outils... Aymeric De Abreu (ingénieur d'études et sur iOS depuis plus de 2 ans) nous fait une véritable présentation didactique de l'utilisation d'OpenGL ES sur iOS.

A grand renfort de démonstrations, il va de la construction de mesh à l'animation basique en passant par l'interaction avec le tactile; de l'animation simple au développement de jeux vidéo ...

Vidéo sur la session sur Vimeo: http://vimeo.com/38695721

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 959
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 975
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cocoaheads Rennes #8: La 3D sur iOS

  1. 1. CocoaHeads Rennes #8 Aymeric De Abreu 15 mars 2012 La 3D sur iOSWest Indie Collective
  2. 2. Quels sont les outils ?• OpenGL ES• QuartzCore
  3. 3. OpenGL ?• Open Graphic Library• API Graphique• “Multi-plateformes”• Bas niveau
  4. 4. OpenGL ?
  5. 5. Sur iOS ?• OpenGL ES • OpenGL for Embedded Systems• Intégré dans Core Animation
  6. 6. Sur iOS ?
  7. 7. Utilisation ?• Moteurs graphiques : • UDK • Unity • Cocos2D/3D • etc.
  8. 8. Architecture sur iOS
  9. 9. Implémentation• Deux versions majeures : • OpenGL ES 1.1 • OpenGL ES 2.0• GLKit
  10. 10. Les maths• (quelques) Mots clés : • Matrices • Projection • Repère
  11. 11. Les matrices• Représentation dans l’espace• 4 dimensions pour la 3D (x, y, z, N)• 3 dimensions pour la 2D (x, y, N)• Utilisées pour toutes les transformations
  12. 12. Projection• Conversion 3D vers écran (2D)• Plusieurs types de projections• Exprimée par une matrice
  13. 13. Repère• Représentation de la 3D pour les maths• Influence sur les transformations
  14. 14. OpenGL ES 1.1• Plus compréhensible• Compatibilité étendue (depuis iOS 2.0 !)• Moins de maths ;-)
  15. 15. UIView + OpenGL ES• Intégration à CoreAnimation• Layer spécial : CAEAGLLayer• Context : EAGLContext
  16. 16. UIView + OpenGL ES
  17. 17. Notions de base• Les vertex• Les couleurs• Les transformations
  18. 18. Les vertex• Les sommets• Création d’une surface• Ordre spécifique (inverse des aiguilles d’une montre)• Définitions d’un tableau de vertex• Choix de la surface à dessiner
  19. 19. Les vertex
  20. 20. Les vertex
  21. 21. Les couleurs• Définition de la couleur de fond• Une couleur pour chaque sommet• Interpolation entre les sommets
  22. 22. Les couleurs• Définition de la couleur de fond• Une couleur pour chaque sommet• Interpolation entre les sommets
  23. 23. Les textures• Taille multiple de 2• A partir de UIImage• Coordonnées entre 0 et 1
  24. 24. Les textures• < iOS 5 • Chargement des texture “à la main”• >= iOS 5 • Utilisation de GLKTextureLoader
  25. 25. Les textures• < iOS 5 • Chargement des texture “à la main”• >= iOS 5 • Utilisation de GLKTextureLoader
  26. 26. Les transformations• Translation• Rotation• Mise à l’échelle
  27. 27. La translation glTranslatef(xt, yt, zt);
  28. 28. La translation glTranslatef(xt, yt, zt);
  29. 29. La rotationglRotatef(angle, xr, yr, zr);
  30. 30. Mise à l’échelle glScalef(xs, ys, zs);
  31. 31. Transformations• Attention à l’ordre des transformations• Transformations sur le repère
  32. 32. Transformations• Attention à l’ordre des transformations• Transformations sur le repère
  33. 33. Animation simple• Evolution des transformations dans le temps
  34. 34. Le tactile• Implémentation des méthodes classiques : - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesCancel:(NSSet *)touches withEvent:(UIEvent *)event;• Influence sur les variables de transformation
  35. 35. Le tactile• Implémentation des méthodes classiques : - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesCancel:(NSSet *)touches withEvent:(UIEvent *)event;• Influence sur les variables de transformation
  36. 36. OpenGL ES 2.0• Basé sur des shaders• Meilleures performances• Plus compliqué
  37. 37. GLKit• Wrapper OpenGL ES 2.0• Basé sur des “effets”• Simplification d’implémentation
  38. 38. CocoaHeads Rennes #8 julien@cocoaheads.fr 15 mars 2012 thomas.dupont@cocoaheads.fr Questions ?aymericdeabreu@gmail.com

×