Mis à jour le jeudi 31 août 2017
  • 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Prenez en main les lumières et les caméras !

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bien, maintenant que nous avons nos objets dans la scène et vu toutes les transformations basiques, nous allons pouvoir passer à la partie des lumières et des caméras ! 

 Que la lumière soit !

BabylonJS possède de très nombreux types de lumière. Pour les travailler, nous allons rester dans  Arena.js.

Une lumière possède toujours deux valeurs à définir,  diffuse et  specular mais définis par défaut.  diffuse permet de définir la couleur de la lumière et  specular l'intensité de sa brillance (plus la valeur est proche du blanc, plus l'objet est brillant ; plus elle est proche du noir, plus il est mat). Si ces valeurs ne sont pas indiquées, les deux seront définies à (1, 1, 1), ce qui correspond à blanc en Color3.

Vous pouvez aussi diminuer l'intensité des lumières avec  intensity.

Lumière hémisphérique

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

La lumière hémisphérique est la lumière que nous avons actuellement dans notre scène. Elle a la particularité d'avoir un éclairage très proche de celui que le ciel nous donne, avec des ombres douces. Représentée par un plan infini, cette lumière éclaire dans une seule direction.

Les paramètres sont :

  • le nom de la lumière ;

  • la position à partir de laquelle la lumière éclairera ;

  • la scène actuelle.

Lumière directionnelle

La lumière directionnelle est très proche de la lumière hémisphérique. Cependant, vous ne pouvez pas définir où se trouve la lumière directionnelle, seulement dans quel sens elle éclaire.

var light1 = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(0, -1, 0), scene);
light1.diffuse = new BABYLON.Color3(1, 1, 1);
light1.specular = new BABYLON.Color3(1, 1, 1);

Les paramètres sont :

  • le nom de la lumière ;

  • la direction de la lumière ;

  • la scène actuelle.

La lumière n'illumine que les plan des objets en face de celui ci
La lumière n'illumine que les parties des mesh en face d'elle

Lumière ponctuelle

La lumière ponctuelle a la particularité de diffuser de la lumière dans toutes les directions. Elle vous permettra de créer des lumières d'ambiance.

var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(1, 10, 1), scene);
light1.diffuse = new BABYLON.Color3(1, 1, 1);
light1.specular = new BABYLON.Color3(1, 1, 1);

Les paramètres sont :

  • le nom de la lumière ;

  • la position de la lumière ;

  • la scène actuelle.

La lumière se trouve au milieu du cylindre et illumine donc les faces internes des caisses
La lumière se trouve au milieu du cylindre et illumine donc les faces internes des caisses.

Spot

Le spot fonctionne comme un spot physique : c'est un cône de lumière. Il vous permettra de générer facilement des lumières qui bougent dans la scène.

var light1 = new BABYLON.SpotLight("Spot1", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
light1.diffuse = new BABYLON.Color3(1, 1, 1);
light1.specular = new BABYLON.Color3(1, 1, 1);

Les paramètres sont :

  • le nom de la lumière ;

  • la position de la lumière ;

  • la direction de la lumière ;

  • l'angle d'ouverture du cône de lumière ;

  • l'exposant de diminution de la lumière avec la distance (plus ce nombre est élevé, plus la lumière diminue vite avec la distance) ;

  • la scène actuelle.

On peut parfaitement voir ici le cone de la lumière
Ici, on distingue parfaitement le cône de la lumière.

Chaque lumière a ses qualités et défauts. À vous de choisir quelles seront les lumières que vous utiliserez, selon l'effet que vous voulez donner. Essayez différentes combinaisons pour voir leur impact, sans oublier que le maximum de lumières que vous pouvez utiliser est de 3 ! ;)

Moteur, ça tourne !

Il existe deux caméras basiques sur BabylonJS. Cependant, de très nombreuses caméras ont été créées pour des cas particuliers (caméra anaglyphe, Occulus, caméra qui suit une cible…). Si vous souhaitez vous renseigner sur toutes ces petites merveilles, n'hésitez pas à aller voir ce tutoriel officiel qui explique toutes les caméras.  :)

Direction le fichier  Player.js ! Là-bas, nous allons pouvoir jouer avec la caméra avec la fonction_initCamera.

Caméra libre

La caméra libre permet d'avoir de base des contrôles avec la souris et le clavier. Elle est proche des caméras que l'on peut trouver dans un FPS.

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);

 FreeCamera est définie par :

  • un id ;

  • une position de caméra ;

  • la scene dans laquelle elle est ajoutée.

Il y a aussi deux paramètres supplémentaires qu'il est important de définir. setTarget va définir où la caméra va regarder à la création de la scène, et  attachControl va permettre de rendre la camera active avec le clavier et la souris.

Caméra ArcRotate

Cette caméra a la particularité de tourner autour d'un point défini et toujours être centrée sur celui ci. Cette caméra est particulièrement pratique pour présenter des produits uniques.

var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

 ArcRotateCamera est définie par :

  • un id ;

  • une valeur alpha  .alpha ;

  • une valeur beta  .beta ;

  • un rayon  .radius ;

  • la position du pivot  target ;

  • la scène.

Alpha et beta sont deux valeurs, exprimées en radians, qui indiquent la rotation autour des points concernés. Le schéma ci-dessous vous montre à quoi correspondent ces valeurs :

.alpha, .beta et radius, indiqué sur un shema
.alpha, .beta et radius et target, indiqués sur un schéma

Avec ces deux caméras, de très nombreux cas d'utilisation sont possibles. Comme vous l'avez compris, nous allons utiliser une caméra libre pour notre FPS, car les possibilités qu'elle nous donne sont très intéressantes pour ce dont nous avons besoin.

  

Félicitations ! Vous avez passé la première partie du cours ! Maintenant que vous avez vu les possibilités de BabylonJS, vous allez pouvoir les appliquer concrètement dans la prochaine partie : vous allez commencer à travailler sur le FPS.

Mais avant cela, il est temps d'évaluer ce que vous avez appris tout au long de cette partie avec un quiz et un exercice à réaliser de votre côté. Je vous souhaite bonne chance ! :p‌‌

Exemple de certificat de réussite
Exemple de certificat de réussite