www.alanlemoal.fr

Dernière mise à jour : 01/11/2010

Tutoriel FLARToolKit

Ce tutoriel a été créé pour fonctionner sous Debian Squeeze. L'idéal serait de le faire évoluer pour prendre en compte les OS Win et Mac. Il s'adresse à des développeurs désireux de créer une application flash intégrant de la réalité augmentée.

Mise en place de l'environnement

Tout au long de ce tutoriel [installation_dir] correspondra au répertoire d'installation dans lequel FLARToolKit va être installé. Pour ceux qui ne savent pas où, vous n'avez qu'à le mettre dans le home de votre user.

Avant de commencer à vous expliquer le fonctionnement interne de la bibliothèque de réalité augmentée FLARToolKit, je vais débuter par un petit tour d'horizon des outils nécessaires au développement.

• Subversion (système de gestion de versions) : utile pour récupérer les dernieres versions. Tutoriel
• Flex SDK (kit de développement logiciels) : va permettre de compiler le code ActionScript en un binaire. Tutoriel

Une fois les outils installés, créez un repertoire que vous allez nommer "FLARToolKit". Ce sera le répertoire de base qui nous servira pour héberger notre code.

Librairies

La première des librairies dont on va avoir besoin est NyARToolkitAS3. C'est la version d'ARToolKit portée sur AS3 dont FLARToolKit dépend.

Créez un sous-répertoire nommé "org" dans lequel nous allons mettre nos autres librairies.

On récupère trois autres librairies :

Le premier "checkout" va vous permettre de récupérer, dans votre répertoire "org", un repertoire nommé "libspark" qui contient donc la librairie FlarToolKit (pour faire simple, c'est la librairie qui va identifier vos marqueurs).

Les deux autres permettent de récupérer les répertoires "ascollada" et "papervision3d". En gros, ils contiennent le code qui va vous permettre d'afficher des choses à l'écran.

L'arborescence de votre répertoire "FLARToolKit" doit donc maintenant ressembler à :

FLARToolKit Starter Kit

Le FLARToolKit Starter Kit permet au débutants de commencer rapidement avec la réalité augmentée. Pour les pros, il n'est pas vraiment necessaire.

Et comme je suis un débutant je cours télécharger les sources zippées du starter kit de FLARToolKit.

Ensuite il faut l'extraire dans un répertoire temporaire (/tmp par exemple) et s'y rendre :

Ensuite il faut copier tous les répertoires qui s'y trouvent à l'exception du répertoire org (car on l'a déjà et sous SVN) dans notre répertoire "FLARToolKit".

L'arborescence doit maintenant être la suivante :

Compilation SimpleCube

Tous les outils sont en place, on va pouvoir commencer à travailler. Dans un premier temps, on va se focaliser sur l'exemple SimpleCube fourni. A chaque modification des sources, il va falloir le recompiler via la commande :

Si la compilation passe le fichier SimpleCube.swf a été mis à jour. Pour que notre application fonctionne, il faut au préalable lui donner accès aux fichiers en local. Pour ça il faut rajouter un fichier .cfg qui contient le chemin vers le .swf dans le repertoire ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust :

Fichier FLARToolKit.cfg

1. [installation_dir]/FLARToolKit

Pour lancer l'application, on peut soit utiliser Firefox soit utiliser le player livré avec Flex comme suit :

Si tout marche bien la player flash doit s'ouvrir et afficher un joli cube rose à la place de notre marqueur :

Ou encore mieux on peut utiliser le player flash Debug. Il permet de renseigner le fichier ~/.macromedia/Flash_Player/Logs/flashlog.txt avec les erreurs rencontrées lors de la lecture :

Là ça tombe bien, on a pas d'erreur... donc le résultat est le même. Mais pour la suite il va bien nous servir.

Explication SimpleCube

Un petit tour d'horizon du fichier SimpleCube.as s'impose (grossièrement inspiré du guide de Saqoosha).

24. init('Data/camera_para.dat', 'Data/flarlogo.pat');

Le premier paramètre est le chemin du fichier de correction des paramètres de la caméra, pas besoin d'y toucher.

Le deuxième argument est le fichier de définition du motif du marqueur. Il faut définir le motif qui sera associé au marqueur. Par exemple, flarlogo.pat correspond à flarlogo-marker.pdf.

27. private function _onInit(e:Event):void {

Une fois l'appel à init terminé, cette fonction est appelée. C'est ici que nous pourrons modifier nos objets 3D.

Si vous n'arrivez pas jusqu'à l'appel de cette fonction et qu'un message d'erreur intervient, il faut vérifier la disponibilité du fichier du patron ou les conditions de la webcam.

30. var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
31. _plane = new Plane(wmat, 80, 80);

Ces lignes de codes permettent de savoir si le marqueur fonctionne ou pas.

Ajoute une surface plane de la même taille que le marqueur (color Red, 2px line, 80mm)

32. _plane.rotationX = 180;

La rotation de 180° est due au fait que Papervision3D et FLARToolKit ont des systèmes de coordonnées opposés.

33. _markerNode.addChild(_plane);

Là où Papervision3D aurait normalement ajouté un enfant ("addChild") à une Scene3D, FLARToolKit lui a besoin d'ajouter un enfant ("addChild") à un noeud spécial pour permettre à un objet 3D de suivre le marqueur.

Le noeud spécial est le _markerNode. Une fois qu'on a ajouté l'objet au noeud _markerNode, il suit le marqueur automatiquement.

44. var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e);
45. _cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);

Maintenant jouons avec le cube rose sur le marqueur. Sa taille : 40mm*40mm*40mm. La moitiée de la taille du marqueur.

46. _cube.z = 20;

Le cube est basé par rapport à son centre. L'astuce est de le déplacer de 20 (la moitié de sa taille) sur l'axe Z pour qu'il se retrouve juste sur le dessus du marqueur.

Blender

Pour pouvoir créer des objets 3D, on peut utiliser Blender. Pour l'installer sous Debian :

Il existe des tutos sur internet pour pouvoir le prendre en main dont un très bon sur le site du zéro.

Une fois votre joli objet 3D réalisé, on peut l'exporter au format COLLADA via le menu File > Export > COLLADA 1.4(.dae) comme ci-dessous :

Modification SimpleCube

On intègre la librairie pour les objets DAE :

10. import org.papervision3d.objects.parsers.DAE;

On ajoute une variable qui contiendra notre objet 3D :

16. private var _table:DAE;

Et le code qui nous permet d'intégrer notre table à la place de notre marqueur :

26. _table = new DAE();
27. _table.load('model/table.dae');
28. _table.scale = 10;
29. _table.rotationX = 90;
30. _markerNode.addChild(_table);

Fichier SimpleCube.as modifié pour intégrer un objet 3D

Une fois les modifications apportées, on recompile notre fichier .as pour obtenir l'intégration de notre table dans le flux live :