Projet de recherche - Interfaces web 3D

J'ai une passion pour le monde du web et le développement front-end, et donc je ne peux pas m'empecher de penser aux possibilités et jusqu'où elles nous emmeneront. J'ai décidé donc de faire de la recherche à ce niveau, afin de voir quelles avenues semblaient prometteuse pour le futur du web. Il y a énormément de possibilités et d'utilisations diverses des technologies du web (par exemple, la NASA utilise Vue.js pour leurs interfaces dans certaines fusées) , mais j'ai décidé de me pencher sur le prochain niveau d'interactivité du web, et donc, l'utilisation des technologies 3D dans des environnements adaptatifs , et de réalité augmentée/virtuelle.

Les principales options

Dans le cadre de mes recherches, il y a principalement 3 technologies qui ont attiré mon attention; Three.js , React-Three-Fiber, et A-Frame. R3F et A-Frame sont aussi basés sur Three.js, mais leurs façons d'utilisation et d'intégration sont différentes.

Après plusieurs tests, j'ai pu déterminer que la meilleure technologie pour réaliser des interfaces "next-gen" est définitivement React-Three-Fiber. C'est la librairie la plus simple d'utilisation, mais aussi la plus puissante. Il y a une très forte communauté derrière , ce qui est un avantage en soi pour le développeur qui souhaite utiliser la technologie. Contrairement à Three.js régulier, qui utilise un style de programmation impératif, ligne par ligne, orienté objet, très "old school" , R3F s'inscrit dans le modèle et les conventions de React et du HTML , ce qui facilite grandement son usage.

React-Three-Fiber (R3F)

Pour réaliser des formes, il faut simplement décrire le résultat que l'on veut, dans une syntaxe familière au HTML, ce qui le rend très accessible à tout les développeurs et même aux designers.

Dans la galerie d'images, vous pourrez constater plusieurs exemples de cette programmation "déclarative" ainsi qu'un exemple comparatif avec Three.js régulier et a-frame, qui seront très évident 😉

Grâce à la communauté de R3F, il existe plusieurs autres librairies compatibles ainsi que plugins utilisables qui nous facilitent la vie. Par exemple, on peut retrouver des plugins pour intégrer sans problème du contenu HTML dans un contexte 3D, ce qui permet de garder un bon niveau d'accessibilité et d'usabilité. J'ai notament utilisé un plugin pour créer facilement une interface mobile de réalité augmentée, dans laquelle on peut visualiser une interface en 3D à travers la caméra d'un téléphone intelligent ! J'ai aussi utilisé une librairie d'animation basée sur la physique afin d'animer les composants 3D et les formes, ainsi qu'un plugin pour donner des propriétés physiques aux éléments eux-mêmes tel que la gravité et des collisions !

Problèmes rencontrés

Au cours de mon expérimentation, j'ai rencontré quelques problèmes qui m'ont ralenti, mais rien de majeur. Par exemple, il ne faut pas oublier que nous sommes quand même en train d'opérer dans un contexte web, et donc nous sommes parfois limités à cet égard; Lorsqu'il s'agit de mélanger des éléments HTML du DOM avec le canvas webgl en mode AR/VR, il est impossible présentement d'effectuer le rendu de ceux-ci. Par contre , cela fonctionne tout de même lors d'une utilisation normale sans AR/VR sur mobile, tablette ou bureau sans problème. Cela est du au fait qu'en mode VR ou AR, aucun DOM n'est rendu à l'utilisateur, seulement le canvas.

Il m'est arrivé aussi de me compliquer la vie pour rien plusieurs fois, alors que la solution est souvent beaucoup plus facile que l'on pense avec R3F. J'ai par exemple tenté d'animer des composants 3D à la main, de facon traditionnelle (ligne par ligne, impérativement) , et du à la complexité du code pour effectuer une simple animation , j'ai du passer quelques heures afin d'arriver à mon résultat voulu. J'ai revisité cet exemple un peu plus tard, et je me suis rendu compte que j'aurais pu simplement "décrire" l'animation de facon déclarative, et le reste se ferait automatiquement pour moi, alors c'est ce que j'ai fait. Je suis passé de 20 lignes de codes pour une simple animation, à 5 lignes de code super simples !

Enfin, j'ai aussi eu un seul problème de compatibilité de versions, du au grand nombre de plugins et librairies importées dans le cadre de mon expérimentation. Dans le contexte d'un site web ou d'une application réelle, je ne crois pas que personne se rende à utiliser autant de plugins que moi, donc ce n'est pas une grosse considération à prendre.

Mon plus grand défi restera le fait que travailler dans un environnement qui n'est plus simplement en 2D est un challenge en soi. Il faut prendre en considération un axe supplémentaire ainsi qu'un paradigme différent du CSS pour styler les composants.

Dernières réflexions

Je pense que l'avènement de ces nouvelles librairies, technologies, et communautées, sont vraiment un signe d'une poussée vers un renouvellement du web dans les prochaines années. Plus particulièrement, je crois que React-Three-Fiber s'est taillé une bonne place dans ce marché pour une multitude de raison (je n'en ai pas parlé, mais c'est possible de l'utiliser pour faire des applications mobiles natives aussi !). Tout comme jQuery avant, peut-être que R3F pourrait être la source d'inspirations de nouveaux API officiel JavaScript du browser et transcender son statut de librairie pour faire partie du HTML et du JavaScript natif.

Pour moi, les plus grands avantages de R3F, sont sa communauté et sa facilité d'utilisation. Il suffit d'avoir un peu de créativité , et tout est faisable !