ParoChir Serious-Game: Making-Of

Written By :

Category :

Latest News, Software & 3D experiences

Posted On :

Share This :

Riche d’une expérience pédagogique de +10ans en enseignement de technologie liées aux jeux vidéos, l’équipe de ViZmerald était très attentive aux occasions lui permettant de concrétiser ce savoir-faire en un projet répondant à un besoin concret sur le marché. L’occasion s’est présentée de suite, depuis Janvier 2022 pour collaborer avec Mme Héla Jegham, professeur Agrégée en Parodontologie à la Faculté de Médecine Dentaire de Monastir et praticienne à l’Hôpital Militaire Principal d’Instruction de Tunis. Pr. Héla cherchait à concrétiser un serious-game portant sur la chirurgie parodontale. Un premier RDV à permis de découvrir sa vision pour le projet ou elle avait tracé le objectifs généraux et proposé une logique de gamification pour progresser dans le jeu. C’est à partir de ce moment que notre startup est entrée en action pour la concrétisation du projet.

Présentation sommaire du projet

Au bout de deux semaines, et en s’inspirant des applications dentaires similaires trouvées à vocation pédagogique sur les stores mobiles, nous avons pu proposer une application mobile permettant de lister les noms des différentes dents présentes dans la bouche d’un adulte. Cette proposition rapide a été le point de lancement permettant d’exposer notre savoir-faire à notre cliente et de lui rapprocher, visuellement, à quoi pourrait ressembler l’application cible. Le lien vers le ficher APK testable sur un smartphone Android est donné par ici. Une vidéo démontrant son usage a été aussi préparée pour faciliter l’utilisation.

L’application mobile offrait à la fois une traduction des contenus du PPT sous des interfaces interactives navigables via des boutons, mais surtout un modèle 3D qui acceptait l’interactivité de la souris via des clicks sur les différentes dents (moyennant des zones de collision 3D) pour afficher leurs noms relatifs dans une zone dédiée. L’interface permettait aussi de faire tourner le modèle et d’afficher un ensemble de menus de contrôle. C’est cette proposition qui a marqué le point de départ pour les nouvelles propositions d’amélioration souhaitées par notre cliente.

Ayant noté le besoin pour cibler une opération chirurgicale bien spécifique de la famille des parodontologies, la cliente a pu proposer en fin de Janvier une nouvelle présentation ciblant principalement les étapes nécessaires pour la première opération choisie: “Gingivectomie à Biseau Externe”.

Tout en parallèle, notre collègue académique, Mme Hédia Jagham (Maitre technologue à ISET Sousse et sœur de Mme Héla) a pu se joindre au projet afin d’en proposer une piste d’extension. Elle ciblait l’encadrement d’un PFE pour une application SaaS (Software as a Service) pour un binôme d’étudiants en master. L’objectif était de préparer le terrain pour une application web pouvant accueillir différentes expériences similaires et en gérer l’accès afin d’en créer un modèle à revenu. C’est à ce niveau qu’un groupe de travail et échange a été initié sous Discord afin faire le suivi quotidien. Tout en parallèle une solution de gestion de projets a été adoptée pour suivre la progression des tâches.

Répartition des taches Vitatools platform
Les échanges sous la plateforme Discord

En début du mois de Février , nous avons pu proposer une nouvelle version Web de l’application afin de permettre à notre cliente de tester l’application sans avoir à l’uploader sur son téléphone portable à chaque fois. Un nombre d’amélioration a concerné un raffinement manuel du modèle 3D, le rajout d’animation 3D d’ouverture de la bouche, l’amélioration des interfaces d’accueil, collecte de données utilisateur et d’interaction ainsi qu’un premier Quiz d’évaluation. Cette nouvelle modalité de test de l’application a pu ouvrir la porte vers des échanges plus constructifs depuis notre cliente afin de faire progresser l’application.

A ce niveau, une analyse des applications similaires nous permis de se décider à réaliser les contenus de l’expérience en 3D. C’est à ce niveau qu’un travail de création des modèle 3D a été lancé afin de produire les ressources (3D Assets) nécessaires à la simulation 3D sélectionnée. Le travail suivant ciblait la mise en interactivité de ces contenus:

  • 2x types d’outils de marquage molaire, 2x types de bistouris d’Orban, 5x types de Gracey, 3x types d’outils de décollage dentaire, la chaise 3D de la salle dentaire, l’arrière-plan de la scène
  • L’interface 2D de sélection entre les différents outils,
  • La fonction de sélection de l’outil et son déplacement à la souris,
  • L’interface d’application des inflammations selon le degré souhaité dans le tableau périochart,
  • le mouvement de la caméra adéquat avec la souris afin de naviguer dans la scène et sélectionner les outils,

Après rencontre présentielle, analyse et sélection d’un ensemble d’applications similaires présentes sur le marché (Dental assistant, dental BoneBox, et Surgery Simulator 2011), nous avons convenus à laisser la fonctionnalité de simulation du tableau Périochart pour une itération future, et de concentrer l’effort sur une situation clinique bien claire. Il était claire à ce niveau qu’une application telle que la notre répondait à un besoin fort chez les étudiants et praticiens dentistes. C’est ainsi qu’en début du mois de Mars 2022, une description détaillée de la situation clinique et une sélection des photos des outils à utiliser pour l’opération a été fournie.

Cette nouvelle itération engageait notamment la création d’une nouvelle suite de contenus 3D et 2D pour affiner l’expérience utilisateur (kirkland, Orban, sondes exploratrices, graduées, toutes les curettes, outils pour décoller la gencive, pansement, ciseaux, précelles, seringues, … ). Tous ces outils ont été modelés et animés sous Blender, puis programmés adéquatement sous le moteur de jeu Unity. Il faillait aussi produire les images (sprites transparents) permettant l’accès à des boutons pour chacun des outils. L’interface de sélection des outils a été aussi totalement refaite pour l’aligner avec l’expérience perçue chez d’autre solutions similaires 2D. Dans notre cas, la simulation 3D offre plus de richesse graphique et permet à l’apprenant de tester ses acquis sur des modèles quasi-réels.

Modélisation et animation 3D sous le logiciel Blender
Programmation des interactions sous le moteur de jeu Unity

Vers la fin du mois de mars, la modélisation de tous ce contenus, en plus de la mise en place de la chambre de la dentiste 3D a été intégrée avec la mise en scène suivant une logique cinématique montrant tout d’abord l’environnement, ensuite les acteurs et enfin les outils afin d’en choisir ceux adéquats dans l’ordre depuis le plateau bien positionné. Les transitions de la caméra 3D ont été programmées pour des transitions fluides entre les différentes scènes. En parallèle, conscients de l’importance de l’interaction sonore, des insertions de voix d’interaction et de musique ont été rajoutées aux animations 3D des personnages présents.

Il est important de noter à ce niveau que les taches de modélisation et de création des contenus se sont avérées aussi importantes que celles de la programmation de l’interactivité. Bien qu’une pression sur le temps et les cout ait été appliquée en utilisant des modèles 3D en accès libre. Pleins de taches de rectification, création d’ossatures (Rigging) et d’animations ont été requises. Nous donnons dans ce qui suit des exemples de ces opérations:

Animation collerette
Animation Patient
Animation Dentiste
Définition squelette Chaise dentaire
Animation précelle
Sculpture 3D Collerette

Différents autres challenges techniques ont été purement reliés à la phase de programmation. Une fois la bibliothèque des modèles 3D et des images 2D toutes prêtes, différents comportements ont été implémentés afin par exemple d’appliquer des scrollings réactifs et proportionnels à la résolution des Interfaces Utilisateur (UI), une amélioration des couleurs et qualité des boutons et menus, des fonctionnalités de click contrôlées dans l’espace 3D ainsi qu’une logique de progression des bonus et malus impactant le score. Les captures suivantes en donnent une progression faite jusqu’en début du mois d’avril:

Scénarisation caméra 3D
Programmation des passages entre outils
Test et validation du tracé 3D du sang
Test et validation de la fonction d’inscription
Test et validation de la fonction d’affichage des scores pour une session de jeu

Etant donné que l’application commençait à prendre forme, la cliente à commencé à nous présenter la deuxième opération cible vers la fin du mois d’avril. Une liste des corrections mineures a été dressée lors d’une nouvelle réunion dans le but de préparer une application qui pourra être testée par les étudiants afin de collecter leurs feedbacks et scores respectifs. En touchant la limite des 4 mois de développement dédié une version exécutable de l’application a été livrée à la cliente sur sa machine. Cette version permettait de répondre à l’ensemble du cahier des charges en partant depuis l’insertion du nom du joueur, la traversée de l’ensemble des quiz et de manipulations 3D, pour finir avec l’affichage du score ordonné dans l’historique. La vidéo ci-jointe résume le principe de fonctionnement de l’application obtenue.

A ce stade, en milieu du mois de mai2022, l’application a été livrée avec succès pour l’opération N°1. Nous avons réalisé alors la quantité consistante de travail nécessaire pour mettre en place une telle expérience interactive 3D. Le passage à l’opération N°2 n’était pas alors une priorité, mais plutôt la collecte des feedback depuis le maximum des utilisateurs. Après un temps de pause dans la période de Juin et Juillet, un nouveau besoin est apparu: Transformer l’application en une version client-serveur afin de pouvoir collecter le maximum d’entrées utilisateur à distance depuis internet.

Face à ce besoin, et étant donné que le groupe du binôme en master n’a pas pu continuer sur le projet pour des contraintes personnelles, un nouveau membre s’est associé au projet en début du mois d’aout 2022: M. Bilel METHNANI, ingénieur sénior en informatique. Son apport été très précieux afin de définir un back-end à base de technologie .Net hébergé sur un serveur cloud à base de AZURE. Collaborant étroitement avec le principal technico-artiste de l’application, M. Bassem SEDDIK, Une refonte du code source de l’application a été appliquée afin de rediriger les requêtes de lecture et d’affichage des résultats sur la nouvelle adresse web de la version WebGL de l’application: www.parochir.ml: La fonctionnalité très intéressante de cette nouvelle version concerne la possibilité de suivre les scores des candidats d’une façon étalée dans le temps, détaillée et fortement sécurisée grâce à la technologie .Net. La capture ci-après donne à la fois le front-end perçu par les multiples joueurs en-ligne et le backend-relatif obtenu. Cette dernière modification ayant consommé un mois additionnel.

Frontend et Backend de l’application ParoChir version 2022

Conclusions, leçons et perspectives:

Le déroulement de ce projet a été une source énorme d’apprentissage. Nous tenons surtout a exprimer notre gratitude pour notre guide experte et cliente: Pr. Héla Jegham pour le sens de collaboration et la patience montrés dans ce projet. Nous notons en somme que le premier livrable du projet a été en 4 mois répartis entre 2 mois de création de contenus 3D/2D et 2 autres pour la programmation des interfaces, environs. Un mois additionnel a été rajouté après pour implémenter la logique d’accès à de multiples joueurs distants. Nous concluons que ces délais pourrons de raccourcir notablement avec l’expertise obtenue, l’enrichissement de l’équipe et surtout par le fait qu’un bon nombre de Asset 3D est maintenant présent pour ce projet à forte capacité d’extension.

La collecte des feedback depuis l’ensemble des étudiants ayant participé à la simulation 3D proposée a été très positive. Tous les candidats ont exprimés leur intérêt pour la réalisation des autres suites d’opérations chirurgicales qui sont au nombre de 13 en total dans la famille des chirurgie parodontales. Dans la même logique, ce genre de simulations chirurgicale ouvre la porte à grand vers d’autres domaines de spécialisation médicale et d’autre collaboration avec toute équipe d’experts médicaux désireux de moderniser leurs procédures d’enseignement et d’évaluation, tant sur les plans théoriques que pratiques.

Cette application ParoChir est surtout une preuve du niveau d’expertise et des capacité de documentation disponibles dans la startup ViZmerald. Nous sommes dans cette logique ouverts à toutes les disciplines concernées par de telles expériences interactives. Alors, soyez “ViZionnaire”, et choisissez de travailler avec ViZmerald 😉 .