Didacticiel :
La réalité augmentée en bioinformatique

Capture d'écran représentant le résultat final sur iPad. L'image cible est ici présente sur un support cartoné pour mieux visualiser la 3D.

Maintenant que je suis redescendu de mon nuage, je vais pouvoir vous expliquer comment je m'y suis pris pour ajouter de la réalité augmentée (RA) sur mon poster et gagner le prix du meilleur poster lors de l'ECCB12 (European Conference in Computational Biology). Vous pensez peut-être que j'exagère un peu en disant "redescendre de mon nuage" mais j'ai vraiment eu des retours que je n'avais même pas imaginé. Pour moi, il s'agissait d'un simple "délire" de geek. Un « délire » qui a été annoncé, lors de la cérémonie du prix du meilleur poster, comme "Le poster du futur". L'idée m'est venue quelques mois auparavant. J'avais déjà entendu parler de la réalité augmentée mais je n'avais jamais essayé. Pour m'amuser et découvrir la réalité augmentée, j'ai testé un jeu basé sur cette technologie. Une fois le jeu testé, ce fût le déclic, et j'ai décidé que je mettrai de la réalité augmentée pour mon prochain poster.
Oui, mais pourquoi ?
Quels en sont les avantages et les inconvénients ?
Est-ce vraiment utile ?
Et j’imagine que vous vous posez encore plein d’autres questions. Je vais donc essayer d’y répondre dans cet article.

Réalitée Augmentée : explications

Il s’agit en fait d’une technologie qui vous permet de voir des choses supplémentaires en plus de ce que vous voyez vraiment à travers un écran de mobile. Personnellement, je vois ça comme notre troisième œil. L’objet supplémentaire modélisé se fond dans notre environnement réel. De très bons exemples sont les applications de navigation en réalité augmentée. La caméra de votre smartphone est en état de marche et le GPS vous montre exactement les endroits où il faut tourner à l’aide de flèches qui sont placées exactement là où il faut tourner.

Je me suis dit qu’il pourrait être amusant et très intéressant d’utiliser cette technologie pour la présentation de mon poster. La réalité augmentée accepte tout type de support tel que le papier, une image présente dans un écran et même un objet en 3D.
Les avantages de la réalité augmentée dans le cas d'un poster scientifique sont multiples, voici une liste non exhaustive:

  • représentation en 3D possible : vous pouvez par exemple dessiner votre protéine en 3D et la faire pivoter sur un axe;
  • ne plus être limité au format A0. Nous avons tous eu à faire à ce problème pour nos posters. Nous nous devons de choisir uniquement «quelques-un» de nos résultats les plus représentatifs et nous n’avons plus de place pour le reste;
  • possibilité d'interagir avec le poster. Le poster prend une nouvelle dimension. Il ne s’agit plus d’un « simple » papier plat;
  • et en plus, c’est trop cool;

Les inconvénients sont moindres:

  • cela demande du temps mais c’est un choix à faire si vous voulez attirer du monde vers votre poster ;) Dans mon cas j'ai dû travailler trois semaines pour finaliser mon projet;
  • le prix pour le logiciel Unity (voir plus bas) est assez exorbitant;

Ce qu'il nous faut

Alors, comment ajouter de la réalité augmentée sur un poster (ou tout autre support) ?

Je vais ici vous expliquer comment j'ai réalisé mon application en réalité augmentée sur mon iPad. Voici la liste des ingrédients :

  • le kit de développement (SDK) Vuforia de Qualcomm qui gère la RA;
  • un iDevice (tout appareil qui fonctionne sous iOS), mais le kit de développement de réalité augmentée est aussi compatible Android (je ne parlerai que d'iOS pour ce tutoriel mais c’est facilement applicable pour Android aussi);
  • xCode (IDE sous Mac);
  • Blender pour dessiner vos modèles en 3D;
  • Unity 3D qui joue le rôle d'intermédiaire entre Blender et xCode et permet de gérer toutes les actions pour la RA;

La tâche a été un peu plus complexe pour moi car, je n'avais encore pas de compte développeur iOS Apple, et n'avais pas l'intention d'en créer un sans même savoir si mon application allait fonctionner correctement. J'ai donc dû effectuer des recherches approfondies pour savoir comment je pourrais lancer mon application iOS sur mon iPad un peu "modifié" (qui as dit jailbreak ?) - pour cela DuckDuckGo est votre ami. Il vous faudra modifier quelques fichiers de xCode et jailbreaker votre iDevice pour pouvoir y lancer des applications non-signées (cependant faites attention, le jailbreak est désormais légal en France mais vous risquez de perdre la garantie de votre appareil).

La tâche est beaucoup plus simple sous Android car il est possible de lancer toute application au format .apk sans problèmes sur tout androphones, sans même passer par le Play Store. Une autre limitation est la licence de Unity3D, celle-ci coûte 1500$ dans sa version Pro avec le support iOS ou Android. En revanche le logiciel est gratuit pendant un mois, il vous faut donc être le plus productif possible et finir en moins d'un mois ;) A vos claviers…

Améliorer la réalité en y superposant une réalité virtuelle

C'est l’idée qui se cache derrière la RA. « Hmmm, pas très clair ton explication ! » me dites-vous. Pour vous éclairer je vais vous donner un exemple.

Le sujet de ma thèse porte sur l’épissage alternatif. Le processus d’épissage est nécessaire pour retirer les séquences introniques de l’ARN pré-messager et produire l’ARN messager qui contient uniquement les séquences codantes, c'est-à-dire exoniques. L’épissage des introns est effectué par une grosse entité moléculaire appelée le spliceosome. Le spliceosome se forme uniquement en présence de deux exons et d’un intron interne, pour retirer la séquence de l’intron et lier les deux exons ensemble. Je vous raconte tout ça pour vous dire que si vous voyez deux exons et un intron dans la rue, le spliceosome ne devrait pas être loin, mais vous ne le verrez certainement pas passer, car celui-ci est en dehors de sa cellule (vous voyez où je veux en venir ?). Dans notre situation avec l’aide de la RA nous allons voir le spliceosome apparaître à chaque fois que nous rencontrerons deux exons et un intron, si si même dans la rue. En bref, notre idée de base est de voir l'apparition du spliceosome…

Une fois que vous avez votre idée en tête, il faut choisir une image cible qui servira de support à nos objets virtuels. Vous comprendrez que, dans notre cas, l’image cible sera les deux exons et l’intron interne. Il est possible de prendre n'importe quelle image mais celle-ci doit avoir certaines qualités de contraste et de couleur. Pour savoir si votre image est de bonne ou mauvaise qualité, vous pouvez utiliser l'application en ligne du SDK qui vous permet de choisir la meilleure image cible pour votre projet de RA. Cet outil est très pratique : pour mon projet, par exemple, j'ai dû changer un peu l'image cible en ajoutant les bordures sur les trois cotés, même si au final je n'ai pas pu obtenir plus de 3 étoiles sur 5.

Outil en ligne représentant l'image cible avec la qualité de celle-ci

Ensuite, il faut savoir ce que vous voulez faire une fois que l'image cible est dans le viseur de votre caméra. Dans notre cas, il s’agit de faire apparaître le spliceosome en 3D juste au-dessus des exons et de l'intron qui composent mon image cible. Il est aussi possible de lancer une vidéo ou une animation plutôt que de représenter une image "statique". Pour des raisons de manque de temps, je me suis contenté d'une image statique, mais je n'ai pas l'intention d'en rester là…

Pour dessiner le spliceosome en 3D, j'ai utilisé Blender qui est un superbe logiciel open source pour dessiner en 2D ou en 3D. Je n'avais jamais fait de 3D avant et j'ai trouvé ça super intéressant. Je vous conseille donc de dessiner vous-même vos propres modèles 3D plutôt que d'utiliser des modèles existants. Cela prend un peu plus de temps mais c'est tellement instructif. Pour des modèles existants, vous pouvez en trouver des tonnes sur la toile, personnellement j'ai bien aimé celui-là.

Il faut enfin mettre tout ça ensemble et compiler l'application iOS. Ce qui est génial avec Unity3D, c'est qu'il possède un module iOS qui permet de compiler et de lancer l'application toute prête sur votre iDevice sans même avoir à tâter/taper du code.

La réalisation

Pour cette partie, il existe un très bon tutoriel sur le site du SDK de Vuforia, je vous invite à vous y rendre à l'adresse suivante et à lire la partie « Step2 : Compiling a Simple Project ». Pour les allergiques à la langue de Shakespeare, ne vous inquiétez pas, j’ai tout prévu. Voici les étapes à suivre pour la réalisation d’une application en RA.

Il faut, avant toute chose, créer un projet sous Unity3D et importer l'extension du SDK spécialement conçu pour Unity3D. Pour cela, faites un clic droit dans la partie «Projet » de l’interface Unity et Import Package -> Custom Package et importer l’extension du SDK qui se nomme « vuforia-imagetargets-ios-1-5-9.unitypackage » que vous avez préalablement téléchargé.

Ensuite tout se passe sur la scène. La scène représente exactement ce qu'il va se passer avec le viseur de votre iDevice. Il va falloir ajouter 3 éléments dans la scène. Pensez d’abord à supprimer la caméra déjà présente dans la partie Hierarchy. Ensuite ajouter les éléments suivants :

  • une ARCamera, il s'agit en fait de la caméra de votre iDevice.
    Qualcomm Augmented Reality -> Prefabs et déplacer-coller ARCamera
  • une TargetImage, l'image cible.
    Qualcomm Augmented Reality -> Prefabs et déplacer-coller ImageTarget
    Vous pouvez récupérer tout ce qui est nécessaire depuis l'interface web de création d'images cibles. Il suffit de télécharger l'image cible pour Unity3D. Vous devez exporter votre projet sous la forme d’un package Unity depuis l’interface de gestion de vos image cibles;
  • votre objet en 3D, que vous pourrez facilement importer depuis Blender (au format .blend).
    Import New Asset et choisissez votre object au format .blend;
  • un peu de lumière
    Game Object -> Create Other -> Directional Light
    pour ne pas rester dans l'obscurité ;) Les notions de lumière et de caméra sont très importantes en 3D mais je ne rentrerai pas dans les détails ici. Sachez seulement qu'il faudra bien diriger la lumière et la caméra vers notre objet en 3D;

Une fois la scène mise en place il faut définir les actions. Dans notre cas nous voulons l'apparition de notre objet 3D une fois que la caméra se dirige sur notre image cible. Pour cela, nous allons cliquer sur l'objet TargetImage et, dans la barre de droite, choisir dans la partie Image Target Behaviour : Data set and image Target selon l’image cible que vous avez préalablement télécharger. De même, il faut définir les fichiers à charger dans l'application comme par exemple l'image cible, pour cela il faut sélectionner l'objet ARCamera et dans la barre de droite choisir Data Set Load Behaviour, le nom correspondant aux fichiers de votre image cible.

Voici une image qui résume tout ce que vous venez de lire

Capture d'écran de l'interface d'Unity3D représentant tout les éléments du projet

La gloire

Une fois que tout cela est terminé arrive le temps de lancer notre application. Pour cela, rien de plus simple, il faut se rendre dans le menu Run Settings et cliquer sur "Compile and Run." Unity3D va se charger de créer un projet xCode et de le lancer automatiquement sur votre iDevice.

J’ai essayé de résumer le mieux possible les différentes étapes pour réaliser une application en réalité augmentée pour iOS. Il vous faudra un peu de temps au début pour prendre l’habitude mais une fois votre première application lancée, la suite arrive rapidement ;) Je vous souhaite bon courage dans la découverte de la réalité augmentée et surtout n'hésitez pas à poser vos questions, j'essayerai de vous aider au mieux :)

Pour plus d'informations, voici quelques liens intéressants:

Je tiens à remercier les relecteurs (Malicia, Aurélien C. et Guillaume Collet) pour leurs commentaires enrichissants et leurs corrections.

9 commentaires sur “La réalité augmentée en bioinformatique

  1. Encore merci pour cet article Adem !!
    Maintenant, il faut que je fasse un poster avec réalité augmentée sous android ;)

    • De rien Guillaume, avec plaisir, merci encore pour la relecture :)
      J'ai aussi prévu de tester sous Android, je pense m'y mettre bientôt, je te dirai si j'ai de quoi partager ;)

  2. Rahhhhh ça à l'air facile vu comment tu l'expliques. J'ai presque envie d'essayer. En combien de temps tu penses que cela peut se réaliser? Je veux dire, sachant que tu es le premier article sur la réalité augmenté que je rencontre, et que je veut ajouter cela à mon poster, combien de week end va t'il me falloir?

    • Bon courage Yo :)
      En fait moi j'ai réussi en trois semaines (soirs et week-ends). Si j'avais à le refaire, ça me prendrai quelques jours au plus, il faut s'habituer à Unity3D et après ça roule comme sur des roulettes ;)
      De toute façon tu as un mois pour tester Unity3D, mais c'est largement faisable.
      Je sens qu'il va y'avoir de la concurrence au SIB Days ;)
      Si tu as besoin d'aide n'hésite pas.

  3. [...] on bioinfo-fr.net Partager:TwitterFacebookWordPress:J’aimeSoyez le premier à aimer ceci. Par david_loiret [...]

  4. Salut Adem, si tu es dans le coin, je me lance ! Il serait bon de nos jours, de citer le projet iOSOpenDev, qui je pense pourrait aider les gens qui se lancent pour tester un peu, qu'en pense-tu ? XD

  5. Ah, et pourrais-tu mettre à jour (les admins ?) l'image nécessaire ici, pour qu'on puisse tester, stp ? Et aussi à savoir que ton appli est sur l'App Store !!!
    https://itunes.apple.com/us/app/spliceit/id591646922?mt=8

    • Il est actuellement en vacances très loin et coupé du monde.
      On lui en touche un mot à son retour ;)

  6. @Yoann: Je suis de retour (pour vous jouer un mauvais tour...) :p

    Hello Aurélien,
    Merci pour ton commentaire. Je ne connaissais pas iOSOpenDev, je vais voir ce que c'est un peu plus en détails, merci pour l'info ;)
    Merci aussi pour l'update sur l'article, je vais m'en charger avec les admins.
    J'espère que ça avance bien de ton côté.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

XSLT by CarLake