Nous allons dans cette activité créer notre première scène.
Créez (en faisant un copier-coller du dossier "app_00") un nouveau dossier "app_01", ouvrez, à l'aide d'un éditeur de texte le fichier script.js et saisissez le code ci-dessous dans ce fichier.
script.js
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
engine.runRenderLoop(function () {
scene.render();
});
Tester "app_01" en double-cliquant sur le fichier "index.html". Il ne se passe rien, cela est normal, nous avons créé une scène, mais pour l'instant, elle est vide.
Décortiquons ce code ligne par ligne :
ligne 1
Nous commençons par créer un objet "canvas" (utilisation de la méthode getElementById et utilisation de l'id de la balise <canvas> définie dans le fichier HTML)
ligne 2
Cet objet canvas est utilisé afin de créer l'objet nommé "engine".
Arrêtons-nous quelques instants sur la structure de cette ligne 2 : le mot clé "new" permet de créer un nouvel objet (son utilisation n'est pas systématique, il existe d'autres façons pour créer un objet en JavaScript). "BABYLON.Engine" : "Engine" est une méthode de l'objet "BABYLON", la structure du type "BABYLON.xxxxxx" signifie que nous utilisons une méthode ou un attribut propre à la bibliothèque Babylon.js.
ligne 3
Nous créons ensuite l'objet "scene" qui accueillera les différents "acteurs" (caméra, lumière, objet) de notre scène 3D .
N.B. la structure sera toujours la même : création objet "canvas" -> création objet "engine" -> création objet "scene" -> utilisation de l'objet "scene"
lignes 4,5 et 6
Quand vous jouez à un jeu sur votre ordinateur (et que votre ordinateur manque de "puissance"), il arrive parfois que l'affichage saccade (on parle de "lag"), pourquoi ?
Il faut savoir que "l'ordinateur" doit, plusieurs dizaines de fois par seconde (le nombre d'images affichées par seconde est souvent désigné par l'acronyme FPS (Frames per second)), afficher une nouvelle image à l'écran.
Cela demande beaucoup de calculs (complexes) au microprocesseur central (CPU).
Petite parenthèse : c'est d'ailleurs pour cela qu'aujourd'hui cette tâche est très souvent laissée à un microprocesseur spécialisé dans ce genre de calcul : le GPU (Graphics Processing Unit, ce microprocesseur spécialisé se trouve sur la carte graphique de votre ordinateur). Quand ni le CPU, ni le GPU n'arrivent à afficher suffisamment d'images par seconde, votre jeu saccade.
En matière de programmation, il faut, une fois que la nouvelle image est prête à être à afficher (après par exemple avoir bougé de quelques pixels le personnage principal), envoyer l'ordre au CPU d'afficher cette nouvelle image (après avoir fait tous les calculs nécessaires).
Dans BabylonJS, cet "ordre" est envoyé grâce à la ligne
scene.render();
Mais, vu que cet appel doit être effectué plusieurs fois par seconde (à chaque rendu d'image), il doit donc se trouver dans une boucle. Cette boucle est souvent appelée "boucle de jeu".
La méthode "runRenderLoop" de l'objet "engine" va permettre d'exécuter plusieurs fois par seconde la fonction qui lui a été passée en paramètre (function () {scene.render();}). Comme vous pouvez le constater, cette fonction ne porte pas de nom, on parle de fonction anonyme. Les fonctions anonymes sont monnaie courante en JavaScript, elles sont très souvent utilisées comme paramètre d'autres fonctions (ou méthodes).
Que fait cette fonction anonyme ?
Pas grand-chose, elle appelle la méthode "render".
En résumé, la méthode "runRenderLoop" va permettre d'exécuter plusieurs fois par seconde la méthode "render" (et donc d'afficher une nouvelle image).
Nous ne rentrerons pas dans les détails du fonctionnement de la méthode "runRenderLoop", mais sachez que cette méthode est "intelligente" et qu'elle permet donc d'obtenir les meilleurs résultats possible au niveau du FPS.