Transcript
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