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

1. CocoaHeads Rennes #8
Aymeric De Abreu
15 mars 2012
La 3D sur iOS
West Indie Collective

2. Quels sont les outils ?
• OpenGL ES
• QuartzCore

3. OpenGL ?
• Open Graphic Library
• API Graphique
• “Multi-plateformes”
• Bas niveau

4. OpenGL ?

5. Sur iOS ?
• OpenGL ES
• OpenGL for Embedded Systems
• Intégré dans Core Animation

6. Sur iOS ?

7. Utilisation ?
• Moteurs graphiques :
• UDK
• Unity
• Cocos2D/3D
• etc.

8. Architecture sur iOS

9. Implémentation
• Deux versions majeures :
• OpenGL ES 1.1
• OpenGL ES 2.0
• GLKit

10. Les maths
• (quelques) Mots clés :
• Matrices
• Projection
• Repère

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. Projection
• Conversion 3D vers écran (2D)
• Plusieurs types de projections
• Exprimée par une matrice

13. Repère
• Représentation de la 3D pour les maths
• Influence sur les transformations

14. OpenGL ES 1.1
• Plus compréhensible
• Compatibilité étendue (depuis iOS 2.0 !)
• Moins de maths ;-)

15. UIView + OpenGL ES
• Intégration à CoreAnimation
• Layer spécial : CAEAGLLayer
• Context : EAGLContext

16. UIView + OpenGL ES

17. Notions de base
• Les vertex
• Les couleurs
• Les transformations

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. Les vertex

20. Les vertex

21. Les couleurs
• Définition de la couleur
de fond
• Une couleur pour
chaque sommet
• Interpolation entre les
sommets

22. Les couleurs
• Définition de la couleur
de fond
• Une couleur pour
chaque sommet
• Interpolation entre les
sommets

23. Les textures
• Taille multiple de 2
• A partir de UIImage
• Coordonnées entre 0 et 1

24. Les textures
• < iOS 5
• Chargement des texture “à la main”
• >= iOS 5
• Utilisation de GLKTextureLoader

25. Les textures
• < iOS 5
• Chargement des texture “à la main”
• >= iOS 5
• Utilisation de GLKTextureLoader

26. Les transformations
• Translation
• Rotation
• Mise à l’échelle

27. La translation
glTranslatef(xt, yt, zt);

28. La translation
glTranslatef(xt, yt, zt);

29. La rotation
glRotatef(angle, xr, yr, zr);

30. Mise à l’échelle
glScalef(xs, ys, zs);

31. Transformations
• Attention à l’ordre des transformations
• Transformations sur le repère

32. Transformations
• Attention à l’ordre des transformations
• Transformations sur le repère

33. Animation simple
• Evolution des transformations dans le
temps

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. 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. OpenGL ES 2.0
• Basé sur des shaders
• Meilleures performances
• Plus compliqué

37. GLKit
• Wrapper OpenGL ES 2.0
• Basé sur des “effets”
• Simplification d’implémentation

38. CocoaHeads Rennes #8 julien@cocoaheads.fr
15 mars 2012 thomas.dupont@cocoaheads.fr
Questions ?
aymericdeabreu@gmail.com