Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Premier pas dans la 3D avec BabylonJS

Par Komlan Nelson ALATE Publié le 12/07/2018 à 15:55:43 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Ces dernières années les applications 3D sont de plus en plus présentes sur le web surtout avec l’avènement de WEBGL. C’est une spécification d’interface de programmation pour les pages et applications HMTL5 qui permet de créeer et d'afficher de la 3D.

Pour un débutant, cette technologie peut s’avérer complexe. Mais il existe des librairies qui sont là pour nous simplifier la tâche. Nous parlerons dans cet article de l’une d’entre elles : Babylon JS.

Présentation

BabylonJS est une librairie Javascript qui joue un rôle de moteur permettant l’affichage d’objets 3D dans un navigateur web.

De manière globale, les programmes 3D sont très verbeux car ils interagissent directement avec le processeur graphique (GPU). BabylonJS aura pour rôle de nous dispenser de cette partie verbeuse grâce à ses classes et méthodes déjà toutes faites.

Il a été initialement développé par deux employés de Microsoft, David Catuhe et David Rousset sur leur temps libre et est disponible sous licence Apache 2.0.

Maintenant que nous avons fait connaissance avec BJS nous allons voir ce qu’il nous permet de faire en créant une petite application 3D.

Création d'une scène en 3D

Outils

Pour créer une application, tout ce dont vous avez besoin de manière basique c’est d’un navigateur et d’un éditeur de texte comme notePad. Mais pour faciliter les choses, un éditeur de code ou carrément un IDE serait encore meilleur. Pour ma part j'utilise Webstorm.

Structure de base d'une application en 3D

Une application 3D est composée de trois éléments fondamentaux :

  • Une caméra, qui offre un point de vue sur l’environnement.

  • Une lumière, permettant de définir l’éclairage et la gestion des couleurs de la scène.

  • Une scène, elle joue un rôle de conteneur global et va répertorier tous les objets 3D.

Création de la scène

Pour commencer nous allons créer un dossier avec à la racine notre page index.html, un premier sous-dossier appelé ‘JS’ contenant un fichier nommé ‘App.js’ et un autre sous-dossier nommé ‘css’ avec comme fichier ‘global.css’. Comme vous l’aurez compris il s’agit des trois fichiers composants de base d’une page web.

le fichier index contiendra les lignes suivantes et nous n'y toucherons plus.

C’est La balise <canvas> qui elle utilisé pour le rendu de la scène et nous lui avons attribué un identifiant.

  • Grâce au fichier css nous allons faire en sorte que le rendu occupe toute la place disponible dans le navigateur :

    Nous allons maintenant attaquer le fichier app.js qui constitue la partie centrale de l’application. La 1ère des choses sera de demander à la page d’attendre le chargement de tous les éléments.

    On récupère ensuite le canvas grâce à son ‘id’ et on crée une instance du moteur en passant le canvas en paramètre.Une fois fait nous passons à la construction de la scène qui sera implémentée dans une fonction dédiée :

    Nous allons maintenant créer la scène.

    Nous pouvons voir ici les avantages de l’utilisation de BJS. La création de la scène se fait par un simple appel au constructeur BABYLON.scene(). Grâce à la méthode Vector3 nous appliquons à la scène une gravité terrrestre en orientant l’axe Y de haut en bas ( -9.81). la dernière ligne permet d’activer le moteur de collision afin de donner aux objets une consistance physique.

    La scène est maintenant en place. Nous allons lui ajouter une caméra :

    Après initalisation de la caméra on active la sensibilité à la gravité et aux collisions. Ensuite on définit la vitesse de déplacement de la souris ainsi que la sensibilité de la souris. Et pour finir nous attachons les touches de commandes classiques de jeux vidéos d’un clavier Azerty ( Z pour le haut , D pour la droite, Q pour la gauche et S pour le bas ).

    Il ne nous manque plus qu'à mettre une lumière.

    Pour simuler la lumière du soleil on utilise la méthode « PointLight ».

    Les 3 éléments de base sont maintenant mis en place. Avant de lancer l’application nous allons ajouter quelques instructions à la suite de la méthode createScene.

    Nous avons une RenderLoop qui est chargée d’exécuter notre code le plus de fois par seconde, le mieux étant d’en afficher 16 par frame. Vous pouvez maintenant lancer l’application dans le navigateur en exécuter le fichier index.html. En l’état nous n’obtiendront qu’une scène vide car nous n'avons aucun objet sur la scène. Nous allons donc ajouter un sol qui servira de socle aux autres objets qui pourront être ajoutés après.

    On instancie un objet de type plan de manère à simuler un sol. Et nous le rendons sensible au collision. Au cas contraire, notre caméra passerait à travers.

    Voilà.Vous pouvez maintenant vous balader dans votre 1er monde en 3D avec BabylonJS.

Conclusion

Vous venez de faire votre premier pas avec BabylonJS. Comme on a pu le voir c’est un outil simple et complet pour faire de la 3D et ce nest là que le strict mimimum de ce qu’il est possible de faire avec . Si vous aimez la 3D et que cet article a piqué votre curiosité je vous conseille de faire un tour sur le site officiel http://www.babylonjs.com/ vous ne serez pas déçus.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels