Amusons nous avec Angular, BabylonJs et la réalité virtuelle (partie 2)
Dans la première partie de cet article, nous avons vu comment utiliser angular-cli pour créer un projet angular "classique" et intégrer babylonjs pour mettre de la 3D dans notre page web.
Le titre de cette série d'article est : ".... et la réalité virtuelle".
Vous allez me dire : pour l'instant, il y a autant de réalité virtuelle dans ton projet que de frites dans un axoa !!!
D D
(j'habite dans le pays basque et je cotoie des belges, d'ou la blague. Ok, je sors !!!)
Bref, voyons comment ajouter de la VR dans tout ca. Vous allez voir, c'est super compliqué.
VRExperience
Avec la nouvelle version de BabylonJs, on a une nouvelle méthode de notre scène qui nous permet de créer ce qu'ils appelent une expérience VR.
Ici j'ai 3 lignes de codes, mais derrière (under the hood comme ils disent là bas), il y a plein de truc qui sont fait.
Quand on appele la méthode createDefaultVRExperience, Babylonjs se charge de créer une nouvelle caméra (non active pour l'instant) et d'ajouter un nouveau bouton (personnalisable) en bas à droite de votre écran qui permet à l'utilisateur d'entrer dans le monde de la VR :
Les deux lignes suivantes informent le helper VR que l'on veut être interactif et que l'on aime les rayons lasers (enfin que l'on ai un rayon sortant de notre manette VR).
That's it ! C'est tout, c'est fini, ca roule, ca marche. Elle est pas cool la vie ?
Enfin presque.
Quand l'utilisateur clique sur ce fameux bouton, tout va bien, on entre alors dans l'univers VR : on est immergé dans notre image 360.
MAIS
Les manettes, sont pas terribles, et si vous regardez la console du navigateur, vous constaterez qu'il y a quelques petites erreurs.
Ces erreurs sont dû au problèmes de chargement des modèles 3D qui représentent les manettes.
Car ce qu'il y a de cool avec BabylonJs, c'est qu'il vous affiche ausi les manettes dans votre univers 3D.
Les manettes VR
Donc il faut s'assurer que ces modèles 3D soient bien chargées. Concrètement, elles sont sur le site de MS (https://controllers.babylonjs.com/microsoft/) au format glb. Il faut donc être sur de pouvoir lire le format glb. Pour cela, BabylonJs fournit différents "loaders" (Paint 3D, 3DS Max, etc.). Cool.
Mais il faut intégrer ces loaders dans notre projet. D'ou, dans notre package.json, l'ajout du package babylonjs-loaders :
La deuxième étape est de s'assurer que l'on ajoute cette référence dans notre projet. Donc dans notre app.module.ts :
Le plugin qui permet de charger des fichiers glb est donc référencé et chargé.
Moralité :
Quand l'utilisateur clique sur le bouton VR, si il a bien entendu un casque Windows Mixed Reality branché avec ses controlleurs, il les verra s'afficher à l'écran (ou plutôt dans son casque) :
L'étape suivante consistera à rajouter un menu intéractif (que l'on fera pparaitre grâce aux boutons de nos controlleurs).