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

Cocoaheads Rennes #8: La 3D sur iOS

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Cocoaheads Rennes #8: La 3D sur iOS

La 3D sur iOS

Aymeric De Abreu

West Indie Collective

CocoaHeads Rennes #815 mars 2012

Page 2: Cocoaheads Rennes #8: La 3D sur iOS

Quels sont les outils ?

• OpenGL ES

• QuartzCore

Page 3: Cocoaheads Rennes #8: La 3D sur iOS

OpenGL ?

• Open Graphic Library

• API Graphique

• “Multi-plateformes”

• Bas niveau

Page 4: Cocoaheads Rennes #8: La 3D sur iOS

OpenGL ?

Page 5: Cocoaheads Rennes #8: La 3D sur iOS

Sur iOS ?

• OpenGL ES

• OpenGL for Embedded Systems

• Intégré dans Core Animation

Page 6: Cocoaheads Rennes #8: La 3D sur iOS

Sur iOS ?

Page 7: Cocoaheads Rennes #8: La 3D sur iOS

Utilisation ?

• Moteurs graphiques :

• UDK

• Unity

• Cocos2D/3D

• etc.

Page 8: Cocoaheads Rennes #8: La 3D sur iOS

Architecture sur iOS

Page 9: Cocoaheads Rennes #8: La 3D sur iOS

Implémentation

• Deux versions majeures :

• OpenGL ES 1.1

• OpenGL ES 2.0

• GLKit

Page 10: Cocoaheads Rennes #8: La 3D sur iOS

Les maths

• (quelques) Mots clés :

• Matrices

• Projection

• Repère

Page 11: Cocoaheads Rennes #8: La 3D sur iOS

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

Page 12: Cocoaheads Rennes #8: La 3D sur iOS

Projection

• Conversion 3D vers écran (2D)

• Plusieurs types de projections

• Exprimée par une matrice

Page 13: Cocoaheads Rennes #8: La 3D sur iOS

Repère

• Représentation de la 3D pour les maths

• Influence sur les transformations

Page 14: Cocoaheads Rennes #8: La 3D sur iOS

OpenGL ES 1.1

• Plus compréhensible

• Compatibilité étendue (depuis iOS 2.0 !)

• Moins de maths ;-)

Page 15: Cocoaheads Rennes #8: La 3D sur iOS

UIView + OpenGL ES

• Intégration à CoreAnimation

• Layer spécial : CAEAGLLayer

• Context : EAGLContext

Page 16: Cocoaheads Rennes #8: La 3D sur iOS

UIView + OpenGL ES

Page 17: Cocoaheads Rennes #8: La 3D sur iOS

Notions de base

• Les vertex

• Les couleurs

• Les transformations

Page 18: Cocoaheads Rennes #8: La 3D sur iOS

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

Page 19: Cocoaheads Rennes #8: La 3D sur iOS

Les vertex

Page 20: Cocoaheads Rennes #8: La 3D sur iOS

Les vertex

Page 21: Cocoaheads Rennes #8: La 3D sur iOS

Les couleurs

• Définition de la couleur de fond

• Une couleur pour chaque sommet

• Interpolation entre les sommets

Page 22: Cocoaheads Rennes #8: La 3D sur iOS

Les couleurs

• Définition de la couleur de fond

• Une couleur pour chaque sommet

• Interpolation entre les sommets

Page 23: Cocoaheads Rennes #8: La 3D sur iOS

Les textures

• Taille multiple de 2

• A partir de UIImage

• Coordonnées entre 0 et 1

Page 24: Cocoaheads Rennes #8: La 3D sur iOS

Les textures

• < iOS 5

• Chargement des texture “à la main”

• >= iOS 5

• Utilisation de GLKTextureLoader

Page 25: Cocoaheads Rennes #8: La 3D sur iOS

Les textures

• < iOS 5

• Chargement des texture “à la main”

• >= iOS 5

• Utilisation de GLKTextureLoader

Page 26: Cocoaheads Rennes #8: La 3D sur iOS

Les transformations

• Translation

• Rotation

• Mise à l’échelle

Page 27: Cocoaheads Rennes #8: La 3D sur iOS

La translation

glTranslatef(xt, yt, zt);

Page 28: Cocoaheads Rennes #8: La 3D sur iOS

La translation

glTranslatef(xt, yt, zt);

Page 29: Cocoaheads Rennes #8: La 3D sur iOS

La rotation

glRotatef(angle, xr, yr, zr);

Page 30: Cocoaheads Rennes #8: La 3D sur iOS

Mise à l’échelle

glScalef(xs, ys, zs);

Page 31: Cocoaheads Rennes #8: La 3D sur iOS

Transformations

• Attention à l’ordre des transformations

• Transformations sur le repère

Page 32: Cocoaheads Rennes #8: La 3D sur iOS

Transformations

• Attention à l’ordre des transformations

• Transformations sur le repère

Page 33: Cocoaheads Rennes #8: La 3D sur iOS

Animation simple

• Evolution des transformations dans le temps

Page 34: Cocoaheads Rennes #8: La 3D sur iOS

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

Page 35: Cocoaheads Rennes #8: La 3D sur iOS

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

Page 36: Cocoaheads Rennes #8: La 3D sur iOS

OpenGL ES 2.0

• Basé sur des shaders

• Meilleures performances

• Plus compliqué

Page 37: Cocoaheads Rennes #8: La 3D sur iOS

GLKit

• Wrapper OpenGL ES 2.0

• Basé sur des “effets”

• Simplification d’implémentation