Auteure : Marie Delavalette Ingénieure réalité virtuelle

Les 5 solutions  WebVR / 3D à connaître

Les qualités et les freins de la WebVR

Internet est à un canal de communication populaire, peu coûteux, et l’avantage d’un navigateur web est sa capacité à être multi support : ordinateur, smartphone, tablette… cela peu importe les performances du matériel dont on se sert.

Les ressources web sont bien plus simple à trouver que les développeurs spécialisés en réalité virtuelle. A priori tous les critères semblent être réunis pour que la VR ne passe que par les navigateurs web. Le seul frein de la WebVR semble la densité de modélisation 3D et les fonctionnalités des solutions déjà proposées.

Quels sont les 5 solutions du moment ?

1/ Babylon.js – Moteur 3D WebGL

Ce framework assez répandu et développé à l’origine par des membres de microsoft, à l’instar de Three.js son concurrent direct, est un moteur performant et stable.

Avantages

  • Documentation très complète
  • Forte communauté à l’appuis
  • Beaucoup d’exemple de projet
  • Permet la réalisation de framework
  • Application spécifique

Inconvénients

  • Prise en main complexe
  • Système de gestion de la physique peu fiable

Formats acceptés par Babylon.js :

Exemple de réalisation : Réalisations babylon.js

exemple-rendu-babylon.js

2/ Three.js – Framework WebGL

exemple-three.js
Ce framework très utilisé, est performant et stable. Cependant il faut être bon développeur afin de bénéficier de sa puissance, le garbage collector ne faisant pas tout le travail attendu.

Avantages

  • Documentation très complète
  • Forte communauté à l’appuis
  • Beaucoup d’exemple de projet
  • Permet la réalisation de framework
  • Application spécifique

Inconvénients

  • Consomme beaucoup de ressources
  • Création d’élément 3D rapidement fastidieux

Formats d’entrées acceptés :

Exemple de réalisations : Réalisation three.js

exemple-realisations-threee.js

3/ A-frame avec Three.js – Framework WebVR

hello-wbvr
Ce framework assez répandu et développé à l’origine par des membres de microsoft, à l’instar de Three.js son concurrent direct, est un moteur performant et stable.
Développée par mozilla, le premier géant du web à s’être lancés dans l’aventure, ce framework se veut simple d’utilisation et basé sur Three.js

Avantages

  • Documentation très complète
  • Forte communauté à l’appuis
  • Beaucoup d’exemple de projet
  • Librairie de composant
  • Possibilité de créer une scène à base de composant (balise HTML)
  • Relativement simple à utiliser

Inconvénients

  • Rendu visuel basic

Formats d’entrée acceptés :

Exemple de réalisations : Réalisation A-frame avec Three.js

aframework.io

4/ PlayCanvas – Moteur de jeu 3D WebGL

playcanva

Cette solution est la seule à être orientée « designer”, car elle dispose d’un interface utilisateur pour l’édition ! C’est donc un atout non négligeable pour une équipe composée du tryptique développeur / intégrateur / designer.

Cependant la solution gratuite est extrêment bridée et il faudra compter un budget de 15€ ou 50€/mois pour bénéficier de toutes les fonctionnalités.

Avantages

  • Testable en version gratuite
  • Realistic rendering
  • Import simple des fichiers : FBX/Collada/Obj
  • Editeur en ligne
  • Documentation complète
  • VR et AR
  • Librairie de contenu 3D

Inconvénients

  • Payant pour un usage professionnel

Formats d’entrée acceptés :

  • FBX => conversion en json
  • COLLADA
  • obj

A tester :  https://playcanv.as/p/sAsiDvtC/
Pour un premier projet :  https://developer.playcanvas.com/en/tutorials/webvr-hello-world/
Exemple de réalisation : https://playcanvas.com/explore/featured

 

5/ Blend4Web – Moteur de jeu 3D WebGL

blend4web

Cette solution permet un pipeline totalement opensource puisqu’elle offre un plugin pour la préparation de scène blender et prend en entrée un ficher .json exportable depuis blender.

Avantages

  • Adaptée à la création de configurateur type e-commerce
  • Création d’une page de visualisation 3D très rapide

Inconvénients

  • Temps de chargement parfois trop long
  • Uniquement depuis blender
  • Rendu basique

Formats d’entrée acceptés :

  • JSON, exportable depuis Blender

En conclusion

Votre choix se fera selon les contraintes de votre projet et de vos compétences. Chacunes des solutions présentées semblent avoir une qualité de rendu similaire. Une chose est sure, Mozilla ne tardera pas à sortir un navigateur prenant en charge les casques de VR nativement ce qui fera de A-frame « la » solution de développement WebVR par excellence !