Cet article a été publié le 18 octobre 2022 sur le blog “Les dieux du code“. Je le partage maintenant sur mon blog personnel.
Petite explication
Ensemble nous allons dans cette série d’article voir et prendre en main le moteur 3D BabylonJS.
Ce moteur est une création, à la base de deux ingénieurs Microsoft David Catuhe et David Rousset,
C’est un moteur Open source, ce qui a bon nombre de personne de contribuer a son développement à travers le monde.
Entièrement crée en Javascript puis, plus tard, refondu en TypeScript ce moteur permet de créer et améliorer les expériences 3D
sur tous les navigateurs internet modernes.
Concept et Points forts du moteur
Sur cette découverte de Babylon nous pouvons déjà nous apercevoir d’une chose,
C’est que le langage de prédilection est le TypeScript, mais rien n’empêche l’utilisation de Javascript pour la création de ses propres scènes 3D.
En effet contrairement aux autres moteurs 3D « habituels », Babylon est un moteur tourné vers les expériences web, ce qui n’empêche pas, de pouvoir appliquer tous les design pattern lies à la conception de jeux vidéo ou d’expériences tournées autour de la réalité virtuelle
Basé sur la technologie WebGL1 et WebGL2, il permet le support de OpenGL parfait pour créer des scènes et animations en 3D.
Les dernières versions permettent d’exploiter Vulkan, Metal, DirectX12, ce qui permettra en autre, l’utilisation des Shaders performants dans nos différentes scènes 3D
L’un de ses points fort est qu’il est compatible avec tous les formats de ressources du marché actuelle en matière de conception d’expérience 3D
Les formats de fichiers 3D géré par blender sont directement exploitable dans Babylon et le standard actuel et recommande est le .Gltf. Ce format permet soit d’intégrer directement des ressources telles que des textures, tout en minimisant sa taille, ce qui rend le type de fichier facilement interopérable et téléchargeable.
Ce type de fichier est permet d’éviter de récupérer des fichiers lourds tout en garantissant un très bon niveau de qualité
Ce standard de fichier est maintenant adopté par les grands acteurs du milieu telles que Microsoft, SketchFab et même Unreal Engine.
La gestion de la Physique est n’est pas en reste, grâce a trois librairies OimoJs, Ammo.js, et Cannon.Js,
Une physique basique peut être appliqué sur toute notre scène et peut être paramétrable pour chacun de nos objets.
L’une des seules faiblesses de ces libraires est lie au l’aspect lourd des calculs lies a la tout ce qui touche a la physique, ce qui nous contraint a limiter les interactions entres les objets physiques de notre scène, mais nous y reviendrons prochainement dans un article
L’animation que ce soit procédurale ou non est pris en charge nativement par BabylonJS ainsi que la transformation des meshes ou scènes de façon dynamique.
Ainsi une partie des transformations et animations pourra être gérer facilement par le moteur avec de simple appels au moment opportun.
Comme cela , nous pourrons créer des poses ou des animations clé et gérer leurs transitions directement dans le moteur !
Bien d’autre aspects existent mais nous reviendrons plus tard au moment opportun mais retenez bien une chose, BabylonJS est bel et bien un moteur 3D évolutif, facile a prendre en main
et surtout mature par rapport a sa durée d’existence , nous somme loin des premiers débuts balbutiants de WebGL en 2011
Premiers Pas avec BabylonJS via son Playground
Pour une première prise en main nous pouvons accéder au playground de BabylonJS, nous pouvons tester toutes les fonctionnalités et pourvoir nous habituer à son utilisation directement en ligne ici
En accédant a cette page, un exemple fonctionnel est déjà disponible, il contient
– Un plan
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
qui nous servira de sol dans cette exemple
– Une sphère
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
pour afficher une sphère et son nombre de surface
– Une lumière basique
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
afin d’illuminer la scène et ses différents composants
– une camera libre
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
Cette camera permet de naviguer a l’intérieur de la scène et de déplacer librement la camera
tout cela avec la création d’un objet scène qui sera ainsi envoyé au moteur pour être affiche sur le navigateur
var scene = new BABYLON.Scene(engine);
Simple non ?
Il n’y a ni notion physique ni d’animation dans cette scène, pour des raisons de simplicité, mais rien qu’avec ce code nous pouvons voir comment initialiser une expérience virtuelle sur un navigateur internet.
Bien sur, ceci n’est qu’un exemple mais plus tard, nous allons voir comment configurer et utiliser BabylonJS sur notre poste et commencer a créer nos propres scènes !