BabylonJS

Auteur : FROMY ANTHONY

 

CB16 La mise en œuvre du moteur Babylon.js (présentation, installation, exemples de code)

 

Projet Personnel

BabylonJS

 

Introduction

Le WebGL :

On ne peut parler de babylonJS sans en premier lieu parler de WebGL. WebGL est une spécification d'interface de programmation de 3D dynamique pour les pages et applications HTML5 créée par le Khronos Group. Elle permet d'utiliser le standard OpenGL ES au sein d'une page web, d'un livre numérique au format ePUB2, d'un diaporama3 ou bien d'une application basée sur le standard HTML5, en s'aidant du langage JavaScript, des données au format JSON et de l'accélération matérielle pour les calculs et le rendu 3D à l'aide des pilotes OpenGL ES du ou des processeurs graphiques du terminal informatique (Ordinateur, smartphone, tablette numérique, etc.). OpenGL ES a été choisi pour son large support au sein des architectures embarquées et mobiles.

WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public.

Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le pilote OpenGL ES du système d'exploitation qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'accélération matérielle du ou des processeurs graphiques du terminal. (Source : Wikipédia)

Passons maintenant à un résumé rapide de babylonJS. BabylonJS est une bibliothèque JavaScript qui va nous permettre de développer en WebGL des scènes qui vont être créées dans une simple balise canvas. Créé par deux développeurs de Microsoft (David Catuhe et David Rousset), le projet a commencé en 2013 par une librairie relativement simple qui a pris du poids avec l'arrivée de nombreux adeptes. La facilité du langage, sa rapidité d’exécution et sa particularité à tourner sur tous les types d'appareils l'ont rendu particulièrement populaire depuis peu.

Il faut quand même parler de quelques définitions importantes quand on utilise un moteur graphique, le bagout graphique, nous avons donc :

La scène

La scène, comme quasiment tout ce dont nous allons parler dans ce chapitre, n'est pas un objet visible. C'est un objet qui va contenir tous les autres. Il est à la base de tout. Si on fait un parallèle avec le cinéma, la scène est l'endroit où les acteurs vont jouer leur rôle, où toute l'action va se dérouler. Elle s’arrête à ce que voit la caméra, mais la caméra peut aller là où elle le souhaite.

Le moteur graphique

Alors que la scène va regrouper les éléments, le moteur graphique va avoir comme travail de les rendre dans une image. Cela veut dire qu'il va transformer des flux de calculs mathématiques en une image visible par l’œil humain, pour vous permettre d'explorer le monde que vous avez créé.

Attention de ne pas le confondre avec le moteur physique, qui va calculer, lui, les trajectoires et la gravité. Le moteur graphique ne s'occupe que de ce qui est visible à l'écran.

La caméra

Maintenant qu'on a une scène et un moteur graphique pour calculer ce qu'il y a dedans, il va bien falloir lui dire quoi regarder. Comme au cinéma, de nouveau, il faut une caméra pour rendre une image à l'écran. Celle-ci aura les mêmes caractéristiques que les caméras traditionnelles et physiques.

Les lumières

La représentation des lumières dans le logiciel 3DS Max

Notre scène est créée, avec une caméra qui filme au bon endroit et un moteur graphique prêt à recevoir les premiers calculs à effectuer. Mais si nous ajoutions un objet maintenant, nous n'y verrions que du noir. Il faut de la lumière. Les lumières vont permettre d'éclairer les objets et de créer de l'ombre pour appuyer la présence des objets dans la scène.

 

Les meshes (ou objets)

Ce sont les premiers éléments visibles. Ils sont composés d'une multitude de points définissant un ensemble de polygones qui forment eux-mêmes des faces. Ensemble, ils composent un objet que nous appelons ici mesh. C'est ce que va voir l'utilisateur. Montagne, personnage, océan, espace infini… tout ce qui est un objet affiché à l'écran est un mesh.

 

 

Les shaders

Shader sur le Web - Montagne

Un shader est un élément associé à un mesh qui va dire au moteur graphique comment réagir selon de très nombreux paramètres (réfraction et réflexion de la lumière, couleur, matériaux…). Il va permettre de créer les ombres, les couleurs, la réaction des lumières sur les objets… Un mesh sans shader n'a aucune valeur dans notre scène.

 

La boucle de rendu

Maintenant que nous avons tout ce qu'il nous faut, il faut dire à la scène de rendre ce que nous avons créé et de l'afficher dans la fenêtre du navigateur. Sans cela, on aura beau avoir fait le travail préliminaire, les calculs ne vont pas s'activer tous seuls. Il va aussi falloir le faire plusieurs fois pour afficher plusieurs images par seconde. Habituellement, on dit d'un jeu qu'il tourne bien s’il peut produire 60 images par seconde ou "60 FPS".

(source : openclassroom)

 

Installation et mise en place de babylonJS

Pour l’installation il y a deux écoles : la première étant d'aller sur le site principal et d'aller dans la section du site pour télécharger la librairie pour ensuite la lier à votre projet.

 

La deuxième solution est celle que nous allons utiliser : il s’agit de récupérer la librairie hébergée sur leur site et de l'importer sans la stocker sur notre ordinateur.

Comme vous pouvez le voir ci-dessus on appelle la librairie grâce à :   

 

<script src="https://cdn.babylonjs.com/babylon.js"></script>

<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

Ce qui nous permet d’alléger un peu notre projet. Il n'y a pas de petites économies de place dans un projet graphique.

Ne vous occupez pas encore du canvas on y reviendra plus tard.

Nous allons ensuite créer un dossier CSS où nous stockeront tout le CSS de notre projet. Dans celui-ci il faut créer un fichier .css de votre choix. Je l'ai ici appelé par exemple monstyle.css. La prochaine étape est de lier ce fichier .css à notre index.html.

Pour ce faire il nous suffit d'utiliser la ligne de code suivante :

<link rel="stylesheet" type="text/css" href="css/monstyle.css" />

Ceci étant fait, il reste encore quelques étapes avant de rentrer dans le vif du sujet.

Nous allons maintenant créer un dossier nommé « JS » et dans lequel nous allons créer trois fichiers « JS » respectivement appelés « Arene.js », « Joueur.js », « Jeu.js ».

 

Nous allons donc ajouter ensuite les scripts après le body sur notre index.html :

<script src="js/Jeu.js"></script>

<script src="js/Joueur.js"></script>

<script src="js/Arene.js"></script>

 

Et pour finir cette installation, nous allons ajouter un dernier dossier dans lequel nous y mettrons tout ce dont nous avons besoin pour l’environnement graphique.

Créer un asset dans lequel nous créerons aussi deux autres dossiers « fonts » et « images ». Vous comprendrez plus tard à quoi ils servent.

 

Vous devriez avoir quelque chose qui ressemble à ceci :

A cette étape, vous avez fini l’installation de votre environnement de travail. Nous allons pouvoir commencer à entrer dans le vif du sujet.

 

Nous revenons donc sur les « canvas ». Le canvas va tout simplement nous permettre de créer notre 3D et afficher son contenu sur l'écran. Nous commençons alors par définir son CSS : ouvrez donc le fichier monstyle.css, nous allons faire en sorte que la fenêtre soit toujours adaptée à l'écran et aussi de rendre le scroll impossible sur les balise html et body. J’expliquerais plus tard la raison.

 

Occupons-nous des fichiers « js ». Nous allons créer tous les ponts entre l’arène et le joueur.

Copiez simplement le code que je vous donne dans Jeu.js pour commencer.

Ne vous inquiétez pas je vais vous expliquer ce que vous avez fait :

 

var canvas = document.getElementById(canvasId);

var engine = new BABYLON.Engine(canvas, true);

var _this = this;

 

Canvas récupère l'élément HTML du canvas, désigné par l'id défini dans index.html

Engine va créer un moteur graphique basé sur Babylon, auquel on va affecter notre canvas.

_this va vous être utile dans les boucles de notre classe.

Par la suite nous allons initialiser la scène où il faudra passer par la variable engine qu'on a défini plus haut.

this.scene = this._initScene(engine)

 

Enfin, nous allons pouvoir appeler la fonction plus bas.

 

_initScene : function(engine) {

var scene = new BABYLON.Scene(engine);

scene.clearColor=new BABYLON.Color3(0.9,0.9,0.9);

return scene;

}

 

Ajustez la vue 3D si la fenêtre est agrandie ou diminuée. C'est une fonction native qui va ajuster le rendu selon la taille de la fenêtre du navigateur.

 

 

window.addEventListener("resize", function () {

if (engine) {

engine.resize();

}

},false);

 

Enfin, la page est entièrement chargée et nous pouvons lancer le jeu.

 

document.addEventListener("DOMContentLoaded", function () {

new Game('renderCanvas');

}, false);

 

Cela peut paraître barbare, je me suis donc permis de commenter les lignes de code.

Il ne faut pas oublier d'appeler au tout début de notre fichier la fontion game auquel cas rien ne se lancera.

 

// Page entièrement chargé, on lance le jeu

document.addEventListener("DOMContentLoaded", function () {

new Game('renderCanvas');

}, false);

 

Nous avons créé le Jeu.js

 

Passons à Joueur.js. Comme pour Jeu.js je vous fournis un code qui est d'ailleurs accessible en démo sur la documentation.

Avec ce code nous mettons en place les jeux de lumière de notre scène ainsi que les mouvements et les différents axes que nous allons avoir. Le commentaire suffirait à expliquer brièvement les différentes fonctions que je vais quand même vous détailler.

Nous crééons la fonction Joueur et nous ajoutons la scène du jeu et nous initialisons la caméra.

 

Player = function(game, canvas) {

// La scène du jeu

this.scene = game.scene;

 

// Initialisation de la caméra

this._initCamera(this.scene, canvas);

};

 

Ensuite nous allons créer la caméra

Player.prototype = {

_initCamera : function(scene, canvas) {

// On crée la caméra

this.camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);

 

Le point de vision au démarrage de la page c’est-à-dire le point central sera le point 0.

 

this.camera.setTarget(BABYLON.Vector3.Zero());

 

Ensuite, nous affectons le mouvement de la caméra sur notre canvas

this.camera.attachControl(canvas, true);

}

};

Nous allons nous occuper maintenant de Arene.js. Encore une fois, je vous donne le code de base que vous pouvez retrouver sur tous les tutoriels.

 

Nous créons tout d’abord la fonction « arène » avec un appel de variables contenues dans jeu.js

Arena = function(game) {

// Appel des variables nécéssaires

this.game = game;

var scene = game.scene;

Ensuite, nous allons créer notre première lumière qui, comme son nom l'indique, nous permettra d'éclairer notre sphère.

// Création de notre lumière principale

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

Nous allons créer après ceci notre objet : la fameuse sphère

var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

Par la suite, il faut le placer sur l'axe y à la moitié de sa hauteur sinon nous risquons de faire en sorte que le sol et la sphère fusionnent et ce n'est pas le rendu que nous voulons obtenir.

sphere.position.y = 1;

Puis enfin nous ajoutons le sol sous ses pieds.

 

var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

 

 

Avec ce code-ci nous créons notre premier objet à afficher ainsi que notre lumière et notre sol où sera déposé notre sphère. Après cette manipulation vous n'avez plus qu'à enregistrer tout cela et d'ouvrir votre page web. Votre premier objet apparaît, grâce à la magie du code.

 

 

 

 

Voici les éléments de base fournis par babylonJS. A vous de vous amuser maintenant, vous avez tous les outils en main pour faire ce que vous voulez de babylonJS.

 

 

 

 

 

Vous pouvez trouver pleins d'exemples sur le site officiel https://www.babylonjs.com/

 

Il y a aussi un utilitaire en live si n'avez pas l’environnement adéquat sur votre machine babylonJS a pensé à tout il vous suffit d'aller dans la section TRY du site pour trouver cet environnement.

 

Remerciements :

Je tiens à remercier Victor Mallet pour son tutoriel dont je me suis largement inspiré pour vous permettre de connaître les bases de babylonJS. Je vous conseille si vous cherchez à approfondir vos connaissances sur le sujet à suivre sont tutoriel de 20 heures sur OpenClassroom.

Je tiens aussi à remercier Wikipédia qui m’a permis de vous définir précisément ce qu'est un WEBGL.

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *